Elementor Pro has just released an insane new features (late March 2019) that includes lots of cool motion effects including the ability to add Parallax to a section in minutes.
Of course, if you want to go the cheaper route, you can use the "Fixed Background" effect instead (more on that in a minute). But quite honestly, if you want a stunning website, Elementor Pro is the way to go.
You can see my complete comparison between Elementor and Elementor Pro here, but in this post we are focusing on Parallax and the new Motion Effects from Elementor.
Parallax & Elementor Motion Effects
The new Motion Effects in Elementor Pro are...stunning. I was a little surprised about how far the team took this idea.
It is a series of effects, rendered in CSS for those that care, that can be applied to almost any element on the page. So, when you scroll (or even move your mouse in some cases) different parts of the page move (elements, sections etc.).
But for now, we are simply worried about the Parallax effect, that has been missing from Elementor for so long - and the only way to do it was with plugins that broke (if you saw my video you will know it no longer works), expensive plugins or adding code you probably don't want to figure out!
The Motion Effects Panel
The first place you want to visit to get Parallax working is the Motion Effects panel on the section you want to add it to.
- Switch on - Scrolling Effects
- Open the Vertical Scroll section
Next, I switch the Direction to Down which seems like a more natural parallax to me. But you can play around with that.
There is also the Speed setting that determines how fast the section moves relative to its neighboring section.
Viewport seems the most confusing, but it restricts when the movement starts and stops. So, at first, I would leave it as is and see if you like it. If not, you can move the sliders inwards and see how it affects the Start and Stop points of the vertical motion.
This is the kind of effect you can get (the fade in the text is separate, but also easy to do).
Other Motion Effects
This would actually be a huge post if I wrote about all the effects you can do. But here is a quick list
- Horizontal and Vertical scrolling
- Rotating and Transforming (grow, shrink)
- Blur and Transparency (like the Bogota in the GIF above)
- Entrance Animation (sexy animations that bring the element/section onto the page)
- Mouse actions on Elements (tracking the mouse, or moving the element in 3D like a panel - see video below)
Rather than bore you with all the specs, I thought it would be better to include the Elementor video to show you.
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.
If you want to try this out to see what I mention, you just have to create two sections (one after another) and then add an image to the one you want to "slide" underneath the other.
Then, you go to the attachment properties of that background image - and set it to FIXED.
You will then see a "kind of" parallax effect that is ok, but nothing compared to what is possible with Elementor Pro and the new Motion Effects.
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:
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:
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 :>
