Are you ready to create your first popup with Nelio Popups? By following the step-by-step instructions in this walkthrough, you can easily publish your first popup on your site.
Before getting started, make sure you’ve installed and activated Nelio Popups on your site.
Table of Contents
Adding a New Popup
To begin, you’ll need to be logged into your WordPress admin area. Once there, click on Nelio Popups in the admin sidebar to go to the list of all popups.
Then, to create a new popup, click on the Add New button to launch the popup builder. Since Nelio Popups is completely integrated with modern WordPress technologies, the popup builder equals the WordPress block editor.
In the block editor, you can enter a title for your popup (such as “Call to action”).
If you’d rather not enter a title, then the popup name will default to “(non title)”. Also, note that the title is not visible in the popup content.
Creating the Popup Content
Below the title field, you’ll find the block editor. You can use any block from your WordPress site to be part of the popup content. For example, in the following image you see the editing of a popup created with a heading, a paragraph, an image and a button.
Alternatively, you can select a predefined pattern for your popup. 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” section. 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.
Once you’ve edited the popup content, it’s time for defining its additional styles.
Customizing the Popup Styles
Style settings enable you to configure the details and design of your popup, such as its size and location.
To view and edit the options available for the styles of a popup, in the editor sidebar, go to the Settings panel, and open the Style tab.
The default values may work for you. But note that you may change here different settings such as the margin and padding of the popup container, its size and location within the visitor’s viewport, the opening animation for the popup, or the close button of the popup container.
For full details about style settings, please check out how to set up popup styles in Nelio Popups.
Displaying Popups on Your Site
After setting the styles, you can configure additional settings to decide where and under which circumstances you want to display the popup.
Editing Popup Locations
Settings under the Locations section will help you define where in your site you want to display your popup. By default, your popup is set to be shown everywhere on your site. This means that each visitor landing everywhere on your site will see the popup.
But you can create complex condition groups to decide the locations in which your popup appears. Available conditions include selecting specific post types and post type instances, taxonomies, and even concrete URLs.
If you would like to explore every option related to popup locations, check out how to set up popup locations with Nelio Popups.
Editing Popup Triggers
Since a popup trigger is what makes your popups appear, they are downright crucial for your popup to work. In other words, if you want your visitors to see your popups, you’ll need triggers for your popups to display
In the editor sidebar, go to the Settings panel, and open the Triggers tab. By default, your popup will open once the user visits a page of your site (accordingly to what you configured in the Locations section of the popup settings).
There are multiple triggers available in Nelio Popups. Note that some of them require the purchase of Nelio Popups Premium and the activation of a license.
You can create two or more triggers for the same popup. Maybe you need your popup to display automatically on the homepage. Yet, you’d like that same popup to appear when someone clicks a CTA button. No problem.
Just click the ‘Add Trigger’ button to add more than one.
If you would like to explore the details of each available trigger, please refer to the complete guide to popup triggers with Nelio Popups.
Editing Popup Conditions
A popup condition is a rule that must be followed to make your popup appear. They are downright crucial for your popup to work. In other words, if you want your visitors to see your popups, your conditions need to be true for your popups to display.
By default, no condition is set under the Conditions tab, meaning there is no additional restrictions to display your popup. But you can change that to fit your needs. For example, in the following screenshot you can see a condition to only show your popup when the shopping cart of the visitor is empty:
There are multiple conditions available in Nelio Popups. Note that some of them require the purchase of Nelio Popups Premium and the activation of a license.
If you would like to explore the functionality of each available condition, please refer to the complete guide to popup conditions with Nelio Popups.
That’s it! You now know how to create popups with Nelio Popups.
Next, please be sure to test out your popup. We’ve created a detailed testing checklist to help ensure that your popup looks and works just how you’d like.
Once you have tested your popup and it is ready to display on you site, you need to activate it. If you do not activate a popup, it will not display to your visitors.
Activating a popup is really easy with Nelio Popups. When editing a popup, in the editor sidebar go to the Status panel. There you will find the activation toggle for the popup you are editing.
Once your popup is active, it will be available to be shown to your visitors. Therefore, make sure the popup is ready before activating it.