Divi Essential Documentation

⌘K
  2. Home
  4. Docs
  6. Divi Essential Documentat...
  8. Modules
  10. Scroll Stacking

Scroll Stacking

The Scroll Stacking Cards module for Divi Essential (Divi 5) is designed to transform standard content into an immersive storytelling experience. As users scroll, each card sticks to a designated position while the next card slides over it, creating a visually rich “stacking” effect. This is perfect for features, processes, or portfolio highlights that require a modern, high-end feel.

Content Tab

Content Source

In the Content Tab, the first step is to define where your card data originates. You can choose between two distinct sources:

  • Content Items: Select this option if you wish to build each card manually. This gives you full control over the unique text, images, and links for every card in the stack.
  • Posts: Select this option to generate your cards dynamically. The module will automatically pull data from your WordPress posts, allowing you to display your latest blog entries or portfolio items in a stacking layout.

Option: Content Items (Manual)

When Content Items is selected as your source, you create the stack piece by piece.

Individual Card Items: You can add multiple items manually. For each item, you will have a dedicated sub-module where you can input specific content, ensuring every card in the stack has a unique message and design.

Option: Posts (Dynamic)

When you select Posts as your content source, the module shifts from manual entry to dynamic automation.

Dynamic Information: Upon selecting this source, the module reveals specialized settings to filter and fetch your posts. This allows the stack to update automatically whenever a new post is published, pulling in the featured image, title, and excerpt to populate the cards.

Stack Settings

  • Stack Direction
    • Horizontal — Cards stack left-to-right.
    • Vertical — Cards stack top-to-bottom.
  • Stack Effect
    • Options: Slide, Fade (more will be available).
  • Animation Start ViewPort (%)
    • Percentage of viewport where animation starts (e.g., 0%, 20%).
  • Sticky Top Position
    • Offset for sticky cards (e.g., 20px).
  • Item Width / Height

Set card dimensions (e.g., 400px).

Element Visibility

The Element Visibility settings give you full control over which elements appear on each card. This is useful for creating minimal designs or focusing on specific content.

Options

  • Show Titles
    Toggle ON/OFF to display or hide card titles.
  • Show Content
    Toggle ON/OFF to display or hide the card body text.
  • Show Images
    Toggle ON/OFF to display or hide images/icons on the card.

Show Buttons
Toggle ON/OFF to display or hide call-to-action buttons.

Other Related Settings

  • Layout Settings — Adjust card arrangement. Left to right or right to left.
  • Link — Add URLs for cards or buttons.
  • Background — Set background color, gradient, or image for cards.

Admin Label — Rename the module for easy identification in the builder.

Tip:

  • For image-only layouts, turn OFF titles and content while keeping images ON.
  • For text-focused layouts, turn OFF images and keep titles/content ON.
  • Buttons can be hidden for informational cards or shown for actionable cards.

Design Settings 

Global Design Settings

Apply consistent styling across all cards:

  • Text: Global text styles. For text alignment, text color, and text shadow.

  • Title: Typography, color, alignment, styling.

  • Content: Body text styling.

  • Icon: Size and color.

  • Image: Size, padding, borders.

  • Button: Background, border, text, hover effects.

  • Card Item: Container styling.

  • Sizing: Width, height, alignment.

  • Spacing: Margin and padding.

  • Border: Width, color, style.

  • Box Shadow: Depth and hierarchy.

  • Filters: Brightness, contrast, saturation.

  • Transform: Scale, rotate, skew.

  • Animation: Entrance animations.

 

For Individual Cards

The Design tab provides complete control over the styling of each card element. You can customize typography, spacing, borders, colors, and more to create a visually consistent and engaging design.

1. Title Styling

Customize the card title for better readability and aesthetics.

  • Font: Select from available fonts or inherit the default.
  • Font Weight: Choose Regular, Bold, or other weights.
  • Font Style: Apply Italic, Uppercase, Underline, or Strikethrough.
  • Text Alignment: Align text Left, Center, or Right.
  • Text Color: Pick any color for the title text.
  • Text Size: Define size in pixels for precise control.
  • Letter Spacing: Adjust spacing between characters.
  • Line Height: Set vertical spacing between lines.
  • Text Shadow: Add depth with shadow effects.
  • Title Margin & Padding: Control spacing around the title.
  • Border Radius: Round the corners of the title container.
  • Border Styles: Choose from Solid, Dashed, Dotted, etc.

Border Width & Color: Define thickness and color for borders.

Content Styling

Similar options as Title, applied to the card body text:

  • Font, Weight, Style, Alignment.
  • Text Color, Size, Letter Spacing, Line Height.
  • Text Shadow for enhanced readability.

3. Icon Styling

  • Icon Size: Adjust size using the slider.

Icon Color: Apply custom color to match your design.

Image Styling

  • Image Padding: Set spacing around the image.
  • Image Size: Adjust size with a slider.
  • Image Border: Customize radius, styles, width, and color.

Button Styling

Enable Custom Styles for the Button to unlock full customization:

  • Button Background: Solid color or gradient.
  • Button Border: Radius, style, width, and color.
  • Button Text: Font, size, color, and alignment.
  • Button Icon: Customize icon size and color.

Button Box Shadow: Add depth and hover effects.

Sizing

Control the overall dimensions of the card:

  • Width / Max Width
  • Height / Max Height
  • Alignment: Left, Center, Right.
  • Column Class: Fullwidth or custom.

Spacing

Fine-tune layout with:

  • Margin: Outer spacing.
  • Padding: Inner spacing.

Additional Styling

  • Border: Apply borders to the card container.
  • Box Shadow: Add shadows for depth.
  • Filters: Adjust brightness, contrast, saturation.
  • Transform: Scale, rotate, skew for creative effects.

Animation: Apply entrance animations for dynamic interaction.

Pro Tips

  • Use consistent typography across all cards for a professional look.
  • Apply subtle shadows and borders to create depth without clutter.
  • Optimize image size for faster loading and better performance.
  • Test responsiveness on desktop, tablet, and mobile.

How can we help?