Message Box Shortcode

Updated on November 17, 2017

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.

Message Box Shortcode - visual composer screen

3In Add Element pop-up screen, search for Message Box and click on it to be added to the page.

Message Box Shortcode - add element

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.

Message Box Shortcode - Message Box Settings


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.

Configure the Settings


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.

Did this answer your question?