Icon Box 2 Shortcode

Updated on July 25, 2017

The icon box 2 shortcode is one of the cool features of the Jupiter theme to take advantage of. It allows you to create a box with an icon and add a description. In this article we’ll describe how to add the icon box 2 shortcode, style it and configure the settings.

To see an icon box 2 shortcode in action, check out the demo page.

Icon box 2 shortcode - demo


Displaying the Icon Box 2 Shortcode

To add the icon box 2 shortcode to a page or post follow the steps below:

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

Icon box 2 shortcode - visual composer screen

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

Icon box 2 shortcode - add element

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

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

Configuring the Icon Box 2 Settings

There are a few general settings in the icon box settings pop-up.

Setting Description

Icon Type? Sets an icon type for icon box 2. The options are: Icon and Image.
Icon Use this option to add desired icon.
Title Adds a title for the icon box.
Description Adds a description for the icon box. The default WordPress editor will be available, in case you want to fine tune the styling of the description.
Read More URL Adds a Read More link to the icon box. You’ll need to add https:// to the beginning of the URL.
Read More Link Target Sets the option for how the Read More link should be open: in the same window or a new window.

Configuring the Icon Box 2 Styling

To style your icon box 2 you’ll find these settings in the icon box pop-up window:

Setting Description

Icon/Image Size Sets the icon size for the icon box.
Icon Color Sets the icon color inside icon box.
Icon Background Color Sets the icon container background color.
Icon Border Color Sets the icon container border color. If you don’t want the container have a border, set this option to blank.
Title Color Sets the color of the icon box title.
Icon Hover Color Sets the color of an icon on hover.
Icon Hover Background Color Sets the background color of an icon on hover.
Icon Hover Border Color Sets the border color of an icon on hover.
Title Font Size Sets the font size of the icon box title.
Title Font Weight Sets the font weight of the icon box title
Title Font Color Sets the color of the icon box title
Title Top Padding Sets spacing above the icon box title
Title Bottom Padding Sets spacing under the icon box title
Description Font Color Sets the color of the icon box description.
Box Align Sets the alignment of the icon box.

Adding a Viewport Animation

To make the icon box 2 shortcode visible on scroll with animation, there is a setting in icon box 2 settings pop-up called Viewport Animation. Using this setting is easy and straightforward but if you need a step-by-step tutorial, read the Configuring a shortcode’s entrance animation article.

 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?