How to Add Parallax Effect in Elementor Websites [2 Easy Methods]

Adding motion to a web page can instantly catch a visitor’s eye. One of the most popular motion styles is the parallax effect, where background images move at a different speed than the foreground content. This subtle movement gives depth and creates a more engaging browsing experience.

Elementor, the well-known WordPress page builder, makes it easy to design creative layouts. With its drag-and-drop tools, you can build unique pages without touching a line of code. Among its many design options, Elementor supports different ways to create parallax scrolling for both images and sections.

In this how-to guide, we’ll explain a step-by-step guide on how to add parallax effect in Elementor websites. If you want to highlight a hero section or add life to long pages, you’ll definitely benefit from this post. Get started!

Types of Parallax Effect

There is no fixed number of parallax effects used in web design. Because website designers are continuously coming up with newer types of parallax effects over time to make landing pages captivating. But the two most popular types of parallax effects used in web design are:

• Background Parallax Effect
• Multi-Layer Parallax Effect

In the Background Parallax Effect, the background image moves at a slower speed than the foreground content while scrolling. It creates a feeling of depth and makes the page look more dynamic.

In the Multi-Layer Parallax Effect, several layers of images or elements move at different speeds. It gives a 3D-like visual experience and makes the design look more interactive.

We’ll show you how to create and add both these parallax effects to Elementor websites in separate tutorials in this blog post. Keep reading!

How to Add Background Parallax Effect in Elementor Websites

Background Parallax is a free feature of the HappyAddons plugin. So, to get started with the tutorial, make sure you have the following plugins installed and activated on your site:

• Elementor
• HappyAddons

Once they are installed and activated, start following the tutorial explained below.

Step 01: Enable the Background Parallax feature

Go to Happy Addons > Features.

Find Background Parallax and enable it. Save the changes.

Step 02: Open or Create a Page with Elementor

Edit the page with Elementor. Add a new container or a new section where you want the parallax.

Step 03: Add a Background Image to the Container

Select the container. Go to the Style tab.

Under Background, choose Image and upload or pick your image.

Step 04: Set the Container Height to Show the Image

You now have to set a minimum height for the container. To do this, navigate to Layout > Min Height. Place the height value as you want.

Now, you have to set the right position for the image so it is displayed properly within the container. To do this, come to the Style tab.

Choose Center Center for the Position. Then, select Cover for the Display Size.

Step 05: Turn on Background Parallax

Go to the Content tab. Find the Background Parallax section and expand it. Toggle on the button next to Enable BG Parallax.

Once the BG Parallax option is enabled, you’ll get numerous options to appear in this section. You can choose a parallax type, speed, and enable for specific device types from this option.

Step 06: Choose a Parallax Type and Speed

HappyAddons offers several parallax types. Click the dropdown icon below the Type option. You’ll see the list of the parallax types. Choose any one of them.

But for the tutorial, we’re selecting the Scroll type.

Set the Speed value to control how fast the image moves. You can also enable it if you want to display the parallax on Android and iOS devices, or leave them disabled.

When all customizations are done, click the Apply button.

Step 07: Preview the Parallax Effect

Now, scroll the page from top to bottom, or bottom to top. You’ll see the background image is moving.

Thus, you can easily add a background parallax effect to your web pages.

Step 08: Add Content to the Container

Adding a background parallax effect to a container isn’t enough. By adding content, you can make the container more informative and visually meaningful.

Step 09: Add Background Parallax Effect to More Containers

You can see that we have created a new container, added content to it, and selected the parallax type – Scale.

This parallax type will automatically zoom in/out of your image whenever you scroll the page.

In the same way, we have selected the Auto Moving parallax type for another container. You can also choose the direction, whether from left to right or right to left.

For this tutorial, we have selected the direction type – left to right.

Also, learn how to create a vertical scrolling tab in WordPress.

Step 10: Preview the Entire Landing Page

