Realtify Icon Box Widget

The RTP Icon Box, allows you to add eye-catched icon/text boxes to any page. Simply Drag & drop the widget into any placement in the editor and then configure the content and style settings to the left.

Content Options:

Icon- Here, you can select the icon you would like to add from the dropdown menu of available icons.

View- Here, you can choose the view of the icon between normal/default, stacked or framed.

Shape- If you choose the stacked or framed views of the icon, you can choose the border shape around the icon: circle or square.

Title & Description- Here, you can add a Title and Description text for the icon. You can also choose to leave it blank.

Link to- Here, you should enter the link you would like the icon to direct to. You can also choose to open in a new window and add nofollow link by clicking on the “link options” button. When you add a link, the icon as well as the title will be clickable.

Icon Position- Here, you can set the alignment of the icon and the text within the column it was placed.

Style Options:

Mouse Over- Here, you can choose to have a “normal,” mouse over effect, or a hover effect, in which case, you should set a hover animation.

Hover Animation- If you have chosen a hover effect for your button, you can then choose what kind of animation you would like to occur when a mouse hovers over the button.

Background Type- Here, you can choose whether to have a “classic,” background (solid) or a gradient background.

Primary Color- Here, you can select the color of your background by moving your mouse through the color chart, as well as adjusting the tone/opacity sliders to the right. You can also enter a specific color code.

Secondary Color- If you have chosen a normal background type, you can choose the second color by moving your mouse through the color chart, as well as adjusting the tone/opacity sliders to the right. You can also enter a specific color code.

Gradient Color- If you have chosen a gradient background type, you can choose the second color by moving your mouse through the color chart, as well as adjusting the tone/opacity sliders to the right. You can also enter a specific color code.

Spacing- Here, you can adjust the space between the icon and the icon text.

Size- Here, you can adjust the size of the icon.

Padding- Here, you can adjust the padding of the icon, which is the area around the icon itself. If you have chosen the framed, or stacked view, it will increase or decrease the size of these borders.

Rotate- Here, you can rotate the icon image.

Border Radius- Here, you can adjust the radius of the border.

Content Alignment- Here, you can choose how to align the whole widget content within the column the widget was placed. You can also determine the vertical alignment here.

Color- Here, you can select the color of your text by moving your mouse through the color chart, as well as adjusting the tone/opacity sliders to the right. You can also enter a specific color code. You can customize the color of:

-Title

-Description

Typography- Here, you will be able to adjust everything regarding the font of your text. You can choose:

-Font Family

-Font Size

-Weight (the level of thickness of the letters)

-Transform (letter cases)

-Style

-Decoration

-Line Height (the line spacing)

-Letter Spacing

You can customize the typography of:

-Title

-Description

Box Hover- Here, you can determine whether to show hover effects or not. Effects include:

-Background Type: normal or gradient

-Background Color (and 2nd color, if gradient is chosen).

-Icon Color

-Title Color

-Subtitle Color

-Box Shadow Options: choose the color of the shadow, horizontal & vertical alignment, blur, spread and position.

You may also like