{"id":28016,"date":"2021-08-09T15:00:45","date_gmt":"2021-08-09T13:00:45","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=28016"},"modified":"2021-08-11T11:43:34","modified_gmt":"2021-08-11T09:43:34","slug":"how-to-create-message-boxes-for-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-message-boxes-for-wordpress\/","title":{"rendered":"How to Create Message Boxes for Your WordPress Website"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]That the internet has changed the way we receive and process information is not just a clich\u00e9: it\u2019s the truth. On the one hand, our <a href=\"https:\/\/www.bostondigital.com\/insights\/shrinking-attention-span-what-it-means-marketers\" target=\"_blank\" rel=\"noopener\">attention spans are shortening<\/a>: people have less and less time for textual content. On the other hand, there is no replacement for it if you want to <strong>convey information with any meaning or complexity.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]One thing you can do to avoid your visitors just skipping a large body of text is <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-write-scannable-blog-content\/\">make your textual content scannable<\/a>, in case all you want is to highlight a few interesting pieces of information. You could also <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-highlight-text-in-wordpress\/\">use highlighted text<\/a> for accents. WordPress message boxes are still another thing you could try: <strong>they stand out clearly from the rest of the text<\/strong> and convey choice bits of information to your visitors.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will show you how to create message boxes for your WordPress website. But before we get into the nitty-gritty, we\u2019d like to discuss the message box in more general terms. If you are sure all you need is to know how to do it, scroll right down to the tutorial section. Here\u2019s what we\u2019ll be talking about:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-a-wordpress-message-box\">What is a WordPress Message Box<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#when-to-use-a-wordpress-message-box\">When to Use a WordPress Message Box<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-a-message-box-using-qi-addons\">How to Create a Message Box in WordPress Using Qi Addons<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-a-wordpress-message-box\"><\/a>What is a WordPress Message Box<\/h2>\n<p>[\/vc_column_text][vc_column_text]A WordPress message box is <strong>a design element used to draw a visitor\u2019s attention to a piece of information<\/strong>. It consists of a box, some text, and possibly icons or other graphics. They typically relate some important information to a website visitor and <strong>stand out from the main body of text<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Also, a message box <strong>can typically be dismissed<\/strong> by clicking on an X sign or other type of close icon. Once the user gets the information, they can remove the message box with one simple click of the mouse and get on with the reading. They look something like this:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Boxes-Example.jpg\" class=\"attachment-full size-full\" alt=\"Message Boxes Example\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Boxes-Example.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Boxes-Example-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Boxes-Example-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Boxes-Example-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"when-to-use-a-wordpress-message-box\"><\/a>When to Use a WordPress Message Box<\/h2>\n<p>[\/vc_column_text][vc_column_text]A message box is best used when you want to <strong>make your visitors pay special attention to a discrete piece of information<\/strong> which may inform the rest of the content, but is not necessary to understand it. It can be closely related to the text, but it needn\u2019t be.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Perhaps the article a visitor is reading is not the first part of a series. In that case, you may want to alert them with a message box that they need to read something else first. Your shop has a special offer related to the text? Maybe you can advertise it in a message box. Your book or film review contains spoilers? Better make that clear ahead of time.<br \/>\n[\/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\"><a id=\"create-a-message-box-using-qi-addons\"><\/a>How to Create a Message Box in WordPress Using Qi Addons<\/h2>\n<p>[\/vc_column_text][vc_column_text]A message box can be created using code or a plugin. We will be using a free plugin, developed by us, called <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons for Elementor<\/a>. Qi Addons expand Elementor\u2019s already formidable palette of widgets with 60 brand-new, beautifully designed elements, one of which is the message box.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With our plugin <strong>you can create eye-catching WordPress message boxes within minutes<\/strong>. All you need to do beforehand is install the latest version of Elementor (the free version is just fine), and then install Qi Addons. Along with Qi Addons for Elementor, we will be using our own <a href=\"https:\/\/qodeinteractive.com\/qi-theme\/\">Qi Theme<\/a>. For best results, we suggest you do, too. If you have already invested in another theme, don\u2019t fret: Qi Addons will work with it, too.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Qi Addons is a separate plugin designed to work with Elementor and supplement it, and it is <strong>completely free<\/strong>. After you have installed both, you\u2019re all set. You can see how to create a message box in the video below:[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/65ix-TzygYw\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you prefer your tutorial in text form, though, read on below. To start with, you need to find a <strong>Message boxes<\/strong> element in the left hand-side menu and drag it to where you want it on the page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Drag-Message-Box-Element.jpg\" class=\"attachment-full size-full\" alt=\"Drag Message Box Element\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Drag-Message-Box-Element.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Drag-Message-Box-Element-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Drag-Message-Box-Element-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Drag-Message-Box-Element-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will see the message box with its default settings. It has a placeholder title and some <a href=\"https:\/\/qodeinteractive.com\/magazine\/lorem-ipsum\/\">lorem ipsum<\/a> text. You can edit them in the <strong>General<\/strong> tab of the 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\/2021\/08\/Message-Boxes-Default-Look.jpg\" class=\"attachment-full size-full\" alt=\"Message Boxes Default Look\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Boxes-Default-Look.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Boxes-Default-Look-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Boxes-Default-Look-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Boxes-Default-Look-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We will not be using the<strong> Custom Class<\/strong> settings for this demonstration. What we will do, is change the <strong>Title<\/strong> to <em>Adjust the colors for backgrounds, icons, titles and text<\/em>. It all takes just a couple of clicks and erase the text, making this a very simple message box.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]What we also want to do is change the icons. The icon on the upper left hand-side of the box is the first one up in your <strong>General<\/strong> app, and is called <strong>Icon<\/strong>. Hover to show the menus, then <strong>Icon Library<\/strong> to change 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=\"666\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Boxes-Icon-Library.jpg\" class=\"attachment-full size-full\" alt=\"Message Boxes Icon Library\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Boxes-Icon-Library.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Boxes-Icon-Library-300x206.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Boxes-Icon-Library-768x528.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Boxes-Icon-Library-620x426.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once there, you can choose from your available libraries. We will be adding a <em>Bookmark<\/em> icon by searching for it in the search field, selecting it, and clicking <strong>Insert<\/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=\"655\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Insert-Bookmark-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Insert Bookmark Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Insert-Bookmark-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Insert-Bookmark-Icon-300x203.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Insert-Bookmark-Icon-768x519.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Insert-Bookmark-Icon-620x419.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We will also change the <strong>Close Icon<\/strong>, the icon on the right which is used to dismiss the message box. To change an icon by uploading an .svg image, hover on the control and then click <strong>Upload SVG<\/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=\"660\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Upload-Close-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Upload Close Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Upload-Close-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Upload-Close-Icon-300x204.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Upload-Close-Icon-768x523.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Upload-Close-Icon-620x422.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can then upload a new image or select one from the media library, as we shall. Simply select an image and click <strong>Insert Media<\/strong> when ready.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Choose-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Choose Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Choose-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Choose-Icon-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Choose-Icon-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Choose-Icon-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With our icons set, we are ready to move to the <strong>Style<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the main section of the <strong>Style<\/strong> tab, you can find a lot of options for styling your widget\u2019s title, text, icon and background.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will change our <strong>Title Tag<\/strong> to <em>H4<\/em>, but you can change it to any heading setting or paragraph text. You can also change the <strong>Title Color<\/strong>, which we won\u2019t be doing, and the <strong>Title Typography<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the <strong>Title Typography<\/strong> settings, you can change the font type (<strong>Family<\/strong>), <strong>Size<\/strong> (we have set ours to <em>21<\/em> pixels), and <strong>Weight<\/strong> (or \u201cboldness\u201d). The <strong>Transform<\/strong> control changes the capitalization of the title, the <strong>Style<\/strong> can be used to italicize the font or select an oblique font, while the <strong>Decoration<\/strong> control is used for underlining, overlining, or strikethroughs.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Line Height<\/strong> can space out the lines of a title if it has more than one, but it also has an effect on the size of the box as it reserves space for a line tall enough. We will set ours to <em>30 pixels<\/em>. The <strong>Letter Spacing<\/strong> control is used to space out individual letters of the title, and we will not be using it for this particular message box.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Text Color<\/strong> and <strong>Text Typography settings<\/strong> are exactly the same, but apply to the text, as opposed to the title. This particular message box has no text, so we won\u2019t be using them.[\/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=\"591\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Text-Color-and-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Text Color and Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Text-Color-and-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Text-Color-and-Typography-300x183.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Text-Color-and-Typography-768x468.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Text-Color-and-Typography-620x378.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next down, we find the <strong>Icon Position<\/strong> controls. You can place your icon on top, middle, or bottom of the title line. We like it on top, so we\u2019ll leave it as is. We will change<strong> Icon Color<\/strong> to #1e1e1e \u2013 almost black, to match our title font colour. Finally, we will set the <strong>Icon Size<\/strong> to <em>23 pixels<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"564\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Box-Icon-Style-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Message Box Icon Style Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Box-Icon-Style-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Box-Icon-Style-Settings-300x175.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Box-Icon-Style-Settings-768x447.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Message-Box-Icon-Style-Settings-620x361.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The controls for the <strong>Close Icon Size<\/strong> work exactly the same as for the <strong>Icon<\/strong>. The <strong>Close Icon Color<\/strong> control lets you choose a different colour for your icon. We will set it to black (#000000). The <strong>Close Icon Hover Color<\/strong> is the colour of the icon when it is hovered over by a user\u2019s mouse. We will set this to black, too, but with some transparency (#000000cc).[\/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=\"565\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Close-Icon-Color.jpg\" class=\"attachment-full size-full\" alt=\"Close Icon Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Close-Icon-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Close-Icon-Color-300x175.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Close-Icon-Color-768x448.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Close-Icon-Color-620x362.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next down, we find the<strong> Background Type<\/strong> controls. This control has two main modes: <strong>Gradient<\/strong>, which we will not be using, and <strong>Classic<\/strong>, which we will. We will use a plain colour background, a light blue (#d5eaf4), but you can also use an <strong>Image<\/strong> if you so choose.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]At the bottom of the <strong>Style<\/strong> section of this tab you can find the <strong>Box Border Radius<\/strong> controls. You can use these to make any or all of your message box\u2019s corners rounder. We will not be using it for this demonstration.[\/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=\"486\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Style-Background.jpg\" class=\"attachment-full size-full\" alt=\"Style Background\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Style-Background.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Style-Background-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Style-Background-768x385.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Style-Background-620x311.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, we find the <strong>Spacing Style<\/strong> section of the tab. In the <strong>Icon Margin<\/strong> control, you can set the distance between the icon and the other elements. We will click the <strong>link<\/strong> icon to unlink the values, because we want to fine-tune the icon\u2019s position. We will set the top margin to <em>4<\/em> and the right margin to <em>18 pixels<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Text Margin Top<\/strong> control is there if you want to separate the text from the title. As this message box has no text, we don\u2019t need it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, the <strong>Box Padding<\/strong> control is used to control the distance between the box edges and its contents. We won\u2019t need it for this demonstration.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Spacing-Style.jpg\" class=\"attachment-full size-full\" alt=\"Spacing Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Spacing-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Spacing-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Spacing-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/08\/Spacing-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And there you have it, a beautiful message box in just a couple of minutes.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you can see, it is remarkably easy to set up a message box in WordPress. All you need is a couple of free plugins (Elementor and Qi Addons), and a good idea for an eye-catching design. With Qi Addons, you get a fully functional message box with virtually unlimited styling options. We encourage it to put it to good use.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Looking to really drive a point home? Creating message boxes in WordPress is easy! We will show you how. <\/p>\n","protected":false},"author":16990,"featured_media":28094,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,114,4,13],"class_list":["post-28016","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-qi-addons-for-elementor","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/28016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=28016"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/28016\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/28094"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=28016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=28016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=28016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}