Elementor Image Layers widget is a versatile tool designed for creating dynamic, multi-layered visuals on your website. It allows you to manage and customize each layer with various media types, including images, SVGs, Lottie animations, and text. The widget offers advanced styling options like resizing, coloring, and applying effects such as parallax, rotation, and masking. Additionally, it enables you to add entrance and floating animations, as well as interactive elements triggered by mouse movements or scrolling. With these features, the Elementor Image Layers widget empowers you to build engaging and visually appealing content that enhances your website’s user experience.
You may check its live demonstration for Elementor Image Layers Widget.
Requirements:
- You will need the Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Key Features
- Layers
- Container
Layers
The Layers tab is where you manage all the layers in your image. You can add new layers, delete existing ones, and arrange them in the order you want.
Content Tab:
- Hide This Layer On: Select the devices on which this layer will be hidden.
- Media Type: Choose the type of media for the layer (e.g., image, SVG/Icon, Lottie Animation, Text).
Image
- Upload Image: Upload the image you want to use for this layer.
- Image Resolution: Select the resolution for the image (e.g., full, medium, thumbnail).
- Link: Enable if you want the image to be clickable, and provide a URL.
- Mask Image: Upload a PNG image to use as a mask.
- Mask Size: Choose the size of the mask (e.g., Cover, Contain).
- Mask Position: Set the position of the mask (e.g., Center, Top, Bottom).
Lottie Animation
- Animation JSON URL: For Lottie animations, provide the JSON URL.
- Loop: Toggle to loop the Lottie animation.
- Reverse: Toggle to play the animation in reverse.
- Only Animate on Hover: Toggle to animate only when hovered over.
- Render As: Choose how the Lottie animation is rendered (SVG, Canvas).
Text
- Text: Input the text content that will be displayed in the layer. You can also include dynamic content.
- HTML Tag: Choose the HTML tag that will wrap the text content. This affects the text’s semantic meaning and styling.
SVG/Icon
- Media Type: Select SVG/Icon as the media type for the layer.
- Type: Choose the icon library (e.g., Font Awesome).
- Select Icon: Click to choose the specific icon you want to use.
- Draw Icon: Toggle to enable the drawing animation for the icon.
- Draw All Paths Together: Toggle to draw all SVG paths simultaneously.
- Remove All Fill Colors: Toggle to remove fill colors from the SVG, leaving only the stroke.
- Speed: Set the animation speed; a larger value means a longer animation duration.
- Loop: Toggle to loop the icon animation continuously.
- Reverse: Toggle to reverse the direction of the animation.
- End Point (%): Set the point that the SVG should end at (e.g., 0 for complete).
- Yoyo Effect: Toggle to make the animation reverse direction each time it completes.
General Settings
- Z-index: Set the Z-index to determine the stacking order of the layer.
- CSS Classes: Add custom CSS classes for additional styling.
Style Tab
- Horizontal Offset: Adjust the horizontal position of the media.
- Vertical Offset: Adjust the vertical position of the media.
- Size: Set the size of the media.
- Stroke Color: Choose the stroke color for SVGs or icons.
- Fill Color: Select the fill color for SVGs or icons.
- Path Thickness: Adjust the thickness of the SVG path.
- Blend Mode: Set the blend mode to control how the layer blends with the layers beneath it.
- Hover Effect: Choose a hover effect for the media.
- Opacity: Set the opacity level for the media.
- Rotate: Toggle to enable rotation effects.
- CSS Classes: Add custom CSS classes for additional styling.
Text Style
- Text Color: Select the color for the text in the layer.
- Text Hover Color: Choose the color that the text will change to when hovered over.
- Typography: Configure the typography settings such as font family, size, weight, and line height.
- Text Shadow: Add and customize the shadow effect for the text.
Animations Tab
- Entrance Animation: Enables or disables the entrance animation when the layer comes into view.
- Select Animation: Choose the type of entrance animation to apply to the layer (e.g., Fade In).
- Animation Duration: Set the duration of the animation (e.g., Normal, Slow, Fast).
- Animation Delay (s): Specify a delay (in seconds) before the animation starts.
- Mousemove Interactivity: Toggle to enable or disable mouse movement interactivity for the layer.
- Interactivity Style: Choose how the layer interacts with mouse movements (e.g., Mouse Parallax).
- Reverse Direction: Toggle to reverse the direction of the mouse movement effect.
- Back To Initial Position: Enable this to return the layer to its original position when the mouse leaves the widget.
- Rate: Adjust the movement rate for the layer’s image, with a default value of -10.
Scroll Effects
- Scroll Effects: Toggle to enable or disable effects triggered by scrolling on the layer.
- Scroll Fade: Toggle to apply a fading effect as the layer scrolls into view.
- Direction (Scroll): Choose the direction in which the layer fades or scrolls (e.g., Fade In).
- Opacity Level: Adjust the transparency level of the layer’s image, with a lower value making the layer more transparent.
- Viewport: Set the percentage of the viewport (visible screen area) where the effect should be active.
Vertical/Horizontal Parallex
- Vertical Parallax: Toggle to enable vertical parallax movement of the layer.
- Direction: Choose the direction of vertical parallax movement (e.g., Down).
- Speed: Adjust the speed of vertical parallax movement.
- Horizontal Parallax: Toggle to enable horizontal parallax movement of the layer.
- Direction: Choose the direction of horizontal parallax movement (e.g., To Right).
- Speed: Adjust the speed of horizontal parallax movement.
Blur and Rotate Options
- Blur: Toggle to apply a blur effect to the layer.
- Direction: Choose the direction in which the blur effect should increase or decrease.
- Blur Level: Adjust the intensity of the blur effect.
- Rotate: Enable rotation of the layer.
- Direction: Select the direction of rotation to be counterclockwise, or clockwise.
- Speed: Adjust the speed of the rotation effect.
Scale/Grey Scale Options
- Scale: Enable scaling (zoom in/out) of the layer.
- Direction: Choose the direction of scaling (increase or decrease).
- Speed: Adjust the speed of the scaling effect.
- Gray Scale: Enable to apply a grayscale effect to the layer.
- Effect: Choose the effect direction (increase or decrease) for grayscale.
- Speed: Adjust the speed of the grayscale transition.
- X Anchor Point: Set the horizontal anchor point for the layer.
- Y Anchor Point: Set the vertical anchor point for the layer.
Minimal Mask Effect
Those options for Text media type animation’s controllers:
- Minimal Mask Effect: Toggle to enable or disable a minimal mask effect that applies when the element comes into view.
- Mask Color: Choose the color of the mask that will overlay the element.
- Direction: Select the direction in which the mask effect will appear or move (e.g., To Right).
- Words Padding: Set padding around the text within the element, specifying values for Top, Right, Bottom, and Left in pixels.
Container
- Minimum Height: Set the minimum height for the container.
- Overflow: Choose how the overflow content should be handled (visible, hidden, scroll).
Style
Image
- Background Color: Choose a background color for the image.
- Border Type: Select the border style (e.g., solid, dashed, or dotted).
- Border Radius: Adjust the border radius to round the corners of the image.
- Box Shadow: Add a shadow effect to the image, with options for color, blur, and spread.
- Margin: Set the margin around the image, with separate controls for top, right, bottom, and left margins.
- Padding: Adjust the padding inside the image container, with separate controls for top, right, bottom, and left padding.
Container
- Background Color: Choose a background color for the container.
- Border Type: Select the border style (e.g., solid, dashed, dotted).
- Border Radius: Adjust the border radius to round the corners of the container.
- Box Shadow: Add a shadow effect to the container, with options for color, blur, and spread.
- Margin: Set the margin around the container, with separate controls for top, right, bottom, and left margins.
- Padding: Adjust the padding inside the container, with separate controls for top, right, bottom, and left padding.
That’s All
If you still need any further assistance, feel free to contact the Premium Addons support team. We would be more than glad to help 😁
Join the Community
You’re most welcome to join our channels to get updates about new features, improvements, and bug fixes.
