How to open a video in a pop-up or PopUp window with Lightbox in Divi by clicking on

Adding content from other pages is really very simple, because through the coding of your page you have to just anchor the link you want to redirect to.

However, some users (including you) want the redirect link to open in a new tab so the reader doesn't leave the page.

Through the WordPress platform this is also possible, even in different types of templates such as Divi that have revolutionized the design of these sites.




What is Divi and what does it work for?

As mentioned above, Divi is a WordPress template that allows users to design anything they can imagine.

Its working method is through a visual builder called Divi Builder which does not deserve the layout and HTML coding from scratch to create the design, as it allows you to add elements by "drag and drop" within the page. Divi also has a library of preset layouts.

It does not require installation, so you just have to access the " Menu "In WordPress, look for the section" Appearance "And insert" Temi "To make sure it's there.

How to open a video in a pop-up or PopUp window with Lightbox in Divi by clicking on

Likewise, its builder can be used via the " Posts and pages "To select the button" Use Divi Builder ”Under the title of the post.

 

Find out how to open a video or a PopUp in a pop-up window with Divi!

Although Divi is characterized by being a visual builder that allows you to design any type of website with the elements the user can imagine, sometimes it is necessary to use a plugin or write code to create specific functions for your page.




The following example is used to open a YouTube video in a pop-up window (also called PopUp or Lightbox) with the simple press of a button.

JQuery code that will trigger the popup function

(function ($) {

$ (document) .ready (function () {

// $ (‘#IDname a’).addClass (‘popup-video’);

$ (('popup-video'). magnificPopup ({

disable On: 100,

tipo: ‘inframe’,

mainClass: 'mfp-fade',

Removal delay: 160,

precaricatore: false,

fixedContentPos: false

});

});

}) (jQuery)

change the background color of the window that will appear once the person has pressed the button, the following code is applied:

.mfp-bg {

Background: # 673ab7;

}

In case you want to set another color, just enter the code for which you want to change it and save.

Advantages of using Divi in ​​WordPress

In addition to allowing us to open a video or a PopUp in one pop-up window, this builder also has many virtues that you can enjoy when you start reproducing it in your creations.

It is a builder with a very simple usability method, which it adapts to more languages and design styles that can be integrated into the WordPress community.


How to open a video in a pop-up or PopUp window with Lightbox in Divi by clicking on


 

In turn, it complements the style of the responsive design, thus being able to integrate elements that can only be viewed on computers or devices.

The modification of its content is done in real time, so it will not be necessary to press a button " Preview ”To see how the page looks at each change.


Also, you don't need to know HTML and CSS to create styles, and if you have the knowledge, it allows you to customize the code for each element.


Each drawing you make can be filed in a " library ”So that it is available to you when you wish to reuse it on any other page or entry.

It also has more tools that will make your page more attractive and easier for the reader to use. As well as the ability to include BreadScrumb to improve SEO, collapse the sidebar to improve reader's reading, or fix the footer.

Finally, through its constant updating, you will be able to maintain the security of your website and its contents within the platform.

add a comment of How to open a video in a pop-up or PopUp window with Lightbox in Divi by clicking on
Comment sent successfully! We will review it in the next few hours.