isotropic-2022
Share
Blog
Search
Menu

How To Do Multi-Layer Parallax With Elementor

By James LePage
 on July 25, 2020
Last modified on January 6th, 2022

How To Do Multi-Layer Parallax With Elementor

By James LePage
 on July 25, 2020
Last modified on January 6th, 2022

In this tutorial we're going to discuss how to add a multilayer parallax effect to your hero section in Elementor. This is a great way to add depth to a website, and make it stand out from competition. It also just looks cool.  

What’s Parallax?  

Parallax demo from Elementor

In web design, this effect mirrors “real life parallax”. In real life, if you view an object far in the distance from different vantage points, the position or direction of it changes. Web design parallax does exactly that, but from within the website. 

Here’s a great post by Elementor explaining exactly what Parallax is (it covers the different types and applications that can be done with the page builder). 

As you scroll down a page, any element that has a parallax effect applied to it moves at a different speed (or fades, or zooms... but this tutorial is specifically for multi layer vertical scrolling parallax in Elementor). 

Typically this is applied to an image background, or one element at a time, as the user scrolls vertically up or down the page. In this tutorial, we're going to take Elementor parallax background scroll effects a step further

By adding multi layer parallax, you can get a unique effect that gives the image an almost 3D-like feel. With Elementor, this is incredibly easy to do and doesn't require any knowledge of code. The built-in parallax effects that ship with Elementor are some of the best in the industry, and if you're looking to add this effect to a WordPress website, the Elementor editor is your tool to do it. 

Here is a quick video demonstration of the multi layer parallax effect that we're going to create in our Elementor website: 

Note the depth of the image background. That's Elementor Parallax for you.

Adding multilayer parallax in Elementor

Now that we know what parallax is, and what this tutorial will be creating in Elementor, let's get right into it.

Video Tutorial

First, we've created a video tutorial which you can find on YouTube. This video is a great companion to this blog post tutorial, as it shows you how to do every effect in real time. Take a look, and maybe subscribe to the channel! 

If you would like to download the individual layer PNGs so you can follow along with this tutorial, you can do that by clicking here. 

Step 1: Find an image

The first step to adding a parallax effect in elementor is finding your base image. This photo is what we're going to use to add the effect to our website. 

We like using a website called Unsplash to find our images. These are royalty free, and don't even require Attribution (though it's nice to the creators if you credit them). when looking for an image that will work for our element or parallax effect, it's important to find one that has naturally defined layers. 

For us, we typically do landscape photos, so that's what we searched for in Unsplash to find the image for this tutorial. As you can see, this image has clearly defined layers already. You have the water in the foreground, then trees, then trees further back, then mountains, then Sky. 

Get the same photo here: https://unsplash.com/photos/NRQV-hBF10M

It's important that you find an image exactly like this, where you can already see individual layers. This is important because we're going to be splitting the image into layers so we can apply our parallax effect. 

Step 2: Photoshop Cutout

Once we found our image, it gets downloaded to our desktop in the highest resolution possible. Then, we open it on Photoshop. 

Before continuing, we realized that some may not have access to Photoshop. From our research, Photoshop is the only tool that allows you to easily do this. If you don't have access to the software, you can easily hire somebody from Fiverr to do this for you. It will probably cost you around $10 per image. You can simply request a custom work order, link them to this portion of the tutorial and say “I would like my image made to be like this”. 

Here’s a Fiverr seller that we found which should be able to easily handle this job.  

When you open the image on Photoshop, make sure that you set it to be the highest resolution (300 PPI). Then go ahead and add the “cutout filter” to the image. This makes the layers even more visible, and adds an artistic effect. 

Apply the cutout effect to the image.

We've found that setting the number of levels to be 7, edge simplicity to 4, and edge fidelity to 1, usually results in a good output. What this effect does is simplify the photo, grouping similarly colored pixels together. This makes it easy to identify and separate the image into layers. 

The image after applying the cutout filter to it in Photoshop. Note how there are distinct layers to this photo (this effect brings them out).

Step 3: Separate filtered image into layers

Once we have our image, it's time to separate it into individual layers. First, identify the main layers that you will be separating it into. In this example, we have our sky, mountain, tree line 1, tree line 2, and river/water.  

