The DiviGear Advanced Gallery module is a flexible tool for creating highly customizable and visually attractive image galleries on your Divi website.
Let’s take a quick look at the settings and how you can use them effectively.
Content Tab
This tab includes the core settings for adding and configuring gallery items.
Add New Advanced Gallery Item
Click the + Add New Item button to create a new gallery item. This will open the Advanced Gallery Item Settings, where you can add images, titles, and customize settings for each item individually.
To learn more about the features of the Advanced Gallery Item Settings, click here.
Gallery Settings
- Use Category Alternative: Enable this option to dynamically display images based on their assigned categories.
- Category: Select the image categories you want to include. Categories must be created beforehand.
- Image Size: Select the image size for the gallery. Available options are Thumbnail, Medium, Large, and Original.
- Image in Row: Define how many images will appear in a single row.
- Layout Mode: Choose the gallery layout style. You can select either the traditional grid layout or the modern masonry layout.
- Use Image Orientation: Enable this option to choose between landscape and portrait image orientations.
- Image Orientation: Select either landscape or portrait orientation for the images.
- Space Between: Adjust the spacing between gallery images.
- Use Image Order: Enable this option to organize images in a specific order.
- Image Order: Choose the image order from Random, Ascending, or Descending.
- Filter Nav: Enable category-based filter navigation.
- Disable First Nav: Enable this option to disable the first navigation filter.
- First Nav Text: Set a custom label for the first navigation filter.
- Load More Button: Enable a “Load More” button instead of Filter Nav. This option cannot be used together with Filter Nav.
- Initial Image Load: Define how many images will be displayed initially.
- Load More Image Count: Define how many additional images will load after clicking the button.
- Load More Button Text: Enter the text for the Load More button.
- Show Pagination: Enable pagination instead of using Load More or Filter Nav.
- Pagination Image Count: Set how many images should appear per page.
- Use Number Pagination: Enable this option to show page numbers along with previous and next buttons.
- Use Icon Only in Next and Previous Button: Enable this option to display only icons for the previous and next 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 from the WordPress media library.
- Link Target: Choose whether image links open in the same tab or a new window.
- Lightbox: Enable Lightbox view when clicking images. This option is disabled if Custom Link is enabled.
- Lightbox Download Button: Enable this option to show a download button inside the Lightbox. Available only when Lightbox is enabled.
- Lightbox Content: Display image captions inside the Lightbox. Available only when Lightbox is enabled.
Hover Settings
- Overlay: Enable this option to apply a color gradient overlay on gallery images.
- Overlay Primary Color: Select the primary color for the overlay gradient.
- Overlay Secondary Color: Select the secondary color for the overlay gradient.
- Overlay Gradient Direction: Adjust the direction of the gradient.
- Overlay Spacing: Control the spacing between the overlay and image border.
- Use Icon: Enable this option to display an icon on the overlay.
- Icon Color: Choose the icon color.
- Icon Size: Adjust the icon size.
- Icon Placement: Set the horizontal position of the icon inside the overlay.
- Icon Alignment: Set the vertical position of the icon inside the overlay.
- Icon Reveal: Select an animation effect for the icon reveal.
- Border Animation: Enable this option to add a border and reveal animation to the overlay.
- Border Color: Choose a border color.
- Border Width: Adjust the border width.
- Border Space: Adjust the spacing between the border and image edge.
- Border Animation Style: Select a border animation style from 19 available options.
- Show Caption: Enable this option to display the image caption on hover.
- Always Show Caption: Enable to always display the image caption over the image.
- Caption Reveal: Choose a reveal animation for the caption. There are 12 animation options available.
- Show Description: Enable this option to display the image description on the overlay.
- Always Show Description: Enable to always show the image description over the image.
- Description Reveal: Choose a reveal animation for the description. There are 12 animation options available.
- Content Space: Adjust the positioning of the image caption and description over the image.
- Content Outside: Enable this option to display image captions and descriptions outside the image border instead of over the image.
- Content Position: Choose whether the image content will appear inside or outside the image border.
- Image Scale Type: Select how the image scales on hover. There are 9 different scale options available.
- Scale: Available only for rotate-left or rotate-right scale types.
Link: Use the 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 only visible to you.
Design Tab
Use this tab to customize and style the appearance of the gallery module.
Font Styles: Typography settings for image captions and descriptions.
Image: Apply color filters and shadow effects to gallery images.
Filter Buttons: Customize alignment, typography, and border styles for filter navigation buttons. Enable Filter Nav from Content Tab > Gallery Settings to use these options.
Active Filter Button: Customize alignment, typography, and border styles for the active filter button.
Load More Button
Enable the Load More button to access these settings.
- Alignment: Adjust the horizontal alignment of the Load More button.
- Loading Icon Color: Choose a color for the loading icon.
The remaining settings allow you to customize the icon, background, and border styles of the Load More button.
Borders: Apply border styles to the gallery container and images.
Pagination Button Styles
Enable pagination to use the following settings.
- Pagination Alignment: Adjust the horizontal alignment of the pagination buttons.
Note: Choosing any alignment other than justified will place the buttons together. Selecting justified will keep one button on each side of the gallery.
- Next & Prev Icon: Choose from 4 different icon sets for the previous and next pagination buttons.
The remaining settings allow you to customize the background, typography, and border styles of the pagination buttons.
Active Pagination Number: Customize the background, typography, and border styles for the active pagination number. Enable number pagination to use these settings.
Sizing: Adjust the width, height, and alignment of the module.
Spacing: Adjust the margin and padding of the module container.
Filters: Apply color filter effects to the module.
Animation: Add reveal animations and control the animation style, duration, delay, and more.
Advanced Tab
This tab contains additional settings for advanced users who need more control through custom code, conditions, and other advanced options.
Advanced Gallery Item Settings
From here, you can add images to gallery items and customize each item separately.
Content Tab
Gallery
- Title: Add a title for this gallery item.
- Gallery Images: Add the required images to this gallery item.
Element Label: Rename the item for easier identification inside the builder. This label is only visible to you.
Advanced Tab
This tab contains additional settings for advanced users who want more control over individual gallery items.
Need Help?
If you have any questions or need assistance, contact our support team: [email protected]
