How to Create a Pop-up Demo Video on Click with Divi’s Cyber Monday Software Release Layout

Posted on November 29, 2018 by in Divi Resources | 11 comments

How to Create a Pop-up Demo Video on Click with Divi’s Cyber Monday Software Release Layout

It’s Finally Here!

Cyber Monday

Did you miss our Black Friday sale over the weekend? Don't worry! Our biggest discount of all time is being extended for a limited time for Cyber Monday. This is the biggest discount we have ever offered, and it's only something we offer during our Black Friday and Cyber Monday sales. Once the sale is over, this discount won't be available until next year. That's a long time to wait!

Get The Deal Before It’s Gone!

One of the exclusive landing pages we’re providing you with as Lifetime Members and new Cyber Monday customers this year is the stunning Software Release Landing Page. This layout has stunning illustrations in it and a unique use of section dividers that’ll amaze your visitors.

Already a Lifetime Member? You can download the pack right now, no need to partake in our Cyber Monday sale!

software release landing page

Get the Exclusive Cyber Monday Software Release Landing Page

Before getting into this use case, you will need to lay your hands on the exclusive Cyber Monday Software Release Landing Page which you can get by becoming a new Elegant Themes Member, upgrading your existing account, or by already being a Lifetime Member with us. If you are indeed already a Lifetime Member you can log in to our members area and download all of our exclusive landing pages here. Everyone else will need to use the button below to buy or upgrade before they can follow along with the rest of our tutorial.

Claim the Deal Before It Disappears!

Already a Lifetime Member? You can download the pack right now, no need to partake in our Cyber Monday sale!

How to Create a Pop-up Demo Video on Click with Divi’s Cyber Monday Software Release Layout

For the remainder of this post, we’ll assume you’ve either taken advantage of our Cyber Monday deal or that you are already a Lifetime Member and have access to the Cyber Monday Software Release Landing Page

Once you’ve downloaded the new Software Release Landing Page from our members area you can watch the video below to see just how easy it is to set up. We would also encourage you to follow along with this tutorial to get your site ready for further customization.

In this use case post, we’re going to show you how to create a pop-up video demo on click using Divi and the Video PopUp plugin. The video that appears on click will look great on both desktop and smaller screen sizes. This is a great approach if you don’t want to include a video directly on your page but would rather create an interaction with visitors.

Preview

Before we dive into the tutorial, let’s take a look at the end result on different screen sizes.

Desktop

software release

Mobile

software release

Let’s Get Started!

Use the Free Video PopUp Plugin

Install & Activate Plugin

The first thing you will need to do is download the free Video PopUp plugin. You can find this plugin by going to your WordPress website > Plugins > Add New > Searching for ‘Video PopUp’. Once you find this plugin, go ahead and install it. Once you do, make sure you activate the plugin as well.

software release

Plugin Settings

Continue by going to the General Settings of this plugin and enabling the two options at the top.

software release

Add New Page Using Software Release Landing Page

Add New Page & Enable Visual Builder

Time to start putting things into practice! Add a new page, give your page a title and enable the Visual Builder right away.

software release

Upload Software Release Layout from Saved Layouts

Navigate to ‘Your Saved Layouts’ and upload the Software Release Landing Page to your page. If you’re not sure how to do that, make sure you check the video in the previous part of this post that will guide you there step by step.

software release

Add Text Module Below Play Button Blurb Module

As you can notice, there’s already a play button on the page that’ll help us get the result we want. But to make it work, we need to recreate the design in the Blurb Module using a Text Module. Add a new Text Module right below the Blurb Module.

software release

Add Image to Content Box

Once you’ve added the Text Module, go ahead and add the play button image to the content box of your Text Module by clicking on ‘Add Media’ and selecting the play button in your Media Library.

software release

software release

Add Copy to Content Box

Continue by adding some copy right below the image as well.

software release

Text Settings

To make the module match the layout, we’re going to enable center Text Orientation in the text settings of the module.

software release

Default Link Text Settings

And we’ll also modify the link text settings accordingly:

  • Link Font: Cabin
  • Link Font Weight: Bold
  • Link Text Color: rgba(162,176,193,0.7)
  • Link Text Size: 17px
  • Link Line Height: 1.6em

software release

Hover Link Text Settings

Change the Link Text Color on hover.

  • Link Text Color: #a2b0c1

software release

Spacing

Lastly, add some negative top margin to the Text Module as well.

  • Top Marign: -20vw

software release

Add Pop-up Play to Text Module Content

Switch Over to Text Editor

To create the pop-up on click, we’ll need to add a custom link to the content of the Text Module. Go back to the content box of the Text Module and select the Text Editor mode.

software release

Add Link to All Content

Link your content box to the pop-up by adding a link to both the image and copy. Make sure you replace the link url with your own.

<a class="vp-s vp-yt-type" href="https://www.youtube.com/watch?v=zesTKCnvyAU" data-dwrap="1"></a>

software release

Remove Play Button Blurb Module

Now that we’ve created a Text Module that looks exactly the same as the Blurb Module, we’re able to delete the Blurb Module that was there before and that’s it! You can apply this method to any kind of layout you’re using but it definitely is a great added value to the Software Release Landing Page.

 

software release

Final Thoughts

This use case is part of our Cyber Monday Deal where we share 6 FREE limited edition layout packs with Cyber Monday customers and lifetime members. By joining our empowered community during these days and becoming a member, you’ll get:

  • 25% OFF EVERYTHING
  • All of the 6 landing pages for free
  • Access to our awesome themes and plugins
  • Bonus Prizes

Seize the opportunity and become a member today!

11 Comments

  1. Thanks for this article. All these tips are very useful and looking forward to learn more from this blog.

  2. Weired, complicated and very unclear description with popup Video textmodul and what this has to do with the Video Plugin…

  3. Still learning a lot from this post. Please add more post as relevant as this.

  4. Got new things to learn from this post.Still waiting for more from you to get good knowledgeable post like this.

  5. Got new things to learn from this post.Can you tell me other plugins also which are used for pop up video.

  6. Really like the designs of these layout packs. Would come in really useful for the landing pages of some tech clients. Awesome.

  7. Great design. However just too many steps just to create popup. Just incase those who are looking for a free Divi button video popup module that works with YouTube, Vimeo and daily motion. Then you should check out the Divi supreme Modules on WordPress plugin repo.

  8. Hey! very impressive designs. These design ideas could really help. Thank you for sharing this article.

  9. Thank you for sharing this wonderful designs!

  10. Lookup anyone’s Instgram DP for free in full size. Download Instagram Story, Download Instagram Video With Link.

  11. Got new things to learn from this post.Can you tell me other plugins also which are used for pop up video. really a successful program and useful

576,027 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest