Resources

Tools > Global Effects

Background

Background effects are handy because you can add things on top of them. Background effects are applied to the container, whereas widgets are added into the container. See if you can discern what is background and what is foreground in the demonstrations below.

Ken Burns Effect

There are many ways you could add images to the background of a container. One way is to click on the Style Tab of the Properties Panel and for Background Type, choose Classic (colour or image), gradient, video or slideshow. Within the slideshow, you can add the Ken Burns Effect, which is when it feels like you are zooming in on an image or scene. Another method is to use the global Ken Burns tool, but this is less reliable.

Particles

Particles can be added via either PAE or UAE, with respective tutorials here and here. Particles sit in the background so that other elements can go on top of them. Click the container you wish to apply this to (by hovering and clicking the small grey box in the top left corner), and then look at the Properties Panel. In our opinion, the UAE tool is much easier to use than the PAE. It has ready-made particles to choose from or you can create your own custom code. Look under the Style Tab for UAE – Particle Backgrounds. The PAE tool may offer extra features, such as defining the Z score (what sits above and below it) and interactivity (like having the particles move away when your mouse is near them) – but there is an expectation that you are familiar with different code files to use this tool. Scroll down the Layout Tab, to see Particles with a star symbol (indicating that it is a PAP tool). 

Lottie background

In the example above, one Lottie animation is layered over another Lottie animation in the background. As a rule, using a foreground Lottie widget will give you much more flexibility with regards to positioning and effects like Magic Scroll and floating effects. Background Lottie files often do not sit well in their containers but there may be times when it fits perfectly with. More details via PAE.

Parallax effect

Parallax effect is only useful for users with a mouse. If you are using a mouse, move it over the top of the image above. Notice that the orange moves more differently to the other items. Parallax creates a sense of depth by using foreground and background layers that move at different speeds in response to mouse movement. Of course, on mobile devices, there is no mouse so parallax is not useful.

A way to add more granular movement effects (for both mouse and scroll effects) is to use the Float or Magic Scroll features. (See Global Effects > Scrolling.)

To find the Parallax feature, click the container, then look down the Content tab in the Properties Panel. For the Type of parallax effect, try the Multilayer option so you can add multiple images easily. Then adjust the rate between -1 and -10.

shape dividers

Shape dividers (not to be confused with line dividers) control how the edge of a container will look. Static shape dividers can be applied to the top of bottom of the container. Animated shape dividers can apply to any of the 4 sides. This can be a neat feature if you want a shape moving horizontally across the whole section, for example.

For more on static shape dividers, see the Elementor or UAE sites. For more on animated shape dividers, see the PAE site.

In the example above, clouds were chosen as the static divider for the top of the container. Behind this, the colour was specified as black, to match with the surrounding black of the page background. Meanwhile, a dark blue wave was chosen as the animated divider for the bottom, with a small offset so that it was not sitting flush with the bottom edge but provided a ‘foreground’ effect. The container’s corners were curved with a radius of 20. The container’s background colour was set to a gradient with pink at the top and light blue down below. There is no widget in this container. It’s height has been set to 300px. We could now place items on top of this ‘backdrop’ that depicts an ocean with clouds at sunset.

Animated Gradients

You can set a static background in the basic Elementor settings or you can create an animated gradient by using a PAP effect. For that, select the container (via its top-left corner) and in the Properties Panel, scroll down the Content Tab until you see the Animated Gradient section. For more information, visit PAE.

blob generator

You can create static or animated shapes with solid colour or image backgrounds. They can move on scroll or stay put. For more, visit the PAP site.

Liquid Glass

Hello world.

You can apply the Liquid Glass effect to a container or to specific widgets. You could also get a transparent background just by adjusting the Style settings on a container, but you have far fewer styling options that way. In the example above, the background links to a video URL on Vimeo, then a heading widget (with padding) has the Liquid Glass effect applied via the Advanced properties panel. More details are here.