Skip to content

Icon Box

The Icon Box module shows an icon or an image with a title and a description. Use it for features, services, or steps in a process.

Content

In the Content tab, two groups hold the module's content.

Icon

  • Use Image: Switch this on to show an uploaded image instead of an icon.
  • Icon: Pick an icon from Divi's icon picker.
  • Upload Icon Image: The image to show when Use Image is on.
  • Image Alt Text: The alt text for that image.

Content

  • Badge Text: Text for a small badge. The badge shows when you enter text.
  • Title: The heading.
  • Description: The body text.

Design

In the Design tab, these groups style the module.

Alignment

Left, Center, or Right alignment for the content.

Icon

  • Icon Placement: Where the icon sits.
    • Normal: Above the title and description.
    • Absolute: Positioned anywhere inside the box with the Absolute Position controls.
    • Left: Beside the title and description, on their left. Divi 5 only.
    • Right: Beside the title and description, on their right. Divi 5 only.
  • Icon Color, Icon Background, Icon Size, Icon Width, Icon Height, Icon Padding: Style the icon.
  • Icon Spacing: The space between the icon and the text. With Normal it is a gap below the icon. With Left or Right it is the gap between the icon and the text column.
  • Icon Box Rotate: Rotates the icon.

Icon Placement is one setting for every screen size. It does not change per device.

Absolute Position

These controls apply when Icon Placement is Absolute. Choose a corner (Left Top, Left Bottom, Right Top, or Right Bottom), or center the icon horizontally or vertically, and set horizontal and vertical offsets.

Badge

Position, offsets, padding, and background for the badge. The Badge Text group styles the badge text.

Title Text and Description Text

Font settings for the title and the description. Title Spacing Bottom sets the gap below the title.

Divi's standard Design groups, such as Background, Border, Box Shadow, and Spacing, apply to the whole module.

Divi 4 and Divi 5

The module works in Divi 4 and Divi 5. Left and Right icon placement are available in Divi 5 only. In Divi 4 the icon sits Normal or Absolute.