How to Create the New Popup Template?

Adding new popup template

To create new popup template go to  “TheGem → Templates Builder →  Popups” and click on “Add new”. The templates builder dialog appears asking to enter the name of your new template.

After clicking on  “Proceed” you can then specify the popup width (desktop). This width will be used for the editing mode in page builder (the width of the template area to be edited). Default values are 600 px for desktop and tablet and 300 px for mobiles. You can skip this step and edit the popups width later in the page options of this popup (see below).

By clicking on  “Create template” button the page builder starts loading. After that you can begin with creating your new popup template by adding the content elements – exactly in the same way as you usually do by creating/editing pages and post.

NOTE: in case your page builder is not starting, please ensure that TheGem templates are activated for editing with page builder.

Elementor: Go to “Elementor -> Settings” and activate TheGem Templates

WPBakery: Go to “WPBakery -> Role Manager” and activate “thegem_templates” 

Additional popup settings

After finishing creating / editing your popup template, you can specify additional popup settings. To do this, please close the editor, go to “Edit Template” and scroll down to Page Options of the created popup.

Following settings can be specified:

Popup Width

Here you can specify the width of your popup container in px or in %. For % units add values with %, eg. 10%

Popup Paddings

Here you can specify paddings of your popup container.

Popup Background

Background color for the popups container

Horizontal Position

Here you can specify the horizontal position for displaying the popup.

Vertical Position

Here you can specify the vertical position for displaying the popup.

Background Overlay

Enable/disable the background overlay and specify its color.

Close Icon

Here you can select the position of the popup’s close icon (X) and its color.

Animations

Choose between different entrance and exit animations for displaying the popup.