Premium Image Layers widget

Premium Image Layers widget gives you the ability to place multiple interactive images, Lottie animations, or text on top of each other. The layers can then be animated as the user scrolls through your page or moves the mouse over them.

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

Layer

To add a new image layer, click on the Add item button.

• Hide This Layer On: Choose the device type which you don’t want the layer to be displayed on

Content Tab:

• Media Type:
  • Image from the WordPress media library.
  • Lottie Animations JSON code.
  • Text in the text input box.
  • SVG/Icon

Image

• Image size: You can select between:
  • Thumbnail – 150 x 150
  • Medium – 300 x 300
  • Medium Large – 768 x 0
  • Large – 1024 x 1024
  • Full
  • Custom -You can crop the original image size to any custom size. You can also set a single value for the height or width in order to keep the original size ratio.
• Mask Image Shape: Enable the mask image shape option.
  • Mask Image: Upload the image, needs to be in PNG format.
  • Mask Size: Contain or Cover the current image.
  • Mask Position: Select the mask position on the image.

Lottie Animation

• Animation JSON UR.
• Reverse: reverse the animation.
• Only animate on Hover.

Text

• Text: Add your text in this field.

SVG/Icon

• Type: Choose SVG or FontAwesome Icon.
• Select Icon. (Available if the previous option is Icon)
• SVG Code: Add your SVG code here. You can use these sites to create SVGs: Google Fonts and Boxy SVG.
• Draw Icon.
  • Draw All Paths Together.
  • Remove All Fill Colors.
  • Speed: A larger value means a longer animation duration.
  • Loop.
  • Reverse.
  • Start Point (%): Set the point that the SVG should start from.
  • Restart Animation on Scroll Up.
  • Yoyo Effect.
  • Only Animate on Hover.

Style Tab

• Offset: Adjust the Horizontal and Vertical offset position of the image in pixels or %.
• Width: Adjust the width of the image. This setting will override the image size option. If the image is smaller than the selected width, the image will be stretched.
• Height. (Available when the media type is SVG/Icon)
• Text Options. (Available when the media type is text)
  • Text Color: Pick a color for text.
  • Text Hover Color: Pick a color for text on the hover state
  • Typography: Customize text fonts.
  • Text Shadow: Adjust text shadow.
• SVG/Icon Options. (Available when the media type is SVG/Icon)
  • Stroke Color.
  • Fill Color.
  • After Draw Stroke Color.
  • After Draw Fill Color.
  • Path Thickness.
• Blend Mode: Set how the background should blend with the content of the title and background.
• Hover Effect.
• Opacity.
• Rotate: Enable or disable image rotation and enter the degrees of the rotation, from 0 to 180.

Animations Tab

• Animation: Enable or disable animation. When enabled, you can select from the following entrance animations which will be used when the page is first loaded. You can select an animation to preview it in the editor before applying the changes.
  • Fading
    • Fade In
    • Fade In Down
    • Fade In Left
    • Fade In Right
    • Fade In Up
  • Zooming
    • Zoom In
    • Zoom In Down
    • Zoom In Left
    • Zoom In Right
    • Zoom In Up
  • Bouncing
    • Bounce In
    • Bounce In Down
    • Bounce In Left
    • Bounce In Right
    • Bounce In Up
  • Sliding
    • Slide In
    • Slide In Down
    • Slide In Left
    • Slide In Right
    • Slide In Up
  • Rotating
    • Rotate In
    • Rotate In Down Left
    • Rotate In Down Right
    • Rotate in Up Left
    • Rotate in Up Right
  • Attention Seekers
    • Bounce
    • Flash
    • Pulse
    • Rubber Band
    • Shake
    • Head shake
    • Swing
    • Tada
    • Wobble
    • Jello
  • Light Speed
    • Light Speed In
  • Specials
    • Roll In

• Animation Duration: Select between normal, fast, and slow.
• Animation Delay: Add an animation delay by entering the number of seconds.
• Mousemove Interactivity: Enable or disable mousemove interaction. If enabled, the following option becomes available:
• Interactivity Style: Select between Mouse Parallax or Tilt.
  • Mouse Parallax has additional options:
    • Reverse Direction: Reverse effect with mouse.
    • Back To Initial Position: Enable this to get back to the initial position when the mouse leaves the widget.
    • Rate: You can select the movement rate for the image.

• Scroll Effects: Enable or disable scroll effects. If enabled, you can enable one or more of the following effects:
  • Scroll Fade
  • Vertical Parallax
  • Horizontal Parallax
  • Blur
  • Rotate
  • Scale
  • Gray Scale
• Floating Effects: Enable or disable floating effects. If enabled, you can enable one or more of the following effects and can adjust their settings.
  • Translate
  • Rotate
  • Opacity
• Minimal Mask Effect: This effect takes place once the element is in the viewport. (Available when the media type is text)

• Draw SVGs in Sequence
• Loop.
• Speed: A larger value means a longer animation duration.
• Yoyo Effect.
• Apply Scroll Effects On: Apply the scroll effects on different device sizes. Desktop, Tablet and Mobile are active by default. Click on the X next to the item to remove it.
• Disable Floating Effects On Safari: You can disable Floating Effects on Safari browser to prevent any layout breaks that can result from compatibility between Safari browser and the modern CSS used to create the floating animations

Container

• Minimum Height: Adjust the minimum height to fit your images. Set the height using pixels, em, or vh.
• Overflow: Adjust the content overflow to fit your needs and your images. Select between:
  • Auto
  • Visible
  • Hidden
  • Scroll

Style

Image

• Background Color: Select a background color behind the image. This may be useful for transparent images.
• Border Type: Select between the following border types, as well as the width of the border on each side of the tab:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border radius: Can be declared using pixels, %, or em. The higher the number, the more circular corners. You can also select the border color from the color picker.
• Box Shadow: You can add a shadow around the tab with this option. Select the color and the following settings:
  • Horizontal position
  • Vertical position
  • Blur
  • Spread
  • Position: Outline or Inset
• Margin/Padding:
  • Margin is the space between the image and the main container. Changing the margin will change the image position.
  • Padding is the space between the image and the image border. Changing the padding will change the image size.

Container

The container has the same settings as the images, but the settings are applied to the outer container.

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.