Skip to content

Advanced Icon Box

The Advanced Icon Box module shows an icon or image with a title, a description and an optional badge. Its one job is a single feature box.

How to add it

  1. Open the page in the Divi 5 Visual Builder.
  2. Add a module to a row and search for Advanced Icon Box.
  3. Pick the icon or image under Content > Icon, then write the title and description.

Content tab

Icon

  • Use Image: off by default. Turn on to use an uploaded image instead of an icon.
  • Icon: icon picker.
  • Upload Icon Image: shown for the image option.
  • Image Alt Text.

Content

  • Badge Text.
  • Title.
  • Description: rich text.

Design tab

Alignment

  • Alignment: Left, Center (default), Right.

Icon

  • Icon Placement: Normal (default), Absolute, Left, Right. Normal keeps the icon above the content. Left and Right place it beside the text. Absolute uses the Absolute Position controls.
  • Icon Color: default #333.
  • Icon Background.
  • Icon Size: default 60px.
  • Icon Width and Icon Height: auto by default.
  • Icon Padding.
  • Icon Spacing: default 10px.
  • Icon Box Rotate: default 0deg. Rotates only the container box, not the icon.
  • Icon border and box shadow.

Absolute Position

Applies only when Icon Placement is Absolute.

  • Absolute Position: Left Top (default), Left Bottom, Right Top, Right Bottom.
  • Use Horizontal Position Center, Use Vertical Position Center: off by default.
  • Horizontal Offset and Vertical Offset: default 50%.

Badge

  • Badge Position: Right Top (default), Right Bottom, Left Top, Left Bottom.
  • Use Horizontal Position Center, Use Vertical Position Center: off by default.
  • Horizontal Offset and Vertical Offset: default 15px.
  • Badge Padding: default 5px 15px.
  • Badge Background: default #efefef.
  • Badge border.

Badge Text, Title Text, Description Text

  • Badge, Title and Description font settings.
  • Title Spacing Bottom: default 10px.

FAQ

Does it work in Divi 4?

Yes. A Divi 4 version exists (shortcode torq_icon_box). This page describes the Divi 5 settings.

How do I put the icon beside the text?

Set Icon Placement to Left or Right under Design > Icon.

How do I pin the icon to a corner?

Set Icon Placement to Absolute, then choose a corner and offsets under Design > Absolute Position.

Can I use my own image instead of an icon?

Yes. Turn on Use Image and upload the image under Content > Icon.