How To Use The Advanced Icon Box Widget By Atomic Addons

The Advanced Icon Box widget by Atomic Addons shows an icon or image together with a title, an optional sub title, a short description and a Read More button. You can add a badge such as “POPULAR” in a corner and make the whole box a link. It suits feature lists, services and step-by-step sections. This guide covers adding the widget and setting up the box, the button and the badge.

Enable the Advanced Icon Box Widget

Advanced Icon Box is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Advanced Icon Box. You can also open the Content category.

4. 4

   Turn the Advanced Icon Box widget on.

5. 5

   Click Save Settings.

Add the Advanced Icon Box Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Advanced Icon Box. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Icon Box

Open the widget and go to Content → Icon Box:

1. 1

   Icon Type: Icon (the default) or Image.

2. 2

   Icon: With the Icon type: the icon, a star by default. Choose none to show no icon.

3. 3

   Image Icon: With the Image type: the image, and an Image Resolution (Full by default). Its alt text is the title.

4. 4

   Title: The box's title, “Icon Box Heading” by default.

5. 5

   Title Link: Turns the title into a link to the Title Link URL.

6. 6

   Show Sub Title: Adds a line under the title; type it in Sub Title (“Icon Box Sub Heading” by default).

7. 7

   Title Separator: A line under the title. Its color and size are in Style → Title Separator.

8. 8

   Description: The text of the box, in a text editor.

9. 9

   Icon Position: Where the icon sits: Left, Top (the default), Right or Bottom.

10. 10

    Icon Inline: With the Left or Right position: puts the icon in one row with the title only, and the description runs under both.

11. 11

    Icon Vertical Alignment: With the Left or Right position and Icon Inline off: Top (the default), Middle or Bottom.

12. 12

    Alignment: Left, center, right or justified, per screen size.

The title, sub title, description and links accept dynamic tags.

Additional Options

Content → Additional Options:

1. 1

   Title HTML Tag: The title's markup: H1 to H6, div, span or p. H3 by default.

2. 2

   Read More: Shows the button under the description and opens the Read More section. On by default.

3. 3

   Badge: Shows a badge on the box and opens the Badge section.

4. 4

   Global Link: Makes the whole box a link to the Global Link URL. The title link and the Read More button keep their own links and stay clickable on top of it.

Read More

With Read More on, Content → Read More sets up the button:

1. 1

   Text: The button text, “Read More” by default.

2. 2

   Link to: Where the button goes, # by default.

3. 3

   Icon: An icon in the button.

4. 4

   Icon Position: With an icon: Left or Right (the default) of the text.

5. 5

   Icon Spacing: With an icon and text: the gap between them, 8px by default.

6. 6

   Show on Hover: Hides the button until the visitor points at the box (or tabs into it). The button is then placed over the box, and Horizontal Offset (-50px on desktop by default) and Vertical Offset move it, per screen size.

7. 7

   Button ID: An HTML ID for the button, for tracking tools or custom code. Use letters, numbers and underscores, and keep it unique on the page.

Badge

With Badge on, Content → Badge adds a label on top of the box:

1. 1

   Badge Text: The label, “POPULAR” by default. Leave it empty to hide the badge.

2. 2

   Position: Top Right by default; any corner, edge center or the center.

3. 3

   Horizontal Offset: Moves the badge sideways, from -300 to 300px, per screen size.

4. 4

   Vertical Offset: Moves the badge up or down, from -300 to 300px, per screen size.

5. 5

   Rotate: Turns the badge, for example 45 degrees for a corner ribbon look.

Style the Advanced Icon Box

Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.

• Icon / Image — color (with separate fill and stroke colors for SVG icons), background, border, radius, padding, spacing, size, rotation and offset in Normal and Hover states, a Glassmorphism blur behind the icon, CSS filters and opacity for images, and a hover Effect.
• Title — color and hover color, spacing and typography, and a hover line Style (Style 1 to 5) with its Line Color.
• Sub Title and Description — color, hover color, spacing and typography.
• Title Separator — the line's alignment, style, color, height, width and spacing.
• Read More — the button's color, background, border, radius, padding, shadow and typography in Normal and Hover states, an Attention effect, Full Width Button and a Hover Animation.
• Badge — the badge's color, background, border, radius, padding, shadow and typography.
• Additional — the content's inner padding and the spacing and gap used by Icon Inline.