Hey Divi fans! We’re back with another tutorial!

In this Divi tutorial, I’m going to show you how to use our plugin, Divi Overlays, to create a beautiful video popup with an animated call to action button. And as a bonus, this Divi Overlays layout can be downloaded for free from your Divi Life account page for all Divi Overlays customers. 🙂

Demo Site for the Tutorial

This is a re-creation of the video popups that Elegant Themes has on their website, particularly on the Divi landing page. So to be clear, Elegant Themes gets 100% credit for the gorgeous design of this video popup with the CTA button!

This video is part one of a two part series. In part two, we’ll be re-creating the top section from the Divi landing page, and giving away the layout for free. The focus will be on the animated image hover effect, as well as the animated call to action button.

Okay, let’s dive in!

First, I’m going to show you how to download the layout from your Divi Life account, then we’ll upload, and then we’ll customize it!

Downloading the Layout from Your Divi Life Account

Navigate to your Divi Life Account > Downloads Tab, then find the download for the ET Pop Up Video With Call-to-Action Button, and click the file link to download directly.

Next, unzip the .zip file so it will be ready to import in the next step.

Creating the Overlay, & Importing the Layout

Alright, assuming you’ve already installed and activated Divi Overlays, navigate to the Divi Overlays section in your WP Admin and click “Add New.” As a sidenote, if you’re brand new user of Divi Overlays, then I highly recommend taking a look at the Getting Started Guide for Divi Overlays.

Next, give your overlay a name, and then click the big purple button to activate the Divi Builder. Next, we’ll import the freshly downloaded overlay layout by clicking on the portability icon in the top right hand corner.

Now click over to the “Import” tab and select from your computer the layout you just downloaded and unzipped.

Okay so now the ET Pop Up Video with Call to Action Button layout is now imported to your overlay. There’s a few more quick steps we need to do before setting up the trigger.

Firstly, find the “Hide Main Close Button” on the right side, and click to enable it.

Next, we’ll need to add the background color for the overlay. So find the Overlay Background Colorop settings meta box, and paste in this value: rgba(255,255,255,0.9)

This will give it the transparent white background just like the ET popup videos.

Okay, the last thing we need to do is change the overlay animation to the “Scale” animation to make it more like the animation on the ET site. Once you’ve done that, go ahead and click Publish!

Setting Up the Video Pop Up Click Trigger in Divi

Now that the overlay is created, we need to set up the click trigger on a Divi page (or post, custom post type, etc).

As a sidenote, you could also set an automatic trigger instead of a click trigger too. But for this example we’re setting a click trigger.

So navigate to the page you’d like to trigger it from, and open up the module. In this example, we’ll set up the click trigger on a button, but you can set the click trigger to anything. You can consult the Divi Overlays docs for more guidance on this. Navigate to the Custom CSS tab, and paste the unique overlay ID (which can be found on the overlay edit screen or the overlay overview screen) into the CSS ID field of the Divi module, as shown below.

Click, Save, then Publish, and you’re done! Admire the beautiful popup overlay you just created with Divi and Divi Overlays WITH a beautiful animated call to action too 🙂

Now for some customization to make it your own…

Customizing the Divi Pop Up Video Layout to Fit Your Brand

Okay so the default in the layout is great. But you’re going to more than likely want to customize it for your own needs. So I’m going to show you how to do that now.

First, navigate back over to the overlay and open up the top module labeled  “Video Embed Code + Custom Close Button.”

Copy your unique video ID from your YouTube video (as shown below):

The ID is everything after the equal sign like shown in red above.

You’re going to paste that into the code module where the YouTube embed code is found. You’ll replace everything after the embed/ and before the ?

Now your video is added to the on click popup! 🙂

Next, let’s customize the button. You can open up the next module down, which is a button module. You can customize the Button Text and Button URL just like you would in any other button module. The only thing you can’t customize is the button background color, and that’s because it’s added via CSS in order to have it animate.

So to customize the colors, open up the last module which contains the custom CSS. Also, you can optionally move this custom CSS to your Divi Theme Options custom CSS box, or your stylesheet. Just be sure to remove the <style> tags at the beginning and end. You can also leave it in the builder how it is now too.

Now to customize the colors, find the CSS for the keyframes (should be at the end). These keyframes show the progression of the animation, and show the different background color changes. So you can simply change the colors to whatever colors you’d like, and you’ll see the changes reflected on the front end.

That’s it! Be sure to check out part two of this tutorial where we rebuild the top section of the Divi landing page, AND you can download the layout for free too!