Adding and Customizing a Pop-up

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.

Adding a pop-up

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

2. Click on + Add Pop-up at the bottom of the menu:
3. 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.

Managing your pop-ups

1. 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.

2. 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.

3. 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:

4. 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.

Changing the layout of the pop-up

All pop-ups in the gallery are fully responsive and easily customazible. 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.


1. 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:

2. Navigate to the Layout tab and choose the needed width of your window:
3. You can also customize the color and the size of the exit icon in your pop-up:
4. 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.

Adding animation to the pop-up

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


1. 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.


Working with several pop-ups

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.


1. 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.

2. 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.

    • Related Articles

    • Setting the Pop-up Frequency

      After adding and customizing a pop-up, you can decide how often it will be shown on the published site. The conditions of frequency are stored in the browser cookies. If the user deletes the browsing data (or uses another browser), we will consider ...

    • Adding a Countdown

      A countdown block serves for displaying backward counting to indicate the time remaining before an event that is scheduled to occur. Use countdown to announce the discount period or special offer, estimate the time left before the launch of a new ...

    • Adding a Language Menu

      A language menu is a specific component in the header and footer that allows your visitors to switch between languages on your multilingual site. When a user clicks on the language menu, it redirects them to the chosen language version of your site. ...

    • Adding Blocks With Tabs

      Tabs are useful for organizing chunks of related information into a single block, thereby freeing space on a page. With this feature, you can structure the pictures in a gallery by general topics, organize your company's products and services, and ...

    • Adding a Custom Block

      SiteCliq editor allows you to create your site with the help of pre-designed blocks that contain a set of elements. If none of our ready-made options in the gallery meets your needs, you can select an empty custom block to build your layout from ...