Required Setup<\/h2>\n\n\n\n\n- Elementor FREE Plugin<\/a> installed & activated.<\/li>\n\n\n\n
- You need to have The Plus Addons for Elementor<\/a> plugin installed and activated.<\/li>\n\n\n\n
- Make sure the Clients Listing widget is activated, to verify this visit Plus Settings \u2192 and Search for Clients Listing and activate.<\/li>\n\n\n\n
- This is a Freemium widget, to unlock the extra features, you need the PRO version of The Plus Addons for Elementor<\/a>.<\/li>\n<\/ul>\n\n\n\n
How to activate the Client’s Listing Widget?<\/h2>\n\n\n\n
Go to <\/p>\n\n\n\n
\n- The Plus Settings <\/strong>\u2192 Plus widgets <\/strong><\/li>\n\n\n\n
- Search <\/strong>the widget name <\/strong>and turn on the toggle <\/strong>then <\/strong>click Save.<\/strong><\/li>\n<\/ul>\n\n\n\n
![\"clients](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/07\/clients-listing-activate.png\")
<\/figure>\n\n\n\nKey Features<\/h2>\n\n\n\n\n- Two Source Types <\/strong>– You can use a custom post type or inbuilt repeater as the source.<\/li>\n\n\n\n
- 3 Layouts <\/strong>– You can choose from three layout types Grid, Masonry, and Carousel (Pro).<\/li>\n\n\n\n
- Order Posts by Different Parameters<\/strong> – You can order posts by different parameters like id, date, author, title and more.<\/li>\n\n\n\n
- Category Filter <\/strong>(Pro) – You can easily add category filters to your logo showcase<\/a> (except for the carousel layout).<\/li>\n\n\n\n
- More Post Loading Options <\/strong>(Pro) – You can choose from different types of more post loading options such as Pagination, Load more and Lazy Load.<\/li>\n\n\n\n
- Unique Carousel ID <\/strong>(Pro) – With the Unique Carousel ID, you can easily connect and control the logo carousel with the Carousel Remote widget<\/a>.<\/li>\n<\/ul>\n\n\n\n
How to Add Logo Showcase in Elementor with Repeater Mode [Recommended]?<\/h2>\n\n\n\n
To add a logo showcase, add the Clients Listing widget on the page<\/p>\n\n\n\n
Content Layout<\/h3>\n\n\n\n
From the Layout<\/strong> dropdown, you can select different layout types for your logos. Here you\u2019ll find three options – <\/p>\n\n\n\nGrid<\/strong> – For creating a grid layout<\/a>.<\/p>\n\n\n\nMasonry<\/strong> – For creating a masonry grid layout<\/a>.<\/p>\n\n\n\nCarousel<\/strong> – For creating a logo carousel slider<\/a>.<\/p>\n\n\n\nSelect the appropriate layout option which fits your need.<\/p>\n\n\n\n
From the Select Source<\/strong> dropdown, you have to select the source of your logo showcase. Here you\u2019ll find two options – <\/p>\n\n\n\nPost Type<\/strong> – With this option, you can use the default clients custom post type of The Plus Addons for Elementor, or you can use your own custom post type as the source of the listing. Learn more<\/a>.<\/p>\n\n\n\nRepeater<\/strong> – With this option, you can directly add content to the widget. <\/p>\n\n\n\nHere we\u2019ll select the Repeater<\/strong> option.<\/p>\n\n\n\n![\"clients](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/07\/clients-listing-content.gif\")
<\/figure>\n\n\n\nWith the Repeater option selected, you\u2019ll find a Manage Clients <\/strong>section. From here, you can directly add the content, open the first item.<\/p>\n\n\n\nClient Name<\/strong> – Here, you can add the client name.<\/p>\n\n\n\nClient URL<\/strong> – Here, you can add the client website URL.<\/p>\n\n\n\nClient Logo<\/strong> – Here, you have to add the client\u2019s logo.<\/p>\n\n\n\nCategory (For Filter)<\/strong> – Here, you can manually create categories for the logo. This can be used to filter client logos by categories. Learn the process.<\/p>\n\n\n\n\nNote: You can add multiple categories separated by a comma (,).<\/em><\/p>\n<\/blockquote>\n\n\n\n<\/p>\n\n\n\n
You can repeat the process on the other items.<\/p>\n\n\n\n
Click on the +ADD ITEM<\/strong> button to add more client logos.<\/p>\n\n\n\nColumns Manage<\/h3>\n\n\n\n
From the Columns Manage<\/strong> tab, you can manage the number of columns of your logo showcase on desktop, tablet and mobile separately.<\/p>\n\n\n\nYou can also manage the column gap from here.<\/p>\n\n\n\n
Extra Options<\/h3>\n\n\n\n
Then, in the Extra Options<\/strong> tab, you\u2019ll find some additional options.<\/p>\n\n\n\nTitle Tag<\/strong> – From here, you can set different HTML tags for your client\u2019s name.<\/p>\n\n\n\nDisplay Client Title<\/strong> – From here, show or hide the client\u2019s name from the logo showcase.<\/p>\n\n\n\nDisable Link<\/strong> – From here, you can disable the client logo URL.<\/p>\n\n\n\nDisplay Image Size<\/strong> – From here, you can select different image sizes of the client\u2019s logo<\/p>\n\n\n\nCategory Wise Filter<\/strong> – With this option, you can add a beautiful category filter in logo showcase<\/a>. <\/p>\n\n\n\nMore Post Loading Options<\/strong> – This option is available for Post Type source. From here, you can add different types of options to load more client logos (except in Carousel<\/strong> layout). Here you\u2019ll find three options – <\/p>\n\n\n\n\n- Pagination<\/strong> – With this, you can add pagination in Elementor logo showcase<\/a>. <\/li>\n\n\n\n
- Load more<\/strong> – With this, you can add a load more button in Elementor logo showcase<\/a>.<\/li>\n\n\n\n
- Lazy Load<\/strong> – With this option, you can add an infinite loading option in Elementor logo showcase<\/a>.<\/li>\n<\/ul>\n\n\n\n
How to Style Elementor Client Logos?<\/h2>\n\n\n\n
To style the Clients Listing widget, you\u2019ll find all the styling options under the Style tab.<\/p>\n\n\n\n
Title<\/strong> – From here, you can manage the client\u2019s name typography and colour.<\/p>\n\n\n\n![\"clients](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/07\/clients-listing-style.png\")
<\/figure>\n\n\n\nClient Logo Style<\/strong> – From here, you can add border and apply different CSS filters on the client logos for normal and hover states.<\/p>\n\n\n\nIndividual Client Background<\/strong> – From here, you can manage padding, margin, border, background etc. for each client logo item. <\/p>\n\n\n\nCarousel Options<\/strong> – This option will be visible when you use the Carousel<\/strong> layout. Here you\u2019ll find many options to control the carousel.<\/p>\n\n\n\n\n- Unique Carousel ID<\/strong> – With the Unique Carousel ID, you can easily connect and control the logo carousel with the Carousel Remote widget<\/a>.<\/li>\n\n\n\n
- Slider Mode<\/strong> – From here, you can choose your slider orientation, horizontal or vertical.<\/li>\n\n\n\n
- Slide Speed<\/strong> – Control your slide transition speed from here.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Now you\u2019ll find various device-dependent options.<\/em><\/p>\n\n\n\n\n- Columns <\/strong>– You can set the number of columns for the slide for desktop, tablet and mobile separately. <\/li>\n\n\n\n
- Next Previous<\/strong> – You can set the behaviour of your next\/previous slide movement from here. You can move one column at a time or all visible columns (depending on the number of columns set in the Columns<\/strong> dropdown).<\/li>\n\n\n\n
- Slide Padding<\/strong> – From here, you can adjust the padding of your slider.<\/li>\n\n\n\n
- Draggable<\/strong> – Make your carousel draggable or non-draggable from here.<\/li>\n\n\n\n
- Multi Drag<\/strong> – With this option, you can allow users to drag multiple slides at once.<\/li>\n\n\n\n
- Infinite Mode<\/strong> – From here, you can turn your carousel into an infinite loop slider.<\/li>\n\n\n\n
- Pause On Hover<\/strong> – Allow the users to pause the slider on mouse hover.<\/li>\n\n\n\n
- Adaptive Height<\/strong> – If you have slides with uneven height with this option, the carousel navigation will adjust its position automatically according to the height of the slide.<\/li>\n\n\n\n
- Animation Type<\/strong> – From here, you can choose the animation type for your slider.<\/li>\n\n\n\n
- Autoplay<\/strong> – Make your carousel slider autoplay from here and adjust its speed as well.<\/li>\n\n\n\n
- Show Dots<\/strong> – From here, you can add dots slider navigation and you can style them as well.<\/li>\n\n\n\n
- Show Arrow<\/strong> – You can also add arrows navigation for your carousel slider and style them from here.<\/li>\n\n\n\n
- Center Mode<\/strong> – From here, you can highlight the center slide by adding padding, scale effect or opacity.<\/li>\n\n\n\n
- Number Of Rows<\/strong> – From here, you can set the number of rows for your slider. <\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Post Not Found Options<\/strong> – This option is only available when Post Type is selected as the source type. From here, you can style the post not found message. You can manage the message typography, colour, background, border etc.<\/p>\n\n\n\nExtra Options<\/strong> – From here, you can make a unique column alignment. Turn on the Messy Columns<\/strong> toggle you\u2019ll get options to move columns up and down up to 6 columns individually for different devices.<\/p>\n\n\n\nOn Scroll View Animation<\/strong> – This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.<\/p>\n\n\n\n
How to activate the Client’s Listing Widget?<\/h2>\n\n\n\n
Go to <\/p>\n\n\n\n
- \n
- The Plus Settings <\/strong>\u2192 Plus widgets <\/strong><\/li>\n\n\n\n
- Search <\/strong>the widget name <\/strong>and turn on the toggle <\/strong>then <\/strong>click Save.<\/strong><\/li>\n<\/ul>\n\n\n\n
<\/figure>\n\n\n\nKey Features<\/h2>\n\n\n\n
- \n
- Two Source Types <\/strong>– You can use a custom post type or inbuilt repeater as the source.<\/li>\n\n\n\n
- 3 Layouts <\/strong>– You can choose from three layout types Grid, Masonry, and Carousel (Pro).<\/li>\n\n\n\n
- Order Posts by Different Parameters<\/strong> – You can order posts by different parameters like id, date, author, title and more.<\/li>\n\n\n\n
- Category Filter <\/strong>(Pro) – You can easily add category filters to your logo showcase<\/a> (except for the carousel layout).<\/li>\n\n\n\n
- More Post Loading Options <\/strong>(Pro) – You can choose from different types of more post loading options such as Pagination, Load more and Lazy Load.<\/li>\n\n\n\n
- Unique Carousel ID <\/strong>(Pro) – With the Unique Carousel ID, you can easily connect and control the logo carousel with the Carousel Remote widget<\/a>.<\/li>\n<\/ul>\n\n\n\n
How to Add Logo Showcase in Elementor with Repeater Mode [Recommended]?<\/h2>\n\n\n\n
To add a logo showcase, add the Clients Listing widget on the page<\/p>\n\n\n\n
Content Layout<\/h3>\n\n\n\n
From the Layout<\/strong> dropdown, you can select different layout types for your logos. Here you\u2019ll find three options – <\/p>\n\n\n\n
Grid<\/strong> – For creating a grid layout<\/a>.<\/p>\n\n\n\n
Masonry<\/strong> – For creating a masonry grid layout<\/a>.<\/p>\n\n\n\n
Carousel<\/strong> – For creating a logo carousel slider<\/a>.<\/p>\n\n\n\n
Select the appropriate layout option which fits your need.<\/p>\n\n\n\n
From the Select Source<\/strong> dropdown, you have to select the source of your logo showcase. Here you\u2019ll find two options – <\/p>\n\n\n\n
Post Type<\/strong> – With this option, you can use the default clients custom post type of The Plus Addons for Elementor, or you can use your own custom post type as the source of the listing. Learn more<\/a>.<\/p>\n\n\n\n
Repeater<\/strong> – With this option, you can directly add content to the widget. <\/p>\n\n\n\n
Here we\u2019ll select the Repeater<\/strong> option.<\/p>\n\n\n\n
<\/figure>\n\n\n\nWith the Repeater option selected, you\u2019ll find a Manage Clients <\/strong>section. From here, you can directly add the content, open the first item.<\/p>\n\n\n\n
Client Name<\/strong> – Here, you can add the client name.<\/p>\n\n\n\n
Client URL<\/strong> – Here, you can add the client website URL.<\/p>\n\n\n\n
Client Logo<\/strong> – Here, you have to add the client\u2019s logo.<\/p>\n\n\n\n
Category (For Filter)<\/strong> – Here, you can manually create categories for the logo. This can be used to filter client logos by categories. Learn the process.<\/p>\n\n\n\n
\n
Note: You can add multiple categories separated by a comma (,).<\/em><\/p>\n<\/blockquote>\n\n\n\n
<\/p>\n\n\n\n
You can repeat the process on the other items.<\/p>\n\n\n\n
Click on the +ADD ITEM<\/strong> button to add more client logos.<\/p>\n\n\n\n
Columns Manage<\/h3>\n\n\n\n
From the Columns Manage<\/strong> tab, you can manage the number of columns of your logo showcase on desktop, tablet and mobile separately.<\/p>\n\n\n\n
You can also manage the column gap from here.<\/p>\n\n\n\n
Extra Options<\/h3>\n\n\n\n
Then, in the Extra Options<\/strong> tab, you\u2019ll find some additional options.<\/p>\n\n\n\n
Title Tag<\/strong> – From here, you can set different HTML tags for your client\u2019s name.<\/p>\n\n\n\n
Display Client Title<\/strong> – From here, show or hide the client\u2019s name from the logo showcase.<\/p>\n\n\n\n
Disable Link<\/strong> – From here, you can disable the client logo URL.<\/p>\n\n\n\n
Display Image Size<\/strong> – From here, you can select different image sizes of the client\u2019s logo<\/p>\n\n\n\n
Category Wise Filter<\/strong> – With this option, you can add a beautiful category filter in logo showcase<\/a>. <\/p>\n\n\n\n
More Post Loading Options<\/strong> – This option is available for Post Type source. From here, you can add different types of options to load more client logos (except in Carousel<\/strong> layout). Here you\u2019ll find three options – <\/p>\n\n\n\n
- \n
- Pagination<\/strong> – With this, you can add pagination in Elementor logo showcase<\/a>. <\/li>\n\n\n\n
- Load more<\/strong> – With this, you can add a load more button in Elementor logo showcase<\/a>.<\/li>\n\n\n\n
- Lazy Load<\/strong> – With this option, you can add an infinite loading option in Elementor logo showcase<\/a>.<\/li>\n<\/ul>\n\n\n\n
How to Style Elementor Client Logos?<\/h2>\n\n\n\n
To style the Clients Listing widget, you\u2019ll find all the styling options under the Style tab.<\/p>\n\n\n\n
Title<\/strong> – From here, you can manage the client\u2019s name typography and colour.<\/p>\n\n\n\n
<\/figure>\n\n\n\nClient Logo Style<\/strong> – From here, you can add border and apply different CSS filters on the client logos for normal and hover states.<\/p>\n\n\n\n
Individual Client Background<\/strong> – From here, you can manage padding, margin, border, background etc. for each client logo item. <\/p>\n\n\n\n
Carousel Options<\/strong> – This option will be visible when you use the Carousel<\/strong> layout. Here you\u2019ll find many options to control the carousel.<\/p>\n\n\n\n
- \n
- Unique Carousel ID<\/strong> – With the Unique Carousel ID, you can easily connect and control the logo carousel with the Carousel Remote widget<\/a>.<\/li>\n\n\n\n
- Slider Mode<\/strong> – From here, you can choose your slider orientation, horizontal or vertical.<\/li>\n\n\n\n
- Slide Speed<\/strong> – Control your slide transition speed from here.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Now you\u2019ll find various device-dependent options.<\/em><\/p>\n\n\n\n
- \n
- Columns <\/strong>– You can set the number of columns for the slide for desktop, tablet and mobile separately. <\/li>\n\n\n\n
- Next Previous<\/strong> – You can set the behaviour of your next\/previous slide movement from here. You can move one column at a time or all visible columns (depending on the number of columns set in the Columns<\/strong> dropdown).<\/li>\n\n\n\n
- Slide Padding<\/strong> – From here, you can adjust the padding of your slider.<\/li>\n\n\n\n
- Draggable<\/strong> – Make your carousel draggable or non-draggable from here.<\/li>\n\n\n\n
- Multi Drag<\/strong> – With this option, you can allow users to drag multiple slides at once.<\/li>\n\n\n\n
- Infinite Mode<\/strong> – From here, you can turn your carousel into an infinite loop slider.<\/li>\n\n\n\n
- Pause On Hover<\/strong> – Allow the users to pause the slider on mouse hover.<\/li>\n\n\n\n
- Adaptive Height<\/strong> – If you have slides with uneven height with this option, the carousel navigation will adjust its position automatically according to the height of the slide.<\/li>\n\n\n\n
- Animation Type<\/strong> – From here, you can choose the animation type for your slider.<\/li>\n\n\n\n
- Autoplay<\/strong> – Make your carousel slider autoplay from here and adjust its speed as well.<\/li>\n\n\n\n
- Show Dots<\/strong> – From here, you can add dots slider navigation and you can style them as well.<\/li>\n\n\n\n
- Show Arrow<\/strong> – You can also add arrows navigation for your carousel slider and style them from here.<\/li>\n\n\n\n
- Center Mode<\/strong> – From here, you can highlight the center slide by adding padding, scale effect or opacity.<\/li>\n\n\n\n
- Number Of Rows<\/strong> – From here, you can set the number of rows for your slider. <\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Post Not Found Options<\/strong> – This option is only available when Post Type is selected as the source type. From here, you can style the post not found message. You can manage the message typography, colour, background, border etc.<\/p>\n\n\n\n
Extra Options<\/strong> – From here, you can make a unique column alignment. Turn on the Messy Columns<\/strong> toggle you\u2019ll get options to move columns up and down up to 6 columns individually for different devices.<\/p>\n\n\n\n
On Scroll View Animation<\/strong> – This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.<\/p>\n\n\n\n
- Next Previous<\/strong> – You can set the behaviour of your next\/previous slide movement from here. You can move one column at a time or all visible columns (depending on the number of columns set in the Columns<\/strong> dropdown).<\/li>\n\n\n\n
- Slider Mode<\/strong> – From here, you can choose your slider orientation, horizontal or vertical.<\/li>\n\n\n\n
- Load more<\/strong> – With this, you can add a load more button in Elementor logo showcase<\/a>.<\/li>\n\n\n\n
- 3 Layouts <\/strong>– You can choose from three layout types Grid, Masonry, and Carousel (Pro).<\/li>\n\n\n\n
- Search <\/strong>the widget name <\/strong>and turn on the toggle <\/strong>then <\/strong>click Save.<\/strong><\/li>\n<\/ul>\n\n\n\n