WordPress is a platform that since its inception has been a publication space for content designed by the community, giving them tools to improve them. Today we will talk about opening a video or PopUp in a popup window.
Adding content from other pages is really very simple, because through the coding of your page you only need to anchor the link to which you want to redirect.
However, certain users (including you) want that redirect link to be opened in a new tab so that the reader does not 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 constructor called Divi Builder that does not merit the layout and HTML coding from scratch to create the design, since it allows adding the elements “dragging and dropping them” within the page. Divi also has a library of preset layouts.
It does not require installation so you only need to access the ” Menu ” of WordPress, look for the ” Appearance ” section and enter ” Themes ” to ensure that it is there.
Similarly, its builder can be used through the ” Posts and Pages ” option to select the ” Use Divi Builder ” button below the post title.
Learn how to open a video or PopUp in a popup window with Divi!
Although Divi is characterized by being a visual builder that allows you to design any type of website with the elements that the user can imagine, sometimes you need to use a plugin or write coding to create specific functions for your page.
The following example is used to open a YouTube video in a pop-up window (also called a PopUp or Lightbox) with the push of a button.
JQuery code that will trigger the popup function
<script type = “text / javascript”>
(function ($) {
$ (document) .ready (function () {
// $ (‘#IDname a’) .addClass (‘popup-video’);
$ ((‘popup-video’). magnificPopup ({
disableOn: 100,
type: ‘inframe’,
mainClass: ‘mfp-fade’,
removalDelay: 160,
preloader: false,
fixedContentPos: falses
});
});
}) (jQuery)
</script>
To change the background color of the window that will pop up once the person has pressed the button, the following code is applied:
.mfp-bg {
Background: # 673ab7;
}
In the event that you want to set another color, you just need to insert the code for which you want to change it and save.
Advantages of using Divi in WordPress
Besides allowing us to open a video or PopUp in a pop-up window, this builder also has many virtues that you can enjoy as you start to play it in your creations.
It is a builder with a very simple usability method, which adapts to multiple languages and design styles that can be integrated into the WordPress community.
In turn, it integrates the responsive design style, thus being able to integrate elements that can be viewed on computers or devices only.
The editing of its content is done live, so you will not need to press a ” Preview ” button to be able to see how the page looks with each change.
Also, you do not need to know the HTML and CSS language to create styles, and if you have the knowledge, it allows you to customize the code of each element.
Each design you make may be stored in a ” Library ” so that it is at your disposal when you want to reuse it on any other page or entry.
It also has multiple tools that will make your page more attractive and easier for the reader to use. As is the ability to include BreadScrumbs to improve SEO, collapse the Sidebar to improve the reader’s reading or set the footer.
Finally, through its constant updating, you will be able to maintain the security of your website and its content within the platform.