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?

Add the CSS Snippets to Enfold child theme styles.
Add the JS and PHP scripts to your child theme functions.php file.
Shortcodes can be used in a text area in pages, posts, sliders and widget areas. Enable debug mode to view the page shortcode.
Enable custom CSS class name support to add your class names to the theme elements.
Disable script merging and clear the cache to view the changes on the frontend.

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

Contributed video:

Partner Logo Element Tutorial