Popup Element

About Popup Element

A pop-up 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.

To use the Popup element:

Step 1: From the GemPages Dashboard, locate the target page to open the editor.

Step 2: The Popup element can be found in the left sidebar under the Conversion Booster section.

Step 3: Drag and drop the Popup element to any position on your page.

Once the pop-up is minimized, its label will appear on the right side of the editor. 

Click to expand and reveal the configuration options, which are organized into Settings and Advanced tabs.

Configure the Settings tab

Popup name

Name: Input your preferred name for the pop-up element.

Button close

• Icon: Choose the close button icon (e.g., “X” or “X bold”).
• Icon Size: Adjust the icon size.
• Icon Color: Choose the icon color (e.g., white, #FFFFFF).
• Width & Height: Set the size of the button.
  
• Background: Select the background color for the close button.
• Position: Choose whether the close button appears inside or outside the popup.

Overlay

The overlay darkens the page content when the pop-up 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 to close: Toggle this switch to enable users to click on the overlay background to close the popup. 

Size

• Full screen: Choose whether the popup should take up the full screen (Yes/No).
• Width: Set the width of the popup (e.g., 600px).
• Height: Adjust the height of the popup (auto or specific value).
• Padding: Define the padding inside the popup element (e.g., 32px all around).

Background

• Color: Choose a background color for the popup (e.g., #FFFFFF).

• Image: You can add a background image as well.

Shape

• Border: Set the type of border (e.g., solid, dashed).
• Corner Radius: Adjust the corner roundness (e.g., 16px for rounded corners).
• Shadow: You can enable or disable shadow effects for 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.

Display condition

Configure when the pop-up will be triggered:

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 page loaded: The popup will show on page load
• Scroll partially: The popup will be triggered after the user scrolls to a specific percentage of the page.
• About to exit: The pop-up will appear when the user is on the verge of leaving the page.

Effect

This element has 07 entrance effects you can choose from:

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

Open pop-up with a link

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

Step 1: Select the pop-up you want to open upon being triggered.

Step 2: Right-click the button Popup

Step 3: Select Copy class to copy the pop-up ID.

Step 4: Close the pop-up 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.