The Message Box widget lets you add an eye-catching message, alert or notice to your Elementor page – a special offer, a testimonial, or any short piece of information you want to stand out.
It is a Free widget of The Plus Addons for Elementor.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free.
- Go to The Plus Addons > Widgets, search for Message Box and turn the toggle on.
How to Add a Message Box in Elementor
Add the Message Box widget to the page:
| Setting | What it does | Default |
|---|---|---|
| Title | The heading text of the message box. | “This is alert notice” |
| Description toggle + text | Turn this on to add a description below the title, edited in a rich-text field. | Off |
| Main Icon toggle + Select Icon | Turn this on to show an icon in the message box, then pick it. | On |
| Close Button toggle + Select Icon | Turn this on to add a button that dismisses the message box, then pick its icon. | On |
| Closing Animation Duration | How long the closing animation takes, in milliseconds – a smaller number closes faster. | – |
How to Style the Message Box Widget
The Style tab has a section for each part: Title, Description, Main Icon, Close Button and Background – typography, color and hover effects for each. Advanced-tab options are common to all our widgets.
How It Behaves
We published a message box with a title, a rich-text description, an icon and a close button.
- The title, icon and description all render as configured.
- The Description field accepts and renders formatted HTML (bold text, for example), not just plain text.
- Clicking the close button genuinely removes the box’s content from the page – confirmed by measuring the rendered markup before and after the click.
Limitations
- We did not separately test every Style-tab option (typography, hover effects per section) – read from the control labels, not exercised individually on the front end.
The close button doesn’t appear
Make sure the Close Button toggle is on and an icon is selected under Select Icon – without an icon chosen, there is nothing to click.
Not verified
So you know exactly what has and has not been checked:
- Individual Style-tab typography, color and hover-effect combinations beyond the default look.
