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 SizeSets the size of the icon in pixels. It can be 16,32,48,64, or 128.
IconUse this option to select desired icon.
Container ShapeSets the shape of the icon container.
Text Color TypeCan be a single color or a gradient color.
TitleDefines the title for the icon box.
DescriptionDefines the description below the title.
Read More URLDefines the URL for navigating the user when he/she clicks on the title.
Viewport AnimationViewport 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 ColorDefines 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 ColorDefines 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 SizeDefines the title font size
Title Font WeightDefines the title font weight.
Title Font ColorDefines the title font color.
Title Top PaddingDefines the top title padding.
Title Bottom PaddingDefines the bottom title padding.
Description ColorDefines the description text color.
Box AlignDefines 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?