How to Create a Customer Loop in WordPress

There’s a lot to be said about building brand authority, but the gist of it is simple: it all comes down to trust. Of course, trust is hard to earn and a good reputation is easy to lose. Therefore, if a client has trusted you and it has paid off, you should use this fact to your best advantage. If you got it, in other words, show off. And a customer carousel is one way to do just that.

But what exactly is a customer carousel? What are the use cases and where would you best place it on your website? In this tutorial, we’ll try to answer these questions and more before showing you how to create a client carousel for your WordPress websites. To do this we will use our own Qi Plugins for Elementor plugin. If you are already using and are sure you need a customer carousel on your website, skip 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 client carousel for your website in the video below:

However, if you prefer them in text format, read on.

Here’s what we want to talk to you about:

What is the Customer Cycle?

A carousel in web design some kind of animated screen It is characterized by the illusion of rotation, similar to the amusement park attraction from which it is named. Rotary type displays can be used for a variety of purposes, including photo galleries, video, blog posts, testimonials, and client portfolios that are the subject of this article.

Therefore, a customer carousel, a type of carousel used to display the client portfolio. You have worked for a long time, you have a good track record, you have earned your reputation at work. Some big name clients have chosen you over your competitors. So, NDAs allow it, why not flaunt it? Why not create a standout display of your biggest fish and shoot even more?

customer carousel often found on landing pages and sales pages, similar to references. Unlike testimonials, which are customer statements or expert opinions, where customers use their own words to describe their experience working with you, customer screens let customers’ own brand speak for itself.

What to Do Before

Apart from installing WordPress and setting up a website, there are a few things you need to do. start setting up a customer carousel on your website.

We’ll show you how to create an arresting customer carousel using our own. Qi Plugins for Elementor. To use Qi Plugins, you need to install and activate Elementor, the visual page editor. Qi Plugins will not work with other page editors. However, it will work with the free version of Elementor as long as you have the latest version.

After installing Elementor you need to install Qi Plugins for Elementor. It is a rich content plugin. Adds heavily to Elementor’s already impressive abilities. The free version includes the client carousel along with 59 other versatile and beautifully designed widgets. So, all you have to do is install the latest versions of both plugins and you are good to go.

We’ll show you step-by-step how to create the design shown in the video in the introduction. 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 it is a must have. The same options are still available, but arranged differently in the newer version described in the text.

We’ll show you how to set up a customer carousel as part of a page. To begin with, we created a page and gave it a title.

How to Create a Client Loop with Qi Plugins for Elementor

First, find the client carousel in the left-hand menu and drag it to where you want it on the page.

The widget should now be selected and the widget’s Contents tab should be open.

General Section

First episode, General episode. Here you can add custom classes if you know their id. Special Class area. You can also choose to own. Boxed Products (images) one instead of straight ones Hover Type. this Hover Type control affects the behavior of each of the rotating images. We will not use the boxed items display type, but for the hover type opacitymakes the image a little more transparent on hover.

The loop consists of moving objects, in this case called elements. You can add as many products as you want by clicking on it. + Add Item button. We will add two items to the default three for a total of five.

To fill an item, you must expand it. You can do this by clicking Element rod. Click to add image Customer Picture space to change the placeholder. You can add an image from your media library or upload an image from your device.

We chose an image from our media library. To add an image to the loop, Add Media button.

With the picture selected, the following options remain: Customer Title (customer’s name), Customer Connection (in case you want to include a link to their website) and Client Icon, if you’re using a layout that requires or allows an icon (which we don’t). Also a Client Hover Image, if you selected a hover behavior that changes the image. We entered a placeholder name and # for the link.

Once we’ve done the same for the rest of our items, we’ll move on. Slider Settings department Contents tab.

Slider Settings Section

These are the options that mainly affect the animation of the carousel. this Enable Slider Loop The control lets you spin the carousel on itself: play it again when it’s done. for this we set Yes for the purposes of this show. this Enable Centered Slides set as control Number by default and we will leave it there. However, if you have more than one column, you can use this option to make sure you always have a centered slide. this Enable Slider Autoplay lets you automatically spin the carousel or stop it.

this Slide Time while the control allows you to set the amount of time the carousel’s position is static, Slide Animation Time Not surprisingly, you can adjust the duration of the animation (motion). Both fields accept values ​​in milliseconds. we went with 4000ms for Slide Timechanging from default 5000but we broke up Slide Animation Time by default 5000.

next down, Enable Slider Navigation and Enable Slider Pagination controls are used to toggle arrows and bullets in the widget. We will close both. To use Aspect Ratios In the menu, you can choose the sizes of the images you use in your slider. We are happy with our image sizes so we will leave original, but there are a number of sizes and aspect ratios to choose from for your own design. this Enable Partial Columns set Number by default it means we only have full columns. if set to Yeslets you add a partial column to the carousel, almost like a mock up. We will not use this option for this design.

as much as possible Number of Columnss are interested, we will choose Five, because our customer logos are small enough to fit. However, they do not fit equally on all screens. That’s why we chose Tradition inside Responsive Columns Select the menu and select the number of displayed items. Five, threeor Two, depending on the screen width. In the end, we will leave Space Between Elements at default 30px.

How to Style Your Customers Carousel

To continue style tab, the top two sections Slider Navigation Style and Slider Pagination Style. Since we did not use them for this design, there will be no options in these sections. Here we will tell you that if these are enabled, they include numerous options for styling arrows and bullets for your customers’ carousels.

this style section is next below. Here, a alignment for items (we will leave it as default Centre), also specify the style of the client header. For Hashtagwe will choose H5and we won’t change Title Color or Header Typography. Suffice to say there are plenty of options for all imaginable styles.

this Title Highlighted Underline control if set to Yesadds an animated line below the client header. It will also enable: Title Underline Animation Duration control that lets you choose between Long and one Short animation.

Last check, style department style tab Images Bottom Margin. We won’t use it for this demonstration, but you can use it to increase the distance between the image and the title.

Finally, Boxed Style and Icon Style sections are also used only when: Boxed Products and Client Iconsare activated and set respectively General tab.

And this is how we created a stylish client carousel in minutes using just two free plugins.

As a result

As you can see, you can showcase your big name customers easily and quickly using Elementor and our own Qi Plugins. If you think your business website could be improved with this type of display, you know where to go for an incredibly versatile off-the-shelf design.