Popups remain one of the best means to grab visitors’ attention so you can advertise your products and services as well as attract web traffic so your audience grows, and your conversion rates go up. However, please take the user experience into account so they can enjoy your website and not make them go away instead thanks to the intrusive popups.
Popup technology has gotten a lot more advanced over the last few years. Now you can show your popups to specific people, at specific times, and in specific places on your website. Creating a popup with display conditions in WordPress has never been easier with many popup builder plugins to choose from. With display conditions, you can set where a popup to show up, including on a specific post category.
Popup Builder Plugins with Display Conditions Support
1. Elementor Pro
The Popup Builder of Elementor offers a new and better way to build and manage popups. With an intuitive process that would be entirely handled by one single and familiar editor – Elementor. All 4 stages of building your popups will be handled inside one streamlined Elementor editor:
- Customizing the popup window.
- Building the inside of the popup.
- Setting the rules and display conditions for the popup.
- Connecting to your site links and contact forms
The above GIF demonstrates how Elementor handled almost all your popup behavior and action. Elementor popup builder also offers many premade popups templates that can get you inspired and makes creating popups getting easier but fined tuned.
JetPopup is an Elementor add-ons designed specifically to create popups. When creating a popup using JetPopup, you also can set the trigger of the popup, display condition of the popup, and catch more attention with popup animation effects. JetPopup also has a JetPopup Preset Library feature, which has many premade templates for the popup, so no need to create a popup from scratch. You also can filter the popup templates by categories like contact form, discount, join us, and many more.
3. Brizy Pro
You can use the Brizy Pro popup builder to create any type of popup. From a marketing ads popup to collect leads or just an information popup. Thanks to its on-click trigger support, you can even use the popup builder to create a full-screen menu or off-canvas menu on your Brizy-powered WordPress site. Brizy popup builder supports display and trigger conditions, so you can set the popup you create to appear on specific pages on your website, and what kind of action that triggers the popup to show up.
Brizy popup builder also has many beautiful templates for creating popups, from sale popups, signup form popups, and even media popups!.
How to Create Popup by Post Categories using Elementor Popup Builder
In this post, we will demonstrate how to create a popup with display conditions namely popup by posts categories using Elementor (the pro version). From your WordPress dashboard, go to Templates → Add New. A new window will appear where you choose what kind of a template you will work with, let’s choose Popup and give it a name.
You will be delivered to the Elementor editor and then given the option to choose the pre-made template for the popup, this time we will create it from scratch to show you how easy it was to create one. Let’s close the pre-made template window and add (+) the structure for your popup template.
Go into the popup setting by clicking the gear icon in the bottom left corner of the Elementor editor panel on the left side. It will show you the Layout settings block to set the width, the height, and the position for the popup. you’re free to follow our setting for the popup size or you can adjust the setting to fit your taste.
Let’s choose not to use background Overlay and activate the Close Button so the visitor will be able to close the popup if they want it to. Then set the entrance and exit animation to grab the visitor’s attention.
On the Style tab, you can set your popup background color, give a border to the popup, and add a box shadow to it. Then scroll down a bit, let’s set the position of the close button so it will not intrude on your popup design and make it less pretty. You can drag the pointer to move the X icon on your popup.
Furthermore, you can set the timing for displaying the close button so your visitor cannot close the popup immediately, by going to the Advanced tab and then setting the Show Close Button After(sec). To make the popup appear floating a bit in the corner let’s set the margin of the popup in the Margin option.
And that’s it for the popup setting we did. You’re free to give the content of the popup in the canvas area. After you are done designing your popup on the canvas area, let’s set the visibility condition for the popup. Start by clicking Publish button on the Elementor settings panel, in the appearing window let’s add a condition for the display location of your popup. In this occasion we will display the popup on the posts with the post category. Click ADD CONDITION → select Singular → select Post – In Category → search the category.
Then click Next to set the popup trigger, for the popup we use the On Scroll trigger, and set the Direction to downward within 50% of the page.
You also can set more rules in the Advanced Rules section, we will skip this step and then proceed to click SAVE & CLOSE button to make our popup ready for action.
Let’s get a look at our newly created popup above, by opening a post with the category, the popup will show up after we scrolled down within half of the page.