Divi Modal Popup Documentation

easy instructions to get you started

Download

A download link is sent in the order confirmation email. The product can also be downloaded from My Account area.

File Structure

After the purchase of the Divi Modal Popup plugin, you’ll get the following file.

divi-modal-popup-1.0.zip

The product version may vary depending upon the current version you’ve purchased from the Divi Extended store.

Installation

You can install the Divi Modal Popup plugin using 2 methods.

From the WordPress Dashboard

  1. First, go to the WordPress Dashboard >>  Plugins >> and click Add New
  2. Then Upload Plugin >> Choose File and browse the divi-modal-popup.zip file.
  3. Once located the file, select it and then click Install Now.
  4. Once the plugin installed, on the next window click Activate Plugin

Manually uploading via FTP

To install the Divi Modal Popup plugin on your website using the FTP client method, 

  1. Extract the divi-modal-popup.zip file. 
  2. And then connect to your server using an FTP application. 
  3. Now, navigate to the wp-content/plugins/ directory and upload the divi-modal-popup folder you’ve extracted earlier.
  4. After the upload, go to the WordPress Dashboard >> Plugins >> Installed Plugins
  5. Then scroll to find the Divi Modal Popup and click Activate to enable it.

Configuration

How to use Divi Modal Popup plugin

Adding Divi Modal Popup and Customize Its Content

  1. Create/Edit a Page/Post that uses Divi builder.
  2. Insert/Edit row (Regular row, not full-width).
  3. Click “Add New Module” and Insert Divi Modal Popup module on a page.
  4. To select modal trigger type, go to the Content tab >> Configuration settings >> Select trigger type either Element or On Page Load.
  5.  Upon selecting the On-Page Load trigger, you get the option to apply trigger delay, which would set the time for modal when to appear on the page.
  6. Upon selecting Element, you get various element types that are Button, Image, Icon, Text and Element CSS ID.
  7. To display modal header, go to Modal Header >> check Show Header as Yes.
  8. To set and display the modal title on the header, go to Modal Header >> check Show Modal Title as Yes, and input text in the Modal Title field.
  9. If you want to display a close icon on the modal header, then go to Modal Header in the content tab >> check Show Close Icon as Yes.
  10. To select modal body content, go to Content tab >> Modal Body >> and select available Modal Content Type >> Text/Image/Video/Divi Library Layout.
  11. To display footer and close button text on the modal, go to Model Footer >> check Show Footer as Yes, and input the text in the Close Button Text field. 
  12. If you want to change the background of the Modal, Trigger Element, Modal Header, Body and Footer, go to Background, and apply customization according to the requirements.

Divi Modal Popup Design Customization

  1. Once you’re done customizing the modal content, move to the design tab for further modal appearance customization.
  2. Trigger Alignment: To change alignment of the modal trigger, go to Alignment in the design tab >> and choose alignment Left/Right/Center.
  3. Custom Style Trigger Button: If you want to customize the trigger button, then go to Trigger Button >> and apply customize according to your needs. 
  4. Customize Trigger Icon: If you want to customize the appearance of the modal trigger icon, go to Trigger Icon >> customize size and color of the trigger icon.
  5. Customize Trigger Text: Go to Trigger Text >> apply customization for the appearance of the trigger text.
  6. Modal Title: To customize the Module Title Text, go to Modal Title Text settings >> and customize heading level of modal title, font style, color, and more.
  7. Body Text: To customize Modal Body Text, go to Modal Body Text settings >> and customize body text appearance. 
  8. Close Icon: To change the size of the close icon and its color, go to Modal Close Icon >> apply customizations.
  9. Modal Close Button: To apply custom styling on the close button, go to Modal Close Button settings >> apply required customizations such as 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.
  10. Box Shadow: To apply shadow on the modal, trigger element, header and footer of the modal, go to Box Shadow settings >> and do the required customizations.
  11. Border: To apply border customization on trigger element and modal, go to Border settings of the design tab, and apply borders accordingly.
  12. Modal Sizing & Alignment: To place your modal on different locations on the page, go to Modal Sizing & Alignment >> apply available placement options TopLeft/Top Right/Top Center/Bottom Left/Bottom Right/Bottom Center, and Center. Along with these, using this setting, you can also make changes in the modal Width and Height.
  13. Spacing: To apply spacing customization on the Modal, Modal header, Modal Body, and Modal Footer, go to Spacing settings >> and values accordingly.
  14. Animation: To apply animation style on modal with all the other animation customizations such as Animation Duration, Starting Opacity, and Speed, go to Animation settings in the Design tab >> and apply tweaks as needed.