{"id":29776,"date":"2021-09-14T15:00:20","date_gmt":"2021-09-14T13:00:20","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=29776"},"modified":"2021-09-20T12:43:30","modified_gmt":"2021-09-20T10:43:30","slug":"how-to-create-cards-gallery-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-cards-gallery-in-wordpress\/","title":{"rendered":"How to Create a Cards Gallery in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Today\u2019s internet users are spoiled for choice, and a poorly designed website is unlikely to find any favour with the audience. That is part of the reason why <strong>aesthetics is growing more and more important<\/strong>: you need to hook your visitors not only with your excellent content (creating which is hard enough), but with how it\u2019s presented.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this tutorial, we would like to show you a way to present your image content: the cards gallery. A cards gallery is simply a gallery which \u201cshuffles\u201d sort of like a deck of cards. It looks something like this:[\/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=\"691\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Gallery.gif\" class=\"attachment-full size-full\" alt=\"Cards Gallery\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Adding a cards gallery to your WordPress website is easy and free<\/strong>, so if you think it could improve your website, there is no reason to hesitate. But how do you know if you could use a cards gallery? Is it just <strong>an aesthetic choice<\/strong>, or is it also <strong>a functional design element<\/strong>? We would like to address these issues and answer some questions you might have before we get to the nuts and bolts of the how-to.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what we\u2019ll be talking 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=\"#why-add-cards-gallery-to-your-wordpress-website\">Why Add a Cards Gallery to Your WordPress Website<\/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=\"#when-not-to-use-cards-gallery\">When Not To Use a Cards Gallery<\/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-cards-gallery-with-qi-addons-for-elementor\">How to Create a Cards Gallery 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=\"why-add-cards-gallery-to-your-wordpress-website\"><\/a>Why Add a Cards Gallery to Your WordPress Website<\/h2>\n<p>[\/vc_column_text][vc_column_text]A cards gallery has multiple uses, but mainly it is a gallery: <strong>a showcase for photos or other images<\/strong> your visitors can browse at their leisure.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Each of the images in a cards gallery can also be used to link to another page. This way, you can <strong>use your cards gallery for navigation<\/strong> to other websites or your own website. You could, for instance, create logos for your projects, present them as cards, and make them link to individual project pages, making cards galleries ideal for portfolios. Or you can use them instead of team pages, whereby a visitor could click on a thumbnail image of a member of your staff and have it link to their bio page.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, even if it\u2019s not used for navigation, a cards gallery is a clickable animated element. Your <strong>users will feel more engaged<\/strong> when given something to do, rather than simply look at images, making the user experience better overall.[\/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=\"when-not-to-use-cards-gallery\"><\/a>When Not To Use a Cards Gallery<\/h2>\n<p>[\/vc_column_text][vc_column_text]The thing about image galleries is that they necessarily contain images, and, of course, the cards gallery is no exception. This means that, when a page containing a gallery is loaded, <strong>it can take perceptibly longer to load<\/strong> than loading a page without many images.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you are using high-resolution images for your galleries, this might mean <strong>long loading times<\/strong>, which can in turn affect your <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-reduce-bounce-rate-in-wordpress\/\">bounce rate<\/a> and your SERP rankings adversely. If this is a concern of yours, use graphics sparingly.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, certain websites (artist portfolios, tattoo parlours, and photo studios come to mind in particular) have to go heavy on the images by their very nature. This is why you should look into <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-optimize-images-for-web\/\">image optimization<\/a> if you want to improve the user experience.[\/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-cards-gallery-with-qi-addons-for-elementor\"><\/a>How to Create a Cards Gallery With Qi Addons for Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]We will show you how to add a cards gallery using our very own <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons for Elementor<\/a> plugin. Before you can use it, though, you need to install and activate the latest version of the Elementor visual editor (the free version is fine), and then install and activate Qi Addons. <strong>Qi Addons is a completely free plugin<\/strong>, so the whole setup doesn\u2019t need to cost you a penny.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Qi Addons for Elementor expands Elementor\u2019s already impressive array of design elements with 60 brand new professionally designed widgets. It includes a wide variety of gallery options, and the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/cards-gallery\/\">cards gallery widget<\/a> is only one of them. We will show you how to add the widget to a post, but you can<strong> add it to any widget-ready area of your website<\/strong>. We will be using our free <a href=\"https:\/\/qodeinteractive.com\/qi-theme\/\">Qi Theme<\/a>, but the plugin should work fine with any theme you might be using.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With Qi Addons for Elementor, creating a beautiful and functional cards gallery <strong>takes only a couple of minutes<\/strong> of fiddling with some simple widget settings. You can watch how it\u2019s done in our video tutorial:[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/I0E80K96hnM\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]But if you prefer your tutorials in text form, we have you covered: just keep on reading.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Adding a Qi Addons cards gallery to your WordPress website begins as with any other Elementor widget: find it in your left hand-side menu and drag it to where you want it.[\/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\/2021\/09\/Cards-Gallery-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Cards Gallery Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Gallery-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Gallery-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Gallery-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Gallery-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The default version of the element contains three placeholder images. Using the <strong>General<\/strong> section of the <strong>Content<\/strong> tab, you can populate your cards gallery with your own images.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first option is the <strong>Image Shuffle Style<\/strong>, which is set to <em>Right<\/em> by default, meaning that the clickable cards are to the right . You can also have your cards shuffle from the <em>Left<\/em>, or <em>Left and Right<\/em>, which is what we have selected.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next down, we find the<strong> Image Items<\/strong> section. This is where you can add whatever images you want to your cards gallery. The widget\u2019s default version contains three images, and that\u2019s how many we need, but you can add more by clicking the <strong>+ Add Item<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add an image to an <strong>Item<\/strong>, click on it. An <strong>Item<\/strong> has two controls: <strong>Link<\/strong> and <strong>Item Image<\/strong>. The <strong>Link<\/strong> field can be used to link to a page when an item is clicked. We will set ours to #, linking to the same page the element is on, so you can see how it will look and behave when linked. Leaving it blank means that the page item will not link to anywhere.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add an image, click the<strong> Item Image<\/strong> box. The <strong>Choose Image<\/strong> button should be visible 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=\"716\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Gallery-General-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Cards Gallery General Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Gallery-General-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Gallery-General-Tab-300x222.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Gallery-General-Tab-768x567.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Gallery-General-Tab-620x458.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can choose an image from your media library or upload a new one. Once you have selected an image, click <strong>Insert Media.<\/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\/2021\/07\/Insert-Media.jpg\" class=\"attachment-full size-full\" alt=\"Insert Media\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Insert-Media.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Insert-Media-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Insert-Media-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/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 have input the # in the <strong>Link<\/strong> field and selected an image for each <strong>Item<\/strong>. The last control in the <strong>General<\/strong> section is the <strong>Image Proportions<\/strong> menu. This governs the size and proportions of the image for all items. You can choose between <em>Thumbnail, Square, Landscape, Portrait<\/em>, and several other options. We have gone with <em>Original<\/em>, preserving the size of our images.[\/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=\"604\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Proportions.jpg\" class=\"attachment-full size-full\" alt=\"Proportions\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Proportions.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Proportions-300x187.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Proportions-768x479.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Proportions-620x386.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on to the <strong>Style<\/strong> tab, you will find that there are only two sliders. The first one up is <strong>Scale Step<\/strong>. You can use this slider to scale down the inactive (clickable) images to a percentage of their original size. Setting this slider to 0 would keep the images\u2019 original size. We have chosen <em>0.19<\/em> for our scale setting, making the inactive images 81% of their original size.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Offset Step<\/strong> slider is used to offset the inactive images in relation to the active one, that is, how much of the inactive (clickable) image is shown. Setting this slider to 0 would hide them entirely, making them unclickable and rendering the entire widget useless. We have set ours to 37.[\/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\/2021\/09\/Cards-Gallery-Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Cards Gallery Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Gallery-Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Gallery-Style-Tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Gallery-Style-Tab-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Gallery-Style-Tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And there you have it, a simple, elegant and effective animated cards gallery, done in minutes.<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\/2021\/09\/Cards-Gallery-Final.gif\" class=\"attachment-full size-full\" alt=\"Cards Gallery Final\" \/>                        <\/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, with Qi Addons for Elementor, you can add a beautiful, eye-catching, and engaging widget to your WordPress website within minutes and completely for free. If a website you are designing can benefit from this arresting showcase, it is now a part of your WordPress toolkit. And if this is the first time you\u2019ve encountered Qi Addons for Elementor, take note that this is just one of its many possible uses.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Enhance your WordPress website with a cards gallery: implement an arresting and functional solution within minutes.<\/p>\n","protected":false},"author":16990,"featured_media":29792,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[27,141,114,4,13],"class_list":["post-29776","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-content","tag-gallery","tag-qi-addons-for-elementor","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29776","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=29776"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29776\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/29792"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=29776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=29776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=29776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}