*Fair Warning – This may take some playing about with. This tutorial is offered as a guide on getting it started.
I’ve been having a lot of fun getting the Divi modules to work in a pop up. Here’s how I did it…
Installing a pop up plugin
First off, I’m not reinventing the wheel with this one. At its base we’re relying on a tried and tested plugin. You’ll need to install Popup Maker. It’s available in the WordPress repository, here.
Install and activate just as you normally would but don’t do anything else just yet…
Getting a Divi module to open in the pop up
Create the module on a page just as you normally would. Save and publish, then go to ‘view page’. In testing, I used a slider module and it worked great. Copy the URL of the page, you’ll need it in a sec. Now, change your theme from Divi to a default WordPress theme and then navigate to the page that you created the module on. Without Divi activated, the page will just be a series of page builder short codes, like this:
Copy and paste the whole thing into your favourite text editor. Now we need to do some ‘adjusting to get this to work.
At the start and end of the shortcode are references to the section, row and columns. As we only want to move the slider module over, we need to delete those references (highlighted in blue).
So now your code should start and end with et_pb_slider.
The next thing we need to get rid off is all of the speech marks in the code. I found the easiest way to do this was a ‘find and replace’ in my text editor where I replaced ” with nothing, but essentially you want to make all of the text that looks like this…
et_pb_slide heading=”testing the slider” button_text=”push now” button_link=”#” background_image=”/wp-content/uploads/2015/10/man-person-people-train.jpg” background_position=”default” background_size=”default” background_color=”#ffffff”
Into this…
et_pb_slide heading=testing the slider button_text=push now button_link=# background_image=/wp-content/uploads/2015/10/man-person-people-train.jpg background_position=default background_size=default background_color=#ffffff
That’s all the editing you should have to do to the shortcode that has been generated. Now copy what you have to your clipboard, go back and turn your Divi theme back on and open up the popup maker plugin.
Create a new pop up and paste the code into the text box. You can play around with the other settings on this page which are fairly intuitive. I’ll leave that down to personal preference.
Hey Presto! You have page builder modules working inside a pop up and the possibilities are endless. There’s nothing to stop you having entire pages or complicated modules in a pop up. Have a play and see what you can come up with…
If you found this helpful, please share and if you get it up and running on your own site, then let me know in the comments!
The new version of the theme allows you to directly edit the pop-up with divi builder.
So all you have to do is download the pop-up plugin.
I stopped reading at “Now, change your theme from Divi to a default WordPress theme and then navigate to the page that you created the module on. Without Divi activated, the page will just be a series of page builder short codes, like this:”
Because thats not a solution at all really! How would people without knowledge of shortags etc know about it, and the website will change to the default theme while doing it!
Hey guys, Author of Popup Maker here. Just tested this and @Tristan is correct. Simply enabling the editor for popups will suffice. Our popups work great out of the box with several page builders.
I have a couple of improvements based on the other comments here.
First, a simple layout trick that is really handy in general, but extra handy here.
Instead of copying all the shortcodes, you can do this:
1. Create a new layout in the Divi library
2. Get the post ID from the URL after you’ve saved it (the post ID is the number after “post.php?post=”)
3. Use this shortcode replacing the ID with your layout’s post ID:
[et_pb_section global_module="ID"][/et_pb_section]
Simple as that! Use that shortcode in the popup and it will insert your layout.
Bonus tip, you can use echo do_shortcode(‘shortcode here’) in your child theme to insert any Divi library layout anywhere in your theme! I always use it in the footer etc.
Now the even easier method, as pointed out by James above.
You can enable Divi builder on the popups by enabling the popup custom post type in your functions.php.
Here’s the link to the ET article:
https://www.elegantthemes.com/blog/divi-resources/how-to-add-the-divi-builder-to-custom-post-types-divi-nation-short
The popups in Popup Maker have a custom post type of “popup”. Just put that in your child theme’s functions and use Divi builder as usual on all your popups.
I also tested it using a ConvertKit shortcode for a naked form in the popup and it worked great!
Hi, nice one. But seems we need one created by Elegant Themes itself with other nifty presentation modules like Timeline, Clients, Modal Popups etc. However, I will give this a shot and know where I will land.
Also, no further (add-on)update on Divi Switch?
Thank you very much for the resource.
With regards
Could this be used for an action when clicking on a button?
Popup Maker is fantastic, but it doesn’t always play nice with Divi. As they update sometimes they just stop co-operating. The main issue seems to be a JS error in Divi, but who knows when the issue will finally get resolved.
Ironically I stumbled across Kay’s suggestion on my own and came here to append it to the article only to find that somebody else already found it.
I would suggest adding Kay’s method (Going to REVISIONS) of getting the code right in to the body of your article Stephen.
I was afraid flipping my theme back and forth might break something on the site and was reluctant to do so but Kay’s method does not raise that fear. It seems like a cleaner/safer method and is quicker if you are making revision after revision on the code you want to copy.
PS – Thanks for this article. It helped me create divi code for my Lightbox content using “PopUp Maker”.
Instead of changing the theme one can find the code in the saved backups of your Page. Save at least twice and start to restore the older version. Wp will Show you the code differences of both versions where you can copy from.
Curious as to the stepping “outside the fold/family” with regard to not utilizing the popup feature of Elegant’s own plugin.
Is this Popup Maker from the repository easier with which to work? Or is it due to the price “difference?
“
in this user case it’s just easier to add shortcode to 🙂
I would rather install the plugin and add a function to my function.php file which allows me to use the page builder on custom post type. which would cut out the changing theme step to get the code.
If it works then feel free to share.
Did you get it to work?