In this documentation, we will show you how to customize the Advanced Icon Box widget presented by Element Pack Pro.

Inserting The Advanced Icon Box Widget

Open your page in the Elementor editor, search by the widget name, then drag and drop it on the page.

Content Tab Customizations

Icon Box Section

Go to Content > Icon Box

Step-1

Come to the Icon Box section, find the Icon Type, Icon, and Title options.

Also find the Title Link, Show Sub Title, and Title Separator switchers options.

Step-2

In this section, also find the Description, Icon Position, and Alignment options.

Read More Button Section

Go to Content > Read More

Find the Read More Button Text, Link to, Click On, Icon, Show On Hover, and Button ID options.

Additional Options Section

Go to Content > Additional Options

Here you will find the Title HTML Tag, Icon Vertical Offset, Icon Horizontal Offset options, and also Find the Read More Button, Indicator, Badge, and Global Link, switchers.

Work with The Style Tab

Style The Icon/Image Section

Go to Style > Icon/Image

Step-1

Come to the Icon/Image section, you will find two sub-sections; Normal and Hover.

In the Normal Mode, Find the Icon Color, SVG Icon Color, Glassmorphism, Background Type ( Classic, and Gradient), Background Color, and Image options.

Step-2

Here in Normal Mode, also Find the Border Type, Border Radius, Advanced Radius, Padding, Box Shadow, Typography, Spacing, Size, Rotate, and Background Rotate options.

Step-3

In the Hover Mode, you will get a similar customization option as in the Normal mode. So please try it yourself.

Title Section Customization

Go to Style > Title

Step-1

Come to the Title section, you will find two sub-sections; Normal and Hover.

In the Normal Mode, Find the Spacing, Color, and Typography options.

Step-2

In the Hover Mode, find the Title Color, and Typography options.

Description Section Customization

Go to Style > Description

Step-1

Come to the Description Section, Find the Text Color, Spacing, and Typography options.

Step-2

In the Hover mode, you also find the Text Color, and Typography options as in the Normal Mode.

Read More Button Section

Go to Style > Read More

Step-1

Come to the Read More section, you will find two sub-sections; Normal and Hover.

In the Normal Mode, Find the Read More Text Color, Background Type ( Classic, and Gradient), Background Color, and Image options.

Also find the Border Type, Width, Color, Border Radius, Padding, Box Shadow, and Typography options.

Step-2

In the Hover Mode, Find the Read More button text Color, Background Type, Background Color, Box Shadow, and Hover Animation (27 Styles) options.

Style The Indicator Section

Go to Style > Indicator

Here find the Indicator Style (Style 1 to Style 5), Fill Color, and Stroke Color options.

Style The Badge Section

Go to Style > Badge

Find the Badge Text Color, Background Type ( Classic, and Gradient), Background Color, and Image options.

Also find the Border Type, Width, Color, Border Radius, Padding, Box Shadow, and Typography options.

Additional Section

Go to Style > Additional

Step-1

Here find the Content Inner Padding options.

All done! You have successfully customized the Advanced Icon Box widget on your website.

Video Assist

You can also watch the tutorial video about the Advanced Icon Box widget. Please visit the demo page for examples.

Thanks for staying with us.