How to Add a Parallax Background in Elementor

In the context of web design, parallax background refers to a behavior whereby the background moves at a slower pace than the foreground. Elementor (the pro version) comes with a feature that allows you to add this sort of background. We will cover it here.

You might find a little issue to add a parallax background in Elementor as Elementor doesn’t specifically use the term “parallax”. Instead, to add a parallax background in Elementor, you can apply a scrolling effect to the background you want to add the parallax effect to. The background we mean here is the section background and column background.

In case you are new parallax, take a look at the following example and notice the background image. It is an example of the parallax effect.

We said that the parallax effect refers to background and foreground that have a different movement pace. The fact, the case isn’t always like that. Instead of movement, a web designer might apply different effects such as blur, transparency, or scale. Elementor itself offers 6 different effects:

  • Vertical Scroll: Background moves vertically upon mouse scroll
  • Horizontal Scroll: Background moves horizontally upon mouse scroll
  • Transparency: Background appears as transparent before the mouse scroll
  • Blur: Background appears blur before the mouse scroll
  • Rotate: Background makes a rotation move upon mouse scroll
  • Scale: Background appears in a certain scale before the mouse scroll

How to apply a scrolling effect in Elementor

As we mentioned, you can apply the parallax background whether to a section or column. So, select a column or section you want to apply the parallax effect to (read this article if you are new to Elementor). Go to the Style tab and open the Background block. Set the background type to Classic and choose an image you want to use as the background and enable the Scrolling Effects option.

Set the position and size of the background image and then select a parallax effect you want to apply by clicking the pencil icon on one of the available parallax effect options.

You can enable more than one parallax effects if you want it.

That’s it. You can continue editing your page or template. Once done, you can publish or update it.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?