Once you have your layers, begin separating the image into them, working your way from the bottom to the top. To actually select and separate, use the magnetic lasso tool. Once you have your main layer selected, CTRL+X to cut it from the main image and then CTRL+SHIFT+V to paste it into a new layer. 

Select using magnetic lasso, cut out of the main image, and paste into a new layer. Align to the bottom of the page.

Do this for each of the layers of your image. 

If you would like to download the individual layer PNGs so you can follow along with this tutorial, you can do that by clicking here. 

Once you have your image separated into layers, you need to expand them to the bottom of the canvas. 

An isolated layer, with the added coloring to the bottom of the image.

Here's an example of an isolated layer which we expanded to the bottom of the canvas. this is necessary to make the parallax effect work in Elementor. to do this, we simply find the predominant color ( in this case it was a dark green), use the standard lasso tool to select everything below the cut section of the layer, and then the paint bucket to fill that selection with color. 

We do this because the parallax effect will make the images move, and if we had a transparent bottom, visitors would be able to see directly through the image. It wouldn't look good, which is why we do this. This is also incredibly helpful when it comes to aligning the image ( you will see why at a later step). 

For this parallax effect, we also created “birds” and a gradient. the gradient will be added to the bottom of the image, overlaying the entire parallax effect. This makes the parallax effect blend into the next section, which you can see in the video demonstration at the beginning of this tutorial. We chose to make the gradient in Photoshop and export it as a PNG, but you can also use CSS gradients to fulfill the same purpose. 

Once you have all of your layers isolated and ready to go, select all of them, right click, and “quick export as PNG”. 

Select all layers in Photoshop, right click, and "quick export as png".
All of the layers which will be used in our Elementor Parallax background.

Again, notice how all of these layers are expanded to the bottom of the canvas. If you would like to download the individual layer PNGs so you can follow along with this tutorial, you can do that by clicking here

Step 4: Add The Parallax Section To Elementor

Now it's time to add these individual layers to Elementor, recreating the original image. First, upload all of the layer PNGs to your WordPress media library so they're easy to access. 

Once uploaded, set up the general Elementor page where you will apply this parallax effect. In this example, we used the Elementor Canvas page setting to remove all headers and footers from our default theme of 2020.

On the page, we added a section that was set to be 120vh tall, and aligned all content to the bottom. When creating your own page, make sure this section is at least 100vh (that would be the full screen setting) tall. 

Also, stretch the section, and make the content width "full width".

Setting the fixed BG for the Section, which is the sky in this image.

After creating and configuring the section, add the furthest layer of your parallax image as the background. This background will not have any parallax effect applied to it.  

Make sure the background size is set to “cover”. We also positioned ours "center center".

Step 5: Add Remaining Parallax Layers to Elementor

After the section is created in the background is set, it's time to add all of the remaining layers (these will have the parallax effect applied to them) to this section. 

These will be added via an Image Element. Layers will be added from furthest to nearest. In this example, the furthest layer is the mountains, while the nearest layer is the river. before adding the initial image, make sure both the section and column have a margin and padding of 0PX. 

Then, drag and drop an image element into the section. Set the image size to “full”. choose the image from your media library. In our example, this would be the mountain layer. 

Under advanced settings for the image, go to positioning, and choose absolute. Set the vertical orientation to bottom, but don't change any other settings. 

Adding the Mount - Absolute positioning, vertically oriented to the bottom.

Now you should understand why we had to expand all images to the bottom of the canvas. This makes it very easy to align them in Elementor. 

The absolute positioning makes the images layer over each other. If this setting isn't applied, the images will simply push each other down the screen. If you're having difficulty, try setting the Z index. The nearest image has the highest Z index, while the furthest should have the lowest (though in our case this was not necessary).  

For the next layer, you can simply duplicate your original image layer, keep all settings the same, and change the image. Again, work from the furthest layer to the nearest layer. 

At this point, you should have fully recreated the image in your Elementor canvas. Note that there are no motion effects applied to it yet, but if you did everything right, it should look exactly like the original image with the cut out effect applied to it in Photoshop. 

