We are pretty sure that you’re already familiar with the small window that appears while browsing a website. Well, it’s called popup. Popup can appear in different sizes and screen positions on the website. In WordPress, there are many plugins for creating popups. Such as Elementor Pro, JetPopup, Brizy Pro, and others.
The important thing that we should remember is popup shouldn’t be annoying to your website visitor. So, create the popup as simple and attractive as possible.
Some Plugins to Create Popup in WordPress
Elementor Pro
Elementor Pro is an extension of Elementor with hundreds of premium features. So, it can empower you with vast professional tools that speed up your workflow and design. Elementor Pro gives you complete control over the layout and design of your website. In this case, you can play around to customize your popup design. Using Elementor Pro to create a popup by post tag is very simple and easy to use. You can easily set the display conditions of your popup very specifically.
JetPopup
JetPopup by Crocoblock is an add-on for Elementor. You can buy it as a stand-alone plugin or you can buy in a set with other plugins from Crocoblock. The advantage of using JetPopup to create a popup is it has many cool features.
- You can play with popup triggers
- You can create animation popup
- A tons of popup presets
Brizy Pro
Popup Builder in Brizy Pro is coming to give you two flavors. The first is on click popup and the second is automatic triggers and conditions.
- Open on click : Your popup can be trigereed by simply clicking on your elements in your page.
- Triggers and conditions automatically: You can configure which visitor actions will determine the moment when popups are shown.
How to Create and Display a Popup by Post Tag Using Elementor
As we mentioned above that you have many options to create a popup in WordPress. In this tutorial we will show you how to create and display popup by post tag using the Elementor Pro version, so make sure that you’ve already had one.
Step 1: Create the Popup Template
The first thing that you have to do is create a new popup template. To create a new popup template, go to Templates > Popups on your WordPress dashboard and click the Add New button.
Then add the name of your popup and click CREATE TEMPLATE button.
It will direct you to the template library, you can choose a template from the library window or you can design your popup template. To use any template on your library window, just click the Insert button. But in this tutorial, we will create the popup template from the scratch. Click the X icon to close the template library.
Step 2: Adjust the Popup Setting
We need to do some adjustments in the popup setting before start creating a popup template. You can find the best settings for your site. In this tutorial, we will show you the popup settings for your preference. Click the gear icon on the bottom-left corner. In the popup settings, change the Width to 90 viewport width (VW), and Position to Center-Bottom.
Step 3: Design the Popup
Next, design your popup template. Add a new section and select the 5-column structure. In the section settings, set the Width to 950. You can play around with your settings. For example, you can go to the Style tab to set the background, go to the Advanced tab to customize the margin, and many more.
Now back to your columns. On the left column, set width to 33%, and for the other four is 16%.
On the left column, we will add a Heading widget with some text. You can add some text that contains an invitation to your website visitors to visit your other content that is relevant to the current content or any text you want. On the right, we will add an Image widget. You can add some images from thumbnail/ featured images of posts or manually upload the images.
Now the structure is ready. Go back to Popup Settings to customize entrance animation, exit animation, and margin. In this tutorial, we set the entrance to Fade In Down and for the exit animation to Fade Out Up. Next, go to the Advanced tab and then set the margin to 30 (link value together).
Step 4: Publish the Popup
So now the design is ready, let’s click the PUBLISH button to set the display conditions and trigger. To set the display condition, click the ADD CONDITION button and select your option from the dropdown. Since you want to display the popup by post tag, you can set the following display conditions (see the GIF).
Click Next. On the Triggers tab, set the trigger to On Scroll by switching the toggle to Yes. Set the Direction to Down, and set the Width to 95%. Because we want the popup to show when the visitors reach the end of our article.
In this tutorial, we’re not going to set any Advanced Rules. So click on SAVE&CLOSE. Well, now we’re done. Let’s see what it looks like.
