Message Box

< All Topics
Widget Used
Message Box
Tutorial Videos
Official Video

Let your visitors can see the Alert box on your website using the Message Box widget. By using the Message Box widget’s style option you can create a different layout for alert boxes.

Pro tip
Why not add this widget to your website/product? Because Using this widget You can create something special Alert Box to notify the user Like danger, success, information, or warning for your website.

How to use the Message Box Widget of The Plus Addons For Elementor

The Message Box widget comes with a simple layout with many styling and customization options you can create a pleasant-looking layout for your websites.

General Steps

Search for the Message Box element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Message Box widget. First, click on the Content tab.

1. Content

Message Box

Title

You can set the heading of your Alert Box with this option.

Credit : Gutenberg, WordPress

Description

You can set the description of your Alert Box with this option.

Credit : Gutenberg, WordPress

Main Icon

With this option, you can set the icon before the content of the alert box, And then you can design the right one.

Credit : Gutenberg, WordPress

Close Button

With this option, you can set the icon after the content of the alert box, And then you can design the right one. When you click on the close button icon, the following content will be hidden.

Credit : Gutenberg, WordPress

Closing Animation Duration

This option is for how quickly you want to hide the Alert Box when you click on the close button icon.

2. Style

The Style tab is used for customizing the look of all the Message Box widget components such as Title, Description, Main Icon, Arrow, Close Button, and Box Background Options.

Title Style

Set Typography, Padding, Text color, Background, and Box shadow for the Title here.

Description Style

Set Typography, Padding, Text color, Background and Border Radius for the Description here.

Main Icon Style

Set Size, Width, color, Background, Border, Border Radius, and Box shadow for the Main Icon here.

Arrow Style

Set color for the Arrow here.

Close Button Style

Set Size, Width, color, Background, Border Radius, and Box shadow for the Close Button here.

Box Background Style

Set Padding, Background, Border, Border Radius, and Box shadow for the Box here.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?