View Categories

Gallery Modules Overview

10 min read

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.

Submit a Comment

Your email address will not be published. Required fields are marked *