The Message Box shortcode allows you to display an extremely impressive message with many styles to attend your viewers for the different purposes.
In this article, we will explain displaying Message Box shortcode and configuring some styles.
Displaying Message Box Shortcode
To add Message Box shortcode in a page or post to show in front end of the website please follow steps below:
1Add or edit an existing page.
2In Visual Composer section, Click + button.
3In Add Element pop-up screen, search for Message Box and click on it to be added to the page.
4When the shortcode is added, a new pop-up screen called Message Box opens. Configure the settings as required. Other settings are explained in next sections.
| Setting | Descripiton |
|---|---|
| Write Your Message Inside The Text Box | You need to add the message content here, you can format the size, color.. with the text editor options. |
5Click Save Changes and Publish or Update the page to check the result.
Configuring Message Box Settings
There are some more settings in Message Box Settings pop-up which allow you to configure the style of Message Box.
Info:To open the pop-up again, mouse over the shortcode and click on the Pen button.
Configure the Settings
| Setting | Description |
|---|---|
| Type | There are 5 types of messages to fit with 5 general purposes: Confirm, Comment, Warning, Error, Info. |
Adding an Extra Class Name
Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.
You can read Adding custom CSS class to a shortcode article for further explanation.
