[V6] Popup element

What is a Pop-up?

To put it simply, a pop-up is a window that appears while visitors are browsing a site. The main use of the technology is to generate more leads and overall serve advertising purposes.

In GemPages, the Popup element can be added on any page and is fully customizable: From displaying a Newsletter signup form, and attracting viewers with a time-limited discount to informing them of upcoming sales promotions.

Add the Popup element to your page

Step 1: In the GemPages Dashboard, select a page and enter the Editor.

Step 2: Search for the Popup element and drag out one onto your page. A new window will appear for you to customize the element.

As a separate window, the Popup element will not be on your current page. However, you can access it anytime via the sticky button on the right border of the Editor.

By default, the Popup element is blank so you can nest other elements inside it. In the example below of a Newsletter pop-up, you will drag&drop a Newsletter element into the Popup.

Configure the Setting tab

When you select the element, its configurations will be displayed in the left sidebar. Here are what you can do with the Settings tab.

Display

Name: This field allows you to edit and name your pop-up.

Trigger: Select one of the 6 options from the drop-down menu to set the exact time for the pop-up to appear.

• None (The pop-up will not appear at all on the live page).
• Show on page load.
• Show after a certain period of time.
• Show when the user scrolls to a percentage of the way down the content.
• Show when user is about to exit the page (exit intent).
• Show when user reaches the bottom of the page.

Display Frequency: Use the slider or manually input the frequency for the pop-up to show up in days (30 maximum).
This feature works based on website cookies. To check how the popup display with a user, please consider using an incognito window by following the steps here.

Reset Cookie: Hitting this button will reset your cookies and start the Display frequency all over again.

Padding

The Padding slider helps you adjust the padding of the content inside the pop-up.

Increase this slider if you have more content to show.

Close button

This setting allows you to design the close button (i.e. the “X” icon) of the pop-up.

Inside or Outside tab: Choose the place to set your Close button.

More settings: Click on this to expand additional settings for the Close button:

• Background: Set a background color.
• Color: Set a color for the “X” icon.
• Round: Adjust the roundness for the button in percentages.
• Button size: Adjust the size of the button in pixels.
• Icon size: Adjust the size of the “X” icon in pixels.

Dimension

You can set the pop-up to full screen here by toggling on the Full Screen switch.
When you do, there will be 2 more settings to adjust: The Width and the Height of the pop-up.

Overlay

Overlay darkens the page content when the pop-up appears to draw in more attention.

When turned on, you have the option to set the overlay color and its transparency. You can also turn on or off the feature that allows visitors to click the overlay to close the pop-up.

Position

You can select from 09 options to position the Popup element:

• Center Center.
• Top Left.
• Top Right.
• Bottom Left.
• Bottom Right.
• Top Center.
• Bottom Center.
• Center Left.
• Center Right.

Effect

The Popup element has 07 entrance effects you can choose from:

• None: No effect at all.
• Fade.
• Zoom.
• Zoom-out.
• Horizontal Move.
• Vertical Move.
• 3D Unfold.

Extra Class

For the tech-savvies out there, you can even further customize the element by adding extra classes in this field, then pointing to it later in your CSS file.

Configure the Design tab

Just like every other GemPages element, Popup has its own Design tab where you can fine-tune the appearance of the element before saving and publishing your page.

FAQ

How can I test my popup display?

There are a few ways you can test your popup display to your users to make sure it is working properly. We suggest you can use the preview page link to check within an incognito window by following the steps below:

Step 1: Hit the “Save” button to save your progress and then click on “Preview”. Copy the preview link.

Step 2: Open a new incognito window. In Google Chrome, you can do this by clicking on the three dots in the top right corner and selecting “New incognito window.” In Mozilla Firefox, you can do this by clicking on the three horizontal lines in the top right corner and selecting “New Private Window.”

Step 3: Navigate to your preview page in the incognito window. This will open your page as if you were a new user who has never visited your site before. Check how your popup displays then.