When you need to communicate exclusivity without relying on loud colors or chaotic layouts, stark minimalism is the most effective approach. The Minimal Grid Reveal Popover leverages brutalist typography and an infinite, staggered image animation to create a sophisticated, high-end promotional modal. This widget is engineered specifically for luxury brands and exclusive member events where brand aesthetic is just as important as the discount itself.
This exclusive sale popover abandons standard e-commerce modal layouts for a high-fashion, print-inspired design.
Infinite Image Reveal: The core of the visual experience is a four-tile (2x2) image grid. Every few seconds, your campaign images fade and scale into view with a precise, staggered delay. They temporarily obscure the text before seamlessly fading away to reveal the discount underneath, creating a mesmerizing loop.
Brutalist Typography: The central messaging relies on massive, tightly tracked lettering to deliver the discount and promo code with absolute authority. The stark contrast between the heavy black text and the pure white canvas ensures instant legibility.
Vertical Text Accents: A subtle, 90-degree rotated text element runs down the top right edge. This small detail mimics the spine of a premium magazine or lookbook, adding an editorial polish to the overall layout.
Behind the clean aesthetic is a highly controlled CSS framework designed to protect your site's layout across all devices.
Controlled Viewport Sizing: The widget is strictly capped at a maximum height of 60vh. Furthermore, the internal grid rows are mathematically locked to exactly 50% of the container's height. This ensures your uploaded images never stretch, warp, or break the popover bounds, even on compact mobile screens.
Lightweight Infinite Loops: The staggered image reveal relies entirely on the hardware-accelerated rd-grid-reveal CSS keyframe animation. There is no JavaScript calculating the fades, ensuring your page speed remains unaffected.
Smart Positioning: Utilizing native data attributes, this minimalist promo modal can be snapped to the absolute center for a highly disruptive VIP site takeover, or tucked into the corners for a persistent, ambient reminder.
This layout is the ultimate luxury e-commerce popup for high-end streetwear, premium cosmetics, and avant-garde apparel brands. Deploy it for secret VIP sales, limited-availability collection drops, or gated early-access events where you need to build anticipation and maintain a meticulously curated, premium brand image.
Bring this layout to life on your website in just a few clicks.
Edit Minimal Grid Reveal Popover visually using the native Squarespace extension
First, ensure you have connected your website to the native Redesignee extension. Once connected, you have two easy ways to build:
Native Block: Simply add the native Redesignee Widget Block directly from the fluid engine editor menu inside Squarespace.
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
Connect natively via Gutenberg or Elementor
Make sure you have the free Redesignee WordPress Plugin installed. To drop the Minimal Grid Reveal Popover into 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
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.
This Minimal Grid Reveal Popover widget is optimized and categorized inside the following layout packs:
Scale your studio production in record time. Access professional agency sections from our cloud workspace, tweak them visually, and drop clean, native elements straight into your client builds.
Elevate your business site layouts instantly. Browse free and premium corporate modules from our cloud library, adjust elements visually, and copy-paste clean layouts straight to your page engine canvas.
Embrace pristine minimal structures. Tweak crisp whitespace templates visually inside our cloud canvas layout, copy the fast-rendering script output, and paste it straight onto your host site.
Bring asymmetric, magazine-style aesthetics to your web project canvas. Browse editorial grids and refined typography elements from our cloud repository and copy-paste clean code rows.
Make your layouts stand out instantly. Tweak advanced visual elements inside our cloud design workspace, copy the lightweight framework strings, and drop them seamlessly onto your canvas.
