Creating popups with the WordPress block editor! What kind of magic is this?

Whenever Nelio releases a new plugin I try it, because the chance that I will be missing something good, it’s high. I have it in my list, so when I saw that they published a new plugin, in this case, to create a popup, I tried it, and they delivered.

The plugin is called Nelio Popups and is installed for free from the WordPress directory, like any other plugin. Once activated you will see a new item in the WordPress administration menu called Nelio Popups.

It has an easy to use and simple interface so there is no way to get lost, but we have to do our job anyway.

Nelio Popups basically adds a new type of content, like posts and pages, with which you can create your popups, with your usual block editor, but with some special features.

How to create a popup

To create your first popup you simply click the add new button and the block editor opens.

The difference compared to editing a post or a page is that here the content type, the popup, has a number of added customization settings, the main ones being these:

• Title – The name of your popup, only useful internally.
• Activate popup – Whether you want the popup to display with the settings you have defined.
• Settings (with several sections, one for each icon):
  • Style – Here you can change colors, size, appearance, animations, etc.
  • Pages – To choose where you want the popup to be displayed.
  • Triggers – Define when you want the popup to be displayed.
  • Restrictions – In case you want to control that it is not displayed under certain conditions.
  • Advanced – Some more settings for the popup behavior.

We will see some of these elements in more detail, but the structure is very simple and, basically, the process of creating your popup is as follows:

1. You create your popup in the editor, using all the blocks you want and have installed in your editor (the Nelio Popups plugin doesn’t add any specific blocks, you have the same ones you can use in posts and pages, both the WordPress ones and the ones from block collections you have active).
2. You name your popup in its settings.
3. Configure the appearance and behavior of the popup.
4. Publish the changes and activate the popup, if you want. The editor’s preview button opens a new browser tab, which will show the front page of your website and the popup in action, which is always useful for checking the settings you have made.

As you will see, nothing complicated. In my case, I started looking for settings screens and configurations but there was nothing else, it is as simple and effective as this, you create a popup and configure how and where it will be displayed.

Customize the popup

As I said, there are lots of options to customize popups once you have created your block design. Some of them are especially interesting, so let’s take a look at the main ones.

Pop-up Style

The first settings icon will allow us to configure all aspects of the popup design, namely:

• Size – From automatic to full screen, among others.
• Location – All possible positions.
• Padding and margins
• Animation – Four currently available.
  • Delay and speed – In case you want to spice things up.
• Add overlay, close button, border, shadow. – To darken the web while the popup is displayed and customize the popup a bit more.
• Z-index – To adjust the position of the popup.

Of course, in each section, you have lots of possible settings, which are shown when activated.

Pages where the popup will be displayed

I found these settings enormously interesting, especially the way the plugin solves the issue, which is a success. And it turns out that you have apparently few options:

• Show everywhere – If you activate it, it will be displayed on the entire website.
• Show on selected groups – Here you can specify visibility based on conditions, with OR and AND variables, and you can apply multiple, as in widget visibility settings plugins.
• Let each page decide – And I think this is genius, because it adds to the block editor of every page a new section (Nelio Popups) so that in each post or page you can decide if and which popups will be shown, no matter how you have configured each popup, so you have full control over the display of these elements. If you set “Auto” the popups will be displayed as configured, if you choose “None” none will be displayed, no matter how it is configured, and finally you can choose to activate specific popups in each content, regardless of their status.

Pop-up triggers

These settings are usually the biggest potential in any popup system, as this is where you decide when popups will be displayed, with several possibilities.

Nelio Popups offers 4 free actions in this plugin:

• Mouse Action – To customize which CSS selector to open on click or hover.
• Page view – Right after opening the page.
• Scroll offset – From what percentage of scroll will appear.
• Time delay – Define after how many seconds, etc, you want it to be displayed.

Also, in the premium version of Nelio Popups, you will have more options, some fantastic:

• Exit intent – Will be displayed when the user takes the cursor off the page or goes to type something in the navigation bar.
• Inactivity – After a time of inactivity.
• Manual – After a manual action. (clicks, etc.)
• Page read – After a time of reading the page you decide.
• WooCommerce – In situations related to pages of an online store (after adding to cart, at checkout, etc.).

Pop-up restrictions

Here you will find some limits that you can apply to situations in which users will or will not see the popup:

• No other popup to open while this one is active – This is something you won’t find in any other plugin, and it’s awesome that it does.
• Prevent this popup from opening if another popup is active – The same but in reverse, essential.
• Show (or not) on mobile devices.
• Limit the number of times a visitor will see the popup (Premium).
• Delay between consecutive views – So as not to overwhelm your visitors by showing them the same popup every page or every day (Premium).

Advanced pop-up settings

This, although basic, is a highly recommended settings section, as it allows you to add some interesting behaviors to your popup:

• Close on ESC key press – I consider this a usability and accessibility basic, and you should always have it active.
• Close on click out – Still, any ease for the user to exit a popup is too little.
• Block body scroll – Of the page that is behind the popup, it is understood. I find it interesting to have it active.
• Create a custom cookie when the popup opens – Premium settings for greater control of the visualizations, in view of the statistics that Nelio’s people incorporate in the paid version.

How does it work?

The plugin works perfectly. It has just been published but Nelio’s team are not only great developers, but they are also WordPress lovers and community participants, so they don’t release anything without having tested and used it themselves, something that more companies should do so we don’t become beta testers, something more common than usual.

Creating popups is very easy, you only depend on the blocks you have available and your aesthetic taste when creating them.

Is the plugin missing something?

That too, and since it just came out, and I’m sure the folks at Nelio will appreciate it, I’m going to propose some possible improvements:

• I don’t like that every plugin I install from Nelio has its own top-level menu in the WordPress admin. I think that, since they have more and more, they should make a general Nelio menu, and add the menus of their plugins under this generic menu. The only exception would be this one, which being a content type, it makes sense for it to be in the content area, as a top hierarchical level menu, in which case I would rename it from Nelio Popups to simply “Popups“.
• Like so many other plugins, the base user is not going to know what to do or where to do it as soon as the plugin is activated. Too many times we assume that users know every WordPress admin menu and will notice a new one, but there are installations with dozens of plugins, each with its own menu, where one more will go unnoticed. I think it would be interesting to add a warning or a window after installation of the type “Create your first popup here” or something like that.
• Specific blocks for popups – Yes, in my case I have not needed because I already have a collection of blocks that includes all kinds of forms for newsletters, buttons, boxes and checkboxes, but WordPress by default does not include these elements and for many types of popups are essential. It would be nice if the plugin itself added at least 2 blocks: subscription form, with the possibility of connection to the main services, which in the end is what popups are most used for, and a single checkbox to accept conditions and more.
• That the Premium and Support submenus open in a new tab, not in the same window you are in, so you don’t get kicked out of your WordPress admin. A small detail.

Otherwise, I thought it was a great idea to offer a simple tool to create popups, based on the block editor, to avoid having to resort to expensive and heavy layouts of such elements, and thus take advantage of the resources already available on our website.

But do not believe me, go ahead try it and tell us what you think.