Help Center

Popup Style Settings Overview in Elementor

Popup Style Settings Overview in Elementor

Find out how to style up a popup created with JetPopup plugin in the Elementor builder.

Before you start, check the tutorial requirements:

  • Elementor (Free version)

  • JetPopup plugin installed and activated

Firstly, create a new pop-up in the Elementor editor and customize the Settings.

Then, open the Style tab. Let’s look through the options.

In the General Styles accordion block, you have the only option, Z-index, which you can use to place the pop-up either in the background or the foreground of other elements on the page.

popup z-index

In the Popup Container settings, you can set the Size, Position, background, and other style settings of the pop-up container.

Also, keep in mind that you can set different settings for the Desktop, Tablet, and Mobile view.

popup container style settings

In the Close Button tab, you can enable the Use Close Button toggle; it adds a button to the pop-up by clicking on which users can close the pop-up. Also, you can select the Icon for the close button by picking it from the Icon Library or uploading SVG.

popup close button style settings

If you hit the pencil icon near the Icon Transform field, you can set the close button custom position. Click on the rollback icon to restore the default settings. 

popup icon transform

Design the Close button when it is in Normal mode and on Hover via the Icon Styles settings.

close popup icon styles

In the Popup Overlay tab, there are such options:

  • Use Overlay. If enabled, cover the screen beyond the pop-up by darkening the background;
  • Close on overlay click. If enabled, the user can close the pop-up by clicking on the overlay;
  • Background Type. If you push the first pencil (Classic) icon, you can set the monochrome-colored background or image on the pop-up background. If you press the second (Gradient) icon, you can set the color gradient background.
popup overlay

Click the “Publish/Update” button to save the settings.

That’s all. Customize the pop-up style settings using the JetPopup functionality.

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.