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