fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

google-maps-widget
age-verification-widget-for-elementor
digital-business-card-templates-for-elementor

Parallax Background

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.

  1. Go to Unlimited Elements Widget Library
  2. Click on the Background Widgets option in the sidebar menu.
  3. 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

1

Title

Type text to show as title.

2

Parallax Layer Type

Select the parallax layer type.

  • Image Layer
  • Background Layer
3

Item Width

Set the item width.

4

Item Height

Set the item height.

5

Item Object Fit

Select the image object fit.

  • Cover
  • Contain
6

Item Horizontal Snap

Select the item horizontal snapping.

  • Left
  • Right
7

Item Horizontal Position

Set the horizontal positioning of item.

8

Item Vertical Snap

Select the item vertical snapping.

  • Top
  • Bottom
9

Item vertical Position

Set the vertical positioning of item.

10

Parallax Overflow

Turn on or off the parallax overflow.

Parallax Background Parallax Settings

1

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.

2

Parallax Translate Sensitivity

Set the parallax translate sensitivity. The higher the sensitivity is set, the more visible the parallax effect will be.

3

Parallax Delay

When delay is set, the transition of the image will continue during the delay.

4

Parallax Transition

Select the parallax transition.

  • Erase
  • Linear
  • Ease-In
  • Ease-Out
  • Ease-In-Out
5

Parallax Scale Direction

Select the parallax scale direction.

  • Scale Up
  • Scale Down
6

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.

7

Parallax Rotate Direction

Set the parallax rotate direction.

  • To Right
  • To Left
8

Parallax Rotate Speed

Set the rotation speed of parallax.

9

Parallax Opacity Direction

Set the parallax opacity direction.

  • Fade In
  • Fade Out
10

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. 

  1. Background
  2. Foreground

Usage Examples

Here are some live use cases for the Parallax Background widget.

Video Overview

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!