The icon box shortcode is one of the shortcodes available in Jupiter theme which you can take advantage of. It allows you to create a box with an icon and add description to it. In this article we’ll describe how to add the icon box shortcode, how to style it and configure the settings.
To see an Icon Box shortcode in action, you may check the demo page.
Displaying an Icon Box Shortcode
To add the icon box shortcode to a page or post, follow steps below:
Configuring the Icon Box Settings
There are some general settings in icon box settings pop-up.
| Setting | Description |
|---|---|
| Replace Icon | Sets the icon. |
| Title | Adds a title for the Icon Box. |
| Title Font Size | Sets the font size of the Icon Box title. |
| Title Font Weight | Sets the font weight of the Icon Box Title |
| Description | Adds a description for the Icon Box. The default WordPress editor will be available for you in this option, in case you want to fine tune the styling of description. |
| Read More Text | Adds a read more text for Icon Box. If you don’t want to have read more option, simply set this option to blank. |
| Read More URL | Adds Read More link to the Icon Box. You need to add https:// at the beginning of the URL. |
Configuring the Icon Box Styling
To style your icon box you’ll find these settings in the icon box pop-up window:
| Setting | Description |
|---|---|
| Style | Use this option to set the style of Icon Box shortcode. Available options are: Simple minimal, Simple Ultimate, Boxed. |
| Icon Size | Sets the icon size for the Icon Box. Available options are: Small, Medium, Large, X Large |
| Circle container | Enable this option if you want your icon to be contained by a circle frame. This option will only work for icon size of Small and Medium. |
| Icon Color | Sets the icon color inside Icon Box. |
| Icon Container (Circle) Background Color | This option will be available if you enable the Circle Container option. Use this option to set the icon container background color. |
| Icon Container (Circle) Border Color | This option will be available if you enable the Circle Container option. Use this option to set the icon container border color. If you don’t want the container have a border, please set this option to blank. |
| Title Color | Sets the color of Icon box Title. |
| Paragraph Color | Sets the paragraph color of Icon Box description. |
| Paragraph Link Color | Sets the color of any probable links you may add in description section. |
| Margin Bottom | Adds a spacing between this Icon Box and the next shortcode. |
Configuring the Visibility for Devices
To hide/show the Icon Box for a particular device (mobile, tablet, …), there is a setting in Icon Box pop-up which is called Visibility For Devices. The usage of this setting is easy and straightforward but if you need a step by step tutorial, read the Configuring shortcode’s visibility article.
Adding a Viewport Animation
To make the Icon Box shortcode visible on scroll with animation, there is a setting in Icon Box settings pop-up which is called Viewport Animation. The usage of this setting is easy and straightforward but if you need a step by step tutorial, read the Configuring shortcode’s entrance animation article.
Adding an Extra Class Name
The Extra Class Name field in the setting 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 style sheet or JavaScript file.
You can read the Adding custom CSS class to a shortcode article for further explanation.
