It’s not just a stereotype that the internet has changed the way we receive and process information: it’s the truth. On the one hand, our attention span is shortened: people have less time for text content. On the other hand, there is nothing to replace it if you want. convey information with any meaning or complexity.
One thing you can do to prevent your visitors from skipping a large body of text is to make your text content crawlable if all you want is to highlight a few interesting pieces of information. You can also use highlighted text for highlights. WordPress message boxes are another thing you can try: they stand out clearly from the rest of the text and convey selected pieces of information to your visitors.
We will show you how to create message boxes for your WordPress website. But before we get into the main topic, we would like to discuss the message box in more general terms. If you’re sure that all you need is to know how, then proceed to the tutorial section. Here’s what we’ll talk about:
A WordPress message box a design element used to draw the visitor’s attention to a piece of information. A box consists of some text and possibly icons or other graphics. Often associates some important information with a website visitor and stand out from the main body of the text.
Also message box typically dismissable by clicking an X or another close icon. When the user receives the information, they can remove the message box and continue reading with a simple click of the mouse. They look like this:
A message box is best used when you want it. make your visitors pay special attention to a separate piece of information may inform the rest of the content, but is not necessary for understanding. It may be closely related to the text, but it need not be.
Perhaps the article a visitor is reading is not the first episode of a series. In that case, you might want to warn them with a message box that they need to read something else first. Does your store have a special offer on text? Maybe you can advertise it in a message box. Does your book or movie review contain spoilers? You’d better clarify this beforehand.
A message box can be created using code or a plugin. We will use a free plugin developed by us called Qi Addons for Elementor. Qi Plugins expands Elementor’s already challenging widget palette with 60 brand new, beautifully designed elements, one of which is the message box.
with our plugin You can create stunning WordPress message boxes in minutes.. All you need to do beforehand is to install the latest version of Elementor (the free version is fine) and then the Qi Plugins. We will be using our own Qi Theme along with Qi Plugins for Elementor. For best results, we recommend that you do it too. If you’ve already invested in another theme, don’t worry: Qi Plugins will work with it too.
Qi Addons is a separate addon designed to work with and support Elementor and completely free. Once you’ve installed both, you’re ready. You can see how to create a message box in the video below:
If you prefer your tutorial in text format, read below. To get started, you need to find one. message boxes Select from the menu on the left and drag it to where you want it on the page.
You will see the message box with its default settings. It has a placeholder title and some lorem ipsum text. You can edit them here: general tab of the widget.
we will not use Special Class This is the settings for the show. What we’re going to do is change Title with Set colors for backgrounds, icons, titles and text. All this with just a few clicks and deleting the text, making this a very simple message box.
What we want to do is change the icons. The icon at the top left of the box is the first icon in your box. general application and called Symbol. Hover over to show menus, then Icon Library to change.
Once there, you can choose from your existing libraries. we will add one Bookmark by searching, selecting and clicking the icon in the search field Sting.
We will also change Close Icon, the right icon used to close the message box. To replace an icon by loading a .svg image, hover over the control and then Upload SVG.
Then you can upload a new image or choose one from the media library as we will. Simply select an image and click Add Media when ready.
We are ready to act with our set of icons. style tab.
In the main part of the section style In the tab, you can find many options for styling your widget’s title, text, icon and background.
we will change Hashtag with H4, but you can change it to any heading setting or paragraph text. You can also change Title Colorwhich we will not and Header Typography.
Inside Header Typography settings, you can change the font type (Family), Dimension (we set ours 21 pixel) and Weight (or “courage”). this convert control changes the capitalization of the title, style can be used to italicize the font or choose an italic font. Decoration The control is used to underline, strikethrough, or strikethrough.
this row height it can empty the lines of a header if it has more than one line, but it also has an effect on the size of the box as it makes room for a long enough line. we will arrange ours 30px. this letter spacing the control is used to separate the individual letters of the title and we will not use it for this custom message box.
this Text Color and Text Typography settings exactly the same, but applied to the text, unlike the title. There is no text in this private message box, so we will not use them.
Next down, we find Icon Position controls. You can place your icon above, in the middle or below the header row. We liked it on the top, so we’ll leave it as is. we will change Icon Color To #1e1e1e – almost black to match our header font color. Finally, we will set Icon size with 23 pixels.
controls for Turn Off Icon Size work exactly the same as Symbol. this Turn Off Icon Color control lets you choose a different color for your icon. We’ll set it to black (#000000). this Close Icon Hover Color is the color of the icon when a user is hovered over with the mouse. We’ll also set this to black, but with some transparency (#000000cc).
Next down, we find Background Type controls. This control has two main modes: gradientwe will not use and Classical, which we will do. We will use a solid color background, light blue (#d5eaf4), but picture if so choose.
at the bottom style you can find it in the section of this tab Box Boundary Radius controls. You can use them to round the corners of your message box. We won’t be using it for this show.
Finally, we find Range Style section of the tab. Inside Icon Margin You can set the distance between control, icon and other items. we will click connection icon to unlink values, because we want to fine-tune the position of the icon. We will adjust the upper margin 4 and right margin 18px.
this Text Margin Top The control is there if you want to separate the text from the title. We don’t need it as this message box has no text.
Finally, Box Filler control is used to control the distance between the box edges and its contents. We won’t be needing him for this show.
And here is a nice message box in a few minutes.
As a result
As you can see, setting up a message box in WordPress is pretty easy. All you need is a few free plugins (Elementor and Qi Plugins) and a good idea for an eye-catching design. With Qi Addons, you get a fully functional message box with almost unlimited styling options. We encourage you to put it to good use.
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
