Use the Page Builder for Pop Ups

Use the Page Builder for Pop Ups

*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:

short codes
  • Google+
  • Facebook
  • Twitter

 

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).

delete
  • Google+
  • Facebook
  • Twitter

 

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.

popup
  • Google+
  • Facebook
  • Twitter

 

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!

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.