How to use the Image Magnifier widget by Element Pack Pro

  • BdThemes
  • How to use the Image Magnifier widget by Element Pack Pro

Table Of Contents

How to use the Image Magnifier widget by Element Pack Pro

In this documentation, we will show you how to customize the Image Magnifier widget presented by Element Pack Pro.

Inserting The Image Magnifier Widget

search and insert 1 - BdThemes

Inserting the widget by following this,

  1. Search by the Image Magnifier widget name.
  2. Then select the appear widget ( with Element Pack Pro logo T.R corner).
  3. After Drag and Drop it on the Elmentor Editor page.

Content Tab

The Content tab controller displayed here offers the flexibility to adjust the layout of the widget according to your preferences.

Layout Section

Go to Content > Layout

Thumb Image Tab

layout - BdThemes

This section provides control for the layout section,

  1. Thumb Image: Set the thumb image for the image magnifier.
Set Type Inner
layout type 2 - BdThemes
  1. Type: Select the type for showing the magnifier. Select type inner. The image will be magnified on mouse hover.
  2. Smooth Move: Enable the switcher to move smoothly.
  3. Preload: Enable the switcher to preload the image.
Set Type Standard
layout type standard - BdThemes
  1. Type: Select the type for showing the magnifier. Select type Standard. The image will be magnified on the side of the image on mouse hover.
  2. Smooth Move: Enable the switcher to move smoothly.
  3. Preload: Enable the switcher to preload the image.
layout type standard 2 - BdThemes
  1. Set the width and height for the magnifier image and click on the apply button.
  2. Horizontal Offset: Set the offset horizontally.
  3. Vertical Offset: Set the offset vertically.
  4. Position: Set Magnifier image position (e.g.: left, right).
Set Type Follow
layout type follow - BdThemes
  1. Type: Select the type for showing the magnifier. Select type Follow. The image will be magnified inside by following the image on mouse hover.
  2. Smooth Move: Enable the switcher to move smoothly.
  3. Preload: Enable the switcher to preload the image.
  4. Set the width and height for the magnifier image and click on the apply button.

Magnify Image Tab

layout magnify image - BdThemes

Select the magnify image by uploading the image or selecting it.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects that are visually appealing and cohesive with the overall design of the interface.

Image Section

Go to Style > Image

style image - BdThemes

Make the image section more visually good by following the controls,

  1. Background: Set the background for the image.
  2. Padding: Set the padding for the image.
  3. Border Type: Set type for the border.
style image 2 - BdThemes
  1. Border Width: Set the width for the border.
  2. Border Color: Set the color for the border.
  3. Border Radius: Make the border edges rounded by setting the radius.
  4. Opacity: Set the opacity for the image.

Video Assist

You can watch the video above to learn about the Image Magnifier widget.
Please visit the demo page for examples.

Thanks for staying with us.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge