Message Box Shortcode

Updated on January 11, 2018

Message Box shortcode is one of shortcodes available in The Ken theme which you can take advantage of. In this article, we will explain how to display the Message Box Shortcode and configure the settings.

Ken Message Box Demo 5-message box shortcode


Displaying a Message Box Shortcode

To add the Message Box Shortcode to a page or post, follow the steps below:

1Add or edit an existing page.
2In the Visual Composer section, click on the + button.

message box shortcode

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

message box shortcode

4When the shortcode is added, a new pop-up screen called Message Box Settings will open. Configure the settings as required.

message box shortcode

5Click on Save Changes and publish or update the page to check the result.

Configuring the Message Box Settings

After you add the Message Box shortcode, a pop-up window will appear in which you can adjust the options before adding it to the page. The following is a detailed description of each option for the Message Box shortcode:

SettingDescription

Type There are 8 types of messages: Love Box, Hint Box, Solution Box, Alert Box, Confirm Box, Warning Box, Star Box, Build It Yourself.

To see a live demo of the types we introduced please click here. Most of the following options will be available if you set the type of the message box to “Build It Yourself”.

SettingDescription

Style Use this option to set the message box border style. Available options are: Pointed Style, Rounded Style
Add Box Icon Class Name Use this option to add a proper class name of the icon which you want to show in the message box. For more information about icons and their class names, please go to Main Dashboard Menu -> Tools -> Icons Library. If you don’t want your message box to have an icon, simply set this option to blank.
Box Color Use this option to set the background color for the message box.
Border Color Use this option to set the border color of the message box.
Content Color Use this option to set the color of the description text, icon, and vertical divider of the message box.
Write Your Message in This Text Area Use this option to add the main content text of the message box. This option contains the default WordPress editor which you can use to style your content.

Adding an Extra Class Name

The 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 the Adding a custom CSS class to a shortcode article for further explanation.

Did this answer your question?