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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/popup-z-index-1.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/popup-container-style-settings-1.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/popup-close-button-style-settings-1.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/popup-icon-transform-1.png)
Design the Close button when it is in Normal mode and on Hover via the Icon Styles settings.
![close popup icon styles](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/close-popup-icon-styles-1.png)
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](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/popup-overlay-1.png)
Click the “Publish/Update” button to save the settings.
That’s all. Customize the pop-up style settings using the JetPopup functionality.