The “Parallax Background Widget” allows you to add stunning scrolling effects to background images for free in WordPress Elementor websites. This widget creates a sense of depth and motion by moving background elements at a different speed than the foreground, enhancing the visual experience. You can customize scroll speed, direction, image settings, and styling to seamlessly match your site’s design.
Let’s explore the features of the “Parallax Background Widget” below.
Elementor Parallax Background Tutorial Video
Add a Parallax Background for Elementor
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
Go to Unlimited Elements and click "Background Widgets".
Search for "Parallax Background Widget" in the widget library.
Hover over the widget and click Install.
Add Parallax Background to Elementor Page Section
Click edit container in Elementor.
Go to the "Style" tab.
Click on "Unlimited Background".
Select the background type “Parallax Background Widget“.
Elementor Parallax Background Content Settings
Title
Type text to show as title.
Parallax Layer Type
Select the parallax layer type.
- Image Layer
- Background Layer
Item Width
Set the item width.
Item Height
Set the item height.
Item Object Fit
Select the image object fit.
- Cover
- Contain
Item Horizontal Snap
Select the item horizontal snapping.
- Left
- Right
Item Horizontal Position
Set the horizontal positioning of item.
Item Vertical Snap
Select the item vertical snapping.
- Top
- Bottom
Item vertical Position
Set the vertical positioning of item.
Parallax Overflow
Turn on or off the parallax overflow.
Parallax Settings in Elementor Parallax Background
Parallax Translate Orientation
Select the desired parallax translate orientation.
- Up
- Down
- Right
- Left
- Up Left
- Up Right
- Down Left
- Down Right
Ex- When selected Up, while scrolling down, the image will translate from the bottom to the top.
Parallax Translate Sensitivity
Set the parallax translate sensitivity. The higher the sensitivity is set, the more visible the parallax effect will be.
Parallax Delay
When delay is set, the transition of the image will continue during the delay.
Parallax Transition
Select the parallax transition.
- Erase
- Linear
- Ease-In
- Ease-Out
- Ease-In-Out
Parallax Scale Direction
Select the parallax scale direction.
- Scale Up
- Scale Down
Parallax Scale Speed
Set scale speed option to make parallax element bigger or smaller during scroll. The greater the number is set the bigger element gets.
Parallax Rotate Direction
Set the parallax rotate direction.
- To Right
- To Left
Parallax Rotate Speed
Set the rotation speed of parallax.
Parallax Opacity Direction
Set the parallax opacity direction.
- Fade In
- Fade Out
Parallax Opacity Level
Set the parallax opacity level. The higher number is the more visible becomes the opacity effect during scroll.
Responsive Settings in Elementor Parallax Background
Show or hide the parallax background in different devices using it’s responsive settings.
Set Background Location in Elementor Parallax Background
In some cases, you may want to move the background widget in front of your content. Determine the placement of the background by changing the setting to your liking.
In Background
Appear behind your content.
In Foreground
Overlay on top of content.
Site Body Background
Covers the entire page background globally.
Site Body Foreground
Overlay all site content (header to footer).
Layout Background
Restricted to a specific section/widget.
Layout Foreground
Overlay a single section/widget.
Usage Examples of Elementor Parallax Background
Here are some live use cases for the Parallax Background widget.
Parallax Background for Elementor with Custom Graphic Elements.
Thank you for using the Parallax Background Widget for Elementor! With its smooth scrolling effects and layered movement, this is the best Parallax Background Widget for Elementor, perfect for adding depth and motion to your website sections. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
