{"id":38722,"date":"2022-06-26T15:00:44","date_gmt":"2022-06-26T13:00:44","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=38722"},"modified":"2022-06-21T14:24:50","modified_gmt":"2022-06-21T12:24:50","slug":"how-to-create-blog-carousel-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-blog-carousel-in-wordpress\/","title":{"rendered":"How to Create a Blog Carousel in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]There are various creative ways in which you can draw the attention of potential readers to your posts and get them to check out your content. In fact, many blogging sites turn to creating all sorts of <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-blog-layout-designs\/\">captivating blog posts designs<\/a> for this purpose. There are those that go for a more simplistic approach and only offer the title and a \u201cread more\u201d button that leads to the posts on their home or blog pages. Others go out of their way to create a visually immersive experience for their visitors and arrange snippets of their posts using <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-masonry-image-gallery-in-wordpress\/\">beautiful masonry layouts<\/a>, or even provide entire slideshows of their posts using blog carousels. And if you are also among those set on a mission to create an interactive display of your posts using the attention-grabbing blog carousel element, then you\u2019re in the right place.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This time around, we are going to <strong>show you how to use our own Qi Addons for Elementor plugin and its highly flexible and dynamic Blog Carousel widget<\/strong> to effectively display a selection of your best blog posts and truly captivate the attention of your readers. There are many different designs you can choose from and plenty of versatile content and styling options you can try out to create a unique-looking and attractive carousel for your blog. We will build a blogging carousel element from scratch and make sure to cover most of the widget\u2019s options while we\u2019re at it. Without further ado, here goes:[\/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=\"#adding-blog-carousel-general-settings\">Adding a Blog Carousel 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=\"#styling-the-blog-carousel-widget\">Styling the Blog Carousel Widget<\/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-buttons-icons-content\">Styling the Buttons, Icons, and Content<\/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=\"adding-blog-carousel-general-settings\"><\/a>Adding a Blog Carousel Widget and Adjusting the General Settings<\/h2>\n<p>[\/vc_column_text][vc_column_text]With its set of 100+ predefined widgets, <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> is one of the biggest freemium Elementor collections you can use to produce beautiful and compelling elements for virtually any WordPress site. Among its widget list, the versatile <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/blog-carousel\/\" target=\"_blank\" rel=\"noopener\">Blog Carousel<\/a> widget serves to help you create a stylish blog carousel and place it anywhere you want on your blog. This free widget has the purpose of helping you add the blog posts showcase in all sorts of captivating ways. You can use the widget\u2019s various layout and customization options and even combine them in numerous ways to create a unique-looking carousel for your blog. You will be able to <strong>fully customize your text, stylize the icons, buttons, navigation arrows, and pagination bullets, choose different layouts<\/strong>, and plenty more.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Make sure to stick around as we show you how to make the most out of this versatile widget. And if you prefer to watch videos instead of reading, we suggest that you check out the video that covers the same subject:<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\/9EKVec951rw\" 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 Elementor page edit, make sure to <strong>search for \u201cBlog Carousel\u201d in the Elementor sidebar.<\/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\/06\/Blog-Carousel-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Blog Carousel Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Carousel-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Carousel-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Carousel-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Carousel-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Drag it over to the right side of your screen. You will instantly be able to see what the default widget looks like. There are three items with a predefined layout and the navigation and pagination are both switched on.<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=\"432\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Carousel-Default-Look.jpg\" class=\"attachment-full size-full\" alt=\"Blog Carousel Default Look\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Carousel-Default-Look.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Carousel-Default-Look-300x134.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Carousel-Default-Look-768x342.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Carousel-Default-Look-620x276.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Keep in mind, however, that you need to have some posts prepared in advance in order for the carousel to work \u2013 which is what we did:<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\/06\/Blog-Posts.jpg\" class=\"attachment-full size-full\" alt=\"Blog Posts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Posts.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Posts-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Posts-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Posts-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you have no posts, the carousel won\u2019t be able to display anything. Therefore, you should create some blog posts first before you start working with this widget.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s assume you\u2019ve set up some posts in advance. It\u2019s then time to go to the widget\u2019s <em>General<\/em> section. One of the first options in this section is called<em> Enable Slider Loop<\/em>, the name of which is pretty self-explanatory. It is set to <em>Yes<\/em> by default, so if you set it to No it will stop showing the carousel on loop.[\/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\/06\/Enable-Slider-Loop.jpg\" class=\"attachment-full size-full\" alt=\"Enable Slider Loop\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Enable-Slider-Loop.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Enable-Slider-Loop-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Enable-Slider-Loop-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Enable-Slider-Loop-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Enable Center Slides<\/em> option is set to <em>No<\/em> by default, but if changed to Yes, it will make a slide appear in the center of the carousel at all times. This option is somewhat connected to another option that you can find if you go a bit further down the list, called <em>Enable Partial Columns<\/em>. Once you set this option to <em>Yes<\/em> and use the slider in the <em>Partial Columns Value<\/em> option (to determine how much the side columns will be visible), you will get the following <em>partial<\/em> view:[\/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\/2022\/06\/Centered-Slides-and-Partial-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Centered Slides and Partial Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Centered-Slides-and-Partial-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Centered-Slides-and-Partial-Columns-300x187.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Centered-Slides-and-Partial-Columns-768x479.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Centered-Slides-and-Partial-Columns-620x386.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, you can enable centered slides and make your carousel appeal symmetrical, which means the partial view is now present on both sides of the widget. Also, the carousel slide will be set in the center.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will switch these settings off now as we\u2019ve only wanted to quickly demonstrate how combining a few different options can impact the look of your carousel.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Moving on, there\u2019s also the<em> Enable Slider Autoplay<\/em> option that allows the carousel to move as soon as the page opens.[\/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\/06\/Enable-Slider-Autoplay.jpg\" class=\"attachment-full size-full\" alt=\"Enable Slider Autoplay\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Enable-Slider-Autoplay.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Enable-Slider-Autoplay-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Enable-Slider-Autoplay-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Enable-Slider-Autoplay-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Right below, you can adjust the <em>Slide Duration<\/em> according to your preferences. This is the amount of time one slide will be shown on the screen before another one replaces it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There\u2019s also the<em> Slider Animation Duration<\/em> option that serves to set the amount of time the animated effect will last. We\u2019ve left both options at default 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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Slide-Duration.jpg\" class=\"attachment-full size-full\" alt=\"Slide Duration\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Slide-Duration.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Slide-Duration-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Slide-Duration-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Slide-Duration-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>Enable Slider Navigation<\/em> option that is enabled by default (as is seen with the arrows).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <em>Enable Slider Pagination<\/em> option is also switched on by default, as we\u2019ve mentioned at the very beginning. Since having arrows and bullets switched on at the same time is a bit too much, we\u2019ve disabled the latter option.[\/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\/06\/Slider-Navigation-and-Pagination.jpg\" class=\"attachment-full size-full\" alt=\"Slider Navigation and Pagination\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Slider-Navigation-and-Pagination.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Slider-Navigation-and-Pagination-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Slider-Navigation-and-Pagination-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Slider-Navigation-and-Pagination-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>Image Proportions<\/em> option allows you to select the size of the images in your slider. Feel free to try some of them out to see which one fits your preferences the most. As for our particular example, we\u2019ve left 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\/06\/Image-Proportions.jpg\" class=\"attachment-full size-full\" alt=\"Image Proportions\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Image-Proportions.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Image-Proportions-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Image-Proportions-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/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]The <em>Number of Columns<\/em> option is also self-explanatory \u2013 it allows you to choose your desired columns number (three is our 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\/06\/Number-of-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Number of Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Number-of-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Number-of-Columns-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Number-of-Columns-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/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]The <em>Columns Responsive<\/em> option allows you to manually set the number of columns you want to be shown on each screen size. The first two options are for laptops and MacBooks, while the number of columns option is used for regular desktop screens. We\u2019ve left the first two options at their default setting, and we\u2019ve set one column for all the rest (as these are the mobile settings).[\/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\/06\/Columns-Responsive.jpg\" class=\"attachment-full size-full\" alt=\"Columns Responsive\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Columns-Responsive.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Columns-Responsive-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Columns-Responsive-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Columns-Responsive-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on, there\u2019s the <em>Space Between Items<\/em> option which can be used to adjust the number of pixels between separate items. We\u2019ve placed it at 28px for ours.[\/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=\"600\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Space-Between-Items.jpg\" class=\"attachment-full size-full\" alt=\"Space Between Items\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Space-Between-Items.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Space-Between-Items-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Space-Between-Items-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Space-Between-Items-620x384.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\">Query Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]Next is the <em>Query<\/em> section. Here you will find the option to set the maximum number of <em>Posts Per Page<\/em> shown in the carousel. Our example only has three posts, so we\u2019ve set it to three.[\/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\/06\/Posts-per-Page.jpg\" class=\"attachment-full size-full\" alt=\"Posts per Page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Posts-per-Page.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Posts-per-Page-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Posts-per-Page-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Posts-per-Page-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>Order By<\/em> option will allow you to pick the criterion at which you are ordering the posts within the carousel. It is set to <em>Date<\/em> by default, which is what we\u2019ve left it at as well.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next, you can choose the <em>Order <\/em>in which the posts will be displayed (Default, Descending, and Ascending). We\u2019ve left our setting at <em>Default<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Right below, the<em> Additional Parameters<\/em> option will let you filter the posts that will appear in the carousel. You can choose to only display posts with specific Post IDs, Taxonomy Slug, or Author Name. We\u2019ve picked the <em>Taxonomy Slug<\/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\/06\/Order-By.jpg\" class=\"attachment-full size-full\" alt=\"Order By\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Order-By.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Order-By-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Order-By-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Order-By-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, you can pick the <em>Taxonomy<\/em> you wish to use. We\u2019ve chosen <em>Category<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the <em>Taxonomy Slug and IDs<\/em> fields, you can specify the taxonomies you want shown. If you end up using the <em>Taxonomy IDs<\/em> option, you need to make sure to separate the ID numbers of different posts with a comma. We\u2019ve added \u201clifestyle\u201d into the <em>Taxonomy Slug<\/em> field 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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Taxonomy-Slug-and-IDs.jpg\" class=\"attachment-full size-full\" alt=\"Taxonomy Slug and IDs\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Taxonomy-Slug-and-IDs.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Taxonomy-Slug-and-IDs-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Taxonomy-Slug-and-IDs-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Taxonomy-Slug-and-IDs-620x331.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\">Layout Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]Now, the <em>Layout<\/em> section has a separate set of options related to the carousel layout.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first, <em>Item Layout<\/em> option allows you to adjust the look of the items in the carousel. The <em>Boxed<\/em> setting is the one you can see in the picture below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, for our example, we\u2019ve decided to change our layout to <em>Date Boxed<\/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\/06\/Date-Boxed.jpg\" class=\"attachment-full size-full\" alt=\"Date Boxed\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Date-Boxed.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Date-Boxed-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Date-Boxed-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Date-Boxed-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>Title Tag<\/em> option allows you to choose the tag (H1-H6) of your title. We\u2019ve opted for using the H3 tag.[\/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\/06\/Title-Tag.jpg\" class=\"attachment-full size-full\" alt=\"Title Tag\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Tag.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Tag-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Tag-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Tag-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you can enable or disable the excerpt (it\u2019s there by default, so we\u2019ve also decided to keep it) and choose its length.<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\/06\/Show-Excerpt.jpg\" class=\"attachment-full size-full\" alt=\"Show Excerpt\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-Excerpt.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-Excerpt-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-Excerpt-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-Excerpt-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>Center Content<\/em> option allows you to center your content or not. We\u2019ve left this option at default.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]By using the <em>Show Media<\/em> option, you can disable the display of your image. We\u2019ve decided to keep the image on display 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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Center-Content-and-Show-Media.jpg\" class=\"attachment-full size-full\" alt=\"Center Content and Show Media\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Center-Content-and-Show-Media.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Center-Content-and-Show-Media-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Center-Content-and-Show-Media-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Center-Content-and-Show-Media-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>Show Info Icons<\/em> option lets you show icons for displaying the info text. You get small icons right next to the info text if you switch the setting to Yes (we\u2019ve switched it off right afterward).[\/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\/06\/Show-info-Icons.jpg\" class=\"attachment-full size-full\" alt=\"Show info Icons\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-info-Icons.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-info-Icons-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-info-Icons-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-info-Icons-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>Show Date<\/em> option is pretty self-explanatory. It\u2019s enabled by default, and we are going to keep ours as well.[\/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\/06\/Show-Date.jpg\" class=\"attachment-full size-full\" alt=\"Show Date\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-Date.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-Date-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-Date-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-Date-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>Show Category<\/em> option which is also enabled by default, and the same goes for <em>Show Author<\/em> and <em>Show Button<\/em> options. For our example, however, we are going to switch the author off, while we\u2019ve decided to keep the button 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\/06\/Show-Category.jpg\" class=\"attachment-full size-full\" alt=\"Show Category\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-Category.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-Category-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-Category-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Show-Category-620x331.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\">Read More Button<\/h3>\n<p>[\/vc_column_text][vc_column_text]If you also keep your button, you will be able to use another batch of settings (Read More Button and Read More Button Icon) to customize 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\/2022\/06\/Read-More-Button-and-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Read More Button and Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-and-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-and-Icon-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-and-Icon-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-and-Icon-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]First, in the <em>Read More Button<\/em> settings, you can change the <em>Read More Text<\/em> and have it display something else (it says <em>Read More<\/em> by default). We\u2019ve changed it to \u201cKeep Reading\u201d.[\/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\/06\/Read-More-Text.jpg\" class=\"attachment-full size-full\" alt=\"Read More Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Text-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Text-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Text-620x331.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 the <em>Button Layout<\/em> to be Fixed, Outlined, or Textual (this is the one we\u2019ve used).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve also enabled the <em>Button Text Underline<\/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\/06\/Button-Layout-and-Underline.jpg\" class=\"attachment-full size-full\" alt=\"Button Layout and Underline\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Button-Layout-and-Underline.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Button-Layout-and-Underline-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Button-Layout-and-Underline-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Button-Layout-and-Underline-620x331.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 next section, you can choose your <em>Read More Button Icon<\/em>. You can either upload an SVG or choose from the icon library. We\u2019ve opted for the SVG we\u2019ve previously uploaded to the library.[\/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\/06\/Button-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Button Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Button-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Button-Icon-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Button-Icon-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Button-Icon-620x331.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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Insert-Media.jpg\" class=\"attachment-full size-full\" alt=\"Insert Media\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Insert-Media.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Insert-Media-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Insert-Media-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/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]Hit the <em>Insert Media<\/em> button once you\u2019re done with choosing your icon.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next, you can either set the <em>Icon Position<\/em> to be on the right or the left of the button text. We\u2019ve had it stay on the right.[\/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\/06\/Icon-Position.jpg\" class=\"attachment-full size-full\" alt=\"Icon Position\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Icon-Position.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Icon-Position-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Icon-Position-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Icon-Position-620x331.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-blog-carousel-widget\"><\/a>Styling the Blog Carousel Widget<\/h2>\n<p>[\/vc_column_text][vc_column_text]The next, <em>Style<\/em> tab, contains a whole other set of different options you can use for a comprehensive styling of your blog carousel.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first section is <em>Slider Navigation Style<\/em>, with the first option named <em>Navigation Position<\/em>. Basically, this option determines the position of the navigation arrows. The <em>Inside<\/em> setting is the default one and it places the arrows right within the carousel. You also have the option to place them outside the carousel or choose <em>Together<\/em> and position them at the very bottom of the carousel. This time around, we\u2019ve opted for the <em>Outside<\/em> setting.[\/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=\"637\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Position.jpg\" class=\"attachment-full size-full\" alt=\"Navigation Position\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Position.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Position-300x197.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Position-768x505.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Position-620x408.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With the <em>Hide Navigation<\/em> option, you can choose the screen width at which the arrows stop being visible. We\u2019ve set it to below 768px.[\/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\/06\/Hide-Navigation.jpg\" class=\"attachment-full size-full\" alt=\"Hide Navigation\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Hide-Navigation.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Hide-Navigation-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Hide-Navigation-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Hide-Navigation-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, the <em>Navigation Vertical Offset<\/em> and <em>Navigation Horizontal Offset<\/em> options will let you move the arrows up or down (or left or right for the horizontal offset). We didn\u2019t change the former option, while we set 6.5% for the horizontal offset.[\/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\/06\/Navigation-Offset.jpg\" class=\"attachment-full size-full\" alt=\"Navigation Offset\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Offset.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Offset-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Offset-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Offset-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In case you wish to replace default navigation arrows with something else, you can use the <em>Navigation Arrow Previous<\/em> and <em>Navigation Arrow Next<\/em> options. You can either replace them using the icon from the library or upload an SVG.[\/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\/06\/Navigation-Arrows.jpg\" class=\"attachment-full size-full\" alt=\"Navigation Arrows\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrows.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrows-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrows-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrows-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 opted for using the SVG previously uploaded in the Media Library for both Previous and Next arrows.<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\/06\/Navigation-Insert-Media.jpg\" class=\"attachment-full size-full\" alt=\"Navigation Insert Media\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Insert-Media.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Insert-Media-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Insert-Media-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-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]Make sure to hit <em>Insert Media<\/em> when 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=\"654\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Arrows-Inserted.jpg\" class=\"attachment-full size-full\" alt=\"Arrows Inserted\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Arrows-Inserted.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Arrows-Inserted-300x202.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Arrows-Inserted-768x518.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Arrows-Inserted-620x418.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After that, you can customize your arrows even further.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Right below, you will see the settings for the <em>Normal<\/em> icon display and display on <em>Hover<\/em>. These settings serve to make your icon appear different when hovered over.[\/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\/06\/Normal-and-Hover-Navigation.jpg\" class=\"attachment-full size-full\" alt=\"Normal and Hover Navigation\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Normal-and-Hover-Navigation.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Normal-and-Hover-Navigation-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Normal-and-Hover-Navigation-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Normal-and-Hover-Navigation-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <em>Normal<\/em> settings panel, there\u2019s the <em>Navigation Arrow Color<\/em> option that you can use to change the color of your icon. You can do this either by using the color picker or entering your own hex code. You can choose any shade you like 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\/06\/Navigation-Arrow-Color.jpg\" class=\"attachment-full size-full\" alt=\"Navigation Arrow Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrow-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrow-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrow-Color-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrow-Color-620x331.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>Navigation Arrow Background Color<\/em>. We\u2019ve selected the hex code of #E47070 for the time being, just to demonstrate a few other options.[\/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\/06\/Navigation-Arrow-Background-Color.jpg\" class=\"attachment-full size-full\" alt=\"Navigation Arrow Background Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrow-Background-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrow-Background-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrow-Background-Color-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrow-Background-Color-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As its name suggests, the <em>Navigation Arrow Size<\/em> option allows you to increase the size of the arrows. On the other hand, the <em>Navigation Arrow Holder Width<\/em> lets you adjust the width of the base that contains the arrow. Finally, the <em>Navigation Arrow Holder Height<\/em> allows you to adjust the height of the same base.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can see how the space has changed once we\u2019ve adjusted these options.<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\/06\/Navigation-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Navigation Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We are going to clear these options now as we\u2019ve only wanted to demonstrate different navigation arrow looks you can achieve if you decide to use them. The only option we are going to use is the <em>Navigation Arrow Size<\/em>. For this option, we\u2019ve set the size to 40px. Now, our arrows appear significantly bigger.[\/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\/06\/Navigation-Arrow-Size.jpg\" class=\"attachment-full size-full\" alt=\"Navigation Arrow Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrow-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrow-Size-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrow-Size-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Navigation-Arrow-Size-620x331.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 <em>Hover<\/em> settings \u2013 here, you will find the options for <em>Navigation Arrow Hover Color<\/em> and <em>Navigation Arrow Background Hover Color<\/em>, which work on the same principle as previous color options, the only difference being that they determine the arrow and background colors 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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Hover-Navigation-Colors.jpg\" class=\"attachment-full size-full\" alt=\"Hover Navigation Colors\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Hover-Navigation-Colors.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Hover-Navigation-Colors-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Hover-Navigation-Colors-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Hover-Navigation-Colors-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>Enable Hover Arrow Move<\/em> option allows you to add the animated movement to the arrow 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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Hover-Arrow-move.gif\" class=\"attachment-full size-full\" alt=\"Hover Arrow Move\" \/>                        <\/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\">Slider Pagination Style<\/h3>\n<p>[\/vc_column_text][vc_column_text]Next, there\u2019s the<em> Slider Pagination Style<\/em> section. However, to get this section to show its options, you need to activate them first using the <em>General<\/em> tab and enabling the <em>Slider Pagination<\/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=\"598\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Enable-Slider-Pagination.jpg\" class=\"attachment-full size-full\" alt=\"Enable Slider Pagination\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Enable-Slider-Pagination.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Enable-Slider-Pagination-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Enable-Slider-Pagination-768x474.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Enable-Slider-Pagination-620x383.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, when you switch back to the <em>Slider Pagination Style<\/em>, you will see that you have a few options at your disposal there.[\/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=\"665\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Slider-Pagination-Style.jpg\" class=\"attachment-full size-full\" alt=\"Slider Pagination Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Slider-Pagination-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Slider-Pagination-Style-300x206.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Slider-Pagination-Style-768x527.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Slider-Pagination-Style-620x425.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]First, there\u2019s the <em>Pagination Position<\/em> that allows you to move the pagination bullets outside the carousel or let them remain inside it. We\u2019ve kept it on the outside so that we can demonstrate the effect of these options better.[\/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=\"579\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Position.jpg\" class=\"attachment-full size-full\" alt=\"Pagination Position\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Position.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Position-300x179.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Position-768x459.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Position-620x370.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]By using the <em>Pagination Offset<\/em> option, you can move the pagination further away from the slider.[\/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=\"597\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Offset.jpg\" class=\"attachment-full size-full\" alt=\"Pagination Offset\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Offset.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Offset-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Offset-768x473.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Offset-620x382.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, with the <em>Normal<\/em> and <em>Active<\/em> settings, you can change <em>Pagination Color<\/em> for the \u201cnormal\u201d pagination bullet as well as for the bullet that represents the currently active slide.[\/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=\"450\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Color.jpg\" class=\"attachment-full size-full\" alt=\"Pagination Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Color-300x139.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Color-768x357.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Color-620x288.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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Active-Color.jpg\" class=\"attachment-full size-full\" alt=\"Pagination Active Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Active-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Active-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Active-Color-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Active-Color-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Switching back to the <em>Normal<\/em> set of options, we\u2019ve got the <em>Border Type<\/em> option that lets you determine the framing of your pagination bullets (Solid, Dotted, Double, Dashed, etc.). You need to set the type, color, and width in order for the bullets to appear properly. The color and width options show up on the screen once you choose the border 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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Border-Type.jpg\" class=\"attachment-full size-full\" alt=\"Border Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Border-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Border-Type-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Border-Type-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Border-Type-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 are the <em>Pagination Size<\/em> and <em>Space Between Bullets<\/em> options that are pretty straightforward.[\/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\/06\/Pagination-Size-and-Space-Between-Bullets.jpg\" class=\"attachment-full size-full\" alt=\"Pagination Size and Space Between Bullets\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Size-and-Space-Between-Bullets.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Size-and-Space-Between-Bullets-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Size-and-Space-Between-Bullets-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Pagination-Size-and-Space-Between-Bullets-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 concludes all the available <em>Pagination<\/em> options. Also, we\u2019ve disabled the pagination in the <em>Content<\/em> tab again as it\u2019s not really part of the final design 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=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Disable-Slider-Pagination.jpg\" class=\"attachment-full size-full\" alt=\"Disable Slider Pagination\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Disable-Slider-Pagination.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Disable-Slider-Pagination-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Disable-Slider-Pagination-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Disable-Slider-Pagination-620x353.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\">Style Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]The next section is simply called <em>Style<\/em>. This batch of options allows you to style different aspects of your title. The first option here allows you to change the color of your title, followed by the <em>Title Hover Color<\/em> option (to set the color appearing 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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Style.jpg\" class=\"attachment-full size-full\" alt=\"Title Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Style-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>Title Typography<\/em> featuring detailed options related to the typography of the title, including Font Family, Size, Weight, Transform, etc.[\/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=\"600\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Title Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Typography-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Typography-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Typography-620x384.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Title Hover Underline<\/em> option allows you to add an animated underline that will appear when you hover over the title (we have switched it back to <em>No<\/em> 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=\"541\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Hover-Underline.jpg\" class=\"attachment-full size-full\" alt=\"Title Hover Underline\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Hover-Underline.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Hover-Underline-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Hover-Underline-768x429.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Hover-Underline-620x346.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\">Excerpt Style Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]Next is the Excerpt Style tab with the Excerpt Color option you can use to change the color of the excerpt into anything you like.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Following this option, you\u2019ve got the <em>Excerpt Typography<\/em> with identical options present in the Title Typography:[\/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\/06\/Excerpt-Style.jpg\" class=\"attachment-full size-full\" alt=\"Excerpt Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Excerpt-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Excerpt-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Excerpt-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Excerpt-Style-620x331.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\">Info Style Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]The Info Style section contains options called<em> Info Color, Info Hover Color<\/em>, and <em>Info Typography<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <em>Info Color<\/em> option serves to adjust the color of this text 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=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Style.jpg\" class=\"attachment-full size-full\" alt=\"Info Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Style-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Style-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Style-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve chosen a plain black color for ours.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you\u2019d like, you can also choose a different color for <em>Info on Hover<\/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=\"491\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Hover-Color.jpg\" class=\"attachment-full size-full\" alt=\"Info Hover Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Hover-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Hover-Color-300x152.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Hover-Color-768x389.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Hover-Color-620x314.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once again, you have the typography options for your info text. We\u2019ve used these options to increase the font size to 16px and set the Weight to 500.[\/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=\"587\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Info Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Typography-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Typography-768x465.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Info-Typography-620x376.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\">Layout Spacing Style Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]In the <em>Layout Spacing Style<\/em> section, you will find additional options for adjusting the spacing.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For example, the<em> Post Info Margin Bottom<\/em> lets you adjust the spacing right below the information text.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can either type in a value or drag the slider to adjust the space to your liking. We\u2019ve set 7px 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\/06\/Post-Info-Margin-Bottom.jpg\" class=\"attachment-full size-full\" alt=\"Post Info Margin Bottom\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Post-Info-Margin-Bottom.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Post-Info-Margin-Bottom-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Post-Info-Margin-Bottom-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Post-Info-Margin-Bottom-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, <em>Title Margin Bottom<\/em> allows you to adjust the space between the title and excerpt. For ours, we\u2019ve put 15px.[\/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\/06\/Title-Margin-Bottom.jpg\" class=\"attachment-full size-full\" alt=\"Title Margin Bottom\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Margin-Bottom.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Margin-Bottom-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Margin-Bottom-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Title-Margin-Bottom-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>Image Margin Bottom<\/em> lets you adjust the space under the image. We\u2019ve left it at 33px 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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Image-Margin-Bottom.jpg\" class=\"attachment-full size-full\" alt=\"Image Margin Bottom\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Image-Margin-Bottom.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Image-Margin-Bottom-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Image-Margin-Bottom-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Image-Margin-Bottom-620x331.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>Text Margin Bottom<\/em> option lets you adjust the space below the excerpt, for which we\u2019ve set 31px.[\/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\/06\/Text-Margin-Bottom.jpg\" class=\"attachment-full size-full\" alt=\"Text Margin Bottom\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Text-Margin-Bottom.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Text-Margin-Bottom-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Text-Margin-Bottom-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Text-Margin-Bottom-620x331.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\">Image Style Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]In the Image Style section, you\u2019ve got options like <em>Image Border Radius, Image Hover<\/em> (which you can use to create an effect when hovering over the image), and <em>Image Zoom Origin<\/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\/06\/Image-Style.jpg\" class=\"attachment-full size-full\" alt=\"Image Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Image-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Image-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Image-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Image-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After that, there is the <em>Overlay Color<\/em> that allows you to give the color to the overlay of your image. If you set the color and give it transparency, the images will have an overlay color of your choice:[\/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=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Overlay-Color.jpg\" class=\"attachment-full size-full\" alt=\"Overlay Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Overlay-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Overlay-Color-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Overlay-Color-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Overlay-Color-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]One last option available here is the <em>Overlay Hover Color<\/em> that works the same, only with the overlay color you set appearing 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=\"567\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Overlay-Hover-Color.jpg\" class=\"attachment-full size-full\" alt=\"Overlay Hover Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Overlay-Hover-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Overlay-Hover-Color-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Overlay-Hover-Color-768x449.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Overlay-Hover-Color-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=\"styling-buttons-icons-content\"><\/a>Styling the Buttons, Icons, and Content<\/h2>\n<p>[\/vc_column_text][vc_column_text]The <em>Read More Button Style<\/em> section contains the options for styling the button itself.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once again, you can adjust the <em>Typography<\/em> settings of your button text. The only thing we\u2019ve changed here is the <em>Size<\/em> which we\u2019ve set to 17px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"608\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Style.jpg\" class=\"attachment-full size-full\" alt=\"Read More Button Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Style-300x188.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Style-768x482.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Style-620x389.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on, there are two switches here \u2013 <em>Normal<\/em> and <em>Hover<\/em>. Under the <em>Normal<\/em> switch, there\u2019s the <em>Text Color<\/em> option to change the color of the button text. We\u2019ve set the dark grey hex code here (#1e1e1e).[\/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\/06\/Read-More-Text-Color.jpg\" class=\"attachment-full size-full\" alt=\"Read More Text Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Text-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Text-Color-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Text-Color-768x428.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Text-Color-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <em>Hover<\/em> settings, you can adjust the <em>Text Hover Color<\/em>, which changes the color of your button text 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=\"498\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Text-Hover-Color.jpg\" class=\"attachment-full size-full\" alt=\"Read More Text Hover Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Text-Hover-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Text-Hover-Color-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Text-Hover-Color-768x395.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Text-Hover-Color-620x319.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\">Read More Button Icon Style<\/h3>\n<p>[\/vc_column_text][vc_column_text]The next section is <em>Read More Button Icon Style<\/em>. If you have the icon present in your button, this is where you\u2019ll be able to set its settings.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <em>Icon Size<\/em> is the first option here \u2013 we\u2019ve added 6px for ours.[\/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=\"520\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Icon-Size.jpg\" class=\"attachment-full size-full\" alt=\"Read More Button Icon Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Icon-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Icon-Size-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Icon-Size-768x412.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Icon-Size-620x333.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> Icon Color<\/em> option which you can adjust under the <em>Normal<\/em> switch.[\/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\/06\/Read-More-Button-Icon-Color.jpg\" class=\"attachment-full size-full\" alt=\"Read More Button Icon Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Icon-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Icon-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Icon-Color-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Icon-Color-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>Hover<\/em> switch contains the <em>Move Icon<\/em> option that allows you to select the animation that will appear for your icon when hovered over. We\u2019ve chosen the default, <em>Horizontal Short<\/em> animation for ours.[\/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=\"525\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Move-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Move Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Move-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Move-Icon-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Move-Icon-768x416.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Move-Icon-620x336.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Icon Margin<\/em> option lets you adjust the values for the space around the icon.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve delinked the fields here (to adjust each side separately) and added 3px at the top and 10px on the left. We\u2019ve kept the rest at zero 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=\"557\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Icon-Margin.jpg\" class=\"attachment-full size-full\" alt=\"Icon Margin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Icon-Margin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Icon-Margin-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Icon-Margin-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Icon-Margin-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The<em> Read More Button Inner Border Style<\/em> is currently empty as it\u2019s meant to apply for the button that has an inner border, and our button doesn\u2019t have one.[\/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=\"472\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Inner-Border-Style.jpg\" class=\"attachment-full size-full\" alt=\"Read More Button Inner Border Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Inner-Border-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Inner-Border-Style-300x146.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Inner-Border-Style-768x374.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Read-More-Button-Inner-Border-Style-620x302.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\">Read More Button Underline Style<\/h3>\n<p>[\/vc_column_text][vc_column_text]Moving to the section named <em>Read More Button Underline Style<\/em>. Since we\u2019ve enabled the button text underline earlier, there are options that appear here.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Under the <em>Normal<\/em> switch, you can change the underline color, if you\u2019d like. You can determine the <em>Underline Width<\/em>, as well. We\u2019ve changed it to 45 pixels, just to show you what your underline can look like.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can also set the <em>Underline Thickness<\/em> \u2013 we\u2019ve chosen 4px for ours.[\/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=\"541\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Underline Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Settings-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Settings-768x429.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Settings-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, the <em>Underline Alignment<\/em> option lets you pick the alignment for the button underline. This option works well if your underline is shorter than the button text.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can either move it to the left, right, or keep it at the center.<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\/06\/Underline-Alignment.jpg\" class=\"attachment-full size-full\" alt=\"Underline Alignment\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Alignment.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Alignment-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Alignment-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Alignment-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 reset the previous two options as we\u2019ve done it only to demonstrate properly what they can do for the look of your underline.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then, there\u2019s the <em>Underline Offset<\/em> option. This option serves to determine the space between the button text and the underline. The higher your value, the closer the line will be to the text. We\u2019ve set 6px 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=\"550\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Offset.jpg\" class=\"attachment-full size-full\" alt=\"Underline Offset\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Offset.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Offset-300x170.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Offset-768x436.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Offset-620x352.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As for the <em>Hover<\/em> settings, you can use the Underline Hover Color option to set the new color for your underline on hover.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <em>Underline Hover Width<\/em> allows you to increase or decrease the length of the underline that appears when hovered over.[\/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=\"541\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Hover.jpg\" class=\"attachment-full size-full\" alt=\"Underline Hover\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Hover.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Hover-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Hover-768x429.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Hover-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]One last option present here is <em>Enable Hover Underline Draw<\/em>. When switched on, it makes a slight animated effect that makes the line seem drawn upon hover. 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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Underline-Animation.gif\" class=\"attachment-full size-full\" alt=\"Underline Animation\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We are going to switch this setting off now as it\u2019s not part of our design.<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\">Date Style Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]The next, <em>Content Style<\/em> section becomes available only if you use the particular layout for your blog carousel items, so we will return to it a bit later.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, let\u2019s look at the <em>Date Style<\/em> section instead. This section has all the options meant to adjust the look of the date that appears in your carousel.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here you can change the Date Color and Date Hover Colors. Also, you will get to adjust the date typography (we\u2019ve changed the font size to 15px here), and the<em> Date Background Color<\/em> option (it will change the color of the box that holds the date).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the latter option, we\u2019ve added a dark gray color using the #333333 hex code.<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\/06\/Date-Style.jpg\" class=\"attachment-full size-full\" alt=\"Date Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Date-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Date-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Date-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Date-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, the <em>Date Padding<\/em> option lets you create more space around your date. Here we\u2019ve delinked the fields and added 9px at the top, 16px on the right, 9px at the bottom, and 16px on the left.[\/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\/06\/Date-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Date Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Date-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Date-Padding-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Date-Padding-768x515.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Date-Padding-620x416.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Hit the<em> Update\/Publish <\/em>button if you\u2019re satisfied with the look of your carousel.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is the final look we wanted to use for 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=\"493\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Update.jpg\" class=\"attachment-full size-full\" alt=\"Update\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Update.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Update-300x153.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Update-768x391.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Update-620x315.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\">Content Style Section<\/h3>\n<p>[\/vc_column_text][vc_column_text]And one final thing before we go \u2013 we did mention we\u2019re going to demonstrate what the options in the <em>Content Style<\/em> section can do.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, we\u2019ve quickly changed the<em> Item Layout<\/em> (using the <em>Layout<\/em> section in the <em>Content<\/em> tab) to <em>Boxed<\/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=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Boxed-Layout.jpg\" class=\"attachment-full size-full\" alt=\"Boxed Layout\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Boxed-Layout.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Boxed-Layout-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Boxed-Layout-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Boxed-Layout-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, when you go back to the <em>Style<\/em> tab and choose the <em>Content Style<\/em> section, you will be able to see (and use) the options there. First is the<em> Content Background Color<\/em> that appears in the boxes that contain the post singles. Here\u2019s an example of what this option can do for the look of your content:[\/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=\"618\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Content-Background-Color.jpg\" class=\"attachment-full size-full\" alt=\"Content Background Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Content-Background-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Content-Background-Color-300x191.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Content-Background-Color-768x490.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Content-Background-Color-620x395.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In addition, there\u2019s the <em>Item Shadow<\/em> option you can use to add the shadow to the content items. Simply clicking on the option automatically adds the shadow. Then, you get the options to adjust it further according to your preferences. For example, you can adjust the Color, Horizontal and Vertical offsets, the Blur shadow setting, as well as the option for the shadow Spread. Last but not least, the <em>Position<\/em> option allows you to set the shadow within the box instead of outside 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=\"592\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Item-Shadow.jpg\" class=\"attachment-full size-full\" alt=\"Item Shadow\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Item-Shadow.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Item-Shadow-300x183.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Item-Shadow-768x469.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Item-Shadow-620x379.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That\u2019s it for the set of options available if you go for the <em>Boxed <\/em>Item Layout.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While we are going to switch back to the previously styled layout for our design (<em>Date Boxed<\/em>), you can pick whichever layout you like for your own blog carousel.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once again, make sure to hit the <em>Update<\/em> button when 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=\"404\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Carousel-Update.jpg\" class=\"attachment-full size-full\" alt=\"Blog Carousel Update\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Carousel-Update.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Carousel-Update-300x125.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Carousel-Update-768x320.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Blog-Carousel-Update-620x258.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\">Wrapping Things Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]And we\u2019ve reached the end of our tutorial on how to create a blog carousel using the Qi Addons for Elementor\u2019s practical Blog Carousel widget. If you make sure to go inspect each option we presented in this tutorial, then you should have a pretty good idea of what you are working with and should be able to customize your own widget according to your preferences in no time.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can either go for the design we created, find the inspiration on the official widget page, or go ahead and use the detailed options we presented in this tutorial to customize the design of the carousel that is entirely unique and corresponds with your own design vision. In that case, you should feel free to play around with the different content and styling options, experiment with slider layouts and customize the buttons, icons, and the rest of the content items to create the design of the blog carousel that best works for you.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s how to make the most out of Qi Addons for Elementor&#8217;s Blog Carousel widget and effectively display a selection of some of your best blog posts. <\/p>\n","protected":false},"author":2,"featured_media":38838,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[257,108,4,13],"class_list":["post-38722","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-blog","tag-qi-addons","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/38722","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=38722"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/38722\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/38838"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=38722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=38722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=38722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}