Elementor & Parallax - How Easy Can It Be? (Hint: Easy) - Mad Lemmings

Elementor & Parallax – How Easy Can It Be? (Hint: Easy)

I have been playing a lot with the Elementor plugin lately.

And I have to say, this is one of the most powerful and easy to use page builder plugins I have ever used for WordPress.

Sure, Thrive Architect and Elementor can easily be compared (they are actually kinda copying one another), but Elementor has a Free Version, which is a huge plus.

Of course, they also have a Pro version of Elementor (a have written a detailed comparison here) but so far - It does not have a 100% parallax effect available.

Fixed Background vs Parallax

Now technically, a fixed background is a kind of parallax (and I have confused them before) because the sections do move at different speeds. It's just one speed is zero!

Parallax is really just that effect where the sections seems to slide past one another. Only the best ones happen when both sections move, just at different speeds.

So, getting a true Parallax effect on your homepage or landing pages is not always easy.

Until now.

elementor fixed position

Easy Parallax With Elementor

Now, there are a few other tutorials out there on Elementor with Parallax - but I struggled to get them to work properly.

First, there is all the steps you need to take (which are a bit too techy for most people). Then there is the unreliable nature of the javascript code - which as far as I can see is not supported anymore anyway. And even once I got it working, the parallax was a bit of a mess I found. So, I kinda gave up.

Then I discovered the Granular Controls For Elementor plugin.

This plugin does a bizarre mix of things for Elementor, but to the developer's credit, some of them are quite useful.

It can help you change the layout of the Elementor control panel (size, shape, position, color). Keep accordion elements closed on page open.

You can also add an easy exit to the elementor editor.

But you don't care about all that, right? Because there is also a switch in the settings to turn on Parallax. (see the image that follows)

This basically gives you a new panel in the Elementor editor that allows you to easily add parallax to any section on your pages.

Here is all you need to do:

  • check
    Turn on the Enable Parallax button (in the Style panel of your section
  • check
    Leave the Type as Scroll (it seems to have no effect anyway)
  • check
    Lower the speed to about 0.5 (you can play with this, but beware 1.0 seems to make it fixed, and higher gives a weird effect for me)

Once you have done that, you should have a nice parallax effect. 

Just one tip: if the effect does not seem to work it could be a couple of things:

  • You have Fixed turned on (in the attachment drop down)
  • You have only tried to test it in Preview mode (try a live test with a published page or post)
  • Save your changes
elementor granular controls parallax
elementor parallax switch

I am always interested to hear how people use this or have other solutions (or even problems). So, if you want to get in touch - just shoot me an email. I WILL REPLY, seriously :>