How to change background to blurry at Pop Up window in Elementor

In fact, in the background of a pop up window, the following can be changed:

collor
transparency
you can make it completely disappear
blurry

I would like to focus on these four aspects in this article. A hundred people, a hundred tastes, and everyone has a perception of how the background is supposed to look. Somewhere, you need to have none, elsewhere blurred, and for some sites, color will definitely play a role.

How do I create a pop up window?

First, a little foundation. If you have Elementor installed in your WordPress, a pop up window is created using the left administration menu and the “template” item. Choose the first “popup” option here. Then click on “create template.” In the next step, select a “popup” type, name your new popup window, and click to create a template.

What will interest us now is how to set the pop-up behavior. That’s kind of pointlessly hidden in the bottom left corner. You really can’t see this button very much.

Entrance and Exit animation

Let’s take a marginal look at the animations of the window. In fact, these animations are also set here. The animation then causes an effect of how the window, along with the background on the web, is shown or disappears. Specifically, you have the following options:

Entrance Animation
Exit Animaniton

Setting background color

To set the background color that appears around the pop-up window, follow these steps:

move to the “CSS” tab
choose a tab “overlay“
expand the item “background type“
click on the color option
choose collor

Set up background transparency (or make it disappear altogether)

move to the “CSS” tab
choose a tab “overlay“
expand the item “background type“
click on the color option
choose collor
adjust transparency

If you set the transparency slider to the left at most, the background will disappear completely and the background of the site will be visible. This is useful, for example, when the window is triggered by a situation where the reader goes all the way to the end of the article and you want to display the newsletter registration pop-up window.

How to blur the background of a pop-up

The last setting I would like to show here can be done using a CSS code. So set your color and transparency according to the two examples above. Now we’re going to need this CSS code:

				
					selector{
	backdrop-filter: blur(40px);
}

The number in the parenthesis, that is, in our example (40px), indicates the intensity of the background blur. Now, move to the blur settings as follows:

go to the “Advanced” tab
select the item at the very bottom “Custom CSS“
copy the CSS code above and adjust the blur as needed by changing the px value