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.
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.
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.
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.
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.
And that’s it, you can now preview it to see how it looks.
As always, you can make the modifications you want and add the properties and effects you need.
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
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.
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