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
- Open the page in the Divi 5 Visual Builder.
- Add a module to a row and search for Advanced Icon Box.
- 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.