{"id":40196,"date":"2022-09-06T15:00:35","date_gmt":"2022-09-06T13:00:35","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=40196"},"modified":"2022-09-05T16:27:38","modified_gmt":"2022-09-05T14:27:38","slug":"how-to-create-clients-carousel-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-clients-carousel-in-wordpress\/","title":{"rendered":"How to Create a Clients Carousel in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]There is a lot to be said about <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-build-brand-authority-using-content-marketing\/\">building brand authority<\/a>, 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <strong>you need a clients carousel<\/strong> on your website, skip right down to the how-to section of the article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" style=\"border: 1px solid #ebebeb;\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/WT8ngVYlJ_0\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]However, if you prefer them in text form, read on.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is what we\u2018d like to talk to you about:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-clients-carousel\">What Is a Clients Carousel<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-you-need-to-do-beforehand\">What You Need To Do Beforehand<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-clients-carousel-with-qi-addons\">How to Create a Clients Carousel With Qi Addons For Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-clients-carousel\"><\/a>What Is a Clients Carousel<\/h2>\n<p>[\/vc_column_text][vc_column_text]In web design, a carousel is <strong>a type of animated display<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A clients carousel is, therefore, <strong>a type of carousel used to display a client portfolio<\/strong>. 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?[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"470\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Qi-Clients-Carousel.jpg\" class=\"attachment-full size-full\" alt=\"Qi Clients Carousel\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Qi-Clients-Carousel.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Qi-Clients-Carousel-300x146.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Qi-Clients-Carousel-768x373.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Qi-Clients-Carousel-620x301.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]A clients carousel is <strong>typically located on landing pages and sales pages<\/strong>, similar to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-testimonials-in-wordpress\/\">testimonials<\/a>. 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\u2018 own branding speak for itself.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-you-need-to-do-beforehand\"><\/a>What You Need To Do Beforehand<\/h2>\n<p>[\/vc_column_text][vc_column_text]Other than <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-wordpress\/\">installing WordPress<\/a> and setting up a website, there are a couple of things you need to do in order to <strong>start setting up a clients carousel<\/strong> on your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will be showing you how to create an arresting clients carousel using our very own <strong>Qi Addons for Elementor<\/strong>. In order to use Qi Addons, you need to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install and activate<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After you have installed Elementor, you need to install <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a>. It is a content-rich plugin that <strong>adds vastly to Elementor\u2018s already impressive capabilities<\/strong>. The <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/clients-carousel\/\" target=\"_blank\" rel=\"noopener\">clients carousel<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-clients-carousel-with-qi-addons\"><\/a>How to Create a Clients Carousel With Qi Addons For Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]First, find the clients carousel element in the left-hand-side menu and drag it to where you want it on the page.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Client-Carousel-Element.jpg\" class=\"attachment-full size-full\" alt=\"Drag Client Carousel Element\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Client-Carousel-Element.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Client-Carousel-Element-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Client-Carousel-Element-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Drag-Client-Carousel-Element-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The widget should now be selected, and the widget\u2018s <strong>Content<\/strong> tab should be open.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The General Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]The first section is the <strong>General<\/strong> section. Here, you can add custom classes if you know their IDs using the<strong> Custom Class<\/strong> field. You can also choose to have <strong>Boxed Items<\/strong> (images) instead of plain ones, as well as choose a <strong>Hover Type<\/strong>. The <strong>Hover Type<\/strong> 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 <em>Opacity<\/em>, making the image slightly more transparent on mouse hover.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"608\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/General-Options.jpg\" class=\"attachment-full size-full\" alt=\"General Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/General-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/General-Options-300x188.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/General-Options-768x482.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/General-Options-620x389.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 <strong>+ Add Item<\/strong> button. We will add two items to the default three, for a total of five.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"632\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Item.jpg\" class=\"attachment-full size-full\" alt=\"Add Item\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Item.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Item-300x196.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Item-768x501.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Add-Item-620x404.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To populate an item, you need to expand it. You can do that by clicking on the <em>Item<\/em> bar. To add an image, click the <strong>Client Image<\/strong> field to replace the placeholder. You can add an image from your media library, or you can upload one from your device.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"647\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Client-Image.jpg\" class=\"attachment-full size-full\" alt=\"Client Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Client-Image.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Client-Image-300x200.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Client-Image-768x513.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Client-Image-620x414.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We have selected an image from our media library. To add an image to your carousel, click the <strong>Insert Media<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"527\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Insert-Media.jpg\" class=\"attachment-full size-full\" alt=\"Insert Media\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Insert-Media.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Insert-Media-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Insert-Media-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Insert-Media-620x337.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With the image selected, there remain the options of a <strong>Client Title<\/strong> (the name of a client), the <strong>Client Link<\/strong> (in case you want to include a link to their website), and a <strong>Client Icon<\/strong>, in case you are using a layout which requires or allows an icon (which we are not). You can also choose a <strong>Client Hover Image<\/strong>, in case you have selected an on-hover behavior that changes the image. We have entered a placeholder name and # for the link.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"645\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Client-Item.jpg\" class=\"attachment-full size-full\" alt=\"Client Item\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Client-Item.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Client-Item-300x200.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Client-Item-768x511.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Client-Item-620x413.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Having done the same for the rest of our items, we will move on to the <strong>Slider Settings<\/strong> section of the <strong>Content<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Slider Settings Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]These are the options that mainly affect the animation of the carousel itself. The <strong>Enable Slider Loop<\/strong> control allows you to loop the carousel back on itself: replay it once it\u2018s done. We have set it up for <em>Yes<\/em> for the purposes of this demonstration. The <strong>Enable Centered Slides<\/strong> control is set to <em>No<\/em> 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 <strong>Enable Slider Autoplay<\/strong> lets you keep the carousel rotating automatically, or stop it from doing so.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Slider-Loop.jpg\" class=\"attachment-full size-full\" alt=\"Slider Loop\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Slider-Loop.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Slider-Loop-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Slider-Loop-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Slider-Loop-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Slide Duration<\/strong> control allows you to set the time for which a position of the carousel is static, while with the <strong>Slide Animation Duration<\/strong> you can set, unsurprisingly, the duration of the animation (move). Both fields accept values in milliseconds. We have gone with <em>4000 ms<\/em> for the <strong>Slide Duration<\/strong>, changing from the default <em>5000<\/em>, but we have left the <strong>Slide Animation Duration<\/strong> at the default <em>5000<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"534\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Slide-Duration.jpg\" class=\"attachment-full size-full\" alt=\"Slide Duration\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Slide-Duration.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Slide-Duration-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Slide-Duration-768x423.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Slide-Duration-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next down, the <strong>Enable Slider Navigation<\/strong> and <strong>Enable Slider Pagination<\/strong> controls are used to switch the arrows and the bullets on the widget on and off. We will switch both off. Using the <strong>Image Proportions<\/strong> 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 <em>Original<\/em>, but there is a range of sizes and aspect ratios you can choose for your own design. The <strong>Enable Partial Columns<\/strong> is set to <em>No<\/em> by default, meaning we only have full columns. If set to <em>Yes<\/em>, 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"489\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Enable-Slider-Navigation.jpg\" class=\"attachment-full size-full\" alt=\"Enable Slider Navigation\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Enable-Slider-Navigation.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Enable-Slider-Navigation-300x151.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Enable-Slider-Navigation-768x388.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Enable-Slider-Navigation-620x313.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As far as the <strong>Number of Column<\/strong>s is concerned, we will select <em>Five<\/em>, 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 <em>Custom<\/em> in the <strong>Columns Responsive<\/strong> menu, and set the number of items on display to <em>Five<\/em>, <em>Three<\/em>, or <em>Two<\/em>, depending on screen width. Finally, we will leave the <strong>Space Between Items<\/strong> at the default value of <em>30 pixels<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"543\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Number-of-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Number of Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Number-of-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Number-of-Columns-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Number-of-Columns-768x430.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Number-of-Columns-620x347.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">How to Style Your Clients Carousel<\/h2>\n<p>[\/vc_column_text][vc_column_text]Moving on to the <strong>Style<\/strong> tab, we find that the top two sections are the <strong>Slider Navigation Style<\/strong> and the <strong>Slider Pagination Style<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Style<\/strong> section is the next down. Here, you can set an <strong>Alignment<\/strong> for the items (we will leave it at the default <em>Center<\/em>), as well as style the client title. For the <strong>Title Tag<\/strong>, we will select <em>H5<\/em>, and we will not be changing either the <strong>Title Color<\/strong> or the <strong>Title Typography<\/strong>. Suffice it to say that there are plenty of options for all styles imaginable.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Title Hover Underline<\/strong> control, if set to <em>Yes<\/em>, will add an animated line below the client title. It will also enable the <strong>Title Underline Animation Duration<\/strong> control, which lets you choose between a <em>Long<\/em> and a <em>Short<\/em> animation.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The final control of the <strong>Style<\/strong> section of the <strong>Style<\/strong> tab is the <strong>Images Margin Bottom<\/strong>. We will not be using it for this demonstration, but you can use it to increase the distance between the image and the title.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"680\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Tab-300x211.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Tab-768x539.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Style-Tab-620x435.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, the <strong>Boxed Style<\/strong> and <strong>Icon Style<\/strong> sections are also only used when <strong>Boxed Items<\/strong> and <strong>Client Icons<\/strong>, respectively, are enabled and set up in the <strong>General<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And this is how we created a nifty clients carousel within minutes, using only two free plugins.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"2384\" height=\"1170\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/09\/Clients-Carousel.gif\" class=\"attachment-full size-full\" alt=\"Clients Carousel\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]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\u2018s website can be improved by this kind of display, you know where to go to for the incredibly versatile ready-made design.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Use a clients carousel widget to show off your client portfolio. We will show you how it&#8217;s done.<\/p>\n","protected":false},"author":16990,"featured_media":40224,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[295,108,13],"class_list":["post-40196","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-carousel","tag-qi-addons","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/40196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=40196"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/40196\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/40224"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=40196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=40196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=40196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}