Icon Box Gradient Shortcode

Updated on July 25, 2017

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.

Icon Box Gradient shortcode - demo

Displaying the Icon Box Gradient Shortcode

To add the icon box gradient shortcode:

1Add or edit an existing page.

2In the Visual Composer section, click on the + button.

Icon Box Gradient shortcode - visual composer section

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

Icon Box Gradient shortcode - add element

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

5Configure the settings as required. More settings are explained in the next sections.
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.
6Click on Save Changes and publish or update the page to check the result.

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:

1In the Visual Composer screen, click on the Pen icon to open the Icon Box Gradient Settings pop-up.

Icon Box Gradient shortcode - edit Icon Box Gradient

2Configure the style settings as required.

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.
3Click on the Save Changes button and update the page to check the result.
Did this answer your question?