DiviFlash Packery Gallery module lets you display images in preset grid layouts where images can appear in different sizes and positions inside the Divi Builder.
Let’s see the settings in brief and how to make better use of it —
Content Tab
This tab contains settings for adding images and configuring the gallery layout and behavior.
Gallery: Upload the images you want to display in the Packery gallery.
Gallery Settings
- Layout: Choose a preset layout for the Packery gallery. Ten layout presets are 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 appear when the gallery first loads.
- Load More Image Count: Define how many images load each time the Load More button is clicked.
- Load More Button Text: Enter the text displayed on the Load More button.
- Show Pagination: Enable pagination instead of the Load More button. (Not available when the Load More button is enabled.)
- Pagination Image Count: Define how many images appear per page.
- Use Number Pagination: Display page numbers along with the previous and next buttons.
- Use Icon Only in Next and Previous Button: Display icons instead of text for the navigation buttons.
- Older Entries Button Text: Enter the text for the previous button.
- Next Entries Button Text: Enter the text for the next button.
- Custom Link: Enable this option to use links assigned to images in 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. (Not available when Custom Link is enabled.)
- Lightbox Download Button: Display a download button in 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 gradient direction.
- 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: Display the caption at all times instead of only on hover.
- Caption Reveal: Choose an animation style for the caption.
- Show Description: Display the image description with the same 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 to organize it more easily in the Divi Builder. (Only you can see this label.)
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 button color, icon, typography, and border styles.
Item Border: Customize the border styling of gallery images.
Pagination Button Styles
Enable pagination to access these settings.
- Pagination Alignment: Adjust the horizontal alignment of the previous and next buttons.
- Next & Prev Icon: Choose from four icon styles for pagination buttons.
Additional options allow you to customize button background, typography, and borders.
Active Pagination Number: Customize the background, typography, and border of the active page number. (Available when number pagination is enabled.)
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 provides additional settings for advanced users who want greater control over the module with custom code, conditions, and more.
Need Help?
If you have any questions or need assistance, contact our support team: [email protected]