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.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Layers”
- Hover over the widget in the search results and click install
- Add your “Layers” widget to any Elementor Page
General Settings
Stage Width
Set the stage width.
Stage Height
Set the stage height.
Stage Background
Set the stage background.
Sequence Animation Settings
Sequence Animation
Select the desired sequence animation.
- Appear
- Scale Down
- Scale Up
- From Left
- From Right
- From Top
- From Bottom
Animation Distance
Set the animation distance.
- Shortest
- Short
- Medium
- Long
- Longest
Animation Duration.
Set the animation duration in seconds.
Animation Step
Set the animation step.
Animate Items Order
Select the order for item animation.
- First to Last
- Last to First
Add Blur
Add blur to the image.
- No Blur
- Small
- Medium
- Strong
Items Settings
Content Settings
In content setting, you can type title, add image, set width, opacity, rotation, image shadow, and image background color.
Position Settings
You can set the vertical Snap, distance, horizontal snap and distance.
Effects Settings
You can set motion and parallax effects.
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.
