Image Zoom Custom Divi Module Version 2.0

by | Jun 28, 2018 | News

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 EaseEase-inEase-out and  Ease-in-out.

Get in Touch

Get in touch if you need help or information about any of my plugins, tutorials, web design or hosting solutions.

I am always looking for more ideas for articles and plugins so if you have an idea you want to share, feel free to get in touch.

Please remember to white-list my email address
plugins@xn--hdworm-pua.com if you’re expecting a reply.

6 + 10 =