Foto de mujer mostrando unas plantillas

Gutenberg appeared in December 2018, when WordPress 5.0 was released. Since then, the block editor has evolved a lot and it is now a fully-fledged WYSIWYG editor that allows you to create pages and posts by adding and moving blocks.

WordPress 5.5 introduced block patterns. The idea of a block pattern is very simple: they are predefined sections (or fragments) formed by a group of blocks that you can use in the creation of pages and posts. Block patterns can be as simple as a section displaying two buttons, a pricing section with eye-catching and complex layouts, or even the layout of an entire page.

Adding a block pattern to a page
Adding a block pattern to a page.

With a mouse click, creating beautifully designed pages has never been easier. And just as we can create pages, we can also create popups using patterns. Let’s see how.

Use Patterns with the Nelio Popups Plugin

Nelio Popups is a popup creation plugin fully integrated into the block editor, with all the advantages that this entails. In the same way you create a new page, Nelio Popups makes it possible to create popups using blocks and patterns.

After installing and activating the plugin, click “Add New” to open the popup editor, which is virtually identical to the page and post block editor you’re already familiar with.

Creating a new popup with Nelio Popups
Creation of a new popup with Nelio Popups.

You can add as many blocks as you need to create the design you want to display in the popup. For example, in the following image you see the editing of a popup created with a header, a paragraph, an image and a button.

Popup creation using blocks.
Popup creation using blocks.

In addition, as you can also see in the image above, in the popup’s sidebar there’s a large set of properties to customize its appearance and behavior: size, position, animation effect, how and when to display it, etc.

Predefined Patterns in Nelio Popups

Nelio Popups comes with a set of predefined patterns to create popups in a matter of seconds. You will find these in the right sidebar, under the “Patterns” tab. Just click on any pattern and the set of blocks that make it up will be copied and adapted to the style of your theme.

Creating a popup from a predefined pattern
Creating a popup from a predefined pattern.

In the following gallery, I show you images of the preview screenshots with the Twenty Twenty theme of the popups created with the Nelio Popups predefined patterns.

Patterns Included in Your Theme

In addition to the patterns that come predefined in the Nelio Popups plugin, you can also create new popups with the patterns that already come from the theme. In the popup editor, in the same way you would do when editing any page, select the pattern you want from the list of those available in your theme and click on it to insert it in the editor.

Creating a popup from a theme pattern
Creating a popup from a theme pattern.

And that’s it, you can now preview it to see how it looks.

Preview of the popup created with a pattern available in the theme
Preview of the popup created with a pattern available in the theme.

As always, you can make the modifications you want and add the properties and effects you need.

Pattern Directory on WordPress.org

Also, as you already know, currently in the WordPress.org pattern directory you have more than 800 pattern designs that you can copy for free. A figure that keeps growing…

Although you may think that the published patterns are only intended to create pages, note that many of them can be used to create popups. For example, if you search for “CTA,” you will surely find more than one that you will like.

Patterns with which to build popups
WordPress.org patterns with which to build popups.

To create a popup from any of them, you just have to click on the “Copy” button that appears when you hover the mouse over the pattern, paste it in the popup editor, and modify it as needed.

Pretty easy, right?

Summarizing

If the patterns for building pages are here to stay, why not take advantage of them to also build popups? Using a plugin like Nelio Popups, which is fully integrated with the WordPress block editor, this is very easy. Either from the predefined patterns in the plugin itself or from the patterns that the theme has installed, or by copying any pattern that you have available in the WordPress.org patterns directory, in a couple of clicks you’ll be able to create outstanding popups.

Featured image of Toa Heftiba on Unsplash.

Leave a Reply

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