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
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: