Elementor Parallax Website Tutorial
Elementor Parallax Website Tutorial

Elementor Parallax Website Tutorial (2019)

Last updated:

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.

The Elementor parallax technique will allow you display visually appealing hero images with awesome parallax effects.
The hero image we will be using to apply our Elementor parallax technique.

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:

  • Proper hosting
  • 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

Let’s begin!

Ok, so what you see below is the Elementor dashboard within our WordPress installation on our website.

The Elementor dashboard.
The Elementor dashboard.

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.

We begin with a blank hero section
We begin with a blank hero section

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.

Adding Images

Sky background

Next is to set a background image to this section, so under Style, select the sky image to represent the background.

Elementor parallax - the sky image.
The sky image.

Sun image

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.

Elementor parallax - the sun image.
The sun image.

Now as we scroll down, the sun scrolls along as well as expect, however we prefer that it remained fixed as we scroll.

The sun defaults to scrolling up or down as we scroll along the page.

So under Advanced » Custom Positioning, we set the position to be Fixed.

Set the sun image to have a fixed position.
Set the position of the sun image to be fixed.

So as we now scroll down, it remains in the same position.

The intended fixed behaviour of the sun image.

Mountain image

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.

Absolute positioning

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.

Elementor parallax - mountain image set to absolute positioning.
The mountain image given absolute positioning.

Vertical offset

Next we’ll adjust the vertical offset of this mountain image to a more suitable position.

Adjusting the vertical position of the mountain image.
Adjust the vertical position of the mountain 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.

Use the Navigator to rename image layers.
Use the Navigator to rename image layers.

Next we’re going to right-click on the mountain image and duplicate it.

Duplicate the mountain image.
Duplicate the mountain image.

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.

Valley images

So let’s select the valley 1 image file for this new element. And then rename it to Valley 1.

Adding valley 1 image layer.
Adding valley 1 image layer.

Let’s repeat the process duplicating Valley 1, creating a new image and renaming to Valley 2.

Adding valley 2 image layer.
Adding valley 2 image layer.

We’ll duplicate Valley 2 to create Valley 3.

Adding valley 3 image layer.
Adding valley 3 image layer.

Duplicate Valley 3 to create Valley 4.

Adding valley 4 image layer.
Adding valley 4 image layer.

We’ll duplicate Valley 4 and select Valley 5 as the image.

Adding valley 5 image layer.
Adding valley 5 image layer.

Birds 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.

Adding the birds image.
Adding the birds image.

It’s coming along very nicely!

Touch ups

Now if you notice on the left and right side of the images, there are tiny gaps.

Column container default padding.
Column container default padding.

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.

Set column container padding to zero.
Set column container padding to zero.

Scrolling down we can see a distinct line separating the hero section with the section below.

The transition between the two sections is not smooth.
The transition between the two sections is not smooth.

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.

Adding the filler image to provide a more seamless transition.
Adding the filler image to provide a more seamless transition.

Let’s scroll along the page and see what it looks like.

Let’s see how the hero image behaves as we scroll.

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.

Set the motion effects for the mountain image.
Set the motion effects for the mountain image.

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.

Set the motion effects for the birds image.

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.

ValleySpeed
110
28
36
45
53
Add motion effects to all the valley image layers.

Now let’s expand the page viewport and see how it responds.

Filler image is being cut off by its parent container.
Filler image is being cut off by its parent container.

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.

Adjust the vertical offset of the filler image.
Adjust the vertical offset of the filler image.

Let’s check it out the result.

The Elementor parallax technique is coming up quite a treat!

Awesome!

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.

Making adjustments to the vertical positions of each image layer.

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.

We recommend Bluehost to host your website.
We recommend Bluehost to host your website.

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.

Fill out your account information.
Choose the Bluehost Basic plan.

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.

Fill out your new account information.
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.

Choose the 3 year account plan which is the best value for money.
Choose the 3 year account plan which is 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.

Then it's as easy as hitting the submit button.
Then it’s as easy as hitting the submit button.

You then have to set your Bluehost account password after purchase.

Set your Bluehost password.
Set your Bluehost password.

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.

Skip installing a theme.
Skip installing a theme.

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.

Install and activate Elementor to get started on implementing that parallax website!
Install and activate Elementor to get started on implementing that parallax website!

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.

We need to install Elementor Pro in order to use the motion effects for parallax to work.
We need to install Elementor Pro in order to use the motion effects needed for parallax to work.

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.

Elementor Pro is so cheap considering how many features it offers!
Elementor Pro is so cheap considering how many features it offers!

Once we purchased, we can then head over to our account page and download the Elementor Pro plugin.

Download the Elementor Pro plugin zip file.
Download the Elementor Pro plugin zip file.

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.

Upload the Elementor Pro plugin zip file.
Upload the Elementor Pro plugin zip file.

Once installed, let’s navigate to the Elementor menu, click License so we can activate Elementor Pro.

Connect and activate Elementor Pro.
Connect and 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.

Activate your license through your Elementor account.
Activate your license through your Elementor account.

You can then create a new page, select Elementor Canvas as the template, so that you can start with a completely blank page.

Choose Elementor Canvas as your template.
Choose Elementor Canvas as your template.

Then click Edit with Elementor.

Start building your Elementor-powered parallax website!
Start building your Elementor-powered parallax website!

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.

More Stories
URL definition explained with easy to understand descriptions and diagrams. We cover what a URL is and break down each URL part in simple terms.
URL Definition – What is a URL? A Beginner’s Explanation (2019)