Popup Element

About Popup Element

A popup is a window that emerges while visitors are browsing a website. Its primary purpose is to generate more leads and serve advertising objectives effectively.

From the GemPages Dashboard, open a template to edit. You can quickly find the element on the left sidebar of the Editor, under the Conversion Booster section. Drag & drop the element to any position on your page.

Once the popup is minimized, you may notice its label on the right side of the Editor. Click to expand and reveal the configuration, including the Settings and Advanced tabs, on the left sidebar.

Configure the Settings tab

Display

Name: Input your preferred name.

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

• None: The popup will not be displayed on the live page.
• After loaded: The popup will show on the page load
• After time: It will show after a certain time. 
• Scroll partially: The popup will be triggered after the user scrolls to a specific percentage of the page.
• About to exit: The popup will appear when the user is on the verge of leaving the page.

Show frequency  

• Show mode: Choose whether to show the popup to the user only once, every time they visit the page, or after a specific time. 

Button close popup

This setting allows you to design the close button.

• Inside or Outside tab: Determine the location of the close button within the popup.
• Background: Set a background color.
• Color: Set a color for the “X” icon.
• Corner: 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.

Size

• Full Screen: Activate this toggle to expand the popup to the full screen. Alternatively, you will have the option to specify your desired width and height in pixels or percentages.

Background

You can change the background color of the pop up. Simply enter the hex color code for your button or choose from the suggested color.

Overlay

The overlay darkens the page content when the popup appears, enhancing its visibility. When activated, you can customize the overlay color and its transparency.

• Color: Pick a color from the palette for the overlay color.
• Opacity: Adjust the opacity of the entire section. A lower numerical value corresponds to a higher level of transparency.
• Click overlay to close popup: Toggle this switch to enable users to click on the overlay background to close the popup. 

Position

Adjust the position of the image in 9 different positions: top left, top-center, top right, middle left, middle-center, middle right, bottom left, bottom-center, and bottom right.

Effect

This element has 07 entrance effects you can choose from:

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

Open popup with button

GemPages has supported opening a popup with button by following these steps:

Step 1: Select the button that you want to add the trigger.

Step 2: In Settings tab, click Pick link

Step 3: Navigate to Popup tab and select your preferred popup, then click Save

Open popup with link

GemPages allows you to trigger popups via hyperlinked text. That means you can obtain the popup ID and hyperlink your chosen text with it.

Step 1: Select the popup you want to open upon being triggered.

Step 2: Right-click the button Popup

Step 3: Select Copy class to copy the popup ID.

Step 4: Close the popup window and highlight the text you want to turn into a link

Step 5: Click on the hyperlink button.

Step 6: Paste the copied link

Step 7: Remove the dot from the start of the ID and replace it with a #, then choose Link to this URL.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.

You can also find more useful tips and video tutorials at GemPages Academy.