One of the exclusive landing pages that many provide to their subscribers during the Cyber Monday period, is the awesome software releases landing page. This layout features great illustrations and a unique use of section dividers that will wow readers. visiteurs.
How to get the exclusive software release landing page for Cyber Monday
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 into 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 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 use case of this tutorial, we will 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 a video directly on your page but prefer to create interaction with visiteurs.
Preview
Before we dive into the tutorial, let's take a look at the end result in different screen sizes.
Office
Mobile
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 website WordPress > Plugins > Add New > Search for 'Video PopUp'. Once you find this plugin, install it. Once you're done, make sure to activate the plugin.
Plugin settings
Continue by going to the general settings of this plugin and activating the two options at the top.
Add a new page using the software version landing page
Add a new page and enable 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 a media And selecting the play button on your media library.
Add a copy to the content area
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 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
Hover over text settings
Change the color of the hover text.
- Link text color: # a2b0c1
Spacing
Finally, also add a negative top margin to the text module.
- Top Marign: -20vw
Add a contextual reading to the contents of the text module
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.
<a class="vp-s vp-yt-type" href="https://www.youtube.com/watch?v=zesTKCnvyAU" data-dwrap="1"></a> |
Remove the Blurb module from the play button
Now that we have created a text mod that looks exactly the same as the Blurb mod, we can remove the Blurb mod that existed before and that's it! You can apply this method to any type of layout you use, but it's really a great added value for the software version landing page.
Latest Thoughts
As you can see, adding a popup 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 into the content.