Step 6: Set up motion effects for each Elementor Layer

Now it's time to add the vertical motion effects ( known as parallax) to each image layer in Elementor. By adding multiple parallax effects to each image layer, instead of adding a singular parallax effect to one image, your background gets a lot more depth in the page. the more layers you have, the more realistic it looks (think back to what exactly parallax is, we are recreating the real life effect).

We're going to be applying our parallax effect to every image layer (other than the section background). with Elementor, and their integrated parallax user interface, this is probably the easiest step of the process. 

Again, we're going to work from the furthest layer to the closest layer. The furthest layer has the lowest speed value, while the nearest layer has the highest speed value. 

Using the navigator tool, select the furthest image layer (in this case it is the mountains), toggle scrolling effects on in advanced settings, click the pencil icon for vertical scroll, and change the speed value. In this example, we start at .75 (for the furthest layer), and end at 1.8 for the closest layer. 

Add vertical scrolling motion effects to all image layers in Elementor. 

You will need to experiment with these individual values, as each image is different. just followed this rule of thumb, the furthest layer should have the lowest speed, while the closest layer should have the highest speed, when it comes to vertical scroll motion effects in Elementor. 

Step 7 (optional): Add a specialty layer

For these multi depth parallax effects, we like adding specialty layers like birds or wildlife. In this example, we are having birds fly across the screen as the user scrolls down the page. To do this, we add yet another image layer to our section, set the image to be 30% wide, and position them absolutely in the center of the page. 

Making them slightly transparent helps them blend into the coloring of the original image. 

Birds move in the direction of the arrow, due to horizontal and vertical Elementor scrolling effects.

We then set both the horizontal and vertical motion effects. this way, it looks like they're flying up and to the left of the page when the user scrolls down. 

Step 8: Test Your Effect

We really like Elementor because you can view the affect supplied in real time, so you should have a good understanding of if you're multi layer parallax in Elementor is working at this point. 

Go view the effect on a preview page, and scroll up and down to see if the depth is applied. This is a good time to experiment with the vertical speed values.  

If everything works, it should look a bit like this.

If everything is applied correctly, congratulations you have added a multi layer parallax effect in your Elementor website. Previously this was only possible with a bunch of CSS or JavaScript! 

Mobile Responsiveness

This point wasn't directly addressed in our video, but you can adapt your parallax effect to be mobile responsive quite easily. Simply use the mobile screensize in Elementor. We find that resizing the section to be 66vh on mobile makes everything work well.  

It is highly recommended that you add custom breakpoints, which ensures that there will be no issues with your parallax Elementor effect on all screen sizes. 

You can adapt this for mobile view too.

You will definitely need to tweak the positioning on both the tablet and mobile screen To make sure everything looks and works perfectly on all devices. However, it is possible to adapt this effect for mobile useage. 

At the same time, you can also hide this entire section On tablet and mobile devices, and replace it with a static screen (maybe even the original image with a cutout effect applied). This makes it so you won't need to go and tweak things for multiple screen sizes. 

Conclusion

Hopefully a combination of this blog post tutorial and our YouTube video tutorial on how to create a multi layer parallax effect in Elementor helped you on your journey to a better website. Feel free to download our layer PNGs below, and if you have any questions leave them in our comment section. 

Support us by subscribing to the YouTube channel, as we post high quality tutorials (many specifically for Elementor). 

Download Layer PNGs To Follow Along

If you would like to follow along with this tutorial, you can download the layer PNGs by entering your email below and clicking “get parallax layers”. Perfect for use as an Elementor parallax template. This way, you can experiment on your own Elementor website, and see exactly how these PNGs are exported from Photoshop. 

[formidable id="3"]
codewp-ai-og-new
Meet CodeWP, an AI Code Generator
Prompt CodeWP in plain English and it'll output high quality code, specific for WordPress.
isogroup-cover
Join The IsoGroup
A vibrant Facebook Group to talk about web design and the business of agency. Daily curated resources and conversations.
Join Now
bricks-builder-course
Bricks Builder Course - Coming Soon
The Bricks Builder Mastery course will bring you up to speed on this popular builder.
Get Launch Notification & Discount
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram