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.
Displaying the Icon Box 2 Shortcode
To add the icon box 2 shortcode to a page or post follow the steps below:
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.
