Modal Popup
The Modal Popup module opens content in a popup. The popup can open when a visitor clicks a button, or automatically when the page loads. Use it for sign-up forms, video, announcements, or a saved Divi layout. The module works in Divi 5.
How to add the Modal Popup module
- Add a section and a row, then add the Modal Popup module.
- Under Content > Popup Content, choose the content source.
- Under Content > Trigger, set the button label.
- Under Content > Behavior, choose when and how the popup opens.
Content
Trigger
- Trigger Text: the label on the button that opens the popup. Default is "Open Popup".
- Trigger Alignment: Left, Center or Right. Default is Left.
Popup Content
- Content Source: Text / Media or Saved Layout / Post. Default is Text / Media.
- Choose Layout / Post: pick a Divi Library layout, page or post to show inside the popup. Only published items are shown. An unpublished item renders nothing.
- Popup Title: the heading shown at the top of the popup.
- Popup Content: the body content shown inside the popup.
Behavior
- Open Popup On: Trigger Click or Page Load. Default is Trigger Click.
- Page Load Delay: the seconds to wait before the popup opens on page load.
- Open Animation: Fade, Zoom, Slide Up or Slide Down. Default is Fade.
- Animation Speed: how long the open animation takes.
- Popup Size: Small, Medium or Large. Default is Medium.
- Vertical Position: Center or Top. Default is Center.
- Close on Overlay Click: closes the popup when the visitor clicks outside the box. On by default.
- Close on Escape Key: closes the popup with the Escape key. On by default.
- Show Close Button: shows the close button in the popup. On by default.
Design
- Popup Box: Custom Max Width overrides the Popup Size preset.
- Title Typography and Content Typography: font options for the popup title and body.
- Overlay: Overlay Color and Overlay Blur. Blur softens the page behind the popup.
- Close Button: Close Icon Color, Close Icon Size, Close Button Background, Close Button Shape (Plain or Circle) and Close Button Position (Inside or Outside).
Tip
Set Content Source to Saved Layout / Post to reuse one popup design on many pages. Edit the layout once in the Divi Library and every popup that uses it shows the change.