Documentation

All the information you need in one place

How to Use Popup Patterns in Nelio Popups

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 heading, a paragraph, an image and a button.

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.

Predefined patterns in Nelio Popups.

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 your WordPress 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.

Patterns included in your WordPress 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.

Pattern Directory on WordPress.org.

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 in the Pattern Directory, paste it in the popup editor, and modify it as needed.