Partner/Logo Element

Overview

The Partner/Logo Element allows you to display a slider or a grid with images that can be linked to any URL. Options are:

  • 1-8 Columns
  • Slider or Grid Display
  • Border or without border
  • Display/Hide slideshow arrows
  • Linking to any URL, either in existing or new window
  • Display image caption on hover

See more examples of Partner/logo element

Code Snippet

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

[av_partner columns='3' heading='Partner Logo' size='no scaling' border='' type='slider' animation='slide' navigation='arrows' autoplay='false' interval='5' custom_class='' av_uid='av-3pyx9i']
[av_partner_logo id='230' hover='Image Caption sd' link='' linktitle='' link_target='' av_uid='av-d0b26']
[av_partner_logo id='87' hover='' link='' linktitle='' link_target='' av_uid='av-3ddowm']
[av_partner_logo id='85' hover='' link='' linktitle='' link_target='' av_uid='av-37q0ce']
[/av_partner]

Customization

Partner/Logo element heading

To add custom style to the partner/logo element heading please use the CSS below.

/*----------------------------------------
// CSS - Partner/Logo Element
//--------------------------------------*/

/* Heading */
#top .avia-smallarrow-slider-heading h3 {
	/* Your style here */
}

Logo Spacing

Add spacing between the partner logos.

/* Partner logo Spacing */
#top .avia-logo-element-container .slide-entry  {
    padding: 20px!important;
}

Add border to partner logos

To add custom style or border to the partner logos please use the CSS below.

/* Border */
#top .avia-logo-element-container .slide-entry img {
	border : 2px solid red;
}

Arrows on both the side

To move the partner/logo slider arrows to the side please use the CSS below.

/* Arrow position */
#top .avia-smallarrow-slider .avia-slideshow-arrows {
    width: calc(100% + 60px);
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    z-index: 999;
    left: -30px;
}

Resource