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

November 29, 2018

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!

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout Theme Builder Layout

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.

[youtube https://www.youtube.com/watch?v=zeWhWnMvzPw?feature=oembed&w=719&h=404]

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

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout Theme Builder Layout

Mobile

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-1 Theme Builder Layout

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.

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-1 Theme Builder Layout

Plugin Settings

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

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-2 Theme Builder Layout

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.

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-3 Theme Builder Layout

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.

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-4 Theme Builder Layout

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.

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-5 Theme Builder Layout

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.

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-6 Theme Builder Layout

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-7 Theme Builder Layout

Add Copy to Content Box

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

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-8 Theme Builder Layout

Text Settings

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

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-9 Theme Builder Layout

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

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-10 Theme Builder Layout

Hover Link Text Settings

Change the Link Text Color on hover.

  • Link Text Color: #a2b0c1

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-11 Theme Builder Layout

Spacing

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

  • Top Marign: -20vw

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-12 Theme Builder Layout

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.

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-13 Theme Builder Layout

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>

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-14 Theme Builder Layout

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.

how-to-create-a-pop-up-demo-video-on-click-with-divis-cyber-monday-software-release-layout-15 Theme Builder Layout

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!

By Donjete Vuniqi

Donjetë is a freelance content writer who is fascinated by content marketing, design, and technology. She helps clients bring the right content to the right people. If you’re looking for someone to help you tell your company’s story, she’ll know how to handle it.

Share this article:
 

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

inserting-special-characters-into-the-block-editor Theme Builder Layout

Inserting Special Characters Into the Block Editor

For users of the Classic WordPress editor who often needed to insert special characters into their posts, life was once simple. Click the “Ω” button in the editor to open a modal with a list of characters not found on a standard keyboard. The user then only needed to...

review-divi-business-course-by-divi-space Theme Builder Layout

Review: Divi Business Course by Divi Space

Divi Business Course is an 8-week course that teaches how to start and run a Divi web design business and take the business to 6 figures per year. The course is dripped over the 8 weeks and includes live coaching calls, a Facebook group, and lots of documents to help...

metrilo-for-woocommerce-an-overview-and-review Theme Builder Layout

Metrilo for WooCommerce: An Overview and Review

Metrilo for WooCommerce is a growth tool for ecommerce brands that combines in-depth data with customer retention strategies. Analytics tell you all about your marketing and sales efforts, and customer engagement tools maximize the customer experience and encourage...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.