Layered Stacked Gallery

The Layered Stacked Gallery is a high-end, motion-driven component designed to transform static image displays into a cinematic, tactile experience. This widget is specifically engineered for designers who want to showcase a depth of content within a compact footprint, using a sophisticated "physical" stacking logic that feels both modern and intuitive.

The Visual Concept

The widget utilizes a multi-layered z-index approach to create a dynamic physical stack. Rather than a traditional flat grid, images are nested behind one another with subtle offsets in rotation and position.

• Optimal Configuration: While the widget supports multiple files, it truly shines with 2 or 3 images. This allows for enough "peek" area to trigger user curiosity without cluttering the layout.
• Tactile Depth: Built-in drop shadows and smooth CSS transitions give the cards a sense of weight. When a user interacts with the stack, the cards fan out or cycle through, creating a fluid transition that mimics real-world photography portfolios.
• Adaptive Styling: The background layers can be configured to use vibrant brand colors (like the purple accent in the preview) or transparent glassmorphism effects, allowing the gallery to blend seamlessly into any site aesthetic.

Key Features

• Fluid Engine Optimized: Like all Redesignee blocks, this is built to live natively within Squarespace’s Fluid Engine, ensuring it remains perfectly stable across all screen sizes.
• Hover-Triggered Expansion: The stack is designed to "expand" on hover or click, revealing the secondary and tertiary images with high-performance hardware-accelerated animations.
• Zero Jitter: The math behind the card rotation is locked to prevent the "shaking" often found in standard CSS carousels, keeping the edges sharp and the motion professional.

Where to Use This Widget

This component is ideal for areas where you need to tell a story or show "more" without taking up an entire section of the page.

• Creative Portfolios: Use it to group project highlights. A single project can show the final result on top, with process sketches or alternative views tucked neatly behind.
• "About Me" Sections: Perfect for a curated stack of personal photos or lifestyle shots that add a human touch to a professional bio without looking like a messy collage.
• Service Highlights: Showcase a service with a primary icon or image on the top card, and supporting visual evidence or iconography on the layers underneath.
• Testimonial Visuals: Pair a client’s headshot with a secondary image of the work you completed for them, creating a more engaging way to display social proof.
• Blog/Article Featured Images: Instead of a single flat thumbnail, use the stack to hint at the "gallery" of content waiting inside the post.

How to install Layered Stacked Gallery to your website

Bring this layout to life on your website in just a few clicks.

Install on Squarespace

Edit visually using the extension or native blocks

+−

First, ensure you have pasted the global Redesignee connector script into your site's Code Injection settings. Once connected, you have two easy ways to build:

1. Native Block: Simply add the native Redesignee Widget Block directly from the fluid engine editor menu inside Squarespace.

2. Manual Markdown: Add a standard Markdown Block, paste your widget’s code snippet, and the Redesignee floating "Customize" button will automatically appear right over the block.

Both methods let you tweak settings, copy items, and design visually in real time. Saving your changes syncs the updates instantly to your live page.

See Squarespace installation guide

Install on WordPress

Connect natively via Gutenberg or Elementor

+−

Make sure you have the free Redesignee WordPress Plugin installed. If you are using Elementor, simply drag and drop the Redesignee widget from your sidebar. If you are using the Gutenberg Block Editor, click the " + " icon and select the Redesignee Block. Launch the Cloud Library directly inside your workspace, choose your customized template, and import it with a single click. It automatically inherits your theme fonts and styles!

WordPress plugin installation guide

Install on Other CMS as Code

Quick copy-and-paste for custom setups

+−

If you are using Webflow, Shopify, Wix, or a custom HTML site, click the "Export Widget" button on this page and ensure the platform selector is set to "HTML". Click "Copy" to copy the clean, un-nested source code snippet directly to your clipboard. Paste this code into any HTML component, Code Block, or Embed tool inside your website builder. All styles, animations, and scripts are self-contained and ready to run.