Mini Callout Box shortcode allows you to create a tiny callout box which highlights some outstanding text between bunch of texts.

In this article, we will explain displaying Mini Callout Box shortcode and configuring some styles.

To see the Mini Callout Box shortcode in action, you may check out the demo page.

mini callout box shortcode - demo


Displaying Mini Callout Box

To add Mini Callout Box shortcode in a page or post to show in front end of the website please follow the steps below:

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

Mini callout box shortcode - visual composer screen

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

Mini callout box shortcode - add element

4When the shortcode is added, a new pop-up screen called Mini Callout Box settings opens. configure the settings as required. Other settings are explained in the next sections.

Mini callout box shortcode - Mini call-out box settings

5From Add Title and Description, choose your title and description for Mini Callout Box.

Mini callout box shortcode - add title and description

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

Configuring Other Settings

There are other settings in Mini Callout Box Settings pop-up which allow you to customize the text. Configure the settings as required.

Setting Description
Button TextAdds a text fro your callout box button.
Button URLAdds a URL for the callout box button.

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 stylesheet or JavaScript file.

You can read Adding custom CSS class to a shortcode article for further explanation.