Content Box Shortcode

Updated on December 29, 2017

The content box shortcode is one of the Jupiter shortcodes that allows to organize the content of a page in a more interesting way rather than using simple columns. It allows you to wrap any content. It is similar to the custom box shortcode. The difference is you can customize the custom box background color/image while you cannot do this for content boxes.

In this article, we’ll explain how to configure the content box shortcode.

To see the content box shortcode in action, check the demo page.

content box shortcode

Displaying the Content Box Shortcode

To add the shortcode:

1Add a new page or edit an existing page.
2From the Visual Composer screen, click on the + button.

content box shortcode

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

content box shortcode

4When the shortcode is added, a new pop-up screen called Content Box Settings will open that gives you the ability to configure the shortcode settings.

content box shortcode

5Configure the settings as required. More settings are explained in the next sections.

Title Heading Adds the title on top of each content box.
6Click on Save Changes button and publish or update the page to check the result.

Configuring the Content Box Settings

After you’ve added the content box shortcode, click on the pencil icon and a modal window will appear with the options. Edit them to your needs.


Add Icon Adds the icon on top left side of your content box. You can leave it blank if you prefer it without any icons.

Configuring the Visibility for Devices

The Visibility For Devices field in the settings pop-up allows you to configure the visibility of the shortcode on different devices.

You can read the Configuring a the visibility for devices article for further explanation.

Adding an Entrance Animation

The Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll in the browser.

You can read the Configuring a shortcode’s entrance animation article for further explanation.

Adding an Extra Class Name

The Extra Class Name field in the settings 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 the Adding a custom CSS class to a shortcode article for further explanation.

Did this answer your question?