Skip to Main Content

How to create a contextual demo video on Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

One of the exclusive landing pages that many provide to their subscribers during the Cyber ​​Monday period, is the superb landing page of the software versions. This layout presents great illustrations and unique use of section separators that will amaze visitors.

cyber monday.jpg

How to get the exclusive software release landing page for Cyber ​​Monday

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

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

How to create a contextual demo video on Divi

Once you have downloaded the new software version landing page from our members area, you can continue reading the following.

In the case of using this tutorial, we will show you how to create a video demo by clicking a button. The video that appears at click will look great on desktop screens and small. This is an excellent approach if you do not want to include a video directly on your page but prefer to interact with visitors.

Preview

Before diving into the tutorial, let's look at the final result in different screen sizes.

Office

final result divi video popup.gif

Mobile

result mobile video popup divi.gif

Let's start!

Use the free Video PopUp plugin

Install and activate the plugin

The first thing to do is to download the Plugin free Video PopUp . You can find this plugin by going to your WordPress website> Plugins> Add new> Search for 'Video PopUp'. Once you have found this plugin, install it. Once you're done, make sure to activate the plugin.

video popup.jpg

Plugin settings

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

Start promoting your blog

Download dozens of Logos, banners, website templates and many other marketing tools to market your WordPress Blog. [Recommended]

configuration video popup.jpg

Add a new page using the landing page of the software version

Add a new page and enable use the Visual Builder

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

create a new page divi.jpg

Download a software version layout from saved layouts

Go to "Your Saved Layouts" and download the landing page that you have posted.

uploaded layout divi.jpg

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

As you can see, the page already contains a play button that will help us get 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 text above the blurb.jpg module

Add an image to the content area

Once you have added the text module, continue and add the image of the play button to the content area of ​​your text module by clicking on " Add a media And selecting the play button on your media library.

Add a media to blurb divi.jpg

choose a picture divi.jpg

Add a copy to the content area

Continue adding a copy just below the image.

duplicate blurb.jpg module

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Text settings

In order for the module to match the presentation, we will enable the orientation of the central text in the text parameters of the module.

activate central orientation.jpg

Default link text settings

And we will also modify the parameters of the link text accordingly:

  • Link Font: Cabin
  • Link font weight: bold
  • Link Text color: rgba (162,176,193,0.7)
  • Link text size: 17px
  • Height of the link line: 1.6em

design menu link divi.jpg

Hover over text settings

Change the color of the hover text.

  • Link text color: # a2b0c1

change the color of the divi.jpg link

Spacing

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

  • Top Marign: -20vw

set a top margin divi.jpg

Add a contextual reading to the contents of the text module

Switch to the text editor

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

edit the text module in text editor mode divi.jpg

Add a link to all content

Link your content area to the pop-up window by adding a link to the image and copy. Make sure to replace the URL of the link with yours.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

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

add a link an image with a video divi.jpg

Remove the Blurb module from the play button

Now that we have created a text module that looks exactly like the Blurb module, we can remove the previous Blurb module and that's it! You can apply this method to any type of layout you use, but it's really great value for the software release landing page.

delete the unused blurb module divi.jpg

Latest Thoughts

As you can see, adding a popup window on Divi using the Video Popup plugin is quite simple. This will allow you to present videos on your blog without automatically needing to integrate it on the content.

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
5 shares
Share4
tweet
Save1