DiviGear Gallery Module comes with three versatile modules that refine your content showcase. With some impressively unique features, it offers lots of customization options to create and display actionable galleries anywhere on your website.
In this following section, we will get to know about the extended features that the DiviGear Gallery Module brings.
We’ll divide the documentation into four distinct sections, making it easier to understand and navigate.
- Advanced Gallery Module Settings
- Justified Gallery Settings
- Packery Gallery Settings
- How do you add links, captions & descriptions to gallery images?
Advanced Gallery Module Settings
The Advanced Gallery Module has unique features including grid and masonry layout, hover effects, filter navigation, load more buttons, and many more.
Let’s get to know the important features Advanced Gallery Module has to offer,
Content Tab
Add New Item
Use ‘Add New Item’ to add images with titles. You can select multiple images to create a gallery.
To get a filterable gallery, You need to create multiple items with images on them. Each item will show as a filter category. To enable filter navigation, go to Gallery Settings and turn on the ‘Filter Nav’ option.
Gallery Settings
- Image Size: Choose from four size options: Thumbnail, Medium, Large, or Original.
- Images in a Row: Choose how many images appear in a single row (1 to 8).
- Layout Mode: Choose between Grid and Masonry layouts.
- Space Between: Adjust the spacing between gallery images.
- Use Image Order: Select image order from Random, Ascending, and Descending order.
- Filter Navigation: Activate to categorize images separately within multiple gallery categories. The default navigation name is “All.”
Load More Button: Display additional images on the viewport, with customizable settings including initial image load number, load more image count, and a custom button name.
Note: You can’t use the Filter Navigation and Load More buttons simultaneously in this module as they are opposite to each other.
- Use Custom Link: Add links to your gallery images from the media library.
- Lightbox: Enable to enlarge images with slider navigation. The lightbox can also include download buttons and image content in the slideshow.
Note: Lightbox and Custom link cannot be used together.
Hover Settings
- Overlay: Apply an overlay color to images on hover. Choose between gradient or solid overlays and adjust their opacity.
- Border Animation: Add hover animations to borders, choosing from 19 animations. Customize color, width, and spacing.
Note: Content space and position settings become active only when captions and descriptions are enabled.
- Content Space: Adjust the space between image captions and descriptions.
- Content Position: Select from 9 different positions for displaying content.
- Image Scale Type: Apply animation effects to images on hover, including Zoom in and out, Pan up, down, left, right, Rotate left and right, and Blur.
- Show Caption: Enable captions for images, with 12 reveal animations. You can also choose to “Always show captions.”
- Show Description: Enable descriptions for images, with 12 reveal animations. You can also choose to “Always show description.”
Background
Here you can add background color, gradient, image, video, pattern, or mask to the entire module including other customizable options.
Admin Label
By default, the admin label mirrors the module’s name, but you can give it a name of your preference for easy identification.
Design Tab
Font Style
Caption: Customize tag, typography, color, etc. for image captions.
Description: Same as “Caption”.
Image
Customize color effects and box-shadow for images. Adjust image hue, saturation, brightness, contrast, inverts, sepia, opacity, and image blend mode.
Note: Box shadow and image filter apply to individual images only.
Filter Button
Specify the button alignment, background, background color, button font, font styles, button border, border styles, and shadow.
Active Filter Button
The customization options are exactly the same as the “Filter Button” options
Load More Button
You will have all the button design options as previously including the icon option (Enable the Use icon setting NO to YES first).
Borders
This section offers two types of border design features: Filter container border and Image border, each with styling options.
Sizing
Customize width, max width, module alignment, and height (Min, Normal, Max) to suit your needs.
Spacing
Adjust the default margin padding inside the spacing option. Additionally, customize the spacing for captions, descriptions, filter button containers, filter buttons, and load more buttons.
Filters
Modify hue, saturation, brightness, contrast, invert, sepia, opacity, and blur with 16 different blend modes.
Animations
Apply from seven different animation styles including, Fade, Slide, Bounce, Zoom, Flip, Fold, and Roll.
Advanced Tab
Advanced Tab contains all of the standard Divi module options. You can use those features in our modules too.
Justified Gallery Settings
Justified Gallery Module, offers a comprehensive set of features for creating captivating image galleries. Let’s get to know other essential components this module has to offer,
Content Tab
Gallery
The heart of the module, allows you to add multiple images that you would like to appear in the image gallery.
Gallery Setting
- Image Size: Define the size of gallery images, choosing from medium, large, or original sizes.
- Row Max-Height: Adjust the maximum height of image rows and ensure visual consistency.
- Space Between: Set spacing between gallery images.
- Load More Button: Provide a way to display more images in your gallery.
- Use Custom Link: Add links to your gallery images to direct visitors to another webpage.
- Lightbox: Enable image enlargement with slider navigation. The lightbox can also include download buttons and image content in the slideshow.
Note: Lightbox and Custom link cannot be used together.
Hover Setting
- Overlay: Apply primary and secondary overlay colors to images on hover. Choose between gradient or solid overlays and adjust their opacity.
- Border Animation: Add hover animations to borders, with a selection of 19 animations. Customize animation parameters like color, width, and spacing.
Note: Content space and position settings become active only when captions and descriptions are enabled.
- Content Space: Adjust the space between image captions and descriptions.
- Content Position: Choose from 9 different positions to display your content.
- Image Scale Type: Apply hover animation to images including Zoom in and out, Pan up, down, left, right, Rotate left and right, and Blur.
- Show Caption: Activate captions for images, with 12 reveal animations. Optionally, set captions to ‘Always show.’
- Show Description: Activate image descriptions, with 12 reveal animations. Optionally, set descriptions to ‘Always show.'”
Background
Add background color, gradient, image, video, pattern, and mask to the entire module including other customizable options.
Admin Label
Change the label of the module in the builder for easy identification. By default, the admin label mirrors the module’s name. (In this case, Justified Gallery)
Design Tab
Font Style
Caption: Define the caption tag, font style & weight, caption text color & size for image captions.
Description: Same as “Caption”.
Image Filter
Adjust image hue, saturation, brightness, contrast, inverts, sepia, opacity, image blur, and image blend mode with 16 different options for Desktop, Mobile, and tab view.
Note: These effects only apply to the images within the justified gallery module.
Load More Button
Access button design options here. Also, apply the icon with additional options (First, enable the “Use icon” setting from NO to YES).
Borders
Choose between two border design options – Filter Container Border and Image Border, and customize their styles.
Sizing
Customize width, max width, module alignment, and height (Min, Normal, Max) to match your preferences.
Spacing
Adjust the default margin padding within the spacing settings. Additionally, personalize the spacing for captions, descriptions, filter button containers, filter buttons, and load more buttons.
Filters
Modify image properties such as hue, saturation, brightness, contrast, invert, sepia, opacity, and blur using 16 different blend modes.
Transform
Apply five different types of transform facilities: transform scale, translate, rotate, skew, and origin options for visual adjustment.
Animations
Apply from seven different animation styles: Fade, Slide, Bounce, Zoom, Flip, Fold, and Roll.
Advanced Tab
Advanced Tab contains all of the standard Divi module options. You can use those features in our modules too.
Packery Gallery Settings
Packery Gallery Module comes with 10 trendy premade gallery layouts including responsive view for tablet and mobile, hover setting, and lots of other options. Let’s get to know other essential components this module has to offer,
Content Tab
Gallery
Add countless images that you would like to appear in your Packery Gallery.
Gallery Setting
- Layout: Choose from 10 different interactive layouts.
- Desktop view on tablet: Enable desktop view on tablet.
- Tablet view: Enable tablet view for a single item or two items.
- Mobile view: Enable mobile view for a single item or two items.
- Space Between: Set spacing between gallery images.
- Load More Button: Provide a way to display more images in your gallery. Set the initial image load number and load more image count with button text.
- Use Custom Link: Add links to your gallery images to direct visitors to another webpage.
- Lightbox: Enable image enlargement with slider navigation. The lightbox can also include download buttons and image content in the slideshow.
Hover setting
- Overlay: Apply primary and secondary overlay colors to images when hovered over. Select between gradient or solid overlays and adjust their transparency.
- Border Animation: Add hover animations to borders, with a selection of 19 animations. Customize animation parameters like color, width, and spacing.
- Content Space: Modify the gap between image captions and descriptions.
- Show Caption: Enable image captions with a selection of 12 reveal animations. Optionally, set captions to display ‘Always.’
- Show Description: Enable image descriptions with a selection of 12 reveal animations. Optionally, set descriptions to ‘Always show.'”
- Content Position: Set content position from 9 different options.
Background
Adjust the background style by customizing the background color, gradient, image, video, pattern, and mask.
Admin Label
Change the label of the module in the builder for easy navigation. By default, the admin label mirrors the module’s name. (In this case, Packery Gallery)
Design Tab
Font style
Caption: Define the caption tag, font style, weight, caption text color, and size for image captions.
Description: This option is the same as “Caption”.
Load more button
Access button design options here. Enable or disable the icon and apply additional settings.
Item border
Apply borders in all the images at once with 5 border styles, width, color, and 9 different border shapes.
Sizing
Customize the width, max width, module alignment, and height (Minimum, Normal, Maximum) as per your requirements.
Spacing
Adjust default margin padding within the spacing settings. Personalize spacing for captions, descriptions, filter button containers, filter buttons, and load more buttons.
Animation
Apply one of seven animation styles: Fade, Slide, Bounce, Zoom, Flip, Fold, and Roll to enhance your content.
Advanced Tab
Advanced Tab contains all of the standard Divi module options. You can use those features in our modules too.
How to add links, captions & descriptions to gallery images?
In order to add links, captions, and descriptions to the image gallery from the Divi visual builder, you need to follow these simple steps:
Step 1: Choose any gallery module you prefer. Here we are using the Advanced Gallery module.
Step 2: Inside the module, you will see a (+) icon above “Add New Item” in the content tab. Click on it to open up the advanced gallery item setting.
Note: Packery and Justified Gallery do not require step 2.
Step 3: Click on the (+) icon above “Add Gallery Images” to load images. A media pop-up will open up. You can either add images from the media library or use the “upload files” option.
Step 4: After selecting an image, you will see fields on the right side of your screen to fill in the caption, description, and URL. Enter the relevant information and then hit the select button.
Step 5: Repeat step 4 for all your images and then return to your module setting.
Step 6: Head to the gallery setting and enable “Use Custom Link”. From “Hover Setting” enable Show Caption and Show Description as well.
Step 7: Once you’re done, click the save button in the module setting tab. Then, check the save button on the bottom right of your page.
Finally, click “Save Changes” and exit Visual Builder.