Overview of the stack cards gallery module

The Stack Cards Gallery module for Divi 5 displays gallery photos in a compact deck of stacked cards. Cards fan out smoothly in your chosen direction (left, right, top, or bottom). As visitors interact with top cards, subsequent cards advance with fluid 3D perspective animations.

How to add the stack cards gallery module to your page

1. Open your page in the Divi Visual Builder (Divi 5).
2. Click the green plus icon to insert a new module into your layout.
3. Search for DGE Stack Cards Gallery in the list of available modules.
4. Click the module icon to place it on your page.

Content tab settings

Images settings

• Gallery images: Select multiple image files from your media library to form the card deck.
• Image size: Choose the rendered resolution for images (such as Thumbnail, Medium, Large, or Full).
• Randomize order: Toggle this setting to randomize the sequence of gallery cards on every page reload.

Configurations settings

• Stack direction: Select the direction in which secondary stacked cards offset behind the top card (Left, Right, Top, or Bottom).
• Stack depth: Set the total number of card layers visible in the stack behind the active card.
• Stack spread: Adjust the pixel offset distance between individual stacked card layers.
• Click trigger: Choose what happens when a card is clicked (None, Open Lightbox, or Custom Link).
• Link target: Select whether custom links open in the same tab or in a new browser window.
• Advance trigger: Choose how cards cycle through the stack (Click, Autoplay, or Both).
• Autoplay speed: Define the transition delay when autoplay is active.
• Pause on hover: Toggle whether autoplay pauses when the user hovers over the gallery stack.
• No images text: Specify custom text displayed if no gallery images are uploaded.

Design tab settings

Card sizing and style settings

• Width: Set custom width dimensions for the stacked cards container.
• Height: Set custom height dimensions for the stacked cards container.
• Border radius: Apply rounded corners to all four corners of stacked cards.
• Box shadow: Add subtle or prominent outer drop shadows to enhance card depth.

Title text settings

• Show title: Enable or disable displaying photo titles on gallery cards.
• Title area: Select where title text appears (Card, Overlay, or Both).
• Heading level: Choose HTML heading level (H1 through H6).
• Font settings: Configure font family, font weight, font size, text alignment, letter spacing, line height, and text color.

Caption text settings

• Show caption: Enable or disable displaying photo caption text on cards.
• Caption area: Select where caption text is shown (Card, Overlay, or Both).
• Font settings: Set caption font family, font size, line height, and text color.

Overlay settings

• Show overlay: Enable or disable card image overlays.
• Vertical alignment: Align overlay text and icons to the top, center, or bottom of cards.
• Hover only: Choose whether the overlay is visible constantly or only when hovering over cards.
• Background color: Choose an overlay background color and transparency.
• Icon settings: Choose an overlay icon, icon size, and icon color.

Lightbox settings

• Image size: Select full or custom resolution for images rendered inside the lightbox.
• Transition duration: Specify popup animation transition time in milliseconds.
• Enable navigation: Enable left and right arrows to browse through gallery images in the lightbox.
• Background color: Set the dark overlay screen color for the lightbox view.
• Close icon and arrow color: Customize the color of the close button and navigation arrows.

Advanced tab settings

• Custom CSS: Input custom CSS code for targeted module selectors such as main card, overlay, title, and caption.
• CSS ID and classes: Assign custom identifiers for external styling or script targeting.
• Visibility: Adjust module visibility across Desktop, Tablet, and Mobile screen sizes.
• Position and z-index: Configure custom CSS positioning, offsets, and layering orders.