> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hiveku.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Create Before/After Comparison Grids

> Show results with compelling before/after visuals for case studies, portfolios, and marketing

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.

<Info>
  Path: **Marketing > Before/After Grids**
</Info>

## When to Use Them

<CardGroup cols={3}>
  <Card title="Portfolio pages" icon="image">
    Web redesigns, home renovations, brand refreshes
  </Card>

  <Card title="Product demos" icon="square-check">
    Before your product vs after
  </Card>

  <Card title="Case studies" icon="chart-line">
    Quantitative transformation with visual proof
  </Card>
</CardGroup>

## Three Ways to Build a Grid

<Tabs>
  <Tab title="AI Chat">
    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"*.
  </Tab>

  <Tab title="Manual editor">
    For full control over layout, captions, and styling.

    <Steps>
      <Step title="Click + New Grid">
        From Before/After Grids, start a fresh grid.
      </Step>

      <Step title="Title and description">
        Internal title (for your dashboard) and optional public description shown above the grid.
      </Step>

      <Step title="Add rows">
        Each row is one before/after pair. For a single comparison, one row. For a portfolio page, add 4-10 rows.
      </Step>

      <Step title="Upload images">
        Drag-drop or paste URLs. Before on the left, after on the right (or use the Swap button if you uploaded them reversed).
      </Step>

      <Step title="Add captions">
        Optional. Short descriptions under each image — client name, date, one-line context.
      </Step>

      <Step title="Pick a layout">
        Side-by-side, interactive slider, or stacked. See below.
      </Step>

      <Step title="Save">
        Grid is now reusable across any page.
      </Step>
    </Steps>
  </Tab>

  <Tab title="From template">
    Pick a preset layout matched to common use cases — agency portfolio grid, single-case slider, testimonial-with-results card. Swap in your images and text, skip the layout decisions.
  </Tab>
</Tabs>

## 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.

<Tip>
  Default to the interactive slider for hero comparisons. Use side-by-side for multi-case portfolio grids where each comparison is one card.
</Tip>

## Embedding on Your Site

<Steps>
  <Step title="Open your grid">
    From the Before/After Grids dashboard, click the grid you want to embed.
  </Step>

  <Step title="Click Embed">
    Copy the embed code — either an iframe or a React component snippet depending on your site stack.
  </Step>

  <Step title="Paste on a page">
    Content editor: paste directly into any block. Code: drop the snippet into your JSX/HTML.
  </Step>

  <Step title="Deploy">
    Click **Deploy** in the top bar. The grid appears at your target URL.
  </Step>
</Steps>

## 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

<Info>
  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.
</Info>

## Image Quality Matters

<Tip>
  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.
</Tip>

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

<AccordionGroup>
  <Accordion title="Images appear blurry">
    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.
  </Accordion>

  <Accordion title="Slider not draggable on mobile">
    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.
  </Accordion>

  <Accordion title="Grid layout looks broken">
    Refresh the editor. If images are still uploading, the layout renders before they're ready. Wait for all upload indicators to clear before publishing.
  </Accordion>

  <Accordion title="Embed not updating after I edit the grid">
    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.
  </Accordion>

  <Accordion title="Before and after swapped on some rows">
    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.
  </Accordion>
</AccordionGroup>

## What's Next?

<CardGroup cols={2}>
  <Card title="Content Reviews" icon="comments" href="/how-tos/content-review-workflow">
    Get stakeholder approval on case study copy before publishing
  </Card>

  <Card title="Post a Blog" icon="pencil" href="/how-tos/post-a-blog">
    Write the case study that accompanies your comparison grid
  </Card>
</CardGroup>