Articles on: Site editing

Adding and customizing a pop-up

Pop-up is a window that appears to the visitors when they perform a certain action on a site (for example, click on a button, scroll a page, or just open a site). It basically covers the website and doesn't allow to do anything until the visitor closes the pop-up.

Pop-ups are usually used for marketing purposes — notifying about the discounts, suggesting to subscribe to a newsletter or webinar, etc. You can add a pop-up in our editor to increase your lead counts.

Follow the instructions below to see how you can manage and edit pop-ups.

Important: this option is available for Pro sites only.

To add a pop-up window on your site, open the Pop-ups tab on the toolbar:

Click on + Add Pop-up at the bottom of the menu:

In the opened window you will see all the available options for the pop-up block in the gallery. Choose the suitable one and click on it to add pop-up on a site:

Tip: you can also choose a custom block from the gallery to create your pop-up from scratch.

Firstly, open the Pop-ups tab on the toolbar:

Here you can see a list of all the pop-ups added to your site. They are sorted by the creation date — at the top of the list there are the first added pop-ups.

You can rename, duplicate or delete the pop-up from your site by clicking on the three dots near it:

Note: when creating a copy of the selected pop-up window, only the contents of the block are duplicated, not the settings.

Besides clicking on the exit icon, the visitor can close the pop-up by pressing ESC on the keyboard or clicking outside of the pop-up window. To set it up, click on the "gear" near the pop-up and toggle on the option Close on pressing Escape or clicking outside of pop-up in the Behavior tab:

To go to the editing mode, click on the desired pop-up in the list.

Note: to exit the editing mode of the pop-up, click on any page in the Pages menu or create a new pop-up.

All pop-ups in the gallery are fully responsive and easily customizable. This means that you can add the elements you need to enrich or completely change the look of the block itself.

Pop-ups also have the same settings as the other blocks in the gallery — you can customize their design, animation, background, add pictures, videos, and so on. The article Changing the design of the block will help you start editing the pop-up window.

Besides, you can change the width of your pop-up separately. For that, hover over the block in the editing mode and click on Pop-up settings:

Navigate to the Layout tab and choose the needed width of your window:

You can also customize the color and the size of the exit icon in your pop-up:

If you want to transform your pop-up to a modal window, you can add a header to it and change header's background:

Note: the text in the header is taken from the name of your pop-up — the one you see in the editor.

Animation is great for decorative purposes. You can enable the dynamic appearance of the elements in your pop-up settings.

To add the animation to your pop-up, navigate to the Animation tab in the Pop-up settings and choose the needed type:

Don't forget to publish your site for the changes to appear live.

If you have added different pop-ups with the same trigger on your site, they will open at the same time and overlap each other. To fix this, it is necessary to set the order of the pop-up display in the settings.

For that, open the Pop-ups menu and change the order using drag-and-drop:

Note: the pop-up at the bottom of the list will open first on the site. The rest of the windows that are in the list above will wait until the previous pop-up is closed.

In the settings of each pop-up toggle on the Sequential display in the Behaviour tab:

Tip: to set a trigger for your pop-up, follow the instructions in the article Setting the pop-up triggers.

Updated on: 04/21/2023

Was this article helpful?

Thank you!