Elementor Parallax Addon Tutorial

Elementor Parallax addon from Premium Addons Pro plugin helps you to create amazing and attractive pages with a freehand design experience. You can use the parallax addon to apply smooth scroll, opacity, fixed, scale, and auto move effects on Elementor section, column, and flexbox container background images. Not just that, you can use it to add multi-layers of images and SVGs and apply mouse track and horizontal/vertical parallax effects on them.

Click here to check Premium Parallax Section Addon demo.

Parallax Section Addon’s Updated Video Tutorial 2019


  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

UPDATE: You can now add Parallax Section to any Elementor Column by navigating to Column settings -> Layout tab -> Enable Parallax.

Parallax for Elementor Columns
Parallax for Elementor Columns

Key Features

  • Section/Container
  • Parallax

1. Section/Container

Before the Parallax can be added, select the Elementor section or flexbox container.

Add New Section to enable Elementor Parallax Addon
Elementor Parallax Addon New Section

2. Parallax

  • Enable Parallax: Enable or disable the Parallax.
  • Type: Select one from the following parallax types and effects:
    • Scroll
    • Scroll + Opacity
    • Opacity
    • Scale
    • Scale + Opacity
    • Auto Moving Background
    • Multi-Layer Parallax
Parallax Types:

All of the other Parallax types such as Scroll, Scroll + Opacity, Opacity, Scale, and Scale + Opacity have the following options except for Auto Moving Background and Multi-Layer Parallax.

  • Speed: Select the background effects’ speed in milliseconds.
  • Enable Parallax on Android: You can enable or disable Parallax on Android devices.
  • Enable Parallax on iOS: You can enable or disable Parallax on iOS devices.
  • Draw SVG In Sequence: Enable to draw the SVG element in sequence with Parallax effect.
Elementor Parallax settings before enable it
Elementor Parallax Addon Controls
Auto Moving Background

To enable the Auto Moving Background, you must first add a background image to the section from the section’s Style tab.
This parallax type has the following additional settings:

  • Direction: Select the auto-moving background direction. You can choose from:
    • Left to Right.
    • Right to Left.
    • Top to Bottom.
    • Bottom to Top.
  • Speed: Set the speed of the background movement. The default is “3”.
Premium Addons Auto Moving background Parallax effect settings on Elementor's Editor
Elementor Parallax Auto Moving Background Controls
Multi-Layer Parallax

Add multiple items and adjust their position, scrolling and mouse effects to different speeds and directions to create the parallax effects.

Select the Add Item button to add a new item to apply the parallax effect on.

Choose Image: Select or upload an image from the WordPress media library. At first, the image will appear too large but you can adjust it easily using the following controls:

  • Horizontal and Vertical Position: Adjust the image alignment and position.
  • Size: Adjust the image size in %, in reference to the parent section/container width. The default is 100.

You can position and resize parallax layers from the preview area. Select, hold, and drag the image to move it, and select the image borer to resize it. Check the video tutorial.

set settings for Parallax effect using multi layer type on Elementor's editor
Multi-Layer Parallax Controls for Elementor Parallax Widget
  • Z -index: Adjusting the Z-index can help you position items above or below other elements. A higher Z-index means that the image is higher up in the layer order.
    If you added an image but can’t see it in the preview, try adjusting the Z-index.
    Similarly, if you are combining the parallax item with widgets and texts, you may need to adjust the Z-index of that widget in case the image is covering other elements.
  • Mouse Track: Enable or disable mouse move interaction. Example: This means that if the user moves the mouse to the left, the image will move to the left, if the mouse moves upwards, the image will move upwards, and so on.
    • Rate: Choose the movement rate for the layer background. The default is “-10”.
Mouse Track Control in Multi-Layer Parallax Type in Premium Elementor Parallax Addon
Mouse Track Control in Multi-Layer Parallax Type in Premium Elementor Parallax Addon
  • Scroll Parallax: Enable or disable the Scroll Parallax.
  • Vertical Parallax:
    • Direction: Set the scroll direction to up or down.
    • Speed: Add a speed value to adjust the scroll moving speed.
    • Viewport: This control will help you to adjust the starting and ending position of each layer/image.
  • Horizontal Parallax:
    • Direction: Set the scroll direction to left or right.
    • Speed: Add a speed value to adjust the scroll moving speed.
    • Viewport: This control will help you to adjust the starting and ending position of each layer/image.
Scroll parallax settings including speed, direction and viewport for Premium Addons Parallax addon
Elementor Parallax Addon Scroll Parallax Settings
Multi-Layer Parallax Responsive Options:

Show Layer On: Select screen size to show the Parallax effects on

CSS ID: Set a CSS ID to this Parallax layer.

Responsive option to show Elementor Parallax layer on, Add the CSS ID for the layer
Responsive Options For Elementor Multi-Layer Parallax Effect


Elementor Parallax Addon by Premium Addons enhances your website design, offering diverse parallax effects like Scroll, Opacity, Scale, and more. Achieve captivating scrolling animations and multi-layer parallax effortlessly. A must-have for dynamic and visually appealing pages

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.