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 Popup 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 on it to expand the popup and reveal the configuration, including the Settings and Advanced tabs, on the left sidebar.
Configure the Settings tab
Name: Input your preferred name to differentiate the popup
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: The popup 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 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 of the popup.
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.
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.
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.
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.
The Popup element has 07 entrance effects you can choose from:
- None: No effect at all.
- Zoom out.
- Horizontal Move.
- Vertical Move.
- 3D Unfold.
Configure the Advanced Tab
For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.
And there you have it! If you need any further assistance along the way, our GemPages Support Team is always here for you!