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.
IconUse this option to add desired icon.
TitleAdds a title for the icon box.
DescriptionAdds 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 URLAdds a Read More link to the icon box. You’ll need to add https:// to the beginning of the URL.
Read More Link TargetSets 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 SizeSets the icon size for the icon box.
Icon ColorSets the icon color inside icon box.
Icon Background ColorSets the icon container background color.
Icon Border ColorSets the icon container border color. If you don’t want the container have a border, set this option to blank.
Title ColorSets the color of the icon box title.
Icon Hover ColorSets the color of an icon on hover.
Icon Hover Background ColorSets the background color of an icon on hover.
Icon Hover Border ColorSets the border color of an icon on hover.
Title Font SizeSets the font size of the icon box title.
Title Font WeightSets the font weight of the icon box title
Title Font ColorSets the color of the icon box title
Title Top PaddingSets spacing above the icon box title
Title Bottom PaddingSets spacing under the icon box title
Description Font ColorSets the color of the icon box description.
Box AlignSets 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?