Pop-ups, also known as modals are versatile windows or dialog boxes used to display information that requires the user’s attention without navigating away from the main content.

They are commonly used for tasks such as confirming actions, providing additional information, or collecting user input.

How to Add a Pop-up

To add a Pop-up to your page:

1. Go to the Pages panel in the right sidebar.
2. From the topbar, navigate to Pages and then Pop-ups.
3. Click on the + icon to create a new Pop-up.

You can also click on the three-dots icon beside each Pop-up to rename or edit it.

Creating Custom Pop-ups

Pop-ups can be used to display a wide variety of content, such as newsletter sign-up forms, contact forms, survey forms, and more. They can also be designed to match the look and feel of your website, making them a valuable addition to any website’s design.

To create a custom Pop-up:

1. From the top panel, go to Pages and navigate to Pop-ups.
2. Click on the + icon to create a new blank Pop-up.
3. Design and customize the Pop-up using Droip Elements and other options.

By using Droip Elements and other customizations, you can create Pop-ups that are tailored to your specific needs and are seamlessly integrated with the rest of your website. 

Pop-up Settings

Pop-up Settings allow you to control various aspects of the Pop-up, including:

• Pop-up Name: Label used to identify the Pop-up in the builder.
• Automatically Display: Choose whether the Pop-up will automatically display when the user visits the website.
• Which Pages Is It On: Select the pages on which the Pop-up will be displayed.
• Pop-up Delay: Set a delay before the Pop-up is displayed.
• “X” Icon: Choose whether to display the “close” icon.
• Close Buttons: Customize the appearance and behavior of the close buttons.
• Close by Clicking Outside: Set whether the Pop-up can be closed by clicking outside of it.

Pop-up Layout

By using Pop-up Layout, you can precisely control the position of the Pop-up on the screen, and easily adjust its position as needed.

Set Position

In the layout, the screen is divided into 9 equal sections, with 3 columns and 3 rows. To set the position of the Pop-up in the layout, simply assign it to your preferred section. 

For example, to place the Pop-up in the top left section of the layout, select the first section of the layout. 

Horizontal & Vertical Offset

The horizontal and vertical offset in a Pop-up layout refers to the distance between the Pop-up and its position in the layout.

For example, if you want to position the Pop-up 50px away from the top of the page, you would set the “Vertical Offset” property to 50px. And to position the Pop-up 50px away from the left of the page, you would set the “Horizontal Offset” property to 50px.

By adjusting the horizontal and vertical offset, you can position the Pop-up precisely where you want it in the layout, ensuring a consistent and user-friendly experience for your visitors.

Use Pre-built Library 

The Pre-built Library offers ready-to-use Pop-ups, saving time and effort:

1. From the topbar, go to Elements.
2. Click on the Pre-built Library button to access various pre-built elements, including Pop-ups.