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.
Displaying the Content Box Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| Title Heading | Adds the title on top of each content box. |
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.
| Setting | Description |
|---|---|
| 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.
