Mini Callout Box Shortcode

Last Updated on

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

In this article


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:

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

Mini callout box shortcode - visual composer screen

3
In 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

4
When 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

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

Mini callout box shortcode - add title and description

6
Click 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 Text Adds a text fro your callout box button.
Button URL Adds 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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket