Pop-up Element

In this article, you will learn about Pop-up elements and how to use them to create highly converting pages.

What Is The Pop-up Element? 

Pop-ups are windows that appear on a website that a user has visited. They materialize automatically without any intervention. Its content can vary widely: it can be an opt-in form that is meant to generate leads, a video that is designed to promote a company’s campaign, a message that displays the latest news and updates, or a third-party advertisement that the shop owner wants the visitor to click on so he can earn extra cash.


You can quickly find the element on the left sidebar of the editor page.


Settings Tab's Parameters

  1. Display
    • Name: You can determine the name of the pop-up. 

    • Trigger: There are 6 different ways to make a pop-up appear. 

      • None
      • 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
  2. Display
      • Frequency (day unit): You can decide how often visitors can see popup every 3 days.  

      • Reset Cookie: You can start the process all over again.

  3. Padding: It let you change the width of the content inside with the pop-up border. 

  4. Close Button

      • Inside or outside: You can decide the position of the close button inside or outside of the pop-up's field. 

      • More settings: You can custom further the close button's color, size, shape, and so on. 

  5. Dimensions: You can adjust the size of the pop-up. 

  6. Overlay: The effect is for directing visitors' attention to the pop-up. You can enable the slide button to make it work.

      • Color: To change the color of the background. 
      • Opacity: To determine the transparency level of the background. 
      • Click overlay to close pop-up: To turn off the pop-up by click the outside of the pop-up's field. 

  7. Position: You can decide where to display the pop-up on the screen. 

  8. Effect: You can choose from 7 animation effects of how a pop-up displaying including Fade, Zoom, Zoom-out, Horizonal Move, Vertical Move, 3D Unfold, and None

  9. Extra Class: If you wish to customize one element particularly, please use this field to add a class name and then refer to it in the CSS file.

When done well, pop-ups can increase your subscriber count, drive conversions, and highlight important information. If you have a further question about how to create a functional and beautiful-looking pop-up, don't hesitate to contact with dedicated Gempages customer support team. 

Was this helpful?