How to Add Parallax Effect in Elementor [2026 Step-by-Step]

Updated onJune 16, 2026ByAditya Sharma

Key Takeaways

Add parallax effects using Elementoru2019s Motion Effects without any coding.
Utilize The Plus Addons for Elementor to access advanced parallax controls and features.
Implement scrolling-based effects like Background Scroll and Vertical Scroll to enhance storytelling.
Incorporate mouse-based effects such as Mouse Track and 3D Tilt for interactive user experiences.
Customize parallax animations for different devices to ensure responsive design with Elementor.

To add a parallax effect in Elementor, open the editor, select any element or section, then turn on Scroll Effect or Mouse Effect under Advanced > Motion Effects. No code is required. The effect adds depth by moving foreground and background layers at different speeds, which makes a 2D page feel three-dimensional as the visitor scrolls or moves the cursor.

Parallax scrolling is one of the highest-impact visual upgrades on a WordPress page because it shifts attention to specific content without slowing the page down. Elementor ships the core parallax controls in its Free version for elements and Pro for section backgrounds. For more advanced layered effects, The Plus Addons for Elementor (by POSIMYTH) adds a dedicated Parallax Background widget with 150+ controls.

This guide covers the two ways to add parallax in Elementor (element-level and background-level), the five Elementor motion-effect types you can apply, and when to use The Plus Addons for Elementor instead. All steps in this article were last verified in June 2026 on WordPress 6.9 with Elementor v3.x and The Plus Addons for Elementor v6.4.16.

What is a Parallax Effect in Elementor?

A parallax effect is a visual technique where elements at different depths move at different speeds during scroll or cursor movement. In Elementor, parallax is delivered through Motion Effects: scroll-linked transforms applied to a widget or section background. The result is the same depth illusion used on apps and showcase websites, achieved without writing JavaScript.

Most parallax setups slow down the background relative to the foreground so the back layer appears further away. The same logic powers blur fades, horizontal pans and 3D tilts. In Elementor, every parallax type is controlled by the same Motion Effects panel under the Advanced tab.

Types of Parallax Effects in Elementor

Elementor supports two parallax categories: scroll-based effects that respond to the user scrolling, and mouse-based effects that respond to cursor movement. Each category has multiple subtypes you can mix on a single element.

1. Scrolling-Based Parallax Effects

Background Scroll: The background image shifts as the user scrolls down the page. It works best on hero sections and one-page sites where the same image stays visible across multiple scroll positions.

An example of Background Scrolling effect created using The Plus Addons for Elementor.

Vertical Scroll: Different elements move up or down at different speeds relative to the page scroll. You can apply vertical scroll to multiple layers in the same section, each with its own speed and direction, to build a layered animation.

An example of Vertical Scrolling effect created using The Plus Addons for Elementor.

Horizontal Scroll: Elements slide left or right as the user scrolls vertically. This is useful for storytelling sections, product feature reveals and any layout where a horizontal pan reinforces the narrative.

An example of Horizontal Scrolling effect created using The Plus Addons for Elementor.

Blur Effect: Text or images fade out as the user scrolls past and fade back in on scroll up. Useful for soft transitions between sections without hard cuts.

2. Mouse-Based Parallax Effects

Mouse Track: The element follows cursor movement at a configurable speed and direction. Best applied to small accent elements like decorative shapes, not body content.

An example of a mouse track effect created using The Plus Addons for Elementor.

3D Tilt: The element rotates on the X and Y axes based on cursor position, giving the illusion of a card lifting off the page. Pair with a subtle shadow for a more realistic effect.

An example of 3D Tilt effect created using The Plus Addons for Elementor.

Want to give visitors a smoother scroll experience? Read our guide on How to Create a Scroll Back to Top Button in Elementor.

How to Add Parallax Effect in Elementor (Step by Step)

Parallax in Elementor is applied in two places: directly on a widget or element, and on the background of a section or container. Follow the steps below depending on which one you need.

Adding Parallax Effect on Web Elements in Elementor

Step 1: Choose an Element

Open your WordPress dashboard, go to Pages > Add New > Edit with Elementor. Click the “+” icon to add a new section, then drag in the widget you want to animate, such as an Image, Heading or Video widget.

Step 2: Open Motion Effects

Select the element and go to the Advanced tab in the left edit panel. Scroll down to Motion Effects and toggle on Scrolling Effects or Mouse Effects depending on your goal. The settings panel will expand to show the available animations.

Step 3: Customize the Animation

Click the pencil icon next to the effect to open the settings. For each animation, set the direction, speed and viewport range. The viewport controls when the animation starts and ends relative to the section’s position on screen, which is how you keep the effect from triggering too early.

