Today, we’re going to go through how to use Elementor to create the stunning parallax website in the video above.
This tutorial will cover exactly how we created the hero image below, which is a great example of a parallax effect. Go check out our demo website to see it for yourself.
We’ll get you started on how you can easily do the same. In fact, we’ve provided all the images that we created for this Elementor parallax tutorial, ready for you to use and follow along.
What Do You Need?
It requires no coding whatsoever. It’s deal for people who have little or no website experience at all but still want the ability to create a visually stunning website. All you really need are 3 things:
The WordPress website platform
Elementor, the WordPress plugin, which in our opinion is the best way to create your parallax website.
We’ll talk about how to set up all of these in more details later on. But right now we’re pretty sure the only thing you want to see is how to create this parallax effect right? So let’s dive straight in.
The Elementor Parallax Website Tutorial
Ok, so what you see below is the Elementor dashboard within our WordPress installation on our website.
On the left is the control panel, and on the right is the real time view of your website page. The neat thing about Elementor is that not only does it not require you to code, it’s all drag and drop and on-page editing. So you can see exactly how your changes look like, instantly. You’ll see exactly what I mean as we take advantage of Elementor to create our parallax website.
Now, if you’re already using WordPress for your website, and have the Elementor Pro plugin installed, please feel free to download the images here, so you can follow along and create your own parallax website as well. And if you want to check out Elementor, here is a great place to start.
To begin with, we have a blank hero section, as you can see on the right hand side in the image above.
Under the Layout tab in the control panel, we’ve set the height of the hero section to be 120% of the current viewport height, which means we would need to scroll beyond this to see the bottom edge of the section. We chose to set this height in order to prolong the magic Elementor will exhibit in providing parallax effects.
We have also set the content width to full width of the browser window for the ultimate parallax website experience.
Next is to set a background image to this section, so under Style, select the sky image to represent the background.
We’re going to drag and drop an image element and set it to be the sun image. Let’s also set the image size to be full, for full resolution and therefore a sharper image.
Now as we scroll down, the sun scrolls along as well as expect, however we prefer that it remained fixed as we scroll.
So under Advanced » Custom Positioning, we set the position to be Fixed.
So as we now scroll down, it remains in the same position.
Let’s add another image. We’ll select the image element and then drag and drop it in place. We’ll choose our image to be the mountain.
Now we’ll also set the image size to be full. Under the Advanced tab, we’ll select Custom Positioning and set the position to be Absolute. Setting the image to absolute we’ll allow us to layer images on top of each other, which is the key to making an Elementor parallax effect work so well.
Next we’ll adjust the vertical offset of this mountain image to a more suitable position.
Right-clicking on the page view and selecting Navigator will display a structure of all the website elements on our page. Including our hero section and the two images that we added already. We’ll then give our images more meaningful names.
Next we’re going to right-click on the mountain image and duplicate it.
Now the reason we’re doing this is to more easily add other images layered on top. The mountain image has already been set to have an absolute position, so it facilitates the process. The result is an identical mountain image being created and placed on top of the existing one.
So let’s select the valley 1 image file for this new element. And then rename it to Valley 1.
Let’s repeat the process duplicating Valley 1, creating a new image and renaming to Valley 2.
We’ll duplicate Valley 2 to create Valley 3.
Duplicate Valley 3 to create Valley 4.
We’ll duplicate Valley 4 and select Valley 5 as the image.
And then we’ll duplicate Valley 5 and select the birds image to add a nice touch to our final image, and moving it between the Mountain layer and the Valley 1 layer. This is because we’d like the birds to appear in front of the mountain.
It’s coming along very nicely!
Now if you notice on the left and right side of the images, there are tiny gaps.
This is caused by default padding set on the column which contains the image elements. In the Navigator, select the column container and in the control panel, under Advanced » Padding, click on the link button, to set zero padding on all of the sides of the column.
Scrolling down we can see a distinct line separating the hero section with the section below.
What we want to do here, is to create a more seamless transition between the two sections. We can do this buy duplicating Valley 5 and moving it into the column container of the section below.
We can then set its image to be the Filler image. Then under Advanced, we can adjust its vertical location. Let’s also rename it.
Let’s scroll along the page and see what it looks like.
Elementor Parallax with Motion Effects
Yeah, we know what you’re thinking… where’s the Elementor parallax magic? Well now that we have all the images in place, let’s add some motion effects to each image to create the parallax effect.
Mountain image Motion Effects
Starting with the mountain image. Under Advanced, select Motion Effects and turn on Scrolling Effects. Select vertical scroll since we want to effect the way it moves as we scroll up and down the page.
Firstly, we want to set the image’s direction of movement to be downwards as we scroll down the page. But we want it to still move up, only a lot slower than if there were no motion effects at all. So in order to do this, we want the downward motion to be at a high speed, say 12.
In other words, setting a downward motion effect will add some resistance to the image as it moves up, whilst we scroll down the page. If this is a little confusing, think of the motion effect as sort of like a gravitational pulling force on the image on its way up the page.
Birds image Motion Effects
We’ll then add motion effects to the birds image layer.
Now because the birds are in front of the mountain, that is, they’re closer to the viewer, they need to move up a little faster and this adds the illusion of depth and 3D. This is essential to making the Elementor parallax technique work in the first place.
So the direction of the motion effect being applied will still be downward. But the speed at which we apply the effect will be slightly slower. So let’s the speed of the birds to 11, meaning it’ll have slightly less downward pulling resistance as the image moves up when we scroll down the page.
We’ll then repeat the process for image layers Valley 1 to 5. Each with a downward motion effect being applied progressively at slower speeds. And since Valley 5 is the closest, it will have the illusion of moving a lot faster than the other layers further away.
Below is a table with all the downward speeds set for each valley layer.
Now let’s expand the page viewport and see how it responds.
What we have here is that the filler image is being cut off by the section that contains it. All we need to do is adjust the filler image’s vertical offset with a higher value. Heading back to our Navigator, we’ll select the Filler image, and set its vertical offset to something higher, say to 1100 instead.
Now the last thing we’re going to do is to re-adjust all the image layers. We want them to have more preferable vertical positions, which we believe will allow the Elementor parallax technique to look more visually pronounced. We want to space out all the layers so that their apparent distances relative to each other are more realistic. So let’s start with the sun and go all the way through to valley 5.
Check out the final product.
If you want to see how easy and quickly it is to get started with Elementor and create your own parallax website, keep reading.
Firstly, we need hosting to store the website and we recommend none other than Bluehost. They have great server uptimes and their solutions serve us well for facilitating well-performing parallax websites. If we head to the official WordPress.org website, Bluehost is their number 1 recommended web hosting company as well.
With that in mind, it’s as easy as clicking Get Started and then choose the Basic plan, which is the minimum for what we need to begin designing our Elementor-powered parallax websites.
Now if you don’t have a domain name yet, Bluehost offers you one for free, forever.
However, if you have a domain already, then you can choose to shelve this for now and use it for when you actually need it. In our example, we purchased scenesofgrandeur.com. Once you find a suitable available domain name, you can then proceed to the next step which is to fill out your new account information.
Next, we typically register the hosting with a 3 year account plan at $3.95/month as this provides the best value for money.
The only other thing that you would need is domain privacy protection, which shields your personal information from the public eye. It also eliminates unwanted solicitations from parties like marketing firms that try to sell you random products.
Once you’re done, fill out your payment details, agree to terms of service and hit Submit.
You then have to set your Bluehost account password after purchase.
Bluehost then proceeds to set up your website and installs the WordPress platform on your server automatically. You are then prompted to choose a theme for your website, but you can do this at a later stage, so just skip past it.
You’re now ready to start making your own parallax website using Elementor! The first thing we want to do, is go to the Plugins menu, Add New, search for Elementor. Install and activate it.
Now this installs a starter/base version of Elementor on your WordPress platform, which does not include the motion effects features we need to create our parallax website.
These necessary features are actually provided by the Elementor Pro version, which would need to be purchased and installed as an add-on to the starter version that was just installed. Bear in mind, Elementor Pro is $49 per year, which is extremely high value for money considering the features it adds on top.
Once we purchased, we can then head over to our account page and download the Elementor Pro plugin.
Let’s go back to our WordPress dashboard, and go to Plugins again, Add New, and then click Upload Plugin. Here, choose the file that was just downloaded and install it.
Once installed, let’s navigate to the Elementor menu, click License so we can activate Elementor Pro.
Since you’re currently logged into your Elementor account, you can click on Connect and Activate, which will do it automatically. Otherwise, we can activate it manually by noting down the license key, and entering it ourselves.
You can then create a new page, select Elementor Canvas as the template, so that you can start with a completely blank page.
Then click Edit with Elementor.
And there you have it, you’re all set to go. You can now head back to the video and follow along the Elementor parallax website tutorial from our YouTube channel:
That’s it! You now have the know-how to start using the Elementor parallax technique! Enjoy! If you want to view a demo website featured in the video, check it out here.