Message Box Shortcode

Last Updated on

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.

In this article

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:

Add or edit an existing page.
In Visual Composer section, Click + button.

Message Box Shortcode - visual composer screen

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

Message Box Shortcode - add element

When 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 BoxYou need to add the message content here, you can format the size, color.. with the text editor options.
Click 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

TypeThere 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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket