In this article, we’re going to see how we can create and manage popups in a website built with Jupiter X. There are two methods that we will discuss:
Using the Jet Popup Plugin
The JetPopup plugin is the addon for the Elementor page builder. It allows users to create and add popups to pages built with Elementor. Popups can be added to widgets, buttons, and different parts of the page. You can also set specific popup triggers and customize the location and appearance of popups.
The JetPopup plugin provides a templates library (please note that the plugin license should be activated to install a ready-made popup template). To use a template from the JetPopup Library when creating a new popup, go to WP Dashboard > JetPopup > JetPopup Library. Here, you can filter the templates by category and find you preferred one and then click the Install button to install the popup template.
After selecting and installing the template, you’ll be redirected to the Elementor editor to edit the content of the popup or customize it to your needs. Once editing is finished, you can set the display conditions in the JetPopup Settings > Settings > Display Settings and select to display the popup either on a specific post/page or the whole site.
JetPopup settings also allow users to set the event when the popup should be displayed.
In addition using a template from the library, you can create a popup from scratch to make your own unique popup. If you go to WP Dashboard > JetPopup > All Popups, you’ll find several default presets which can be used to create a new popup with a specific layout.
For more detailed information about JetPopup and its settings, please read the plugin documentation.
Using Growmatik
Growmatik is a marketing automation plugin that has powerful tools including the Popup Builder, where you can create popups. After installing and integrating your website with Growmatik you can access the Popups section in Growmatik dashboard > Workshop > Popups.
To create a new popup, click the Create Popup button and then select the template from the Default Templates library, set the new template name and click the Customize button.
After that, the Popup Builder environment will be opened so you can edit the popup content and layout settings. Here you can modify, remove or add new elements to your popup. For example, to change the text click on the Text element, then open the element setting by clicking the appropriate icon in the upper right corner, type a new text, change the font properties, alignment or add a link if needed.
The new elements to the popup can be added by hovering over the popup area and then clicking on the “+” icon. Here are the list of elements: Image, Text, Social, Button, Video, Coupon, Form, Spacer.
Apart from changing the popup content, we can customize the popup container area. Click the settings icon on the top left side of the popup to open Box Options.
If you click outside the popup container area, the Overlay settings box will appear, where you can change the background overlay color and transparency.
In the top left corner of the Popup Builder environment, you’ll find the option box, where you can set the Format (Center, Bottom Left, Bottom Right) and Layout (None, Side Image right/left) for your popup.
Once all customizations are done, you can preview the result by clicking the Preview button, and if everything is to your liking, you can click the Save and Exit button to save your popup template.
To show the created popup on a website it should be assigned to a rule. You can do this in Workshop > Popups, hover over the popup and click on the icon with three dots. Then, go to Automate and select the audience type.
Add a condition and click the Create Rule button.
To get more detailed information about the Popup Builder features, visit the Growmatik documentation page.
