Skip to content

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.
  • 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.