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.

Requirements:

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

Key Features

• Section/Container
• Parallax

1. Section/Container

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

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.

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

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.

• 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”.

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

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.

Conclusion

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