fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

custom-cursor-elementor
google-maps-widget
age-verification-widget-for-elementor

Layers

The Layers Widget allows user to effortlessly layer images, text, shapes, and icons on your Elementor pages with the Image Layers widget, a straightforward solution for precise positioning and design flexibility.

You have the choice to select between two types of effects. The first option is a parallax effect that adjusts the layer based on the movement of the mouse on the page. The second option is a motion effect that animates the layer in a continuous looping motion.

 

Let’s look at each of the options in the “Layers Widget” below.

Install Layers 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. Search in the search bar for “Layers”
  3. Hover over the widget in the search results and click install
  4. Add your “Layers” widget to any Elementor Page 

General Settings

1

Stage Width

Set the stage width.

2

Stage Height

Set the stage height.

3

Stage Background

Set the stage background.

Sequence Animation Settings

1

Sequence Animation

Select the desired sequence animation.

  • Appear
  • Scale Down
  • Scale Up
  • From Left
  • From Right
  • From Top
  • From Bottom
2

Animation Distance

Set the animation distance.

  • Shortest
  • Short
  • Medium
  • Long
  • Longest
3

Animation Duration.

Set the animation duration in seconds.

4

Animation Step

Set the animation step.

5

Animate Items Order

Select the order for item animation.

  • First to Last
  • Last to First
6

Add Blur

Add blur to the image.

  • No Blur
  • Small
  • Medium
  • Strong

Items Settings

1

Content Settings

In content setting, you can type title, add image, set width, opacity, rotation, image shadow, and image background color.

2

Position Settings

You can set the vertical Snap, distance, horizontal snap and distance.

3

Effects Settings

You can set motion and parallax effects.

4

Responsive Settings

You can show/hide the items on different devices.

Layers Widget Styling

All elements of the widget’s design can be managed using various styling choices. You have the freedom to select colors that harmonize with your website’s aesthetic. Customize the text, icons, fonts, and layout to tailor the widget’s appearance and functionality to your specific preferences.

Typography Styling

You can configure the image shadow settings for each item.

Image Styling

Set image shadow for different layers.

Icon Layer Styling

Set the box shadow for icon layer.

Usage Examples

Here are some live use cases for the Layers Widget.

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!