You can stack more than one Elementor parallax animation on a single element. Vertical scroll plus rotate is a common combination for hero images.

Step 4: Add Mouse Effects (Desktop Only)

Mouse effects only fire on desktop, so configure them separately. Toggle on Mouse Track to move the element with cursor position, or 3D Tilt to rotate it on hover. Set the speed value low (1 to 3) for subtle motion or higher (6 to 10) for dramatic motion.

Step 5: Apply Parallax on Different Devices

Heavy parallax on mobile can hurt performance and create motion sickness for some users. In the Motion Effects panel, set the Apply Effects On field to Desktop only for any animation that does not need to run on small screens.

Want a polished page entrance to match your parallax sections? See How to Add Elementor Preloader and Page Transitions to your site.

Adding Parallax Effect on Section Backgrounds in Elementor

Step 1: Select the Section

In the Elementor editor, click the section handle of the section you want to animate (or add a new one with the “+” icon). In the left panel, open the Style tab.

Step 2: Add Background Effects

Under the Background panel, switch to the Motion Effects tab. Toggle on Scrolling Effects or Mouse Effects. Choose from vertical motion, horizontal motion, rotation, 3D tilt and more, then tune the speed and direction for each one.

You can layer multiple background motion effects on the same section. A vertical scroll combined with a slow horizontal drift produces a smooth, cinematic background that does not steal attention from foreground content.

Use Parallax Background by The Plus Addons for Elementor for Advanced Parallax

Parallar backgorund by the plus addons for elementor

Elementor’s built-in motion effects cover the most common parallax cases. For multi-layer parallax, magic scroll and full per-device control, the Parallax Background widget in The Plus Addons for Elementor (by POSIMYTH) adds 150+ controls that the native editor does not offer.

Parallax Background is a Pro widget that ships with The Plus Addons for Elementor. It works on top of any Elementor section or container, supports video backgrounds and lets you combine animations that the native editor cannot stack.

Key features of the Parallax Background widget include:

Magic Scroll: Magic Scroll animates multiple elements with their own start positions and durations on the same scroll timeline. Useful for product page reveals or storytelling sections.

150+ Customization Options: Adjust size, position, alignment, motion direction, easing curves, background colors and z-index per layer without touching CSS.

Layer-Based Effects: Configure the back, middle and front layers independently. The far layer can scroll slowly, the middle layer at normal speed and the front layer with a slight forward push for true depth.

Per-Device Settings: Configure the position, motion intensity and size separately for desktop, tablet and mobile. The same parallax effect that looks great on desktop can be disabled on mobile in one click.

Scroll Position Control: The offset defines where the animation begins and the duration controls how long it runs as the visitor scrolls. Tune both for the exact moment you want the effect to trigger.

Multiple Image and Video Backgrounds: Add multiple media assets per layer with independent effects. A still image on the back layer plus a slow-panning video on the middle layer produces depth without overwhelming the viewer.

The Parallax Background widget pairs well with the other 120+ widgets in The Plus Addons for Elementor, including the Carousel Anything, Lottiefiles and Morphing Sections widgets, which all share the same motion-effects pipeline.

Want to build out the rest of your Elementor stack? Read our roundup of the Best Elementor Addons to try in 2026.

Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance.

[contact-form-7 id="125716"]

Is Adding a Parallax Effect in Elementor Worth It?

Parallax effects are worth using when they support a specific design goal: emphasizing a hero section, separating chapters on a long-form page or making product feature reveals feel more cinematic. They are not worth using as page-wide decoration because heavy parallax can hurt page performance and create motion sickness for visitors who set “prefers reduced motion” in their browser.

Use Elementor’s built-in Motion Effects when: you need a single scroll or mouse effect on a hero element, your design needs are standard and you want to keep the page lean.
Use The Plus Addons for Elementor Parallax Background when: you need multi-layer parallax, magic scroll, custom per-device behavior or video backgrounds. The Plus Addons ships 35+ free widgets and 120+ Elementor widgets in Pro across motion, layout and design categories.
Skip parallax when: the page is text-heavy, the visitor’s primary task is reading or completing a form, or the audience skews older or accessibility-sensitive

Test both Elementor’s native parallax and The Plus Addons Parallax Background on the same hero section to see which delivers the look you want. See the Free vs Pro comparison or the pricing page if you decide the advanced controls are worth the upgrade.

Check out the Complete List of 120+ Widgets and Extensions here. Start building your dream website without coding!

About the Author

Aditya Sharma

CMO at POSIMYTH Innovations · The Plus Addons for Elementor · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressThemesElementorn8nAIClaudeAutomationServer