Using Elementor's new parallax effect is going to step up your web design-game, but there are a few essential things you need to know. In the second part of our Parallax guide, we'll give you step-by-step instructions so you can start applying some magic right away.
In the first part of our Parallax effect guide, we introduced you to a variety of options… So now that you know all about the opportunities this brand new feature affords you, let’s get our hands dirty and feet wet with some practical stuff.
In this article, I’m going to give you step by step instructions for using the new Elementor 2.5 to add parallax effects to your site. You’ll be amazed at how easy it is to add Parallax effects and get your web design-game stronger than ever – all with no coding required.
First thing first: There are 2 different ways to use parallax in Elementor 2.5. The first is parallax effect for web elements and the second is parallax effect for the background. We’ll go through both, step by step so stay tuned.
Parallax Effect on a Web Element
Step 1: Choose an Element and Add Parallax
In order to add some parallax magic to your Elementor website, the first thing you need to do is pick which element you want to add it to. This could be a picture, text, a video, etc.
For this tutorial, I’ll go with something very simple as to make it easier to demonstrate the changes as we go along.
Let’s get started by clicking on the widget and going to the Advanced Tab.
Step 2: Under Motion Effect, Switch to Scrolling Effect
Once you’re on the advanced tab, click the Motion Effect dropdown and then set Scrolling Effects to On. Now you can choose any of the 6 animations that will bring your website to life.
Step 3: Adjust the Animation According to Your Needs
You can change and tweak each effect to get it just right. Simply press the pencil icon and a window will open up with controls.
For each effect, you can adjust the direction, speed, and viewport which controls when the animation starts and when it ends.
In addition, you can define on the Viewport scale on what part of the scroll your effect will start and on what part it will end.
Step 4: Pick More Than One Animation for a Single Element
For every element, you can apply as many effects as you like; just DON’T overdo it.
Pressing on the arrow button next to the pencil will undo the animation so feel free to experiment and play around with it until you get it just right.
For the Rotate and Scale position you can adjust the “X” and “Y” anchor points which determine the axis around which the element scales or rotates.
Step 5: Add Mouse Track & 3D Tilt
This one works only on desktop devices obviously but you can make elements move based on your mouse movement. Imagine you want to have an overlay parallax of stars and you want to make them interact with your mouse.
We have two options here: Mouse Track that Creates a sense of depth by making elements move in relation to the visitor’s mouse movement and a 3D Tilt effect that tilts the element according to the same movement of the cursor.
Step 6: Apply Parallax (Only the Motion Effect) on Different Devices
An effect that works well and looks good on desktop, wouldn’t necessarily work well on mobile. Luckily, Elementor 2.5 lets you pick which devices you want to apply the effects to.
Parallax Effect on a Background
Step 1: Go to Your Elementor Website and Click on One of the Website’s Sections
Now let’s add some parallax to background to give the website a greater sense of depth. To do this, we need to start with the Style tab.
Step 2: Under the Background Section, Switch to Motion Effect or Mouse Effect
Now you can choose between 2 different effects that you can apply to your background layer: the scrolling effect and the mouse effect. Read more about them here.
Step 3: Repeat Steps 3 to 6 From the Previous Session
It’s exactly the same effects and implementation as before, only now it can be applied on the background too!
See how it works here:
That’s About It!
After years of trying to learn how to code a parallax effect, I’m happy to report that it’s now easier than ever. Just follow the steps in this article and start creating your brand new parallax website. Need some inspiration?
Go to our previous article and see how you can make your website really stand out!