Select Page
lookup at divi custom module example

This is what I look like. Click the button to see my content open up in a modal window.

Modal Button Module

Unlimited Site License

The modal button module allows you to add extra content in a Divi-styled button right in the divi page builder.

Clicking on the button will open a modal window of content – editable in the text editor of module.

This is the easiest way to create a button that triggers a modal pop up.

Control the button styling and the display text just like any other button module.

Instead of entering a URL for the button action, this module uses the WordPress text editor. You can put text, html, images, code, whatever. And it will display in a modal pop up that fills the screen.

Mobile and tablet friendly. Just a simple “X” in top right to close the modal.

For an example, you can see the modal button in action here: Bluebell Connections

And here: Green Stone Drinks  that has a pop up with more than straight text, taking full advantage of the html editor.

Note, we are proud of the fact that this harnesses Divi’s built-in CSS for modals. So you are not adding more overhead to the page load!

*Compatible with the Divi Theme Page Builder and Elegant Themes Page Builder Plugin. Not editable with the "Visual Builder".

Installation Instructions
  1. You always need the Module Extender For Divi plugin installed on your WordPress site for the module to work.
  2. Upload the zip file to your Child Theme's modules folder. [Using FTP or File Manager, go to WP-Content > Themes > Divi-child > modules.] You will need to create a folder called "modules" the first time. The child theme can have a different name to these instructions, so long as it is your current child theme folder. Note: It is case sensitive, must be lower case "modules".
  3. Unzip the file so the unzipped module folder is in /wp-content/themes/Divi-child/modules/
  4. You can delete the zip file just to keep things tidy.
  5. Be sure to refresh your Page Builder page.

That's it! The new module will be in the list when you click "Insert Module" in the Divi Page Builder.

Editing this module is familiar to anyone using Divi Page Builder.

Images to come…

Custom Module Modal Button Page Builder Options
Custom Module Modal Button Text Editor