How to Add a Parallax Background in Elementor

Updated: November 9, 2020

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.

Originally posted on: November 9, 2020

This page may contain affiliate links, which help support WP Pagebuilders.

Building a website is as fun as playing puzzle with Elementor

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Support Us

Consider subscribing to help us grow. Get the regular articles about page builder plugins and WordPress in general.