Stand with Ukraine. Fight for freedom and democracy

Back to contents

JetPopup Style settings overview

useful information

JetPopup plugin is full of versitile settings and conditions. This tutorial will show you around JetPopup Style settings.

Everybody knows, that a popup is a powerful marketing tool. It has to be eye-catching and striking. And you know what? You can design a popup without a designer’s help! Let’s have a look at the JetPopup style settings which are all you need to create a successful popup.

Having a look at popup settings

Step 1 – Open the JetPopup > Add New Popup block in the WP Dashboard and name the popup.

adding new pop-up with jetpopup

Step 2 – Click the Edit with Elementor button and the popup will be opened in the Elementor editor. Click the gear icon at the bottom-left corner of the Elementor panel to proceed to the JetPopup Settings.

jetpopup settings

Step 3 – Now you can see two tabs – Settings and Style. Open the second one and let’s have a quick look through.

style settings of popup

Step 4 – In the General Styles accordion block, you have the only option, Z-index, which you can use to place the popup either in the background or the foreground of the other elements.

Step 5 – Move on to the Popup Container settings, where you can set the size, custom size, position, background, overlay of the popup container.

popup container settings

Step 6 – Open the Close Button accordion block, where you can decide if you want to show the Close button. Toggle the Use Close Button to Yes to display the Close button.

pop-up close button settings

The Icon dropdown offers you a list of available icons to use.

With the help of Icon Transform option, you can change the position of the Close button moving it along the x-axis and y-axis.

Design the Close button when it is in a normal mode and on hover via the Icon Styles settings, which include Font Color, Background Type, Icon Size, Box Size, etc.

Step 7 – The last step is to open the Popup Overlay accordion block and toggle the Use Overlay option to Yes, so that the overlay appears over the page content. Also, you can enable the Close On Click option and apply varied style settings for popup overlay.

popup overlay

Hope, this tutorial was useful. Customize your popups using JetPopup functionality!