How to create a pop-up demo video on Divi

pop-up demo video divi

Pop-up demo video Divi: One of the exclusive landing pages that many provide to their subscribers during the Cyber ​​Monday period is the awesome software release landing page. This layout features great artwork and the unique use of section dividers that will amaze visitors.

How to get the exclusive Cyber ​​Monday software releases landing page

Before you jump into this use, you should familiarize yourself with the exclusive Cyber ​​Monday landing page which you can get by becoming a new Elegant Themes Member, upgrading your existing account, or already being a lifetime member. with us. If you are already a lifetime member, you can log in to our member area and download all of our exclusive pages here. All other users will need to use the button below to purchase or upgrade before they can complete the rest of our tutorial.

Already a life member? You can download the pack now, no need to participate in the Cyber ​​Monday deal!

How to create a pop-up demo video on Divi

Once you’ve downloaded the new software releases landing page from our member’s area, you can continue reading on.

In the use case of this tutorial, we’ll show you how to create a video demo with the click of a button. The video that appears on click will look great on desktop and small screens. This is a great approach if you don’t want to include video directly on your page but prefer to create interaction with visitors.

Use the free Video PopUp plugin

Install and activate the plugin

The first thing to do is download the free Video PopUp plugin. You can find this plugin by going to your WordPress website> Plugins> Add New> Search for ‘Video PopUp”. Once you find this plugin, install it. Once you are done, make sure to activate the plugin.

Plugin settings

Continue by going to the general settings of this plugin and enabling the two options at the top.

Add a new page using the software version landing page

Add a new page and activate use the Visual Builder

It’s time to start putting things into practice! Add a new page, give your page a title, and immediately activate Visual Builder.

Download a software version layout from saved layouts

Go to “Your Saved Layouts” and download the landing page you uploaded.

Add a text module under the Blurb module of the play button

As you can see, the page already has a play button that will help us achieve the desired result. But for this to work, we need to recreate the design in the Blurb module using a text module. Add a new text module just below the Blurb module.

Add an image to the content area

Once you have added the text module, go ahead and add the play button image to the content area of ​​your text module by clicking “ Add media ” and selecting the play button from your media library.

Add a copy to the content spot

Continue by adding a copy just below the image.

Text settings

To make the module match the layout, we will enable the central text orientation in the module text settings.

Default link text settings

And we will also change 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

Hover over text settings

Change the color of the link text when hovering.

  • Link Text Color: # a2b0c1


Finally, add a negative top margin to the text module as well.

  • Top Margin: -20vw

Add contextual reading to text module content

Read more: WordPress plugin review: Divi Mega pro

Switch to the text editor

To create the pop-up on click, we will need to add a custom link to the content of the text module. Return to the text module content area and select Text Editor mode.

Add a link to all content

Link your content spot to the pop-up by adding a link to the image and the copy. Make sure to replace the link URL with your own.

Remove Blurb mod from play button

Now that we’ve created a text mod that looks the same as the Blurb mod, we can remove the Blurb mod that was there before and that’s it! You can apply this method to any type of layout you use, but it’s a great added value for the software version landing page.

Final thoughts

As you can see, adding a pop-up window on Divi using the Video Popup plugin is pretty straightforward. This will allow you to feature brel on your blog without automatically needing to embed them on the content.


For website maintenance service contact us.

Leave a Reply