Message Box Shortcode

Last Updated on

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

In this article


Displaying a Message Box Shortcode

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

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

message box shortcode

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

message box shortcode

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

message box shortcode

5
Click 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
TypeThere 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
StyleUse this option to set the message box border style. Available options are: Pointed Style, Rounded Style
Add Box Icon Class NameUse 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 ColorUse this option to set the background color for the message box.
Border ColorUse this option to set the border color of the message box.
Content ColorUse this option to set the color of the description text, icon, and vertical divider of the message box.
Write Your Message in This Text AreaUse 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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket