{"id":30238,"date":"2021-09-27T15:00:15","date_gmt":"2021-09-27T13:00:15","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=30238"},"modified":"2021-11-03T11:55:19","modified_gmt":"2021-11-03T10:55:19","slug":"how-to-add-cards-slider-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-cards-slider-in-wordpress\/","title":{"rendered":"What is a Cards Slider and How to Add It in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Content is what keeps your visitors coming to your website, but first impressions are also important: that\u2019s how you hook them in the first place. Good <strong>content deserves a beautiful presentation<\/strong> \u2013 requires it, even. If your website looks rudimentary, it may appear unprofessional, regardless of the quality of your content.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is where sliders come in. In the case of this tutorial specifically, the WordPress cards slider. Generally speaking, a slider is a dynamic design element used to display images and videos. Typically, it shows one image or video at one time, and changes after a while or through user action. A cards slider is a slider in which <strong>images are displayed and animated to resemble a deck of cards<\/strong>, similar to a cards gallery.[\/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=\"1875\" height=\"845\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Slider.gif\" class=\"attachment-full size-full\" alt=\"Cards Slider\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In this tutorial, we will be showing you how to add a cards slider to your WordPress website. But before we do that, we\u2019d like to take some time to discuss the situations in which a cards slider can improve your website, and when it\u2019s best avoided. Here\u2019s what we\u2019ll be discussing:[\/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-cards-slider\">What Is a Cards Slider<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[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=\"#the-downside-of-cards-slider\">The Downside of a Cards Slider<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[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=\"#add-cards-slider-with-qi-addons\">How to Add a Cards Slider 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-cards-slider\"><\/a>What is a Cards Slider<\/h2>\n<p>[\/vc_column_text][vc_column_text]A cards slider is showy, so, similar to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-cards-gallery-in-wordpress\/\">a cards gallery<\/a>, you can use it as a <strong>showcase feature<\/strong> for photos and images.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As with any gallery, the cards can also have an added functionality: you can attach a link to them, and <strong>use them as a navigation feature<\/strong>. As part of a portfolio website, each page could link to a previous project. For example, on a film project website, images in the slider could be portraits of characters which link to profile pages of cast members or similar. A cards slider can even be used instead of a menu, if that sort of a bold design choice can work for your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There is another added benefit to a cards slider: being animated and clickable, it invites user interaction, <strong>making your website more engaging:<\/strong> it gives your visitors something to do.[\/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=\"the-downside-of-cards-slider\"><\/a>The Downside of a Cards Slider<\/h2>\n<p>[\/vc_column_text][vc_column_text]Sliders are these fantastic visual features, so why not add them? WordPress has all these great looking addons and features, and it\u2019d be understandable for a novice designer to just dump everything and the kitchen sink into the website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This approach to design is generally a bad idea, but in the case of the cards slider, there is one major thing you need to consider: <strong>image size<\/strong>. A showcase feature is likely going to use high-quality, high resolution images, and they can be <strong>slow to load<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Website <strong>loading speed can affect your bounce rate<\/strong> (due to people simply giving up on waiting for a page to fully load), and that can have <strong>a negative effect on your SERP positions<\/strong>. So use large features judiciously, and <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-optimize-images-for-web\/\">optimize your images<\/a> to mitigate their adverse effects.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And now, if you\u2019re confident that a cards slider can improve your website, let\u2019s get right down to the nitty-gritty.<br \/>\n[\/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\"><a id=\"add-cards-slider-with-qi-addons\"><\/a>How to Add a Cards Slider With Qi Addons for Elementor<\/h3>\n<p>[\/vc_column_text][vc_column_text]With our very own <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons for Elementor<\/a>, you get 60 brand new professionally designed widgets which greatly expand Elementor\u2019s already impressive capabilities. In order to use them, you need to have installed Elementor, the premier visual editor for WordPress \u2013 the free version of Elementor will do. Then, install the Qi Addons for Elementor plugin, and you will have gained access to all these new design elements, the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/cards-slider\/\">cards slider<\/a> among them.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And you can have it all set up within minutes, as in the video below.<br \/>\n[\/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\/6C9KOZEvd10\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You may, however, prefer your tutorials in text form. If that is the case, read on. To get started with the cards slider, find the widget 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\/2021\/09\/Cards-Slider-Add-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Cards Slider Add Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Slider-Add-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Slider-Add-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Slider-Add-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Slider-Add-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will see that the default version of the widget has three images. These are listed as <em>items<\/em> in the <strong>General<\/strong> section of the content tab.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first option up is the <strong>Image Shuffle Style<\/strong> which you can use to change the direction of your \u201cdeck\u201d of images. You have the choice between <em>Shuffle Right<\/em> and <em>Shuffle Left<\/em>. We will leave it at <em>Shuffle Right<\/em>, the default value.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next down are the <strong>Image Items<\/strong>. This is where you can add the images you want in your cards slider. The default version of the slider contains three images, but you can add more by clicking the <strong>+ Add Item<\/strong> button. We will be using three images, so we won\u2019t be adding any more. You can also delete any item by clicking on the <strong>X<\/strong> button, or copy it by clicking on the <strong>Copy<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add an image to an item, click the item. You can add a link to the image by entering it into the <strong>Link<\/strong> field. A visitor clicking on an image will be taken to the linked page. We will not be adding the links now, but we will be adding the # mark to link to the top of the page the image is on.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Item Image<\/strong> box is where you actually add your image. Click the <strong>Choose Image<\/strong> button while hovering over the <strong>Item Image<\/strong> 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=\"715\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Slider-General-Options.jpg\" class=\"attachment-full size-full\" alt=\"Cards Slider General Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Slider-General-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Slider-General-Options-300x221.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Slider-General-Options-768x567.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Slider-General-Options-620x457.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can upload a new image or select an image already in the media library. Once you make your selection, 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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Drop-Caps-Insert-Media.jpg\" class=\"attachment-full size-full\" alt=\"Drop Caps Insert Media\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Drop-Caps-Insert-Media.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Drop-Caps-Insert-Media-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Drop-Caps-Insert-Media-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Drop-Caps-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 done the same for the remainder of our items, replacing the placeholder images. The final control in the <strong>General<\/strong> section is the <strong>Image Proportions<\/strong> menu. This is where you choose the size and proportions of your images. You can choose between several options here, including <em>Thumbnail, Square, Landscape<\/em>, and <em>Portrait<\/em>. 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=\"589\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Image-Proportions.jpg\" class=\"attachment-full size-full\" alt=\"Image Proportions\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Image-Proportions.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Image-Proportions-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Image-Proportions-768x467.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Image-Proportions-620x377.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 and its <strong>Style<\/strong> section, we find that there is only one control: the <strong>Offset Step<\/strong> slider. You can use it to show more or less of the images which are not on top of your deck of cards by sliding this control, or entering the number of pixels. We have gone with <em>50<\/em> pixels.[\/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\/Offset.jpg\" class=\"attachment-full size-full\" alt=\"Offset\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Offset.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Offset-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Offset-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Offset-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The final section is the <strong>Slider Navigation Style<\/strong>, which is all about how your navigation arrows look like and behave. Here is where you can set different arrow icons to <strong>Navigation Arrows Previous<\/strong> and <strong>Navigation Arrows Next<\/strong> by selecting an arrow from the <strong>Icon Library<\/strong> or you can upload your own by clicking on the <strong>Upload SVG<\/strong> button which appears on mouse hover. This works much the same as adding images to the gallery, and that is what we will do.[\/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=\"712\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Arrows.jpg\" class=\"attachment-full size-full\" alt=\"Arrows\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Arrows.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Arrows-300x220.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Arrows-768x564.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Arrows-620x456.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next section of this tab governs the <strong>Normal<\/strong> and the <strong>Hover<\/strong> states of your navigation arrows.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the <strong>Normal<\/strong> section, what first appears is the colour controls: the <strong>Navigation Arrow Color<\/strong> and the <strong>Navigation Arrow Background Color<\/strong>. You can enter a colour for either or choose one from the picker. We will go for a very light gray for the <strong>Navigation Arrow Color<\/strong> (#1e1e1e), but we will not touch the <strong>Navigation Arrow Background Color.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next down, we have the <strong>Navigation Arrow Size<\/strong> slider. You can enter a value, or slide it to where you like it. We will set it to <em>22<\/em> pixels.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Navigation Arrow Holder Height<\/strong> and <strong>Navigation Arrow Holder Weight<\/strong> sliders are there in case you wish to change the size of the background of the navigation arrow. We will not be using them in this tutorial.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, the <strong>Navigation Margin Top, Navigation Left Offset,<\/strong> and the <strong>Space Between Arrows<\/strong> sliders are used to change the position of the arrows in relation to the images in the slider itself or each other. We will set <strong>Navigation Margin Top<\/strong> to <em>6 pixels<\/em>, the <strong>Navigation Left Offset<\/strong> to <em>2.7%<\/em> and the <strong>Space Between Arrows<\/strong> to <em>28 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=\"551\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Nav-Style.jpg\" class=\"attachment-full size-full\" alt=\"Nav Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Nav-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Nav-Style-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Nav-Style-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Nav-Style-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <strong>Hover<\/strong> section of the tab, which governs the on-hover behaviour of your navigation arrows, you can see that it has all the same arrow styling options as the <strong>Normal<\/strong>, with one important addition: the <strong>Enable Hover Arrow Move<\/strong> menu. We will leave it on its default value of <em>Yes<\/em>, meaning that the arrow moves on mouse hover. We will leave all the other controls as they are.[\/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=\"562\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/On-Hover.jpg\" class=\"attachment-full size-full\" alt=\"On Hover\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/On-Hover.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/On-Hover-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/On-Hover-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/On-Hover-620x360.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: your slider is finished.<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=\"675\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Cards-Slider-GIF.gif\" class=\"attachment-full size-full\" alt=\"Cards Slider GIF\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]An elegant showcase, and only one of a virtually unlimited number of ways you can set it up.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#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]With Qi Addons for Elementor, it only takes a few minutes to add an arresting and engaging widget like a cards slider to your WordPress website. If you are designing a website which could use this kind of a flashy, stand-out feature, now you know that Qi Addons for Elementor has you covered. And if you are using it with the free version of Elementor, all of Addons\u2019 amazing features will be at your fingertips completely free.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>A WordPress cards slider can be an outstanding showcase feature for your website. We will show you how to add it and wow your visitors.<\/p>\n","protected":false},"author":16990,"featured_media":30262,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[27,114,153,4,13],"class_list":["post-30238","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-content","tag-qi-addons-for-elementor","tag-slider","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/30238","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=30238"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/30238\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/30262"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=30238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=30238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=30238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}