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 word 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 at the box. The viewers often can close the box by clicking the close button or the overlay area.

modal-popup-example
A modal popup example from Bootstrap framework 4

What do you need to follow this tutorial

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

What we need to follow in this tutorial are:

These two plugins can use with any themes that following the WordPress Codex. Go ahead, install and activate these two plugins.

Create the video box in Elementor template

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

  • At the dashboard, go to “Templates” menu – This menu comes with Elementor plugin
  • Click on “Saved Templates” menu
  • Then click on “Add New” button near “Saved Templates” page title
  • A modal popup for adding 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 “Create Template” button
  • Now you are in the Elementor editor page
  • Next drag the video widget to the content area as the screenshot below 
add_video_widget
Drag the video widget to content area
  • After you drop the video widget, you will see the sample video from Elementor shows up as the screen shot below.
video widget
Elementor Video widget comes with the sample youtube link

I will use the default video link from Elementor as it shows 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 light blue box shows up. That light blue box calls a section. See the screenshot below.

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

I want to show the video with 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 changes “Default” to “No Gap” at Column Gap setting.

elementor template setting 1
Change the section content width to 1200 px

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

Add the modal box with our video box

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

modal_box
Search modal box widget and drag to content area you want

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

Next, we will change the “Premium Modal Box” button to a Youtube image button and set the trigger as click event. Also, we will use our video in the Elementor template that we just create 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 Elementor template from “Content to Show” then choose our Elementor template(video_modal_popup) from Content dropdown box.
  • Trigger Options>choose image and pick the youtube image from media uploader popup. (if you don’t have youtube image, you can use any image you already uploaded or upload new image as you like)
  • Change from Content tab to Style tab. We will change the modal box settings in 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 “update” button for save the changes
youtube-image
Click on youtube image to view the video in modal popup
video_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 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 to add the content though the text editor or Elementor template(you can add any content in Element template. it is very helpful.).

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