{"id":35953,"date":"2022-03-27T15:00:14","date_gmt":"2022-03-27T13:00:14","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=35953"},"modified":"2022-04-07T12:31:23","modified_gmt":"2022-04-07T10:31:23","slug":"how-to-create-info-box-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-info-box-in-wordpress\/","title":{"rendered":"How to Create an Info Box in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]If you wish to add more credibility to your brand and engage your visitors in a practical, but captivating manner, info boxes are just what you need. By incorporating these handy elements into your site, you can <strong>convey all sorts of useful messages to your visitors<\/strong>. An info box can help you effectively present anything and everything related to you and your brand \u2013 from<strong> offering useful information about your company or the people you work with<\/strong> to sharing useful links and <strong>showcasing any pieces of content you\u2019re proud of<\/strong>, all the way to <strong>highlighting important characteristics about your products and services.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This time around, we will show you how you can easily create, stylize, and <strong>add an info box to your WordPress site using the Qi Addons for Elementor plugin and its versatile Info Box widget<\/strong>. This widget is packed full with tons of different customization and stylization options, allowing you to craft all sorts of diverse and engaging info boxes and add them anywhere you want on your site. We are going to go through all the steps needed to create one such element from scratch, and share most of its available options, so make sure to keep reading.[\/vc_column_text][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\">Creating an Info Box in WordPress With the Qi Addons for Elementor Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Coming with 60 premade custom widgets, <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> is easily one of the most versatile collections of Elementor addons on the market, including anything from creative and showcase addons all the way to WooCommerce and business-oriented ones. It allows you to build and add all sorts of beautiful and practical elements to make your website pages and sections appear more unique, professional, and engaging as a whole.[\/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\/2021\/01\/Qi-Addons-For-Elementor.jpg\" class=\"attachment-full size-full\" alt=\"Qi Addons For Elementor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Qi-Addons-For-Elementor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Qi-Addons-For-Elementor-300x153.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Qi-Addons-For-Elementor-768x391.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Qi-Addons-For-Elementor-620x315.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]One such element is the widget we will talk about today \u2013 <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/info-box\/\" target=\"_blank\" rel=\"noopener\">Info Box<\/a>. Not only is this widget extremely practical and easily customizable, but it also comes with all sorts of stylization options that will allow you to<strong> style your text, icons, and buttons, as well as add different kinds of backgrounds and background images, set borders and paddings<\/strong>, and plenty more. In short, you\u2019ll get everything you need to present any kind of information to your visitors in a visually appealing and captivating manner.[\/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=\"476\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Widget-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Widget-768x377.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Widget-620x305.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Without further ado, here\u2019s our step-by-step guide you can use to learn how to create info boxes using the Info Box widget to help improve your user engagement and ultimately increase conversions on your WordPress site. And if you prefer to watch videos, we suggest that you check out our video tutorial on the same subject:[\/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\/YmO-9IP6XNA\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adding the Widget to Your Page and Customizing Its Content<\/h3>\n<p>[\/vc_column_text][vc_column_text]Once you go to your Elementor page, first you need to search for an Info Box widget in the Elementor sidebar.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Search-for-Info-Box-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Search for Info Box Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Search-for-Info-Box-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Search-for-Info-Box-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Search-for-Info-Box-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Search-for-Info-Box-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 to the right side of the screen, and you will see what the info box widget looks like by default. It consists of a title, subtitle, and text field.<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=\"629\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Default-Setting.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Default Setting\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Default-Setting.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Default-Setting-300x195.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Default-Setting-768x499.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Default-Setting-620x402.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To start off, you should <strong>replace the default subtitle text with your own in the <em>Subtitle<\/em> field<\/strong> (located in the <em>General<\/em> options section on the left), just like we did:[\/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\/03\/Info-Box-Subtitle.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Subtitle\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Subtitle.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Subtitle-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Subtitle-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Subtitle-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, right below, there\u2019s the <em>Title<\/em> field, where you will get to insert your desired title.[\/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=\"559\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Title\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-768x443.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-620x358.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, <strong>in the <em>Text<\/em> field, you will be able to place your text.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This text will appear in the larger section of your widget, right below the title and subtitle:<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=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, by<strong> clicking on the<em> Icon Type<\/em> field, you will open the icon library<\/strong> where you will be able to change your icon.[\/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\/03\/Info-Box-Icon-Type.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Icon Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Type-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Type-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Type-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve searched the library to find the chart icon because that\u2019s what we wanted to use 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=\"645\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Insert-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Insert Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Insert-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Insert-Icon-300x200.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Insert-Icon-768x511.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Insert-Icon-620x413.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should select your desired icon here and then hit the <em>Insert<\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what our new icon looks like when inserted within the info box widget:<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=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Inserted.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Icon Inserted\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Inserted.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Inserted-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Inserted-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Inserted-620x355.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 make your info box clickable if you add a link in the <em>Link<\/em> field. We\u2019ve only set a hashtag as a placeholder, and this will be enough for the button to appear in our 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=\"557\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Link.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Link\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Link.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Link-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Link-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Link-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>Enable Link Overlay<\/em> option will allow you to choose whether the link you\u2019ve selected will cover the entire info box like an overlay or not. By selecting <em>Yes<\/em>, the entire widget will become clickable \u2013 wherever you hover with your cursor (this is the option we\u2019ve selected for our widget). And if you select <em>No<\/em>, only the button, the title, and the icon will be clickable. We\u2019ve enabled the link overlay for our info box 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=\"605\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Link-Overlay.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Link Overlay\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Link-Overlay.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Link-Overlay-300x187.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Link-Overlay-768x480.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Link-Overlay-620x387.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, by clicking on the <em>Button<\/em> section, you will open a whole new set of options dedicated to the button 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=\"531\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-768x421.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-620x340.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first one is the <strong><em>Layout<\/em> option that allows you to choose the type of button you will use \u2013 Filled, Outlined, or Textual<\/strong> (this is the one we\u2019ve set for our button):[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Layout.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Layout\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Layout.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Layout-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Layout-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Layout-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Afterward, you can also choose whether you want to <em>Enable Button Text Underline<\/em>, and replace the <em>Button Text<\/em>, like we did:[\/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\/03\/Info-Box-Button-Text.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Text-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Text-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Text-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 <strong>the <em>Button Icon<\/em> section where you can pick an icon for your button<\/strong>. Once again, you will be able to choose the icon from the library or hit the <em>Upload SVG<\/em> button to upload your own.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-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 used an SVG that is already in our library. Just make sure to hit the <em>Insert Media<\/em> button once you\u2019re done.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Insert-Media.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Insert Media\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Insert-Media.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Insert-Media-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Insert-Media-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Insert-Media-620x448.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\/03\/Info-Box-Button-Arrow.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Arrow\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Arrow.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Arrow-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Arrow-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Arrow-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 also choose whether the <em>Icon Position<\/em> will be on the left or on the right of the button text (we\u2019ve chosen the latter 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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Position.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Icon Position\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Position.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Position-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Position-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Position-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\">Styling the Info Box Widget<\/h3>\n<p>[\/vc_column_text][vc_column_text]Now, we will explore another set of options located in the <em>Style<\/em> tab. Here you will be able to set the styling of your info box in complete detail.[\/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=\"583\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Style-Tab-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Style-Tab-768x462.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Style-Tab-620x373.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]First and foremost, in the <em>Style<\/em> section, you will be able to set the minimum height (<em>Min Height<\/em>) of your widget. You won\u2019t see the changes right away if you start increasing its values, but once the values surpass the default ones, you will see that the height of your info box has increased.[\/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\/03\/Info-Box-Min-Height.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Min Height\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Min-Height.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Min-Height-300x192.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Min-Height-768x492.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Min-Height-620x397.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 use the <em>Content Vertical Alignment<\/em> option to move the position of your widget\u2019s content. You can place it at the top, in the middle, or at the bottom.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve put ours at the top and restored the minimum height, since we only wanted to show you how the space around your widget can change depending on the options you pick.[\/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=\"617\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Content-Vertical-Alignment.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Content Vertical Alignment\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Content-Vertical-Alignment.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Content-Vertical-Alignment-300x191.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Content-Vertical-Alignment-768x489.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Content-Vertical-Alignment-620x395.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Similarly, the <em>Alignment<\/em> option will let you align your content to the left, middle, or right. You should note, however, that this option does not affect the icon \u2013 there\u2019s a separate option for that, but more on that later. As for our content alignment, we set it 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=\"624\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Alignment.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Alignment\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Alignment.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Alignment-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Alignment-768x495.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Alignment-620x399.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you will be able to <strong>use the <em>Normal<\/em> and <em>Hover<\/em> toggle switches<\/strong> to set the background type option underneath and <strong>determine what your background will look like when the info box is displayed normally and on hover<\/strong>. We will be showing you how to set this option when the switch is set on <em>Normal<\/em> first.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The <em>Background type<\/em> option itself has two options \u2013 Classic and Gradient<\/strong>. The classic background type lets you add an image as your background or choose a solid color instead.[\/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=\"501\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Background-Type.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Background Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Background-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Background-Type-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Background-Type-768x397.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Background-Type-620x321.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The second, gradient type allows you to set the gradient, two-colored background. After you pick the first color, the second color will activate automatically. Of course, you can change the second color according to your preferences as well. We\u2019ve picked the hex code #C39A9A for the first, and #F2295B for the second background color, just to show you a quick example of what this background type can look like.[\/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=\"468\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Gradient Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-300x145.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-768x371.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-620x299.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also use the <em>Location<\/em> option to determine how much space the color will take up. The same option is available for the second color 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=\"463\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-Location.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Gradient Color Location\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-Location.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-Location-300x143.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-Location-768x367.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-Location-620x296.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Type<\/em> option will allow you to pick the <em>Linear<\/em> or <em>Radial<\/em> gradient background type. If you choose the <em>Linear<\/em> option, you will also be able to use the <em>Angle<\/em> option and shift the angle where the colors blend.[\/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\/03\/Info-Box-Gradient-Color-Location-Type.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Gradient Color Location Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-Location-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-Location-Type-300x177.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-Location-Type-768x454.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-Location-Type-620x367.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]By choosing <em>Radial<\/em>, you get the possibility to choose the origin point of the first color from the dropdown. Some of the available origin points include Center Center, Center Left, Center Right, Top Center, and so 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=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-Location-Radial.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Gradient Color Location Radial\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-Location-Radial.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-Location-Radial-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-Location-Radial-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Gradient-Color-Location-Radial-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]These were just a few examples of what your info box can look like if you opt for the Gradient background type. Of course, you should feel free to play around with the options until you find the combination of colors that work the best for you.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you choose the Classic background type, you will be able to pick one color either by using the color selector or entering a hex code. We\u2019ve chosen a light gray color for ours using the hex code #f9f9f9.[\/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=\"606\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Background-Type-Color.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Background Type Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Background-Type-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Background-Type-Color-300x188.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Background-Type-Color-768x480.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Background-Type-Color-620x388.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]All these settings were related to the Normal display of the info box widget. Once you switch to <em>Hover<\/em>, you will be able to set the option called <em>Hover Color<\/em>. This option will allow you to choose the background color that will appear when you hover over your info box. We\u2019ve used the hex code #f3f3f3 that will make this background color just a tad darker than the normal background color:[\/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\/03\/Info-Box-Background-Hover-Color.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Background Hover Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Background-Hover-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Background-Hover-Color-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Background-Hover-Color-768x452.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Background-Hover-Color-620x365.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 use the options to style your text. The first one is the <em>Title Tag<\/em> option that will allow you to choose the title tag from H1, H2, H3, etc. We\u2019ve used the H2 title tag 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=\"534\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Tag.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Title Tag\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Tag.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Tag-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Tag-768x423.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Tag-620x342.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 Color<\/em> option allows you to set the color of your title, while the <em>Title Hover Color<\/em> lets you choose the color that will appear when you hover over your title. Here\u2019s an example of what your title can look like when you hover over 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=\"523\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Hover-Color.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Title Hover Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Hover-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Hover-Color-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Hover-Color-768x415.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Hover-Color-620x335.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 Typography<\/em> is a whole separate set of options you can use to further adjust the look of your title\u2019s fonts, including picking the font family, font size, weight, style, using the decoration options, and so 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=\"542\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Title Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Typography-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Typography-768x430.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Typography-620x347.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, you have a similar set of options for the <em>Subtitle<\/em> \u2013 including the <em>Subtitle Tag<\/em> (we\u2019ve chosen the P tag for ours), <em>Subtitle Color<\/em>, and the <em>Subtitle Typography<\/em> with the same set of options like the <em>Title Typography<\/em>. The only thing we\u2019ve changed in the <em>Subtitle Typography<\/em> options is the <em>Weight<\/em>, which we\u2019ve set 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=\"588\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Subtitle-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Subtitle Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Subtitle-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Subtitle-Typography-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Subtitle-Typography-768x466.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Subtitle-Typography-620x376.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, you also have the <em>Text Color<\/em> (allowing you to choose any color you like for the text) and <em>Text Typography<\/em> options (the same as Title and Subtitle Typography 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=\"443\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Text Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Typography-300x137.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Typography-768x351.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Typography-620x283.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>Icon Style<\/em> section \u2013 here you will find a list of options allowing you to style the icon of your info box widget.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Style.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Icon Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first option allows you to set the <em>Icon Alignment<\/em>, like the text alignment option we\u2019ve mentioned in the beginning. You can use this option to make the icon match the alignment of your text. We\u2019ve left ours at the center to match with the text 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=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Alignment.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Icon Alignment\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Alignment.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Alignment-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Alignment-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Alignment-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 indicates, the <em>Icon Size<\/em> option allows you to determine the desired size of your icon. We\u2019ve put 50px 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\/03\/Info-Box-Icon-Size.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Icon Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Size-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Size-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Size-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>Icon Color<\/em> uses the standard color picker to choose the color of your icon. We\u2019ve added a hex code (#dbdbdb) and made our icon appear light gray.[\/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=\"529\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Color.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Icon Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Color-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Color-768x419.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Color-620x338.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, you have the <em>Icon Hover Color<\/em> \u2013 keep in mind, however, that this option will work only if you don\u2019t have the link overlay option enabled. So, in case the color you picked for the icon isn\u2019t showing on hover, you should go back to the Content tab, disable the <em>Enable Link Overlay<\/em> option, and the setting you picked will work.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The next, <em>Spacing Style<\/em> section, takes care of all the options related to the spacing of the elements in your info box.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]One such option is the <em>Holder Padding<\/em> which creates more space around your info box content. You can set the same values for each field at once, or delink the values to enter the separate value for each field (top, left, right and bottom). We\u2019ve delinked the values and entered 93px for the top, 103px for the bottom, and 0px for the right and left field.[\/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=\"504\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Holder-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Holder Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Holder-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Holder-Padding-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Holder-Padding-768x399.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Holder-Padding-620x322.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Right after, there\u2019s the <em>Subtitle Margin Bottom<\/em> option you can use to add more space under the subtitle. We\u2019ve put 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=\"498\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Subtitle-Margin-Bottom.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Subtitle Margin Bottom\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Subtitle-Margin-Bottom.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Subtitle-Margin-Bottom-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Subtitle-Margin-Bottom-768x395.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Subtitle-Margin-Bottom-620x319.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 Margin Bottom<\/em> option allows you to do the same, only for the space under the title so you can have more space between the title and the text (we\u2019ve set it to be 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=\"499\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Margin-Bottom.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Title Margin Bottom\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Margin-Bottom.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Margin-Bottom-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Margin-Bottom-768x395.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Title-Margin-Bottom-620x319.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Text Margin Bottom<\/em> lets you put more space below the text and thus push the button in your info box lower. We\u2019ve entered 29px 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=\"505\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Margin-Bottom.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Text Margin Bottom\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Margin-Bottom.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Margin-Bottom-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Margin-Bottom-768x400.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Margin-Bottom-620x323.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Text Padding<\/em> option will let you create more space all around your body of text. We\u2019ve delinked the fields to set different values for each field and used percentages. So, we\u2019ve put 12% for the right and left text padding:[\/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=\"504\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Text Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Padding-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Padding-768x399.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Text-Padding-620x322.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>Icon Margin<\/em> is the last option, allowing you to increase the space around the icon (we\u2019ve set it to 24px).[\/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\/03\/Info-Box-Icon-Margin.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Icon Margin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Margin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Margin-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Margin-768x395.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Icon-Margin-620x319.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Button Style<\/em> settings contain a whole other set of options you can use to style your button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once again, there are the Normal and Hover switches containing a separate set of options to style the look of your button when displayed normally and on hover.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the Normal toggle switch, you can see there\u2019s the <em>Text Color<\/em> option. As our button is set to be pretty minimalist, there\u2019s only one option available. But if you were to choose a Filled or Outlined button type, for example, this is where you will also be able to set their background and border colors, 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=\"507\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Style.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Style-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Style-768x402.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Style-620x324.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Another set of options you will only be able to use if you pick a FIlled or Outlined button type are Border Width, Border Radius, and Border Padding.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, here\u2019s what this section can look like if you choose one of the other two available button types:<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=\"517\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Style-Section.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Style Section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Style-Section.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Style-Section-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Style-Section-768x410.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Style-Section-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>Hover<\/em> toggle switch, there is the option allowing you to set your<em> Text Hover Color<\/em> (with the <em>Background Hover Color<\/em> and<em> Border Hover Color<\/em> options also available if you choose one of the two other button types).[\/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=\"503\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Hover-Color.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Hover Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Hover-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Hover-Color-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Hover-Color-768x399.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Hover-Color-620x322.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, there\u2019s also the <em>Typography<\/em> option in the<em> Button Style<\/em> settings which has the same settings we\u2019ve mentioned in other typography options so far. We\u2019ve used these options to set the button text size 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=\"567\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Text-Size.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Text Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Text-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Text-Size-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Text-Size-768x449.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Text-Size-620x363.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><em>Button Icon Style<\/em> section<\/strong> \u2013 here you will be able to use the options to adjust the icon that appears on the right of your button text. You can move the icon slider or set the size in the box next to it (we\u2019ve made it to be 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=\"476\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Size.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Icon Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Size-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Size-768x377.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Size-620x305.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also change the<em> Icon Color<\/em> that appears in the normal display 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=\"579\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Color.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Icon Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Color-300x179.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Color-768x459.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Color-620x370.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, the <em>Hover<\/em> switch has only one option named <em>Move Icon<\/em> that allows you to choose the way your icon will move when hovered upon (which will create a small animation of sorts). You will be able to choose from Horizontal Short (which is our default), Horizontal, Vertical, Diagonal, and None.[\/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=\"500\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Move-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Move Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Move-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Move-Icon-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Move-Icon-768x396.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Move-Icon-620x320.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here\u2019s an effect one of these options can have on your button icon when you hover over 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\/03\/Info-Box-Move-Icon.gif\" class=\"attachment-full size-full\" alt=\"Info Box Move Icon\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Afterward, you can use the <em>Icon Margin<\/em> option to set the values and change the position of your icon (and move it closer or further away from the button text by doing so). We\u2019ve delinked these fields and put 3px at the top and 10px on the left (leaving the others blank).[\/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=\"510\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Margin.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Icon Margin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Margin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Margin-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Margin-768x404.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Icon-Margin-620x326.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Button Inner Border<\/em> style set of options is empty because we are using the Textual button layout for our button example. So, to use these options, you need to pick the inner border layout instead.[\/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\/03\/Info-Box-Button-Inner-Border-Style.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Inner Border Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Inner-Border-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Inner-Border-Style-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Inner-Border-Style-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Inner-Border-Style-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On the other hand, the <em>Button Underline Style<\/em> is an option that we were able to use since we\u2019ve enabled the Button Text Underline option in our Content settings tab earlier.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once again, there are Normal and Hover switches. Under the <em>Normal<\/em> switch, you will have the option to choose the <em>Underline Color<\/em> (so you can set the color of the underline only without affecting the button text or its icon).[\/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=\"558\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Color.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Underline Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Color-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Color-768x442.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Color-620x357.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The similar option (<em>Underline Hover Color<\/em>) is available in the Hover display. It allows you to set the underline color that will appear only when you hover over your button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"557\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Hover-Color.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Underline Hover Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Hover-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Hover-Color-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Hover-Color-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Hover-Color-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Another option is the <em>Underline Hover Width<\/em> (with the same version available under the Normal switch called <em>Underline Width<\/em>). We\u2019ve left both of these settings at default, but if you want, you can use these two options to change the width of the underline.[\/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\/03\/Info-Box-Button-Underline-Hover-Width.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Underline Hover Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Hover-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Hover-Width-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Hover-Width-768x429.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Hover-Width-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Another option in the Hover settings is the <em>Enable Hover Underline Draw<\/em> option that allows you to add an effect to your underline that will appear on hover. Here\u2019s what this effect will look like when you switch this setting to Yes:[\/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\/03\/Info-Box-Underline-Draw.gif\" class=\"attachment-full size-full\" alt=\"Info Box Underline Draw\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Apart from the settings in the Normal and Hover tabs, there\u2019s also the <em>Underline Offset<\/em> option that lets you move the underline closer or away from the button text. We\u2019ve set 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=\"543\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Offset.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button-Underline Offset\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Offset.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Offset-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Offset-768x430.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Offset-620x347.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Underline Thickness<\/em> is another option available here that can be used to make your line thicker.[\/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=\"543\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Thickness.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Underline Thickness\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Thickness.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Thickness-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Thickness-768x430.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Thickness-620x347.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>Underline Alignment<\/em> option allows you to use the dropdown and choose Left, Right, or 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=\"533\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Alignment.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Underline Alignment\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Alignment.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Alignment-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Alignment-768x422.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Alignment-620x341.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As this can be seen more easily if we change the <em>Underline Width<\/em>, we will change this option as well for only a moment to show you what this can look like. So, we\u2019ve set the underline width to 38px and then changed the underline alignment from left to right (the same will happen if you move it to Center). Now you can easily see the way the underline moves its place:[\/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=\"496\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Alignment-Right.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Button Underline Alignment Right\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Alignment-Right.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Alignment-Right-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Alignment-Right-768x393.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Button-Underline-Alignment-Right-620x317.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve reset the last two options as we only wanted to use them to demonstrate how this can change the appearance of your button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The last tab, <em>Advanced<\/em>, has a few useful options related to the positioning of your widget, responsiveness, entrance animations, etc. However, since this tab and its settings are available for all other widgets, we won\u2019t be covering them in this tutorial.[\/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\/03\/Info-Box-Advanced-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Advanced Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Advanced-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Advanced-Settings-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Advanced-Settings-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Advanced-Settings-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And one last thing \u2013 in case you wish to use more than one info box at once but you like the look of the one you\u2019ve created already, you can simply duplicate the one you\u2019ve made and work from there. To do this, simply <strong>right-click on your widget and choose <em>Duplicate<\/em>.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Duplicate-Info-Box.jpg\" class=\"attachment-full size-full\" alt=\"Duplicate Info Box\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Duplicate-Info-Box.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Duplicate-Info-Box-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Duplicate-Info-Box-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Duplicate-Info-Box-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then place your duplicated info box(es) into the desired column(s) and you\u2019ll be all set.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s the final look of the three different info boxes we\u2019ve added. We\u2019ve changed the content in the other info boxes slightly and changed the icons while keeping the rest of the settings the same:[\/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\/03\/Info-Box-Final-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Info Box Final Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Final-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Final-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Final-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Info-Box-Final-Preview-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\">Wrapping Things Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]And that completes our guide on adding and customizing the info box widget in WordPress using the Qi Addons for Elementor plugin. The example we\u2019ve used for this tutorial is just one of the countless info box designs you can create, and it should give you a good idea of what you can expect by using some of its many available customization and stylization options. To get more familiar with some of the possible design examples and variations, we suggest that you visit the official widget\u2019s page. No matter whether you end up copying one of the available design suggestions or decide to make a unique info box that will be customized completely according to your preferences, we hope this tutorial has helped you get better acquainted with the possibilities the Info Box widget provides.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Stick around as we show you how to create and stylize an info box in WordPress with the Qi Addons for Elementor plugin and its practical Info Box widget. <\/p>\n","protected":false},"author":2,"featured_media":36042,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[193,108,41],"class_list":["post-35953","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-elementor","tag-qi-addons","tag-widget"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35953","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=35953"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35953\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/36042"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=35953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=35953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=35953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}