Advanced Alert Box

The Advanced Alert Box module shows a notice with an icon or image, a title and a description. Its one job is an inline message such as a warning, tip or announcement.

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 Alert Box.
3. Pick a Type under Content > Settings, then write the title and description under Content > Text.

Content tab

Text

• Title.
• Description: rich text.

Settings

• Use Icon: on by default. When off, the module uses the uploaded image instead.
• Select Icon: icon picker.
• Upload Image and Image Alt.
• Type: Danger (default), Warning, Info, Light, Dark, Light Dark.
• Show Dismiss Button: on by default.
• Content Vertical Alignment: Top, Center (default), Bottom.

Design tab

Title Text and Body Text

• Title and Body font settings.

Icon

• Icon Size: default 40px.
• Icon Color.
• Icon Spacing Gap: default 20px.
• Use Icon Box: off by default.
• Icon Box Background.
• Icon Box Width and Icon Box Height: default 80px.

Icon Box Border

• Icon Box border.

Dismiss

• Dismiss Size: default 22px.
• Dismiss Color.
• Dismiss Spacing Gap: default 20px.

Title

• Title Spacing Bottom: default 0px.

FAQ

Does it work in Divi 4?

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

What does the dismiss button do?

Clicking it fades out and hides the alert. The handler runs without jQuery in Divi 5.

Can I use an image instead of an icon?

Yes. Turn off Use Icon, then upload an image under Content > Settings.

What do the types change?

The Type adds a dtq-alert-<type> class to the alert, which sets the preset look. Use the Design tab to override colors and text.