Advanced Gallery Module for Divi has unique features like Grid & Masonry Gallery Layout, hover effects, filter navigation, load more button, lightbox, and more. This module has the following features.
Content Tab
Add New Item
Add New item allow you to add images for your gallery. Once clicked, you will find an image placement and title options. If you want to use the filter navigation option, create multiple galleries (By adding more New items) with your filter navigation label inside the title area.
Gallery Settings
Gallery Settings has functionalities like image size & row, layout mode, space between images, filter navigation, load more button, use the custom link, and lightbox.
Each feature inside gallery settings is explained below-
- Image Size: Select the image size from 4 different options- Thumbnail, medium, Large and Original.
- Image in a row: Select no of images that will be shown in a single row. You have the option to choose between 1 to 8.
- Layout Mode: Grid or Masonry, two layouts to choose from.
- Space between: Choose the distance between the gallery images.
- Filter Navigation: Turning on the filter navigation function will show a distinct category of images separately among multiple image gallery categories. You can also give the first Navigation name by default, “All.”
- Load More Button: Setting up the load more button will bring up more images on the viewport, and the number of images that come can be defined. Even you can go for a custom button name instead of “Load More.”
Note: Filter Navigation & Load more buttons are opposite to each other. Therefore, only one of these features can be applied at a time in this module.
- Use Custom Link: You can use links to your gallery images. You have to add the link from the media library.
- Lightbox: Turning ON the lightbox will allow you to enlarge an image by clicking and bringing up slider navigation. Lightbox also can show a download button and content for the image in the slideshow.
Note: Lightbox and Custom link can’t be used together.
Hover Settings
Hover setting has various customization opportunities, such as overlay, border animation, content space & position, image scale options, and show caption & description. Let’s explore it all one by one-
- Overlay: Set an overlay color over images on hover. It can be gradient or solid with an opacity adjustment option.
- Border Animation: Set a border animation on hover. You can choose the animation type from 19 different options and adjust color, width, and space.
Note: Content space & position works only after activating the caption & description features.
- Content Space: Adjust the space between the image caption and description.
- Content Position: Select the content position from 9 different options.
- Image Scale Type: Image Scale Type is an animation effect that works on images on hover. It has various animation effects like Zoom in & out, Pan up, down, left & right, Rotate left & right, and blur.
- Show Caption: Turning ON the caption option will display captions for your images. By default, it’s on hover, and you can set up 12 different reveal animations. You also have an option to turn ON “Always show caption”.
- Show Description: All the options available in “show caption” are also obtainable for description.
Note: See the guide on adding images, captions, and descriptions for all three gallery modules.
Design Tab
Font Style
The font style option consists of both caption and description styling options inside.
- Caption: Set tag, typography, color, etc. for your image caption.
- Description: All the design option caption have also available for description.
Image
With this feature, you can set color effects and box-shadow for images. Adjust hue, saturation, brightness, contrast, opacity, blur, etc., as needed.
Note: Box shadow applies to each image separately, and Image filters will work on images only.
Filter Button
If you have already activated the filter button, then here is the option for you to design it. You can specify the button alignment, background, font style, border, shadow, etc.
Active Filter Button
Here is a customization option for your active filter button to give a different look. You have all the button customization options just like Filter Button.
Load More Button
If you want a load more button, this design option is for you. You have all the button design options, including loading icon color and icon option for your button.
Borders
The border section of this gallery module has two different types of border design features. The first one is the Filter container border, and the second one is the Image border. You have border styling options for both types.
Spacing
Unlike any other module, this has default margin padding inside the spacing option. In addition, we offer custom spacing for elements like captions, descriptions, filter button container, filter buttons, and load more button.
Advanced Tab
Features from advanced tab covered on General doc.