How to create a modal popup with Free plugins
Home » BLOG » WordPress » How to create a modal popup with Free plugins

How to create a modal popup with Free plugins

category:  WordPress

What is a modal popup? I explain in my own words to make it understand easily. The modal popup is a box. It shows up on the page with the background color overlay behind the box. With the overlay color, it makes the viewers focus on the content in the box. The viewers often can close the box by clicking the close button or the overlay area.

A modal popup example from Bootstrap framework 4

What do you need to follow this tutorial

Today I did small tasks for my client and one of the tasks was to create a video modal. The modal will be triggered by clicking on the YouTube play image. With the client’s request, we don’t want to spend time too much on this task since the client needs the site to be up and run on New Year. So I did the research and I found a fast way to implement the video modal within a few minutes.

What we need to follow in this tutorial are:

These two plugins can be used with any theme that follows the WordPress Codex. Go ahead, install and activate these two plugins.

Create the video box in the Elementor template

In order to use the modal box widget from the Premiumaddons plugin with the video as the content, we need to create the Elementor template for the video first.

  • At the dashboard, go to the “Templates” menu – This menu comes with the Elementor plugin
  • Click on the “Saved Templates” menu
  • Then click on the “Add New” button near the “Saved Templates” page title
  • A modal popup for adding a new template will popup
  • At the modal popup, select the template type as “section” and give the template name you like. Let’s say “video_modal_popup”
  • Then click the “Create Template” button
  • Now you are on the Elementor editor page
  • Next, drag the video widget to the content area as in the screenshot below 
Drag the video widget to the content area
  • After you drop the video widget, you will see the sample video from Elementor shows up in the screen shot below.
Elementor Video widget comes with the sample YouTube link

I will use the default video link from Elementor as shown above. But you can change the source type and video link you want. 

At the Elementor editor, if you move the mouse over the video in the content area, you will see a light blue box showing up. That light blue box is called a section. See the screenshot below.

Click on a light blue box then its attributes will show up on the left panel

I want to show the video at full width based on the maximum width of the modal box widget which is 1200px. So at the section attributes panel, I will add 1200 in the content width(Boxed). Then change “Default” to “No Gap” in the Column Gap setting.

Change the section content width to 1200 px

Next, from the Layout tab, click on the “Advanced” tab, and we will set the margin and padding as 0. Then click on the “Update” button to save the changes.

Add the modal box to our video box

On the Elementor editor page, search for the modal box widget and drag the modal box widget to the content area you want. See the screenshot below.

Search the modal box widget and drag it to the content area you want

Now you will see the “Premium Modal Box” button on the content area you drag the modal box widget to.

Next, we will change the “Premium Modal Box” button to a YouTube image button and set the trigger as a click event. Also, we will use our video in the Elementor template that we just created in the modal content area. To do so, just follow the settings below.

  • At the Premium Modal Box attributes panel, set the settings below
  • Content section>hide Header
  • Content section> Choose the Elementor template from “Content to Show” then choose our Elementor template(video_modal_popup) from the Content dropdown box.
  • Trigger Options> Choose an image and pick the YouTube image from the media uploader popup. (if you don’t have a YouTube image, you can use any image you already uploaded or upload a new image as you like)
  • Change from the Content tab to the Style tab. We will change the modal box settings in the Style tab.
  • At Style tab>Modal Box>set Width as 1200px
  • At Style tab>Modal Box>set Border Radius as 0
  • At Style tab>Modal Box>set Margin and Padding as 0
  • Then click on the “update” button to save the changes
Click on the YouTube image to view the video in a modal popup
A video modal popup – create within a few minutes with Elementor and Premiumaddons plugins

And that’s it. You finally create the video modal popup in a few minutes. With the Premium modal box widget, you can add any kind of content you want eg. text, images, videos, and more. The Premium modal box widget allows you to add the content through the text editor or Elementor template(you can add any content in the Element template. it is very helpful.).

I hope this post will help you and save you time. Next post, I will share with you how to create the video modal popup without plugins. Stay tuned!