Hello guys and welcome to another Divi Dezigns tutorial. In today’s quick tip, I’m going to show how to make a Divi popup modal with the aid of a free plugin. Now I know there are some really cool third party plugins that have successfully executed this function; however, they are not free. And sometimes we may only need to use this on a few occasions, so why spend money when we don’t have to. So without further ado, let’s get started!
Before we begin, go ahead and download Popup Maker. This plugin is extremely handy for creating any type of modal or content overlay. It ships with all the controls you’ll need to customize the modal to match your theme.
After installing and activating the plugin, you’ll see a custom post type appear on the sidebar labeled “Popup Maker”. Hover and select “Add Popup” to create your first modal.
So all we have to do now, is add the Divi Builder to this page and we’ll have ourselves a custom Divi Modal page builder! To add the Divi builder, copy the code below and paste it in your functions.php file in your child theme. If you don’t have a child theme already installed, you can download one here along with instructions on how to install it.
function my_et_builder_post_types( $post_types ) {
$post_types[] = 'popup';
return $post_types;
}
add_filter( 'et_builder_post_types', 'my_et_builder_post_types' );Presto! You now have successfully added Divi Builder to the Popup Maker page.
From here, all you have to do is populate your page with whatever content you want. To get the modal working, add the class that Popup Maker generates once you publish the page. Go back to “All Popups” to find the classes (you can use either of them).
You can code your trigger like this.
<div class="popmake-divi-form">Click Here</div>And that concludes the end of this tutorial. Hope this proves useful one day and don’t forget to sign up to our newletter for more Divi tips & tricks.
Man, I love you. I was using the popup plugin and bashing my head trying to format it to something useful. With the Divi builder active, it all came together.
That’s great! Glad the blog was useful to you.