Skip to main content
Nothing sells transformation like seeing it. Before/after grids are purpose-built for agencies showing web redesigns, contractors showing renovations, coaches showing results, and marketers showing case studies.
Path: Marketing > Before/After Grids

​
When to Use Them

Portfolio pages

Web redesigns, home renovations, brand refreshes

Product demos

Before your product vs after

Case studies

Quantitative transformation with visual proof

​
Three Ways to Build a Grid

Fastest way to spin one up:
Create a before/after grid showing the original site 
(https://example.com/old-screenshot.png) and the redesigned version 
(https://example.com/new-screenshot.png). Use the interactive slider layout.
The AI creates the grid, uploads the images, and returns an embed code ready to drop on any page. Follow up to refine: “Make it wider”, “Add a caption that says 2024 redesign”.

​
Layout Types

Each layout works for different storytelling:
  • Side-by-side — clean, clear, takes more horizontal space. Great for desktop-heavy audiences and obvious visual differences.
  • Interactive slider — draggable reveal, most engaging. Users spend time playing with it, which boosts dwell time. Best for subtle differences that benefit from direct comparison.
  • Stacked — before on top, after on bottom. Works well on mobile where horizontal space is limited.
Default to the interactive slider for hero comparisons. Use side-by-side for multi-case portfolio grids where each comparison is one card.

​
Embedding on Your Site

1

Open your grid

From the Before/After Grids dashboard, click the grid you want to embed.
2

Click Embed

Copy the embed code — either an iframe or a React component snippet depending on your site stack.
3

Paste on a page

Content editor: paste directly into any block. Code: drop the snippet into your JSX/HTML.
4

Deploy

Click Deploy in the top bar. The grid appears at your target URL.

​
Responsive Behavior

Grids adapt automatically across breakpoints:
  • Desktop — full side-by-side or slider with hover effects
  • Tablet — slightly tighter layout, touch events enabled for sliders
  • Mobile — side-by-side layouts auto-stack unless you override
You can preview all three breakpoints inside the grid editor before publishing.

​
Tracking Engagement

If analytics is connected to your site, grids automatically report interaction events:
  • Slider drag count
  • Average reveal position (where do users stop dragging?)
  • Hover duration per pair
  • Click-throughs from grid CTAs
Use these to iterate — a grid with low drag rate probably needs a clearer call-to-action or more dramatic before/after contrast.

​
Variations for Different Use Cases

  • Single-case hero — one big comparison at the top of a case study page
  • Portfolio grid — 6-12 pairs on an agency’s work page
  • Interactive testimonial card — slider + client quote + measurable result side by side
  • Landing page social proof — 3 mini-grids below the fold as scrolling trust builders
Grids are shared assets. Edit once, and every page embedding that grid updates automatically on the next deploy — no need to hunt down every occurrence.

​
Image Quality Matters

Use consistent crop, lighting, and resolution for before/after pairs. Inconsistency hurts credibility faster than any copywriting mistake — if the “after” image is a polished studio shot and the “before” is a blurry phone pic, viewers assume you’re hiding something.
Practical guidelines:
  • Minimum resolution: 1600px wide for hero comparisons, 800px for grid cards
  • File format: WebP or optimized JPEG. Avoid PNG for photographs.
  • Consistent crop: same aspect ratio for before and after
  • Consistent lighting: same time of day, same camera settings when possible

​
Verify It Worked

Embed a test grid on a staging page. Check:
  1. Both images load and are sharp
  2. Slider drags smoothly on desktop (mouse) and mobile (touch)
  3. Layout isn’t broken on narrow screens
  4. Captions appear and don’t overflow
  5. Analytics events show up in your dashboard after a few interactions

​
Troubleshooting

Uploaded resolution is too low for the display size. Re-upload at minimum 2x the displayed pixel width (Retina displays need higher-resolution source images). WebP compression tends to look sharper than equivalent JPEGs.
Most mobile browsers handle touch events automatically — if yours doesn’t, check the grid settings for Enable touch events (default on). Embedding inside a parent with overflow: hidden can also clip the drag area; loosen the parent’s overflow rules.
Refresh the editor. If images are still uploading, the layout renders before they’re ready. Wait for all upload indicators to clear before publishing.
Your site may be caching the page. Redeploy the site, or clear the CDN cache for the embedding page. Grids themselves update in real-time, but the pages embedding them may not fetch the latest markup.
Use the Swap button on each row to flip direction. There’s also a Swap all button in grid settings if every row is reversed.

​
What’s Next?

Content Reviews

Get stakeholder approval on case study copy before publishing

Post a Blog

Write the case study that accompanies your comparison grid