Image Zoom Custom Divi Module Version 2.0
Today, the Image Zoom Custom Module gets a long awaited update that brings full Visual Builder support and a whole lot more besides; available to buy now at Elegant Market Place.
The first of my custm Divi Modules to receive the Visual Builder treatment is finally here. You can now create and edit the Image Zoom Module directly in the Divi Visual Builder. It’s been a massive learning curve to make the module compatible with the Visual Builder, utilising a whole new set of development tools and trying to get my head around ‘react’. For some time now I have had a working version, but rather than just release an update with Visual Builder support I felt the need to make the Image Zoom module even better.
So What’s Changed?
What started life as a fairly simple module (essentially an image with text overlay and a couple of fancy extras) is turning out to be quite the treasure, and there is more to come.
I like to keep my modules as simple to use as possible, I don’t like a ton of settings that won’t be used so with that in mind, the new settings in Version 2 don’t stray much outside of the original scope of the module but instead, seek to make it easier and more intuitive whilst making use of the Divi module settings we’re all used to.
Having said that…
Image Sizing and Media Library Images
The first issue I wanted to address with the Image Zoom Module was the image sizing. Because the image added to the module is used as a background image, making it the correct size or aspect ratio required a height setting. This was ok, but not very good for responsiveness and in hindsight, it turns out there was a much better way to do this using padding; but I digress, this time I decided to take a new approach.
In Version 2 the image is used as both a background image and html image. The html image is hidden with an opacity setting of 0 (using visibility: hidden; would mean that the alt and title tags would be pointless), either option means the image still takes up it’s available space and that dictates the size and aspect ratio of the module.
With that sorted, I wanted a way to use a media library image to reduce page loading. Why use a 1920x1080 image in a 1/2 or 1/3 column right? So the first thing you’ll see when adding an image is a drop down list to choose an image size as you can see below.
These options don’t force the image to the exact dimension shown, but rather use the smaller image from the media library, reducing your page size but maintaining the aspect ratio of your chosen size.
In short, it will fill it’s container unless you change the width in the Design Tab. As an example, here’s a Image Zoom Module image using the Thumbnail size with the width set to 180px.
In case you’re wondering, that’s my Mum inadvertently dressed up as Inspector Clouseau; next to her a large pink cat.
In the Visual Builder, your original full size image is used whichever size you select. It is re-sized with CSS to match the final size output on the front end. Your original image size should be the same or larger than the the size you choose. The options with ‘no vb support’ are dependant on your original image size and whether they are portrait or landscape. In the Visual Builder these options may not always be accurate so if using them you’ll want to check the on the front end before publishing.
The Image Zoom Module Zoom & Pan Effects
Version 2.0 of the Image Zoom Module introduces the ability to switch between Off, Pan and Zoom and just Zoom. Pretty self explanatory but for those not paying attention, the difference is that this means you can switch off the Pan effect; you couldn’t do that before, so that’s nice right! Spot the difference (featuring Uncle Johnny)…
The Image Zoom Module Background’s and Opacity Settings
Also new to Version 2.0 is the ability to change the start or hover opacity of your image to reveal a Background Image, Color, Gradient or even a Video which you can set in the Module’s Background settings. Here’s just one example of what you can do with it…
Other Stuff in Version 2.0
There is also the option to change the transition type on the opacity and Zoom effects. There’s from the default Linear setting as well as Ease, Ease-in, Ease-out and Ease-in-out.
Image Zoom Module
Available to buy now at Elegant Marketplace.