{"id":39778,"date":"2022-08-11T15:00:34","date_gmt":"2022-08-11T13:00:34","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=39778"},"modified":"2022-08-10T23:52:49","modified_gmt":"2022-08-10T21:52:49","slug":"how-to-create-clients-list-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-clients-list-in-wordpress\/","title":{"rendered":"How to Create a Clients List in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]One of the best ways to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-build-brand-authority-using-content-marketing\/\">establish brand authority<\/a> in your field is to share a list of some of the most noteworthy clients you worked with. A reference to the people or companies that were once your associates can <strong>help give a more serious and professional image to your brand<\/strong>. In addition, it can highlight your credibility and reliability as a business partner to your potential customers. And if you ask us, there\u2019s not a more effective way to display a clients list on your site than to <strong>use the help of the Qi Addons for Elementor plugin and its versatile Clients List widget.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Stay tuned as we show you how to add, customize, and style your clients list element completely from scratch using many of the widget\u2019s flexible options. Here\u2019s what we will cover:[\/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=\"#general-settings\">Adding the Widget and Adjusting the General Settings<\/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=\"#customizing-the-items\">Customizing the Items<\/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=\"#using-the-list-options\">Using the List Options<\/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=\"#styling-the-widget\">Styling the Widget<\/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=\"general-settings\"><\/a>Adding the Widget and Adjusting the General Settings<\/h2>\n<p>[\/vc_column_text][vc_column_text]Coming with over 100 fully customizable widgets, <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> is easily one of the best freemium Elementor collections of addons you can find on the web. The <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/clients-list\/\" target=\"_blank\" rel=\"noopener\">Clients List<\/a> widget in particular is available in the free widgets bundle. This widget provides you with plenty of creative ways to showcase a list of your business partners or any other notable clients you\u2019ve worked with in the past. The widget\u2019s flexible options will allow you to display separate main and hover images to create some additional cool effects when your visitors hover over the specific clients with their mouse. You can choose whether you want to create minimalistic presentations or provide more info by featuring some additional text. In addition, you can change image proportions, set borders, adjust fonts and colors, and the list goes on.[\/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\/08\/Clients-List.jpg\" class=\"attachment-full size-full\" alt=\"Clients List\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Clients-List.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Clients-List-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Clients-List-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Clients-List-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Make sure to stick around as we show you how to add and customize this useful widget. Then, you will be able to create beautiful and professional clients lists on your site that will help turn your casual visitors into actual working partners.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Also, we\u2019ve got a video on the same subject if you prefer to watch videos instead of reading:<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\/aWuICnT4ERA\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019re in the backend of your page\/post, type in \u201cclients list\u201d in the Elementor sidebar.<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\/08\/Clients-List-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Clients List Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Clients-List-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Clients-List-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Clients-List-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Clients-List-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Drag it over to the right side of the screen.<\/strong> This is what the widget looks like by default:[\/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\/08\/Clients-List-Default-Look.jpg\" class=\"attachment-full size-full\" alt=\"Clients List Default Look\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Clients-List-Default-Look.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Clients-List-Default-Look-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Clients-List-Default-Look-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Clients-List-Default-Look-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For our example, we will add two more items to go along with the existing three as we want to display five clients. You can add items by <strong>hitting the \u201c+ADD ITEM\u201d button:<\/strong>[\/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=\"567\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Add-Item.jpg\" class=\"attachment-full size-full\" alt=\"Add Item\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Add-Item.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Add-Item-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Add-Item-768x449.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Add-Item-620x363.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#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=\"522\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Items.jpg\" class=\"attachment-full size-full\" alt=\"Client Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Items-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Items-768x414.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Items-620x334.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, we are quickly going to set the number of columns to five as we want to have all five items displayed in one single line for our example. You can do that by <strong>going to the <em>List Options<\/em> section and selecting <em>Five<\/em> under the <em>Number of Columns<\/em>:<\/strong>[\/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\/08\/Number-of-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Number of Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Number-of-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Number-of-Columns-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Number-of-Columns-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Number-of-Columns-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now that we\u2019ve got that out of the way, it\u2019s time to go back to the <em>General<\/em> screen and start with our topmost option, <em>Enable Borders<\/em>. When enabled, this option overrides the <em>Space Between Items<\/em> option (which we will talk about a bit later). For example, if you select the <em>Inner Border<\/em> setting, the items will be next to one another, only with a thin border separating them.[\/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=\"563\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Inner-Border.jpg\" class=\"attachment-full size-full\" alt=\"Inner Border\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Inner-Border.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Inner-Border-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Inner-Border-768x446.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Inner-Border-620x360.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, we are going to show you an option you can use if the <em>Enable Borders<\/em> option is disabled (i.e. we switched this option back to No) \u2013 <em>Enable Boxed Items<\/em>. By switching this option to <em>Yes<\/em>, you will get the list type of layout with the items in boxes.[\/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=\"540\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Boxed-Items.jpg\" class=\"attachment-full size-full\" alt=\"Boxed Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Boxed-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Boxed-Items-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Boxed-Items-768x428.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Boxed-Items-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Before we continue, you should note that we\u2019ve disabled boxed items and also gone back to the <em>Enable Borders<\/em> option. Then, <strong>we selected <em>All Border<\/em><\/strong> for our example:[\/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\/08\/All-Border.jpg\" class=\"attachment-full size-full\" alt=\"All Border\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/All-Border.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/All-Border-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/All-Border-768x423.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/All-Border-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, the <em>Hover Type<\/em> option is set to <em>None<\/em> by default, but if you choose one of the available options, you will get different effects if you hover over the items.[\/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\/08\/Vertical-Rollover.jpg\" class=\"attachment-full size-full\" alt=\"Vertical Rollover\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Vertical-Rollover.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Vertical-Rollover-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Vertical-Rollover-768x423.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Vertical-Rollover-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve decided to<strong> go for the<em> Vertical Rollover<\/em> setting for our example.<\/strong>[\/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=\"567\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Hover-Type.jpg\" class=\"attachment-full size-full\" alt=\"Hover Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Hover-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Hover-Type-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Hover-Type-768x449.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Hover-Type-620x363.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\"><a id=\"customizing-the-items\"><\/a>Customizing the Items<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now it\u2019s time to begin uploading the images and customizing your items.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To open the first Item, simply click on it and you will get the options to upload your image. You will see two available fields for uploading the images \u2013 <strong>one that will be visible right away<\/strong> (<em>Client Image<\/em>), and <strong>another that will show up on hover<\/strong> (<em>Client Hover Image<\/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=\"567\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Item-Images.jpg\" class=\"attachment-full size-full\" alt=\"Item Images\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Item-Images.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Item-Images-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Item-Images-768x449.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Item-Images-620x363.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should select your preferred image(s) using these fields, and <strong>hit the <em>Insert Media<\/em> button<\/strong> once you\u2019re done.[\/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\/08\/Insert-Media.jpg\" class=\"attachment-full size-full\" alt=\"Insert Media\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Insert-Media.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Insert-Media-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Insert-Media-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Insert-Media-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve uploaded the same image for both Client and Client Hover Image \u2013 and this is the final result we got once we\u2019ve hovered over it:<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=\"711\" height=\"471\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Clients-List-Hover.gif\" class=\"attachment-full size-full\" alt=\"Clients List Hover\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Client Title<\/em> option serves so you can insert the title that resides right below the image (in our case, it\u2019s \u201cExample Title 1\u201d). You can either type over this placeholder text or erase it altogether. The same goes for the <em>Client Text<\/em>. For our example, we\u2019ve erased both.[\/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=\"642\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Title-and-Text.jpg\" class=\"attachment-full size-full\" alt=\"Client Title and Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Title-and-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Title-and-Text-300x199.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Title-and-Text-768x509.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Title-and-Text-620x411.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There\u2019s also the <em>Client Link<\/em> where you can add the URL of your client. If you do so, your image will become clickable on 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=\"633\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Link.jpg\" class=\"attachment-full size-full\" alt=\"Client Link\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Link.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Link-300x196.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Link-768x502.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Link-620x405.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There\u2019s also the <em>Client Icon<\/em> option that allows you to add an icon to a specific item on your client list. In the picture above, you can see that there\u2019s a little icon with the shape of a star in the top right corner of the second item \u2013 this would be our client icon.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, we won\u2019t be needing the icon for our example, so we ended up clicking on the second item in our list and deleting ours.<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=\"650\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Remove-Client-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Remove Client Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Remove-Client-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Remove-Client-Icon-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Remove-Client-Icon-768x515.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Remove-Client-Icon-620x416.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want, you can add an icon of your choice for one, more, or all your items. You can either pick an icon that\u2019s already available in the library or upload one of your own.[\/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=\"690\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Client Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Icon-300x214.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Icon-768x547.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Client-Icon-620x441.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That completes all the available options within the Item itself.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve gone ahead and also replaced the other item images and the text content in the same way we did with the first item.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And this is the look of our client list so far:<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=\"451\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/All-Clients.jpg\" class=\"attachment-full size-full\" alt=\"All Clients\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/All-Clients.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/All-Clients-300x140.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/All-Clients-768x357.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/All-Clients-620x289.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\"><a id=\"using-the-list-options\"><\/a>Using the List Options<\/h2>\n<p>[\/vc_column_text][vc_column_text]In the <em>List Options<\/em> section, there is a whole other set of options related to the look of your list. The first option in this section is called <em>Image Proportions<\/em>. This option will allow you to choose the way you want your image to be displayed (Thumbnail, Medium, Large, Square, etc.). We are going to keep it at <em>Original<\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Image-Proportions.jpg\" class=\"attachment-full size-full\" alt=\"Image Proportions\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Image-Proportions.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Image-Proportions-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Image-Proportions-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Image-Proportions-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, there\u2019s the <em>Number of Columns<\/em> option that allows you to choose anything from one to eight columns for your widget. We\u2019ve already set ours to five at the very beginning so that all our clients could be placed in one single line.[\/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\/08\/Number-of-Columns-2.jpg\" class=\"attachment-full size-full\" alt=\"Number of Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Number-of-Columns-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Number-of-Columns-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Number-of-Columns-2-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Number-of-Columns-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next is the <em>Columns Responsive<\/em> option which serves to help you <strong>decide how many columns will be displayed on a specific screen size<\/strong>. You can either keep it <em>Predefined<\/em> or choose <em>Custom<\/em>\u00a0(which is what we\u2019ve chosen) to set the column number for each individual screen type:[\/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=\"531\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Columns-Responsive.jpg\" class=\"attachment-full size-full\" alt=\"Columns Responsive\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Columns-Responsive.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Columns-Responsive-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Columns-Responsive-768x421.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Columns-Responsive-620x340.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first two screen sizes represent laptops, while the largest screen option (1920px wide) is already determined by the <em>Number of Columns<\/em> option predefined earlier.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve changed the first two options to have five columns as well, while for the tablets (landscape and portrait options) we\u2019ve left it at three. For the last two options (mobile screens), we\u2019ve chosen one column.[\/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=\"515\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Columns-Responsive-Defined.jpg\" class=\"attachment-full size-full\" alt=\"Columns Responsive Defined\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Columns-Responsive-Defined.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Columns-Responsive-Defined-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Columns-Responsive-Defined-768x408.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Columns-Responsive-Defined-620x330.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, you can use the <em>Space Between Items<\/em> option to adjust the amount of space you\u2019ll have between the separate clients. For our setting, we\u2019ve kept the default value.[\/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=\"515\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Space-Between-Items.jpg\" class=\"attachment-full size-full\" alt=\"Space Between Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Space-Between-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Space-Between-Items-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Space-Between-Items-768x408.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Space-Between-Items-620x330.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\"><a id=\"styling-the-widget\"><\/a>Styling the Widget<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now, it\u2019s time to access the <em>Style<\/em> tab.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Under the <em>Style<\/em> section, there\u2019s the <em>Alignment<\/em> option (for adjusting the content alignment), <em>Title Tag<\/em> (for styling any text content you may want to use), <em>Title Color<\/em>, and even <em>Title Typography<\/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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Style-Options.jpg\" class=\"attachment-full size-full\" alt=\"Style Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Style-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Style-Options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Style-Options-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Style-Options-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019re not using any text for our clients list, so we\u2019ve skipped these options for our example.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Moving on to the<em> Images Margin Bottom<\/em> option \u2013 this option simply allows you to insert more space underneath your client images.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <em>Title Margin Bottom<\/em> is another similar option that allows you to add space under the title text.[\/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=\"475\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Image-and-Title-Margin.jpg\" class=\"attachment-full size-full\" alt=\"Image and Title Margin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Image-and-Title-Margin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Image-and-Title-Margin-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Image-and-Title-Margin-768x376.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Image-and-Title-Margin-620x304.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Last but not least, the <em>Content Padding<\/em> option allows you to increase the space around the entire content.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve delinked the fields here and <strong>entered 89px for the top and 73px for the bottom.<\/strong>[\/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=\"480\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Content-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Content Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Content-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Content-Padding-300x149.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Content-Padding-768x380.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Content-Padding-620x307.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Border Style Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]The second section here is related to the <em>Border Style<\/em>. Just a quick note, however \u2013 if your border option isn\u2019t enabled, then this section won\u2019t show any options. That being said, we do have a border for our example, so there are options available here.[\/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\/08\/Border-Style.jpg\" class=\"attachment-full size-full\" alt=\"Border Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Border-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Border-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Border-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Border-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The<em> Border Color<\/em> option contains the practical color picker you can use to easily choose the color of your border. Next is the <em>Border Style<\/em> which has Solid, Dashed, and Dotted variants. Ours is set to <em>Solid<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once we increase the <em>Border Width<\/em>, the changes will also be more visible:[\/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\/08\/Border-Width-and-Style.jpg\" class=\"attachment-full size-full\" alt=\"Border Width and Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Border-Width-and-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Border-Width-and-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Border-Width-and-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Border-Width-and-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now that we showed you what the border can look like, we are going to clear the border width to keep it subtle.[\/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\">Boxed Style and Icon Style<\/h3>\n<p>[\/vc_column_text][vc_column_text]There is also the <em>Boxed Style<\/em> section. In our case, this section is empty as we aren\u2019t using the <em>Boxed Item<\/em> layout for this widget.[\/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\/08\/Boxed-Style.jpg\" class=\"attachment-full size-full\" alt=\"Boxed Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Boxed-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Boxed-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Boxed-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Boxed-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To make these options show up, you need to <strong>head to the <em>Content<\/em> tab first and then choose <em>No<\/em> in the<em> Enable Borders<\/em> option<\/strong> (to reveal the option to enable boxed items).[\/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\/08\/Enable-Boxed-Layout.jpg\" class=\"attachment-full size-full\" alt=\"Enable Boxed Layout\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Enable-Boxed-Layout.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Enable-Boxed-Layout-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Enable-Boxed-Layout-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Enable-Boxed-Layout-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, access the <em>Boxed Style<\/em> section under the <em>Style<\/em> tab once again.[\/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\/08\/Back-to-Boxed-Style.jpg\" class=\"attachment-full size-full\" alt=\"Back to Boxed Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Back-to-Boxed-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Back-to-Boxed-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Back-to-Boxed-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Back-to-Boxed-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]First, you will be able to change the<em> Background Color<\/em> of your section. Feel free to add any color you like here. We\u2019ve chosen the color with the hex code #CC6666 just to quickly demonstrate what adding color can do for your boxed items (we\u2019ve cleared this setting right after).[\/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=\"522\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Boxed-Style-Background-Colour.jpg\" class=\"attachment-full size-full\" alt=\"Boxed Style Background Colour\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Boxed-Style-Background-Colour.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Boxed-Style-Background-Colour-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Boxed-Style-Background-Colour-768x414.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Boxed-Style-Background-Colour-620x334.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also set the <em>Item Padding<\/em> which will allow you to adjust the space around the content in your box.[\/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\/08\/Item-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Item Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Item-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Item-Padding-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Item-Padding-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Item-Padding-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that\u2019s it for the options available in the <em>Boxed Style<\/em> section.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve restored the previous <em>Enable Borders &gt;&gt; All Border<\/em> options to roll back the previous look of our clients list.[\/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=\"532\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Enable-All-Border.jpg\" class=\"attachment-full size-full\" alt=\"Enable All Border\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Enable-All-Border.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Enable-All-Border-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Enable-All-Border-768x422.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Enable-All-Border-620x340.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Last but not least, the <em>Icon Style<\/em> section allows you to customize the look of your icon (if you have one). This section contains options that let you <strong>change the icon color, icon size, and position.<\/strong>[\/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\/08\/Icon-Style.jpg\" class=\"attachment-full size-full\" alt=\"Icon Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Icon-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Icon-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Icon-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Icon-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve deleted our icon in the first part of our text so we won\u2019t be using these options, but if you\u2019ve chosen to have an icon for your item(s), this is where you can style it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Make sure to <strong>hit the <em>Publish\/Update<\/em> button<\/strong> once you\u2019re satisfied with the look of your widget.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is the final look of our list with all the images, style, and hover effects we\u2019ve set up for it:<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=\"1905\" height=\"756\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/08\/Clients-List-Hover-All.gif\" class=\"attachment-full size-full\" alt=\"Clients List Hover All\" \/>                        <\/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\">Wrapping Things Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]That completes our tutorial on how to make the most out of the Qi Addons for Elementor\u2019s beautiful and practical Clients List widget. You can use many of the widget\u2019s flexible options we presented above to fully customize the look of your list and make it much more than a simple row of text. For example, you will be able to upload different images and brand logos to your list, add different stylish effects by using separate hover images, change the style of your items, add colors, adjust border options, and more.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can go with the example we used above, opt for one of the design examples available on our widget page, or create a completely unique look for your Clients List element. If you feel like experimenting, we encourage you to go ahead and play around with the widget\u2019s options until you find the design that best suits your own brand\u2019s needs.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Stick around as we show you how to create a clients list element from scratch using the Qi Addons for Elementor plugin and its versatile Clients List widget.<\/p>\n","protected":false},"author":2,"featured_media":39839,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[29,288,108,13],"class_list":["post-39778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-business","tag-list","tag-qi-addons","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/39778","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=39778"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/39778\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/39839"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=39778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=39778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=39778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}