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".
- You always need the Module Extender For Divi plugin installed on your WordPress site for the module to work.
- 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".
- Unzip the file so the unzipped module folder is in /wp-content/themes/Divi-child/modules/
- You can delete the zip file just to keep things tidy.
- 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.