Modal Button Divi Module.

Super easily create a popup on your page with a simple button trigger for users.

Unlimited Site License | Regular Updates | Simple WP Plugin Install

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

Demo

See this custom Divi module in action.

Click to read more info

This modal pop up is friendly for all device sizes. It is generated from the <span style=”color: #3366ff;”>WordPress text editor</span>. So you can put text, html, images, or even code.

Have all the information available to those who want to read more about your product, while not crowding the page view for people who do not.

The modal pop up fills the width of the screen, and expand to the length of the content. A user can close the window by clicking the “X” in the top right corner.

This is the easiest way to add a modal pop up to your Divi Page Builder. Easy to install, easy to edit, easy to use on the front end.

The content is loaded with the initial page load, so it is fast to activate as soon as the button is clicked. It is also available for search engine bots to read when indexing your page. So it is a great opportunity to add keyword rich content without cluttering your page.

Modal Button Module Key Features

This Module is packed with features, and with more on the way. But here are some of our faves:

i

Easiest way to create a button to trigger a modal popup

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.

Button styling & display text 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 popup that fills the screen. The module pulls uses your button styling that you set in the Theme Customizer.

Responsive and Lightweight

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

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!

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

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

Editing could not be easier

Because we are Divi users, we design and base all our modules on our experience using Divi.
Therefore they are intuitive to any one who has used the Divi interface.

Set your button content

You can put in anchor text for your button, and justification.

It is also possible to enter a fallback URL in case some users with very old browsers are not using JavaScript, or have it turned off for any reason.

Set you popup content

Use the WordPress TinyMCE text editor to add your content in text or HTML.

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