Search Divi Plus Documentation

Search for answers or browse our knowledge base.

< All Topics
Print

Modal Popup

Divi Modal Popup is used to create popups that can be triggered using distinctive elements. It easily creates popups & lightboxes for videos, text, images, and much more.

divi-modal

How to Add Modal Popup Module to your webpage

Once Divi Plus is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:

  1. Create/Edit a Page/Post that uses Divi builder.
  2. Create/Edit a row.
  3. Click on Add New Module option; choose the DP Modal module.
divi-modal-module

Content Options

Configuration Setting
Unique Modal ID

To make the modal work perfectly you must enter a unique id here.

The unique modal ID is a flag that the plugin uses to identify the modal in the backend. The name is auto-filled when you leave the field blank.
You could use a custom name like modal-1, modal-2, etc. There won’t be a space in between the characters of the name.

Trigger Type

Here you get the option to select modal trigger type. Select any form available options:

  • Element
  • On-Page Load
modal-configuration-settings
On-Page Load

In this, you get the option to apply trigger delay, which would set the time for modal when to appear on the page.

modal-on-page-load
Element

In this, you get further options to select the type of element. Here you get Button, Image, Icon, Text, and Element CSS ID as types for the element. Select any according to your needs.

content-element-setting
Modal Header

Here you can select whether you want to display the header, title, and close button icon on the modal.

Modal Body

It allows you to choose what type of content you want to display in the modal body. It gives you the option to select Text, Image, Video, and Divi layouts saved in the library as modal content.

Modal Footer

Here you can select whether or not to display the footer on the modal. Plus, under this setting, you can also input text for the close button icon.

Background

This content tab setting allows you to change the background of the Modal, Trigger Element, Modal Header, Body, and Footer. It provides you with the option to customize the background with Color, Gradient, and an Image.

modal-content

Design Options

Trigger Button

This particular setting provides you with the option to apply custom styling on the modal trigger button.

Trigger Text

Here you can apply customization to the appearance of the trigger text.

modal-setting-design
Trigger Icon

Using this design setting of the modal module, you can customize the size and color of the trigger button.

Modal Close Icon

The Modal Close Icon setting allows you to change the size of the close icon and its color. Whereas, Modal Close Button setting allows you to apply custom styling on the close button. Using this setting you can change the font size & color of the close button text. You can also change the background of the close button, and apply other appearance customization.

Modal Sizing & Alignment

This particular setting of the modal allows you to place your modal on different locations on the page. Available placement options are Top: Left, Right, Center; Bottom: Left, Right, Center, and Center. Along with these, using this setting, you can also make changes in the modal Width and Height.

Was this article helpful?
1.7 out Of 5 Stars

15 ratings

5 Stars 7%
4 Stars 7%
3 Stars 7%
2 Stars 7%
1 Stars 73%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Previous Content Toggle
Next Business Hours