Examples of Popup Designs You Can Create with Nelio Popups

Published in WordPress.

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.

Plugin Nelio Popups on WordPress.org
Plugin Nelio Popups on WordPress.org.

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.

Add a new popup with Nelio Popups
Add a new popup with Nelio Popups.

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.

Sign up popup to BBC news
Popup signup to BBC news.

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:

Creating a popup like the one shown on the BBC
Creation of a popup like the one shown on the BBC.

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.

Editing the properties of a popup
Editing the properties of a popup.

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:

Timeout for showing a popup
Time delay before showing a popup.

And that’s it! At any time you can preview the popup created to see how it will look on your website.

Preview of the created popup
Preview of the created popup.

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.

Blue Star Coffee newsletter subscription popup
Blue Star Coffee newsletter subscription popup window.

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:

Creating a popup with Nelio Popups
Creating a popup with Nelio Popups.

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
Showing a popup created with Nelio Popups
Preview of the created poup.

And there you go! We’ve duplicated the second design.

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.

Emporio Armani newsletter subscription popup
Emporio Armani newsletter subscription popup window.

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)”:

Nelio Popups background image style for media and text type block
Cover image (Nelio Popups) style for media and text type block.

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
Creation of a popup similar to the one shown on the Armani website
Creation of a popup similar to the one shown on the Armani website.

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.

Additional properties of Nelio Popups
Additional properties of Nelio Popups.

These two properties are features of the Premium version of Nelio Popups which, at the time of writing this post, are still under development.

Popup created by copying the one shown on the Armani website
Popup created by copying the one shown on the Armani website.

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.

ETQ newsletter subscription popup
ETQ newsletter subscription popup.

To create the content of this popup, in the block editor you only have to add the image, the text, and the subscription form.

Creating a popup like the one shown on the ETQ website
Creating a popup like the one shown on the ETQ website.

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.

Popup activation condition after moving with the mouse
Popup activation condition after scrolling down with the mouse.

And that’s it!

Preview of the created popup similar to the one shown on the ETQ website
Preview of the created popup similar to the one shown on the ETQ website.

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

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.