1. Home
  2. Docs
  3. Image Elements
  4. Image Layers

Image Layers SA Element

EA Image Layers widget allows you to represent your images in a brand new way. Add your favorite multiple images and give it another taste by using mouse moving interactivity. And now, you can position, resize layers from the preview area. Here in this tutorial, you’re going to learn how to use the Image Layers element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Image Layers Element

 

»Content

 

Image

Adding the Item:

⇒Upload Image: Upload the image for the image layer.

⇒ALT: Add the image alt tag here.

⇒Image Size: Customize the fixed size of the image layer’s image from our pre-defined size type.

⇒Horizontal Offset: Customize the horizontal offset for different dimensions. The mousemove interactivity works only with pixels.

⇒Vertical Offset: Customize the vertical offset for different dimensions. The mousemove interactivity works only with pixels.

⇒Width: Customize the width of the image for different dimensions. Enter image width in (PX, VW, %), default is 100%

⇒Link: Enable/disable the link on the image. Then, add a custom link or select an existing page link. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link

⇒Rotate: Enable/disable the image rotation. When select enable, set rotation value in degrees.

⇒Scroll Effects: Enable/disable the scroll effects on the image. When enable, customize the style of one of the following: Scroll Fade, Vertical Parallax, Horizontal Parallax, Blur, Rotate, Scale or Gray Scale.

⇒Z-Index: Enter the Z-index for the image layer.

⇒CSS Classes: Add your custom CSS classes here to get your own style on the image layer.

⇒Add Item: Use the ‘+Add Item’ button to add more images to the image layer.

⇒Apply Scroll Effects On: Enter the devices you want to apply the scroll effects on. Ex: Tablet, Mobile, Desktop.

 

Container

⇒Minimum Height: Customize the minimum height of the image layer container for different dimensions.

⇒Overflow: Select the overflow of the container for different dimensions.

 


»Style

 

Image

⇒Background Color: Add a custom color to the image background and control the opacity.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the image for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the image border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the image for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Margin: Set the margin value for the top, right, bottom and left around the image for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the image for different dimensions. You can link the values together or customize them individually.

 

Container

⇒Background Color: Add a custom color to the container background and control the opacity.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the container for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Margin: Set the margin value for the top, right, bottom and left around the container for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the container for different dimensions. You can link the values together or customize them individually.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Image Layers Element.


Was this article helpful to you? Yes No

How can we help?