The icon box gradient shortcode allows you to display an icon inside a colorful container with a url and description below and with hover animation.
In this article, we will explain how to display icon box gradient and configure the style.
To see the icon box gradient shortcode in action, check out the demo page.
Displaying the Icon Box Gradient Shortcode
To add the icon box gradient shortcode:
| Setting | Description |
|---|---|
| Icon Size | Sets the size of the icon in pixels. It can be 16,32,48,64, or 128. |
| Icon | Use this option to select desired icon. |
| Container Shape | Sets the shape of the icon container. |
| Text Color Type | Can be a single color or a gradient color. |
| Title | Defines the title for the icon box. |
| Description | Defines the description below the title. |
| Read More URL | Defines the URL for navigating the user when he/she clicks on the title. |
| Viewport Animation | Viewport animation will be triggered when this element is viewed while you scroll down the page. |
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.
Configuring the Layout and Styling
There are a few more settings in icon box gradient pop-up that allow you to configure the layout of the toggle.
To configure the layout:
| Setting | Description |
|---|---|
| Container Color | (Simple Color) Defines the icon box container color |
| Icon Color | Defines the icon color |
| Container Hover Color | (Simple Color) Defines the icon box container color when a user hovers over or gestures to it |
| Icon Hover Color | Defines the color of icon when a user hovers over or gestures to the container |
| From | (Gradient Color) Defines the first gradient stop color. |
| To | (Gradient Color) Defines the last gradient stop color. |
| Gradient Fallback color | (Gradient Color) Defines the fallback color to show on older browsers. |
| Style | (Gradient Color) Can be Linear or Radial |
| Angle | (Gradient Color) Can be Vertical ↓, Horizontal →, Diagonal ↘ or Diagonal ↗ |
| Title Font Size | Defines the title font size |
| Title Font Weight | Defines the title font weight. |
| Title Font Color | Defines the title font color. |
| Title Top Padding | Defines the top title padding. |
| Title Bottom Padding | Defines the bottom title padding. |
| Description Color | Defines the description text color. |
| Box Align | Defines the whole box align which can be Left, Center or Right. |
