The DiviGear Packery Gallery module allows you to display images in preset grid layouts where images can appear in different sizes and positions inside the Divi Builder.
Let’s take a quick look at the settings and how you can use them effectively.
Content Tab
This tab contains settings for adding images and configuring the gallery layout and functionality.
Gallery: Upload the images you want to display in the Packery gallery.
Gallery Settings
- Layout: Select a preset layout for the Packery gallery. There are 10 layout presets available.
- Desktop View on Tablet: Enable this option to display the desktop layout on tablet devices.
- Tablet View: Choose whether to display one or two images per row on tablets.
- Mobile View: Choose whether to display one or two images per row on mobile devices.
- Space Between: Adjust the spacing between gallery images.
- Load More Button:
- Initial Image Load: Define how many images will appear when the gallery first loads.
- 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.
- Custom Link: Enable this option to use links assigned to images from the WordPress media library.
- Link Target: Choose whether image links open in the same tab or a new tab.
- Use Lightbox: Enable this option to open images in a Lightbox when clicked. This option is unavailable when Custom Link is enabled.
- Lightbox Download Button: Display a download button inside the Lightbox.
- Lightbox Content: Display image captions inside the Lightbox.
Hover Settings
- Overlay:
- Overlay Primary Color: Choose the starting color of the overlay gradient.
- Overlay Secondary Color: Choose the ending color of the overlay gradient.
- Overlay Gradient Direction: Adjust the direction of the overlay gradient.
- Border Animation:
- Border Color: Choose the border color.
- Border Width: Adjust the border thickness.
- Border Space: Adjust the distance between the border and the image edge.
- Border Animation Style: Choose from available border animation styles.
- Content Space: Adjust the placement of the image caption and description over the image.
- Content Position: Choose where captions and descriptions appear inside the image.
- Show Caption: Display the image caption.
- Always Show Caption: Keep the caption visible all the time instead of showing it only on hover.
- Caption Reveal: Choose an animation effect for the caption.
- Show Description: Display the image description with similar options available for captions.
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 Packery Gallery module with advanced design settings.
Font Styles: Customize the typography of the image captions and descriptions.
Load More Button
Enable the Load More button in the Content tab to access these settings.
- Alignment: Adjust the horizontal alignment of the button.
- Loading Icon Color: Choose the color of the loading icon
Additional settings allow you to customize the button color, icon, typography, and border styles.
Item Border: Customize the border styling of gallery images.
Sizing: Adjust the width, height, and alignment of the module.
Spacing: Adjust the margins and padding of the module container.
Animation: Add reveal animation effects and control the animation style, delay, duration, and more.
Advanced Tab
This tab includes additional settings for advanced users who want 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]
