How to Create a Clients Carousel in WordPress
There is a lot to be said about building brand authority, but the gist of it is simple: it all boils down to trust. Of course, trust is difficult to earn and a good reputation is easy to lose. So, if a client has banked on you and it paid off, you should leverage that fact to your best advantage. If you got it, flaunt it, in other words. And a clients carousel is a way of doing just that.
But what is a client carousel, exactly? What are its use cases, and where best to place it on your website? In this tutorial, we will attempt to answer these questions and more, before showing you how to create a clients carousel for your WordPress websites. We will be using our very own Qi Addons for Elementor plugin to do it. If you are already using it, and if you are certain you need a clients carousel on your website, skip right down to the how-to section of the article.
If you prefer video tutorials, you can see how quickly and easily you can set up a clients carousel for your website in the video below:
However, if you prefer them in text form, read on.
This is what we‘d like to talk to you about:
In web design, a carousel is a type of animated display characterized by the illusion of rotation, similar to the funfair attraction from which it gets its name. Carousel-type displays can be used for a variety of purposes, including photo galleries, video, blog posts, testimonials, and client portfolios, the very subject of this article.
A clients carousel is, therefore, a type of carousel used to display a client portfolio. You have worked for a long time, you have a good track record, you have earned your reputation in the business. Some big-name clients have chosen you over your competitors. So, NDAs permitting, why not show off? Why not set up a prominent display of your biggest fish, and reel in even more?
A clients carousel is typically located on landing pages and sales pages, similar to testimonials. Unlike testimonials, which are client statements or expert opinions, where clients use their own words to describe their experience in working with you, clients displays let clients‘ own branding speak for itself.
Other than installing WordPress and setting up a website, there are a couple of things you need to do in order to start setting up a clients carousel on your website.
We will be showing you how to create an arresting clients carousel using our very own Qi Addons for Elementor. In order to use Qi Addons, you need to install and activate Elementor, the visual page editor. Qi Addons will not work with other page editors. It will, however, work with the free version of Elementor, just so long as you have the latest one.
After you have installed Elementor, you need to install Qi Addons for Elementor. It is a content-rich plugin that adds vastly to Elementor‘s already impressive capabilities. The clients carousel is included in the free version, alongside 59 other versatile and beautifully designed widgets. So, all you need to do is install the latest versions of both plugins, and you are good to go.
We will be showing you how to create the design shown in the video in the introduction, step by step. Also, note that the video was made with an earlier version of the Qi Addons widget. Qi Addons is a quality product with regular updates, and this is bound to happen. The same options are still there, but are organized differently in the newer version described in the text.
We will be showing you how to set up a clients carousel as part of a page. To start with, we have created a page and given it a title.
The General Section
The first section is the General section. Here, you can add custom classes if you know their IDs using the Custom Class field. You can also choose to have Boxed Items (images) instead of plain ones, as well as choose a Hover Type. The Hover Type control affects the behavior of each of the rotating images. We will not be using the boxed items display type, while, for the hover type, we will go with Opacity, making the image slightly more transparent on mouse hover.
The carousel consists of animated objects which are, in this case, called items. You can add however many items you want by clicking on the + Add Item button. We will add two items to the default three, for a total of five.
To populate an item, you need to expand it. You can do that by clicking on the Item bar. To add an image, click the Client Image field to replace the placeholder. You can add an image from your media library, or you can upload one from your device.
We have selected an image from our media library. To add an image to your carousel, click the Insert Media button.
With the image selected, there remain the options of a Client Title (the name of a client), the Client Link (in case you want to include a link to their website), and a Client Icon, in case you are using a layout which requires or allows an icon (which we are not). You can also choose a Client Hover Image, in case you have selected an on-hover behavior that changes the image. We have entered a placeholder name and # for the link.
Having done the same for the rest of our items, we will move on to the Slider Settings section of the Content tab.
Slider Settings Section
These are the options that mainly affect the animation of the carousel itself. The Enable Slider Loop control allows you to loop the carousel back on itself: replay it once it‘s done. We have set it up for Yes for the purposes of this demonstration. The Enable Centered Slides control is set to No by default, and we will leave it there. However, if you have multiple columns, you can use this option to ensure that you have a slide centered at all times. The Enable Slider Autoplay lets you keep the carousel rotating automatically, or stop it from doing so.
The Slide Duration control allows you to set the time for which a position of the carousel is static, while with the Slide Animation Duration you can set, unsurprisingly, the duration of the animation (move). Both fields accept values in milliseconds. We have gone with 4000 ms for the Slide Duration, changing from the default 5000, but we have left the Slide Animation Duration at the default 5000.
Next down, the Enable Slider Navigation and Enable Slider Pagination controls are used to switch the arrows and the bullets on the widget on and off. We will switch both off. Using the Image Proportions menu, you can select the dimensions of the images you are using in your slider. We are happy with our image sizes, so we will leave it at Original, but there is a range of sizes and aspect ratios you can choose for your own design. The Enable Partial Columns is set to No by default, meaning we only have full columns. If set to Yes, it would enable you to add a partial column to the carousel almost as a sort of a tease. We will not be using that option for this design.
As far as the Number of Columns is concerned, we will select Five, because our client logos are small enough to fit. However, they will not fit equally well on all screens. This is why we have selected Custom in the Columns Responsive menu, and set the number of items on display to Five, Three, or Two, depending on screen width. Finally, we will leave the Space Between Items at the default value of 30 pixels.
How to Style Your Clients Carousel
Moving on to the Style tab, we find that the top two sections are the Slider Navigation Style and the Slider Pagination Style. Since we are not using them for this design, these sections will not have any options available. We will say here that these contain a myriad of options for styling the arrows and bullets for your clients carousel, in case those are enabled.
The Style section is the next down. Here, you can set an Alignment for the items (we will leave it at the default Center), as well as style the client title. For the Title Tag, we will select H5, and we will not be changing either the Title Color or the Title Typography. Suffice it to say that there are plenty of options for all styles imaginable.
The Title Hover Underline control, if set to Yes, will add an animated line below the client title. It will also enable the Title Underline Animation Duration control, which lets you choose between a Long and a Short animation.
The final control of the Style section of the Style tab is the Images Margin Bottom. We will not be using it for this demonstration, but you can use it to increase the distance between the image and the title.
Finally, the Boxed Style and Icon Style sections are also only used when Boxed Items and Client Icons, respectively, are enabled and set up in the General tab.
And this is how we created a nifty clients carousel within minutes, using only two free plugins.
In Conclusion
As you can see, showing off your big name clients can be done easily and quickly using Elementor and our very own Qi Addons. If you feel like your business‘s website can be improved by this kind of display, you know where to go to for the incredibly versatile ready-made design.
