{"id":36698,"date":"2022-04-18T15:00:02","date_gmt":"2022-04-18T13:00:02","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=36698"},"modified":"2023-05-25T15:52:45","modified_gmt":"2023-05-25T13:52:45","slug":"how-to-create-banner-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-banner-in-wordpress\/","title":{"rendered":"How to Create a Banner in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Banners have been around for about as long as the internet has: if you hadn\u2019t been living under a rock, you must have seen countless examples. In this tutorial, we will be showing you <strong>a quick and easy way to create a banner<\/strong> in WordPress.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But before we get into the nitty-gritty of the how-to, we\u2019d like to discuss what a banner actually is and when you should consider a banner as an addition to your WordPress website. If you are already sure you need a banner, feel free to skip right down to the instructional section. This is what we\u2019ll be talking about:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#banner-in-web-design\">What Is a Banner in Web Design<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#when-to-use-banner\">When to Use a Banner<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-banner-using-qi-addons\">How to Create a Banner Using Qi Addons for Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-banner-using-qi-blocks-for-gutenberg\">How to Create a Banner Using Qi Blocks for Gutenberg<\/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=\"banner-in-web-design\"><\/a>What Is a Banner in Web Design<\/h2>\n<p>[\/vc_column_text][vc_column_text]Banners are <strong>a popular means of delivering advertisements<\/strong> online, but, in more abstract terms, they are images designed to inform your visitors and lead them to a section of your website (or a partner\u2019s website, in case of banner ads) where you want them to go.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Basically, <strong>banners consist of graphics and text<\/strong> designed to convey enough information for a visitor to click on it and reach a sales page relatively quickly. They can be interactive and animated or static, but, either way, they are meant to draw attention to either your own brand, product, or service, or a partner\u2019s.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this tutorial, <strong>we will be dealing with the static banner<\/strong>, which can nonetheless have some animation to it. If you are looking for something flashier, perhaps the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/interactive-banners\/\" target=\"_blank\" rel=\"noopener\">interactive banner<\/a> widget is a better choice for you.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"when-to-use-banner\"><\/a>When to Use a Banner<\/h2>\n<p>[\/vc_column_text][vc_column_text]A banner is <strong>often used for ads<\/strong>: you could monetize your online real estate by leasing it out to other parties for ad space.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, a banner doesn\u2019t need to be an external ad: you could <strong>use it very effectively to advertise a sale<\/strong> or similar bargain for your own shop, showcase a new project or product, or simply make an important announcement. You can make the banner look however you want, and make it lead the user to where they want to go.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Oftentimes, a banner may feel foreign to a website. If you have full control of the banner\u2019s design, you can <strong>make it look like a part of your website<\/strong>, rather than an element which leads the user away from the content they came to your website for, and therefore diminishes your profits.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The banner solution we will be showcasing below provides you with a broad gamut of styling options and controls, so that you can make it fit your brand or your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-banner-using-qi-addons\"><\/a>How to Create a Banner Using Qi Addons for Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]Our very own <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> is a plugin that expands Elementor\u2019s already impressive collection of functionalities by introducing <strong>60 brand-new, beautifully designed widgets<\/strong> for all kinds of websites, from personal portfolios to online stores. The <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/banners\/\" target=\"_blank\" rel=\"noopener\">banners widget<\/a> is just one of them, and one of the simpler ones, but even it has a virtually unlimited range of options and settings.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]All you need to do to get started with creating banners for your WordPress website is install the newest version of Elementor (Qi Addons will work with the free version of Elementor) and <strong>the newest version of Qi Addons<\/strong> from our website. As its name suggests, Qi Addons will not work with other page editors.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With Qi Addons for Elementor, you can create an amazing banner within minutes, as evidenced in the video below:[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/Y_cBj0g5vS8\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you prefer a text tutorial, though, just keep on reading.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will be using Qi Addons for Elementor to add a banner to a post, but it works just as well for a page. We started with a post and gave it a title.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To start creating a banner, find the <strong>Banners<\/strong> element in the left hand-side menu and drag it to where you want it on the page. As you can see, your banner comes with some placeholder graphics and text.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"620\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Drag-and-Drop-Banners.jpg\" class=\"attachment-full size-full\" alt=\"Drag and Drop Banners\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Drag-and-Drop-Banners.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Drag-and-Drop-Banners-300x192.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Drag-and-Drop-Banners-768x491.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Drag-and-Drop-Banners-620x397.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To customize it, start with the <strong>Content<\/strong> tab and its <strong>General<\/strong> section. For the <strong>Layout<\/strong>, we will select the <em>Standard<\/em> option, but you can also choose an <em>In Box<\/em> layout if you want the text to stand out more. You can (and should) select an <strong>Image<\/strong> from your media library or upload an image for the background by clicking on the <strong>Image<\/strong> field.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you have an image in place, you can change the <strong>Image Proportions<\/strong> to suit your website layout and style. There is a range of size and ratio options to choose from, from <em>Thumbnail<\/em> to <em>Huge Square<\/em>. We have gone with <em>Original<\/em> for this demonstration, keeping the original aspect ratio of the image.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you wish, you can add a button to your banner. To do so, select <em>Yes<\/em> from the <strong>Enable Button<\/strong> menu, as we have. In the <strong>Link<\/strong> field, you need to add a link to the page you wish your visitors to go to when clicking on the banner. Finally, the <strong>Enable Link Overlay<\/strong> option lets you have your entire banner act as an anchor for the link you entered, instead of just the button. This is what we will do by leaving the menu on its default value of <em>Yes<\/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=\"696\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-General.jpg\" class=\"attachment-full size-full\" alt=\"Banner Content General\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-General.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-General-300x215.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-General-768x552.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-General-620x445.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on to the <strong>Content<\/strong> section of the tab, we find the <strong>Title<\/strong>, <strong>Subtitle<\/strong>, and <strong>Text<\/strong> fields. We will not be using a subtitle for this demonstration, so we are leaving it blank. We will enter a sample <strong>Title<\/strong> and <strong>Text<\/strong> to replace the placeholder.[\/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=\"590\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content.jpg\" class=\"attachment-full size-full\" alt=\"Banner Content\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-300x183.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-768x468.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-620x378.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <strong>Button<\/strong> section, you will find the customization options for your banner\u2019s button. For the <strong>Layout<\/strong>, we are sticking with the default <em>Filled<\/em>, but you can also have an <em>Outlined<\/em> or <em>Textual<\/em> button, while for the <strong>Type<\/strong>, we will also choose the default <em>Standard<\/em>, while you can choose between it and the <em>With Inner Border<\/em> and <em>Boxed<\/em> options.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Enable Button Text Underline<\/strong> menu lets you set up an underline below the text. We will not be using it for this demonstration. The <strong>Size<\/strong> menu contains the size options for the button and can be set to <em>Normal<\/em>, <em>Small<\/em>, <em>Large<\/em> and <em>Normal Full Width<\/em>. We will be leaving these controls at the default values, too.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, we will change the<strong> Button Text<\/strong> to say <em>View More<\/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=\"570\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Button.jpg\" class=\"attachment-full size-full\" alt=\"Banner Content Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Button-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Button-768x452.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Button-620x365.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The final section of this tab which we will discuss is the <strong>Button Icon<\/strong> section. Here, you can select an <strong>Icon<\/strong> for your button. It is blank by default, and you can leave it that way, or you can select one from the icon library or upload an SVG by clicking on the <strong>Icon<\/strong> field. We have gone with an arrow icon from our media library.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the <strong>Icon Position<\/strong>, we have opted to keep the icon to the <em>Right<\/em> of the text, but you could also choose left, if it suits your design 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=\"600\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Banner Button Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Icon-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Icon-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Icon-620x384.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on to the <strong>Style<\/strong> tab, the first section up is the <strong>Content Style<\/strong>. To change our <strong>Banner Padding<\/strong>, we will first <strong>unlink<\/strong> the padding values, as we don\u2019t want an even padding around the banner content. We will set the <em>Right<\/em> and <em>Left<\/em> padding to <em>20%<\/em>. As for the <strong>Banner Border Radius<\/strong>, we will not be using it in this demonstration. It is used to give curvature to the edges of the banner, and we want ours rectangular.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Banner Box Shadow<\/strong> and <strong>Hover Banner Box Shadow<\/strong> controls are used to set up a shadow for the banner box when inactive and on mouse hover, respectively. We will not be using them for this banner.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Content Vertical Alignment<\/strong> and <strong>Content Horizontal Alignment<\/strong> controls let you align the banner content (the text and the button). We will set them to <em>Middle<\/em> and <em>Center<\/em>, respectively.[\/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=\"582\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Style.jpg\" class=\"attachment-full size-full\" alt=\"Banner Content Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Style-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Style-768x461.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Style-620x372.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Style<\/strong> section of the tab contains the textual content options: the <strong>Tag<\/strong>, <strong>Color<\/strong>, and <strong>Typography<\/strong> options for the <strong>Title<\/strong>, <strong>Subtitle<\/strong> and <strong>Text<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will switch the <strong>Title Tag<\/strong> to H2 and select a plain white for the <strong>Title Color<\/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=\"585\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style.jpg\" class=\"attachment-full size-full\" alt=\"Banner Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style-300x181.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style-768x464.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style-620x374.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For the<strong> Title Typography<\/strong> options, we will select a different font <strong>Family<\/strong> (<em>DM Serif Display<\/em>) and set the <strong>Size<\/strong> slider to <em>60 pixels<\/em>. We will not be using the <strong>Weight<\/strong> (boldness) option, but we will set the <strong>Transform<\/strong> menu to <em>Uppercase<\/em> (other options include <em>Lowercase<\/em> and <em>Capitalize<\/em>), and the <strong>Style<\/strong> to <em>Italic<\/em>. We will not be using the <strong>Decoration<\/strong> menu, but you can use it to add an <em>Underline<\/em>, <em>Line Over<\/em> or <em>Line Through<\/em> to your text.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To put some more space between the title and the text, we will set the <strong>Line-Height<\/strong> slider to <em>59 pixels<\/em>. We will not change the <strong>Letter Spacing<\/strong> for this banner.[\/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=\"648\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style-Title-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Banner Style Title Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style-Title-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style-Title-Typography-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style-Title-Typography-768x514.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style-Title-Typography-620x415.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We are not using a subtitle, so we will not be needing any of the subtitle styling options.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the <strong>Text Tag<\/strong>, we will go with <em>H5<\/em>. We will also use white for the <strong>Text Color<\/strong>, and <em>400<\/em> for the <strong>Weight<\/strong> in the <strong>Text Typography<\/strong> 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=\"588\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Text-Style.jpg\" class=\"attachment-full size-full\" alt=\"Banner Text Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Text-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Text-Style-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Text-Style-768x466.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Text-Style-620x376.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on, we find the <strong>Spacing Style<\/strong> section. Here we can set the spacing for the top margin of <strong>Title<\/strong>, <strong>Text<\/strong>, and <strong>Button<\/strong>. For this banner design, we will set the <strong>Text Margin Top<\/strong> to <em>21 pixels<\/em>, and the <strong>Button Margin Top<\/strong> to <em>52 pixels<\/em>. We will not be using the <strong>Title Margin Top<\/strong> 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=\"603\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Spacing-Style.jpg\" class=\"attachment-full size-full\" alt=\"Banner Spacing Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Spacing-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Spacing-Style-300x187.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Spacing-Style-768x478.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Spacing-Style-620x386.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <strong>Button Style<\/strong> section, we find the <strong>Typography<\/strong> options again. We have covered them before, and we will not be using them to style our button. Next down is the <strong>Normal\/Hover<\/strong> toggle. Whichever settings you use while the switch is set to <strong>Normal<\/strong> will affect the button while it is inactive. Switching to <strong>Hover<\/strong> will let you set up special behaviour for the button on mouse hover.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Staying in the <strong>Normal<\/strong> mode of the toggle, we will change the button\u2019s <strong>Text Color<\/strong> to a dark grey (#1e1e1e). You could also change the <strong>Background Color<\/strong>, which we will leave at its default white, and we will not be using the <strong>Border<\/strong> controls. Of course, you can set a border for your button, and control its <strong>Color<\/strong>, <strong>Width<\/strong>, <strong>Radius<\/strong> (curvature), and <strong>Padding<\/strong>. We wish to adjust the <strong>Border<\/strong> of our button by entering <em>0<\/em> for all the values thereof, making the button rectangular, and the <strong>Padding<\/strong>. For the <strong>Padding<\/strong>, we will first <strong>unlink<\/strong> the values, and enter <em>14<\/em> for <em>Top<\/em>, <em>40<\/em> for <em>Right<\/em>, <em>13<\/em> for <em>Bottom<\/em> and <em>40<\/em> for <em>Left<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Hover<\/strong> version of the button offers you the option of setting a <strong>Background Hover Color<\/strong> and the <strong>Reveal Background<\/strong> menu. You can use these controls to change the appearance and behaviour of the button once a user hovers over it with their mouse. We are happy with our button, so we won\u2019t be using these 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=\"621\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Style.jpg\" class=\"attachment-full size-full\" alt=\"Banner Button Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Style-300x192.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Style-768x492.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Style-620x397.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on to the <strong>Button Icon Style<\/strong>, we find only three controls: <strong>Icon Size<\/strong>, <strong>Icon Color<\/strong>, and <strong>Icon Margin<\/strong>, as well as the <strong>Normal\/Hover<\/strong> toggle. We will set the<strong> Icon Size<\/strong> to<em> 6 pixels<\/em> and the<strong> Icon Color<\/strong> to a dark grey (#1e1e1e) to match the button text. We won\u2019t be changing the <strong>Icon Margin<\/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=\"576\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Icon-Style.jpg\" class=\"attachment-full size-full\" alt=\"Banner Button Icon Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Icon-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Icon-Style-300x178.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Icon-Style-768x457.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Icon-Style-620x369.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <strong>Hover<\/strong> section of the toggle, you will find the same controls, plus the <strong>Move Icon<\/strong> menu, which controls the animation of the icon. We are happy with the default <strong>Horizontal Short<\/strong> animation, but you can choose between different animations or no animation at all. We will also correct the icon margins a little, by <strong>unlinking<\/strong> the<strong> Icon Margin<\/strong> control and setting the <em>Top<\/em> margin to <em>2 pixels<\/em> and the <em>Left<\/em> to <em>10 pixels<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The next two sections down, the <strong>Button Inner Border Style<\/strong> and <strong>Button Underline Style<\/strong> currently do not have any controls you can use. This is because of the style of our chosen button: it has no inner border or underline. If you choose a different button in a design of yours, you have the options to style all of the button\u2019s elements.[\/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\/04\/Banner-Button-Icon-Hover-Style.jpg\" class=\"attachment-full size-full\" alt=\"Banner Button Icon Hover Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Icon-Hover-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Icon-Hover-Style-300x179.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Icon-Hover-Style-768x459.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Button-Icon-Hover-Style-620x370.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, we come to the <strong>Background Style<\/strong> section. It, too, has a <strong>Normal\/Hover<\/strong> toggle and a single control, <strong>Overlay Color<\/strong>, in the <strong>Normal<\/strong> view. This is the colour of the element background if you want a plain colour or transparent overlay for your banner. We will not be using it in this design.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the <strong>Hover<\/strong> view, we find the <strong>Overlay Color<\/strong> and two additional controls: the<strong> Background Image Hover<\/strong> and the <strong>Background Image Hover Zoom Origin<\/strong> menus. These affect the behaviour of the background image on mouse hover. We will select <em>None<\/em> from the <strong>Background Image Hover<\/strong> menu, meaning that the image won\u2019t be animated \u2013 won\u2019t zoom in or out or move \u2013 on mouse hover. This will also eliminate the <strong>Background Image Hover Zoom Origin<\/strong> menu.[\/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=\"573\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Background-Style.jpg\" class=\"attachment-full size-full\" alt=\"Banner Background Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Background-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Background-Style-300x177.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Background-Style-768x454.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Background-Style-620x367.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And there you have it, a beautiful banner in minutes! And that\u2019s only one out of virtually countless settings.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-banner-using-qi-blocks-for-gutenberg\"><\/a>How to Create a Banner Using Qi Blocks for Gutenberg<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#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=\"537\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Banners-for-Gutenberg.jpg\" class=\"attachment-full size-full\" alt=\"Qi Banners for Gutenberg\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Banners-for-Gutenberg.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Banners-for-Gutenberg-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Banners-for-Gutenberg-768x426.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Banners-for-Gutenberg-620x344.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you prefer to use the Gutenberg block editor to create your websites and pages, you\u2019re lucky \u2013 we have a plugin that can help create banners, too. It\u2019s called <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/\" target=\"_blank\" rel=\"noopener\">Qi Blocks for Gutenberg<\/a>, a collection of more than 80 blocks for the block editor. Some of the blocks are free. Others are only available with the premium version of the plugin. The one we\u2019ll be using \u2013 the <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/banners\/\" target=\"_blank\" rel=\"noopener\">Banners block<\/a> \u2013 is among the free ones. We\u2019ll walk you through creating one of the examples from the block\u2019s web page to show you how to use it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After installing the <a href=\"https:\/\/wordpress.org\/plugins\/qi-blocks\/\" target=\"_blank\" rel=\"noopener\">Qi Blocks for Gutenberg plugin<\/a>, open a page or a post using the block editor. <strong>We created a field with two columns<\/strong>, adding the Banners block to the one on the left using the \u201c+\u201d sign and searching for the block.[\/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=\"469\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Two-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Banner Two Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Two-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Two-Columns-300x145.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Two-Columns-768x372.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Two-Columns-620x300.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you first add the block, it will have some dummy content. To change it, head over to the right hand-side menu, where the <strong>Content options<\/strong> let you choose the layout of the block, the image you want to use with it, whether or not you wish to use the button, as well as the contents of the title, subtitle, and text fields.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With the standard layout and a full-size image we added, <strong>we enabled the button and the link overlay<\/strong>. We added our title and subtitle content for the contents and removed all the sample text.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"453\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Banner Content Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Tab-300x140.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Tab-768x359.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Content-Tab-620x290.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Already, the banner\u2019s looking much better, but we\u2019re not over yet. The next set of options will let us style all the elements in the banner, and we\u2019ll start by styling the content.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The options under <em>Style &gt; Content<\/em> include padding, border radius, shadow options for the box and hover box, and content alignment. The only options we changed here from the default are the vertical alignment, which we set to middle, and the horizontal alignment, which we set to center.[\/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=\"392\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style-1.jpg\" class=\"attachment-full size-full\" alt=\"Banner Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style-1-300x121.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style-1-768x311.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Style-1-620x251.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next set of options, under <em><strong>Style &gt; Text<\/strong><\/em>, is where you can change the tag, color, and typography options for the title, subtitle, and text. For the title, <strong>we changed the title tag to H1 and set the color to #ffffff<\/strong>. For the subtitle, <strong>we changed the color to #ffffff, the font to Caveat, its size to 50px, and the weight to normal<\/strong>. Since we didn\u2019t have any text, there was no need to change the options for 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=\"428\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Subtitle.jpg\" class=\"attachment-full size-full\" alt=\"Banner Subtitle\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Subtitle.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Subtitle-300x133.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Subtitle-768x339.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Subtitle-620x274.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]From here, you can quickly jump to the button options \u2013 they\u2019re separated from the banner options, but you can access them by clicking on the button. The button has its own content and style options, and that\u2019s where you can change how it looks and what it says.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Under the <strong>Content tab<\/strong> of the button options, <strong>we switched the layout to textual, enabled the button underline, changed the text, and added an icon<\/strong>. We set the icon size to 6px, the top icon margin to 3px, and the left icon margin to 10px.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Under the Style tab, we went into the <strong>Button Text Typography<\/strong> options and <strong>set the font size to 17<\/strong>. We\u2019ve set the colors for the normal and hover text of the button to #ffffff. For the underline options, we set the underline offset to 6px.[\/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=\"391\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Underline-Hover.jpg\" class=\"attachment-full size-full\" alt=\"Banner Underline Hover\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Underline-Hover.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Underline-Hover-300x121.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Underline-Hover-768x310.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Underline-Hover-620x250.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Back at the banner options, the <em><strong>Style &gt; Spacing<\/strong><\/em> options let you set the different margins. <strong>We set the top title margin to 8px and the top button margin to 20px<\/strong>, and with that, half of our banner display was 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=\"362\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Margins.jpg\" class=\"attachment-full size-full\" alt=\"Banner Margins\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Margins.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Margins-300x112.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Margins-768x287.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Margins-620x232.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Creating the other half was easy enough \u2013 we duplicated the existing one and moved it to the column to the right. Then, we changed the image and the title, and that was it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"431\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Duplicate.jpg\" class=\"attachment-full size-full\" alt=\"Banner Duplicate\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Duplicate.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Duplicate-300x133.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Duplicate-768x342.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Banner-Duplicate-620x276.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\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you can see, setting up a banner for your WordPress website is easy and quick, and, if you are using Qi Addons for Elementor, it doesn&#8217;t cost you a penny. Sure, there are <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-banner-plugins-for-wordpress\/\">other banner plugins for WordPress<\/a> out there, but they don&#8217;t quite beat the Banners widget we used for this tutorial. So if there is something you\u2019d like to draw your visitors\u2019 attention to, now you know how you can get it done.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Create beautiful and functional banners for your WordPress website. We will show you how it&#8217;s done.<\/p>\n","protected":false},"author":16990,"featured_media":36893,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[247,108,37],"class_list":["post-36698","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-banner","tag-qi-addons","tag-ui"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/36698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=36698"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/36698\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/36893"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=36698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=36698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=36698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}