Content Box Shortcode

Last Updated on

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

In this article


Displaying the Content Box Shortcode

To add the shortcode:

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

content box shortcode

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

content box shortcode

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

5
Configure the settings as required. More settings are explained in the next sections.
SettingDescription
Title Heading Adds the title on top of each content box.
6
Click 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.

SettingDescription
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.
x
Note: To show the icon you’ll need add the icon class name. To find the icon class names, refer to the article Jupiter Control Panel. Scroll down to the paragraph Icon Library.

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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket