User experience really matters for a blog. Even for merely displaying a popup. Readers really hate it when they get interrupted by a popup when reading your posts. Let alone when the popup takes a large portion of the screen.
No matter how great your post is, readers will likely go away instead of continue reading your post when they are interrupted by an annoying popup.
There are a bunch of popup builder plugins available for WordPress, but not all of them allow you to fully control the design as well as the behavior of your popup. In this post, we will show you some ideas of how to display a popup on your WordPress blog without bothering the reading experience.
Why Reading Experience Matters
To answer the question, let’s position yourself as a reader. You definitely feel annoyed by the emergence of a popup when you are reading an article on a blog. Especially when the popup has an overlay that covers the whole area of the screen like the one below.
Your feeling will get even worse when you find the popup shows up immediately once the page is loaded — without a delay.
Displaying a popup without a delay is not a good practice when it comes to reading experience. You need to give your reader a chance to read your article first before showing up the popup.
Mistakenly displaying a popup has a big impact on form conversion as well. In the context of collecting email subscribers, you will find a fact that your form collects fewer subscribers if you display your popup the wrong way. We have proved it.
Before adopting the current popup style (which shows up in a slide-in mode on the bottom-right corner), we adopted a popup style like the one on the image above: a popup that appears on the center area of the screen — with an overlay. The conversion was extremely bad. After adopting the current popup style, we managed to collect email subscribers by threefold!
Tips to Displaying an Email Subscription Popup
The purpose of displaying an email subscription popup is to collect leads (email subscribers in this case). You need these email subscribers to send email campaigns such as newsletters, new post notifications, and so on.
Even so, you also need to care about your readers by not displaying a popup that bothers their reading experience. Some tips you can apply to display an acceptable popup:
- Add a delay to give your readers a chance to read your article first
- Avoid displaying a popup on the center area of the screen. Readers hate it when the article they are reading is suddenly covered by a popup
- Disable the overlay to keep your article be visible (unless the popup is created for a specific purpose — e.g., content locker)
- Target readers coming from specific sources (e.g., search engine)
- Use a decent design
Recommended Popup Builder Plugins
1. Elementor Pro
Elementor is one of the best plugins to create a WordPress website that focus on design. While it has a main function to create pages, you can also use Elementor to create the supporting elements of your website, including popup.
You can use the popup builder feature of Elementor to create a wide range of popups. From a notification popup to an email subscription popup. You have unlimited design options as the popup creation process is done via the Elementor editor. You can add any widget to your popup, including the Form widget which you can connect with plugins and services like MailPoet, MailerLite, to ActiveCampaign.
When creating a popup with Elementor, you can easily disable the overlay and place the popup to any area of the screen. From center, bottom, top, or corner. The display condition feature allows you to set where the popup to appear. To show the popup, you have several trigger type options to choose from as below:
- On page load
- On scroll
- On click
- On exit intent
- After inactivity
- On scroll to element
2. Breakdance
Breakdance is of one of the best Elementor alternatives in the page builder segment. It has nearly all features Elementor offers, including a popup builder. In Breakdance, the popup creation process is also done via its visual editor just like Elementor. Meaning that you can create a beautiful popup using your own design. You can also disable the overlay and place your popup to any area of your screen.
Breakdance comes with three design elements dedicated specifically to add a form: Form Builder, Login Form, Register Form. You can use the Form Builder element to create the email subscription form. The Form Builder element of Breakdance supports integration with ActiveCampaign, ConverKit, MailerLite, GetResponse, and MailChimp.
To show the popup, you can choose from the following trigger types:
- On page load
- On page scroll
- On page scroll up
- After inactivity
- On exit intent
- On click
You can also set the popup to show up on specific page(s) on your website thanks to the display condition feature.
3. Bloom
Bloom is another recommended plugin to create an email subscription popup. It supports integration with 20 email marketing plugins and services. Bloom also supports display condition to allow you to display a popup on specific page(s) on your website. Also, you can set the popup to appear based on the following trigger types:
- On page load with a delay
- After inactivity
- After commenting
- On page scroll
- After purchasing a WooCommerce product
- On click
Bloom comes with built-in statistics feature to allow you to track the performance of your popup. Unfortunately, it has no front-end editor like Elementor and Breakdance above. The plugin itself is developed by Elegant Themes, but it doesn’t use Divi Builder to create the popup. Instead, it uses its own popup customizer has fewer design options.
4 Ideas to Display Email Subscription Popup on Your WordPress Blog
Finally, here are four ideas you can adopt to display an email subscription popup on your blog without interrupting the reading experience. Remember again: never display a popup without a delay.
1. Display a Popup in Slide-In Style on the Bottom-Right Corner
This is the popup style we personally adopt on our blog. We adopted this popup style to replace the previous popup style (the one on the center area — with an overlay) which had a bad conversion. Actually, the initial purpose of switching to a slide-in popup was to improve reading experience on our blog. Turn out, the conversion rate is way better than the previous one.
By placing the popup on the bottom-right side of the screen, the content area will keep visible so that your readers won’t be too annoyed by the popup. Just make sure to disable the popup overlay.
All three popup builders above allow you to create a slide-in popup. Here is an example of a slide-in popup.
2. Prompt User to Click a Button to Show the Popup
You can also involve user interaction to show the popup by prompting your users to click a button to show a popup. You can place the button on the bottom-right corner or any other area on your screen. If you choose this method, make sure to make the button visible to users. Otherwise, no one will click it.
Here is an example of this method.
You can adopt the tip above in Elementor Pro and Breakdance. Bloom has no feature to display a popup like the one above.
3. Display the Popup as the Bottom/Top Bar
Another option to display an email subscription popup without interrupting reading experience is by placing the popup as a bottom bar or top bar. For this option, you can use an inline form design by placing the form fields and button side by side. This way, your popup won’t be too high so that it doesn’t take a large portion of the screen. Here is an example.
4. Display the Popup on Exit Intent
If you really don’t want to bother your readers when they are reading your content, you can hide your popup until they are done reading your content. Afterward, you can display the popup when your readers are attempting to close your page. The three popup builders above allow you to show a popup on exit intent.
What is exit intent?
In the context of popup, exit intent is based on the user behavior with the mouse device. The popup will show up when a user points the cursor out of the page area with an intention of closing the page. Take a look at the example below:
The three popup builders above support exit intent trigger. In exit intent, you can assume your users are done reading your content. That being said, you can enable the popup overlay.
The Bottom Line
Popup is great to generate leads. If you are a blogger, you can use a popup to collect email addresses of your visitors. However, there are some things you need to notice before you create an email subscription popup. Basically, most people hate popups so that you need to arrange a strategy to display a popup on your blog.
For an editorial content-based website like a blog, the most important thing you need to keep in mind when creating a popup is to keep the content area visible. You can do it by eliminating the popup overlay. The popup placement is also crucial. Avoid displaying a popup on the area that potentially disrupt reading experience. On the center area, for instance. You can try one of the tips we have just covered above to figure which one works best.