DiviGear Justified Gallery module helps you create responsive image galleries where images are automatically aligned into justified rows.
Version Update: Justified Gallery module has been updated to v5.0.0 with full Divi 5 compatibility and Divi 4 backward compatibility.
Let’s take a quick look at the settings and how you can use them effectively.
Content Tab
This tab contains the settings for adding images and configuring the gallery layout.
Gallery
Upload the images you want to display in the justified gallery.
Gallery Settings
- Image Size: Select the size of the gallery images. Available options are Medium, Large, and Original.
- Row Max Height: Set the maximum height for each gallery row.
- Space Between: Adjust the spacing between images in the gallery.
- Load More Button: Enable this option to display a Load More button.
- Initial Image Load Count: Define how many images will load initially.
- Load More Image Count: Define how many images will load each time the Load More button is clicked.
- Load More Button Text: Enter the text displayed on the Load More button.
- Use Custom Link: Enable this option to use image links assigned in the WordPress media library.
- Link Target: Choose whether the image link opens in the same tab or a new window. Available only when Custom Link is enabled.
- Use Lightbox: Enable this option to open images in a Lightbox on click. This option is unavailable when Custom Link is enabled.
- Lightbox Download Button: Display a download button inside the Lightbox.
- Show Content On Lightbox: Display image captions together with the image inside the Lightbox
Hover Settings
- Overlay: Enable a gradient overlay effect on gallery images.
- Overlay Primary Color: Choose the starting color of the gradient.
- Overlay Secondary Color: Choose the ending color of the gradient.
- Overlay Gradient Direction: Adjust the gradient direction.
- Overlay Spacing: Adjust the spacing between the overlay and the image border.
- Border Animation: Enable a border animation effect on hover.
- Border Color: Choose the border color.
- Border Width: Adjust the border thickness.
- Border Space: Adjust the spacing between the border and the image edge.
- Border Animation Style: Select from 19 available border animation styles.
- Content Space: Adjust the spacing for captions and descriptions inside the image.
- Content Position: Choose where the content will appear inside the image.
- Image Scale Type: Choose how the image scales on hover. Nine different scale effects are available.
- Show Caption: Display the image caption on hover.
- Caption Reveal: Choose an animation style for the caption. Available only when Show Caption is enabled.
- Show Description: Display the image description on hover.
- Description Reveal: Choose an animation style for the description. Available only when Show Description is enabled.
Link: Use this default Divi setting to add a link to the entire module.
Background: Add a background color, gradient, image, video, pattern, or mask to the module.
Element Label: Rename the module for easier organization inside the Divi Builder. This label is visible only to you.
Design Tab
Customize the appearance of the Justified Gallery module with advanced design settings.
Font Styles: Customize the typography of image captions and descriptions.
Image Filter: Apply color filters and shadow effects to gallery images.
Load More Button
Enable the Load More Button in the Content tab to access these options.
- Alignment: Adjust the horizontal alignment of the Load More button.
- Loading Icon Color: Choose the color of the loading icon.
Additional settings allow you to customize the button typography and border styles.
Border: Customize the border using radius, style, width, and color settings.
Sizing: Adjust the width, height, and alignment of the module.
Spacing: Adjust the margins and padding of the module container.
Filters: Apply color filter effects to the module.
Transform: Adjust the scale, position, rotation, and size of the module.
Animation: Add reveal animation effects and control the animation style, delay, duration, and more.
Advanced Tab
This tab provides additional settings for advanced users who need more control using custom code, conditions, and other advanced options.
Need Help?
If you have any questions or need assistance, contact our support team: [email protected]
