When popups are fully integrated into the design of the website on which they are displayed, they can significantly increase conversion. If you don’t know where to start, in this post I show you some examples that can inspire you to create your own popups and how to create them with a plugin like Nelio Popups.
To do this, first make sure you have installed the Nelio Popups plugin on your website by downloading it directly from WordPress.org or from your own WordPress dashboard.
Once installed and activated, go to Nelio Popups and click on “Add New.” This will open the WordPress block editor you’re already familiar with and you’ll be able to create your first popup.
The popup examples I show below are ordered alphabetically by the name of the website they belong to. For each of them, I’ll show you how you can create it with Nelio Popups. Please note that the results I show here may differ slightly to what you’ll see, as we might be using different themes, styles, etc.
Example 1: Register Popup
Let’s start with a very simple popup. The BBC, after a short time browsing their website, shows you a popup for you to register on their website. Although you are allow you to close it, it is clear that the purpose of this window is to interrupt your reading, so that you see it and subscribe.
How do we create this popup with Nelio Popups? In the block editor you can create the content of the popup in the same way that you edit any page or post. In this case, by creating a cover block that includes a text in the top left corner, and then a headline, another paragraph, and a centered button:
What additional properties should we define for the popup? In the right sidebar we can indicate a lot of additional properties: size, location, animation, when where, and how it should appear, etc.
As you can see in the previous image, the defined properties of the popup are:
- Size: custom 600 pixels
- Location: at the top of the window
- Margin: at a certain distance from the top of the window
- Overlay: A dark gray overlay color is added behind the popup to make it stand out more
- Close button: icon to be able to close the window with the color that best integrates with the popup
In addition, we have indicated that the popup window is not displayed immediately — we want the user to browse our website for a while before opening the popup:
And that’s it! At any time you can preview the popup created to see how it will look on your website.
Example 2: Popup for First Purchase Offer and Newsletter Subscription
The Blue Start Coffee Roasters website displays a popup at the bottom right of the page. The popup offers a 15% discount on your first purchase if you subscribe to their newsletter.
To create a popup like this, as before, you need to create a cover block with some content in it. Just add the logo, the content, and the subscription form. A form which, by the way, you can create with your preferred WordPress form plugin:
Then, define a few additional props to customize the look and feel of the popup:
- Size: custom 500px
- Location: at the bottom and right side of the window
- Margin: at a short distance from the bottom and side edge of the window
- Close button: icon to be able to close the window with the color that best integrates with the popup
And there you go! We’ve duplicated the second design.
Nelio Popups
Fantastic plugin! It’s really easy to create popups as you’re already used to the editor, and all the options it has are really well crafted.
Juan Hernando
Example 3: Newsletter Subscription Popup
When you enter the Armani website for the first time and after browsing it for a while, you will see a popup centered on the page for you to subscribe to their newsletter.
In this case, we create the popup in the block editor with a media and text block in which, in the text part, we add the text and the subscription form to the newsletter.
With the media and text block, depending on image and text sizes, it may happen that the image does not cover the full height of the popup. To prevent this from happening, a new style has been added to the media and text block, “Cover Image (Nelio Popups)”:
The properties we used for this popup are:
- Size: custom size of 900px
- Location: centered in the middle
- Overlay: a light gray overlay color is added behind the popup to make it stand out more
- Close button: icon to be able to close the window with the color that best integrates with the popup
Additionally, we have also indicated that the popup window should not be displayed immediately, but after a certain time of browsing the page. In this case, it should also be indicated that the visitor only see it once or not see it again for a few days.
These two properties are features of the Premium version of Nelio Popups which, at the time of writing this post, are still under development.
Example 4:Popup for First Purchase Offer and Newsletter Subscription
The ETQ website shows a popup in the center of the page with an offer of 10% for the first purchase, when subscribing to their newsletter. This popup is shown after scrolling down the landing page.
To create the content of this popup, in the block editor you only have to add the image, the text, and the subscription form.
We defined this popup with the following properties:
- Size: custom 450 pixels
- Location: centered in the middle
- Padding: added padding to display the popup framed like the original poup
- Overlay: A light gray overlay color is added behind the popup to make it stand out more.
- Close button: icon to be able to close the window with the color that best integrates with the popup.
Additionally, we have also indicated that the popup appears after scrolling down with the mouse.
And that’s it!
Conclusion
Creating effective popups is as easy and familiar as ever. We have seen four different examples of creating popups in WordPress with Nelio Popups. The great advantage of this plugin is that you exclusively use the Gutenberg block editor in which you already have a large set of blocks, patterns, and all the predefined styles of your theme. Thus, the end result is a fully integrated popup that perfectly matches the look and feel of your site.
Come and try it out — it’s free! And if you have any suggestions for improvement or comments, do not hesitate to share it and we will analyze them with love.
Featured image by Ilona Bellotto on Unsplash.
Leave a Reply