{"id":35337,"date":"2023-02-10T14:31:15","date_gmt":"2023-02-10T14:31:15","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=35337"},"modified":"2023-07-19T09:45:18","modified_gmt":"2023-07-19T09:45:18","slug":"popup-style-settings-overview-in-elementor","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetpopup\/popup-style-settings-overview-in-elementor\/","title":{"rendered":"Popup Style Settings Overview in Elementor"},"content":{"rendered":"\n

Firstly, create a new pop-up in the Elementor editor<\/strong><\/a> and customize the Settings<\/strong>.<\/p>\n\n\n\n

Then, open the Style <\/strong>tab. Let\u2019s look through the options.<\/p>\n\n\n\n

In the General Styles<\/strong> accordion block, you have the only option, Z-index<\/strong>, which you can use to place the pop-up either in the background or the foreground of other elements on the page.<\/p>\n\n\n\n\"popup\n\n\n\n

In the Popup Container<\/strong> settings, you can set the Size<\/strong>, Position<\/strong>, background<\/strong>, and other style settings of the pop-up container.<\/p>\n\n\n\n

Also, keep in mind that you can set different settings for the Desktop<\/strong>, Tablet<\/strong>, and Mobile <\/strong>view.<\/p>\n\n\n\n\"popup\n\n\n\n

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

If you hit the pencil <\/strong>icon near the Icon Transform <\/strong>field, you can set the close button custom position. Click on the rollback <\/strong>icon to restore the default settings. <\/p>\n\n\n\n\"popup\n\n\n\n

Design the Close button<\/strong> when it is in Normal<\/strong> mode and on Hover<\/strong> via the Icon Styles<\/strong> settings.<\/p>\n\n\n\n\"close\n\n\n\n

In the Popup Overlay <\/strong>tab, there are such options:<\/p>\n\n\n\n