Getting Started

Use Pop-up settings to create any pop-up for your website. This article will cover every kind of pop-up you can use on your website for any purpose. You can let a specific row or button on your website using two modes: Exit Intent and On load. All these options are explained briefly in this article.

Row Pop-Up

You can use the Row Pop-Up setting to pop up any row during exit or on site-load. Let’s dive into the steps, follow the steps given below:

- Go to the row you want to pop-up
- Click on Edit Row
- Expand the Pop-Up setting under the General tab
- Toggle the Enable Pop-up option and enable it
- Give it a Modal ID
- Toggle Pop-Up preview to preview what the pop-up would look like
- Close the editor and go to Page Settings
- Expand the Pop-up setting option under the Basic tab
- Select what type of Pop-Up you want, either Exit or Onload
- Click on Publish

Here are all the steps visualised ⬇️

Go to the row you want to pop up, click on Edit Row, expand the Pop-Up setting under the General tab and toggle the Enable Pop-up option and enable it




Give it a Modal ID
Toggle Pop-Up preview to preview what the pop-up would look like




Close the editor and go to Page Settings
Expand the Pop-up setting option under the Basic tab
Select what type of Pop-Up you want, either Exit or Onload





Click on Publish to check what your pop-up would look like on your website.

Pop-Up Styles

You can stylize what your popup will look like using the Pop Style setting on the Popup setting of the Row editor, you can adjust the width and height according to your preference and needs.

Refer to the GIF below ⬇️

Close Button Style

This setting lets you customize the close button, the button that a visitor on your website will use to close the pop-up after it appears

Refer to the picture below ⬇️

Exit Intent Pop-Up

This pop-up style works when users hover their cursor anywhere outside the website. As the name says, a pop-up will appear when a user tries exiting the website.

To set this pop-up style, follow the steps in the pictures and the GIF below ⬇️

Go to Page Settings




Expand the Popup Settings options




Choose the Modal ID of the Popup you created and choose if you want to show it repeatedly or only once.




The picture below shows the Modal ID of the Row popup and that the Show it repeatedly option is ON.




The pop appears in this way; refer to the GIF below for the visual demonstration ⬇️

Onload Pop-Up

This pop-up style works when a visitor loads your webpage, either for the first time or every time. As the name says, a pop-up will appear when a user loads the website.

To set this pop-up style, follow the steps in the pictures below ⬇️

Go to Page Settings





Expand the Popup Settings options





Choose the Modal ID of the Popup you created and choose if you want to show it repeatedly or only once.




The picture below shows the Modal ID of the Row popup and that the Show it repeatedly option is ON.




The pop up appears in this way; refer to the GIF below for the visual demonstration ⬇️

Button Pop-Up

You can use the Button Pop-Up setting to get any row pop up when a user clicks the button. Let’s dive into the steps on how to create a button pop-up; follow the steps given below:

- Hover over the specific button you want to set a popup to
- Click on Edit Element
- Under the General tab, expand the Button Link option
- Change the Link type to Pop-up
- Choose the Modal ID of the row you want to popup upon clicking the button
- Click on Publish
- Check out your site to view the changes

To set this pop-up style, follow the steps in the pictures below ⬇️

Hover over the specific button you want to set a popup to




Click on Edit Element
Under the General tab, expand the Button Link option
Change the Link type to Pop-up
Choose the Modal ID of the row you want to popup upon clicking the button




Click on Publish
Check out your site to view the changes

Video Tutorial

How to Add Popup on your website using Dorik Website Builder. Please check following video to know about this.

Related articles

Page Settings

Updated on: 13/05/2024