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

Image Magnifier EA Element

Image Magnifier is a simple, smooth, responsive image zoom widget that provides two modes to magnify or zoom in on an image. It is perfect for your eCommerce or real estate online store. You should add your product image via the Image Magnifier widget to give the viewers a maximum visuality. Here in this tutorial, you’re going to learn how to use the Image Magnifier 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 Magnifier Element

 

»Content

 

Layout

Thumb Image:

⇒Thumb Image: Upload the thumbnail image for the magnifier. (Note: If you want to load magnifying image as large so open right tab)

⇒Type: Set the type of image either inner, standard or follow.

⇒Smooth Move: Enable/disable the smooth movement on the image magnifier.

⇒Preload: Enable/disable the preload on the image magnifier.

⇒Width & Height: Customize the width and height of the thumbnail image for different dimensions. Zoom ratio width and height, such as 480:300.

⇒Horizontal Offset: Customize the horizontal offset for different dimensions.

⇒Vertical Offset: Customize the vertical offset for different dimensions.

⇒Position: Customize the position of the image either right or left.

Magnify Image:

⇒Magnify Image: Upload the magnify image for the magnifier.

⇒Type: Set the type of magnify image either inner, standard or follow.

⇒Smooth Move: Enable/disable the smooth movement on the image magnifier.

⇒Preload: Enable/disable the preload on the image magnifier.

⇒Width & Height: Customize the width and height of the magnified image for different dimensions. Zoom ratio width and height, such as 480:300.

⇒Horizontal Offset: Customize the horizontal offset for different dimensions.

⇒Vertical Offset: Customize the vertical offset for different dimensions.

⇒Position: Customize the position of the image either right or left.

 


»Style

 

Image

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

⇒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.

⇒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.

⇒Opacity: Control the opacity of the image. Value works in percentage.

 


»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 Magnifier Element.


Was this article helpful to you? Yes No

How can we help?