Overview of the Alert Box module

This page shows you how to add the Alert Box module to your page and explains every setting in its Content, Design and Advanced tabs, with screenshots. The Alert Box module shows a highlighted message box, such as a success, warning or information notice, with an optional icon and close button. For more details, view the demo.

How to add the Alert Box module to your page

1. Open your page in the Divi Visual Builder.
2. Click the gray (+) icon inside a row to add a new module.
3. Search for DP Alert Box in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab settings

The Content tab holds the module’s own settings, grouped in the toggles below. Link, Background and Element Label are the standard Divi options.

Content

• Alert Title: Enter the title for the alert box.
• Description: Input the description to be used for alert box.
• Use Image: Choose whether or not to use the image instead of icon.
• Icon: Choose an icon to display with the alert box.

Display

• Layout: Select the layout for the alert box.
• Show Close Button: Choose whether or not to show close icon.
• Show Alert Button: Choose whether or not to use the button.

Design tab settings

The Design tab lets you style each part of the module:

• Global Text: styling options for the global text.
• Alert Text: styling options for the alert text.
• Icon/Image: styling options for the icon/image.
• Close Icon: styling options for the close icon.
• Alert Button: styling options for the alert button.
• Sizing, Spacing, Border, Box Shadow, Transform, Animation: the standard Divi design options for the whole module.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.