Documentation
Magnify Image
Adding the Module
Once Avatar Divi is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:
- Create/Edit a Page/Post that uses Divi builder.
- Create/Edit a row.
- Click on Add New Module option; choose the Avatar Magnify Image module.
Content Options
Magnify Image
In this section you would be able to set your Magnify Image images. These are the available options:
- Enable Lazy Load: Triggers the default WordPress lazy loading. Lazy loading is delaying the loading of images until a user scrolls down the page.
- Main Image: Upload your Main Image. This is the image that will show on the page.
- Magnified Image: Upload your Magnified Image. This is the image that will show once the user moves the cursor over the Main Image inside the magnifying lens.
- Main Image Alt Text: Short alternative text HTML attribute describing your Main Image. Good for Search Engine Optimization.
- Hide Action Label: Here you can choose whether you want to hide or show the Action Label.
Magnify Settings
- Fade Speed: Fade-In/Out animation speed in milliseconds when the lens moves on/off the image.
- Touch Bottom Offset: Vertical touch point offset. Set this to something like 90 if you want to avoid your finger getting in the way of the magnifying lens on smartphones and tablets.
- Magnified Width: Width of the image displayed inside the magnifying lens. Set this only if you want to override the large image’s native width.
- Magnified Height: ‘Height of the image displayed inside the magnifying lens. Set this only if you want to override the large image’s native height.
- Limit Bounds: Set this to True to keep the edge of the image within the magnifying lens.
Design Options
Lens Holder Styles
- Divi Builder Default: Default Round Corners, Border Styles, Border Width, Border Color, and Box Shadow provided by the Visual Builder.
Lens Styles
- Enable Visual Builder Lens: This will help enable a visual representation of the Lens in the Visual Builder allowing you to conveniently style it. This option is only used in the Visual Builder.
- Lens Width: Set the Width value of your lens.
- Lens Width: Set the Height value of your lens.
- Lens Tint Color: Set the Tint Color of your lens.
Action Label
- Background Color: Set the Background Color of your Action Label.
- Icon Color: Set the Color of your Action Label Icon.
- Action Label Position: Set the position of your Action Label within the container.
- Label Text Horizontal Position Offset: Set the horizontal offset position of your Action Label.
- Label Text Vertical Position Offset: Set the vertical offset position of your Action Label.
- Divi Builder Default: Default Fonts and Text Styles provided by the Visual Builder.
Other Options
- Divi Builder Default: Default Sizing, Spacing, Border Styles, Box Shadow, Filters, Transform, and Animation provided by the Visual Builder.
Note
Default settings, sub-settings, and options used in all Divi Builder Modules are not described or included in our documentation and they are referred as Divi Builder Default throughout our guides to indicate that the options included are those provided by default by/or in the Visual Builder. If you need help learning to work with Divi Visual Builder, please visit Elegant Themes Documentation.