The “Parallax Background Widget” adds mesmerizing depth and movement to your website’s design. Its user-friendly interface makes it easy to craft breathtaking parallax scrolling effects, effortlessly elevating the visual allure and interactivity of your site. It utilizes a layered approach, providing a simple way to edit and organize background elements. With full design control, it offers flexibility in crafting a visually stunning experience customized to your brand.
The Parallax Background Widget provides a diverse range of effects for selection. You can implement scale, rotate, opacity, and translate effects on your background layers. These effects introduce depth and dimension, delivering a captivating 3D-like experience that keeps your audience engaged.
Let’s look at each of the options in the “Parallax Background Widget” below.
Install Parallax Background Widget for Elementor #
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Click on the Background Widgets option in the sidebar menu.
- Hover over the Parallax Background Widget and click install
Add Parallax Background to Elementor Page Section #
Select edit page section in Elementor>>>Go to Style tab>>>Go to Unlimited Background option>>>Select the background type as “Parallax Background “
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 Background Parallax Settings #
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.
Parallax Background Responsive Settings #
Show or hide the parallax background in different devices using it’s responsive settings.
Set Background Location #
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.
- Background
- Foreground
Usage Examples #
Here are some live use cases for the Parallax Background widget.
