Introducing Hover Gallery for Divi

by Mar 23, 2023Announcements, Pixel Modules

It’s time for another module. Today we are extremely excited, and we would like to introduce you to a new module that will power the Divi Pixel arsenal 🀩

In the last major update, we added a powerful Filterable Grid module. It allows you to create advanced grid layouts with custom posts. Since then, we have also improved the Before & After Slider module by adding a bunch of new settings, with micro animation options included. These improvements significantly improve the user experience using this module.

In this release, we are adding another – 44th πŸ₯³ module to the Divi Pixel collection! The Hover Gallery is a unique and creative tool that will allow the creation of interactive and engaging sections. If you want to learn more, keep reading.

Introducing Hover Gallery for Divi

Interactive websites are easier to attract the attention of visitors. It is a great idea to allow users to discover the page by interacting with it. And Divi Pixel modules do just that.

There are several techniques in the web design industry to engage users. One can be achieved by enabling mouse hover/click events, so something happens after the user mouseovers or clicks on specific elements. Of course, we should never overdo it by adding motion to the website. Depending on the site’s purpose, this technique should be used more or less.

The Hover Gallery is another creative module in Divi Pixel arsenal. It allows you to build a grid of content boxes where each grid item can have the main image, icon, title, description, and button. The main pictures are revealed after the user hovers or clicks the single grid box.

Advanced customization settings

The Hover Gallery module is highly customizable. After adding content to each grid item, you can customize each element using the advanced modules settings. This module has also been developed so you can use different styles for each content box separately, as the customization options are available in the parent and child modules.

Each grid item has settings for adding icons or images, titles, descriptions, and buttons. You can change the grid item appearance for the default and active states (when users mouseover or click the item).

After adding content, you can also customize the grid, change column number and spacing, and set the max width of the grid and position. All of these options are responsive, so they can also be adapted for mobile devices.

Global vs. Child item settings

There are two ways to adapt this module to your needs. You can use global settings to use the same styles for each grid item. And if you want to style each card individually, child module settings should be used.

Global Settings

Global settings are available in the parent module and will apply to each grid item element if you don’t enable custom styles in the child modules. If you want all cards to be the same, then using a global setting is the way to go. Style the default and active item elements separately to create a nice mouseover effect.

 

Child module Settings

All styles found in the parent module are also available in the child modules. This means that you can customize each grid item individually. These options will be helpful if you want each card to have different colors. It’s a good practice to create and customize 1 item, and then duplicate it and change only images and colors.

Grid settings and animation effects

The Hover Gallery module gives you complete control over the grid layout. You can customize the number of columns and spacing and set grid position and width. Seven animation effects are available that will make your Hover Gallery spectacular. There is also an option to enable the Autoplay mode, so your grid items will switch automatically after the defined delay.

What’s next?

Our team is not slowing down. Our work day is constantly testing new features and improving our modules to work flawlessly, and use is simple and pleasant. In upcoming releases, we will publish new modules. In the meantime, we will publish new Layout Packs for Sushi Bar, Cleaning, and Winery. For more information about new modules, please check our Product Roadmap.

ο—½

New Layout Packs

We are constantly working on new Divi Pixel Layout Packs that will speed up your web design process significantly. In the next coming days, we will release the layout pack for accountants.

ξ˜ƒ

Content Slider

This module will allow you to create stunning plans where users can switch between them using slider navigation.



Gravity Forms Styler

The Divi Pixel Gravity Form Styler module will allow you to customize Gravity Form using the Divi Builder.



WooCommerce modules

We’ve recently developed multiple WooCommerce modules, though they do need further testing with the latest Divi version and its improvements.



Instagram Feed

This module will allow displaying an Instagram feed in a brilliant and interactive way on your Divi website.

That’s all for today. In the next major release, we will publish another new module, so stay tuned! We’d love to hear your feedback. Share your opinion in the comments below πŸ™‚ If you would like to connect with other users that are using the Divi Pixel plugin, join the Divi Pixel Community today! You are invited!

Maciej Ekstedt

Maciej Ekstedt

Maciej is the co-founder of Divi Pixel. He is a self-made web designer and marketing expert, and he loves his job so much that he barely leaves the office. He transforms creative ideas into effective strategies for his company. Maciej is fascinated by the phenomenon of a megalopolis. He notices patterns and details which make up the whole thing, and he uses these skills in his work.