Overview of the layered gallery module

This document provides a comprehensive guide on configuring and using the Layered Gallery module for Divi 5. The Layered Gallery module allows you to showcase image galleries in an interactive 3D card stack layout, where multiple images overlap behind the active card to create visual depth and perspective. This guide covers step-by-step instructions for adding the module to your page, along with detailed explanations for all available settings in the Content, Design, and Advanced tabs.

How to add the layered gallery module to your page

1. Open your page in the Divi Visual Builder (Divi 5).
2. Click the green plus icon to add a new module to a row.
3. Search for DGE Layered Gallery in the module list.
4. Click the module icon to insert it into your layout.

Content tab settings

Images settings

• Gallery images: Select multiple photos from your WordPress Media Library to display in the layered gallery stack.
• Image size: Choose the image resolution to render on the front end (such as Thumbnail, Medium, Large, or Full).
• Randomize order: Enable this toggle to shuffle the image display order randomly every time the page loads.

Configurations settings

• Layout: Select the stacking layout style for layered cards.
• Image height: Define a custom height for the image element inside each card.
• Visible cards: Specify the maximum number of cards visible in the layered stack at one time.
• Stack depth: Adjust the 3D perspective depth of cards stacked behind the front card.
• Stack spread: Adjust the offset spacing between consecutive stacked cards.
• Click trigger: Choose the action performed when a card is clicked (None, Open Lightbox, or Custom Link).
• Link target: Choose whether custom links open in the same window or in a new browser tab.
• Advance trigger: Choose how the card stack transitions to the next item (Click, Autoplay, or Both).
• Autoplay speed: Set the timer duration between automatic transitions when autoplay is enabled.
• Pause on hover: Toggle whether automatic transitions pause when a visitor hovers their cursor over the gallery.
• No images text: Enter custom message text displayed when no gallery images are selected.

Design tab settings

Card sizing and style settings

• Width: Customize the width of the main gallery card container.
• Height: Customize the height of the main gallery card container.
• Background color: Set a solid color, gradient, or background image for the card container.
• Border radius: Set rounded corner values for the card container.
• Box shadow: Apply custom outer or inner drop shadows to add depth to cards.

Title text settings

• Show title: Enable or disable displaying image title text on cards.
• Heading level: Select the HTML heading tag for titles (H1 through H6).
• Font settings: Choose font family, font weight, text alignment, title font size, letter spacing, line height, and text color.

Caption text settings

• Show caption: Enable or disable displaying image caption text on cards.
• Font settings: Customize caption typography, font size, text alignment, and text color.

Overlay settings

• Show overlay: Enable or disable the image overlay.
• Hover only: Choose whether the overlay appears continuously or only when hovering over a card.
• Background color: Customize the overlay background color and transparency level.
• Icon settings: Choose an overlay icon, icon color, and icon font size.

Slider arrows settings

• Show navigation arrows: Enable or disable previous and next arrow buttons.
• Position: Place navigation arrows inside or outside the card container.
• Show on hover: Choose whether arrows are always visible or appear only when hovering over the gallery.
• Arrow styling: Set arrow icons, arrow font size, icon color, arrow background color, and arrow padding.

Lightbox settings

• Image size: Select the image resolution used when images open in the lightbox popup.
• Transition duration: Set the animation speed for opening and closing the lightbox popup.
• Enable navigation: Toggle left and right arrow navigation inside the lightbox view.
• Background color: Set the overlay color for the lightbox screen background.
• Close icon and arrow color: Customize colors for the lightbox close button and navigation arrows.

Advanced tab settings

• Custom CSS: Add custom CSS code directly to module elements such as main element, card container, title, caption, and overlay.
• Attributes: Assign custom HTML IDs and class names for advanced styling or scripting.
• Visibility: Control module display based on visitor device types (Desktop, Tablet, or Phone).
• Position and z-index: Configure custom positioning modes, offset values, and z-index layers.