When all the customizations are done, go to the preview mode of the page, and check if the parallax effects are working properly as you wanted. You can see that it’s working fine on our end.

If you don’t love long blog/tutorial posts and prefer video tutorials, there is some good news for you. We have already created a detailed video tutorial on how to add background parallax to Elementor websites. You can explore the entire video tutorial below.

How to Add Multi-Layer Parallax Effect in Elementor Websites

Multi-Layer Parallax is a premium feature of the HappyAddons plugin. With this feature, you can add the parallax effect to multiple items in the same container. So, to get started with the tutorial, you will definitely need the following plugins on your website:

• Elementor
• HappyAddons
• HappyAddons Pro

Once you have these plugins installed and activated on your site, start following the tutorial, step-by-step, as mentioned below:

Step 01: Enable the Multi Layer Parallax feature

We already showed you the process above. However, we’re explaining it once again. Navigate to HappyAddons > Features.

Find the Multi Layer Parallax feature and enable it. Finally, don’t forget to Save Changes.

Step 02: Open or Create a Page with Elementor

Just open a new page and add a container.

Step 03: Add an Image to the Background of the Container

Following the same guide as above, add an image to the background of the container. Also, set a minimum height, image position, and display size. Hope you can do all these right now.

Step 03: Enable the Multi Layer Parallax Feature

Go to the Layout tab. By scrolling down the panel, come to the Multi Layer Parallax option and expand it. Toggle on the button to enable this feature for the container.

Step 04: Start Adding Items to the Container

It’s now the time to add items to the container. Once you enable the Multi Layer Parallax feature, you’ll see several things there.

You can add as many elements as you want to the container by clicking the + Add Item button. You can even hide those items from any particular device type by deselecting the respective device type.

Let’s first add an element to the container by clicking the + Add Item button.

You can see that we have added a ghost to the container. By default, it will appear in a large size. But using all the available options, you can reduce its size and place it in a suitable position.

Step 05: Customize the Item

Set a size for the image that suits well. By placing a horizontal value, you can align the image whether on the left or right.

Scroll down the panel a bit. By placing a vertical value, you can place the image at the top, middle, or bottom of the container.

Then, select an effect type. There are two types of effects – Mouse Track and Scroll Parallax. Choose the one that you like.

For this tutorial, we’re selecting the Scroll Parallax.

If you enable the Horizontal Parallax, you’ll get some more options to customize the parallax effect of the item. So, toggle on to enable Horizontal Parallax.

As you can see, we have enabled Horizontal Parallax, and some more options have appeared. So, set a direction and a speed.

So, the parallax effect has been added. In the same way, you can add more items to the container by clicking the + Add Item button.

Step 06: Add More Items to the Container

You can see that we have added four items to the container. For each item, we have set different types of customization settings.

The process is almost the same as shown above. Hope you can do this yourself.

Explore this blog post to grow your knowledge base on how to display blog posts by categories in WordPress.

Step 07: Preview the Multi Layer Parallax Effect

Now, to check if the parallax effects are working properly, just scroll the page. You’ll see that these items are moving in the direction you set during customization.

Thus, you can add multi layer parallax effects to your WordPress website using the Elementor plugin.

We have also covered a detailed video tutorial on how to add multi layer parallax background in Elementor. Alongside this textual post, you can explore the video tutorial attached below.

Final Takeaways!

No doubt adding background parallax effects can make your Elementor website look more highlighted and engaging. Hope you enjoyed this tutorial. From now on, by following the step-by-step process with HappyAddons, you can easily create sections where images move at a different speed than the content.

Remember to preview your changes to ensure everything looks smooth and works well on both desktop and mobile devices. For best results, use high-quality images that fit the section size, apply subtle speed settings for a natural effect, and add background overlays when placing text over images to maintain readability.

You can also reuse your parallax containers with the copy-paste style or duplicate features to save time while maintaining consistency. With these practices, your website will not only look visually appealing but also remain user-friendly and easy to navigate.