Digitální zápisník

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

I’m sure many of you have wondered if you can do something with the background that forms behind the pop up window. And there is a relatively simple answer to that question. Yes, we can adjust the background. And in this post we take a look at what specifically can be modified.

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.

Obsah článku

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.

rozmazané pozadí popup okna v elementoru
rozmazané pozadí popup okna v elementoru

Popup Settings

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:
	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

Video instruction


Once you’ve got the popup window finished and the background edited, there’s nothing left to do but save the template, define where and how your pop-up can be turn it on, and you can go and test, how your new popup window will look like on the real web.

More articles about Elementor

Whole category is here.

Byl pro Vás tento článek užitečný?

Klikni na počet hvězd pro hlasování.

Průměrné hodnocení. 0 / 5. Počet hlasování: 0

Zatím nehodnoceno! Buďte první

Jak užitečný vidíte tento článek.

Sledujte mě na sociálních médiích.

Je mi líto, že pro Vás nebyl článek užitečný.

Jak mohu vylepšit článek?

Řekněte mi, jak jej mohu zlepšit.

Upozornit na
0 Komentáře/ů
Vložené zpětné vazby.
Zobrazit všechny komentáře.

Pokud mi chcete napsat rychlou zprávu, využije, prosím, níže uvedený
kontaktní formulář. Děkuji.

Další Kontaktní údaje