---
title: Before After Pro — Drag-to-Compare Image Slider for HubSpot
description: A smooth drag-to-compare image slider for HubSpot CMS. 5 aspect ratio presets, customizable divider and handle, labels, captions, and 26+ style controls.
image: https://www.studionope.com/hubfs/studio-nope-og-card.png
---

[Studio Nope](https://www.studionope.com/)

[Services](https://www.studionope.com/services) [Themes](https://www.studionope.com/themes) [Modules](https://www.studionope.com/modules) [Bundles](https://www.studionope.com/bundles) [Tools](https://www.studionope.com/tools) [Blog](https://www.studionope.com/blog) [Contact](https://www.studionope.com/contact)

HubSpot Before/After Module

# Before and After

A HubSpot before/after image comparison slider module, with a draggable divider handle to reveal two images.

[Get it on HubSpot →](https://ecosystem.hubspot.com/marketplace/modules/studio-nope-before-and-after-module-by-studio-nope) [View demo →](https://www.nopethemes.com/atelier-noire/portfolio)

Features

## What this module does.

A before/after image comparison slider with a draggable divider handle to reveal two images. Every option below is a real, editable field in the HubSpot page editor.

01

### Two images

(before/after) with optional labels and captions

02

### Initial handle position, show/hide labels and captions

03

### 5 aspect ratios

(16:9, 4:3, 3:2, 1:1, 21:9), min/max height, border radius, box shadow

04

### Full divider & handle styling

(color, width, handle bg/icon/border colors, size, shadow)

05

### Label and caption color/size/padding controls

tablet + mobile breakpoints

Pricing

## One-time price.

Buy it once on the HubSpot Marketplace. No subscription.

Before and After

$24.99one-time

One-time price on the HubSpot Marketplace. Works with any theme; every option is a field in the page editor.

- Standalone HubSpot CMS module
- Full Style tab so it matches your brand
- Clean, documented HubL — no dependencies
- Free updates and support

[Get it on HubSpot →](https://ecosystem.hubspot.com/marketplace/modules/studio-nope-before-and-after-module-by-studio-nope)

FAQ

## Common questions.

What does Before and After do?

A HubSpot before/after image comparison slider module, with a draggable divider handle to reveal two images.

Do we need a developer to use it?

No. Once it is installed, every setting is a field in the HubSpot page editor, so your marketing team drops it into a page and edits it like any native module.

Can we match it to our brand?

Yes. Colors, fonts, spacing, and layout are all controlled from the module's Style tab and inherit your theme tokens, so it matches the rest of your site.

How much does it cost?

It is a one-time purchase of $24.99 on the HubSpot Marketplace. That includes free updates and support.

## Tell us whatyou're building.

Themes, modules, full builds, audits, migrations. Send the shape of it and we'll come back with a clear scope and a price.

[Get in touch →](https://www.studionope.com/contact)

[Studio Nope](https://www.studionope.com/)

© 2026 Studio Nope.  
All rights reserved.

##### Products

[Themes](https://www.studionope.com/themes)[Modules](https://www.studionope.com/modules)[Bundles](https://www.studionope.com/bundles)[Tools](https://www.studionope.com/tools)

##### Services

[Custom themes](https://www.studionope.com/services/custom-hubspot-theme-development)[Branding & design](https://www.studionope.com/services/hubspot-branding-design)[HubL & CMS dev](https://www.studionope.com/services/hubl-hubspot-cms-development)[Website builds](https://www.studionope.com/services/hubspot-website-funnel-builds)[Audits & migrations](https://www.studionope.com/services/hubspot-audits-fixes-migrations)

##### Company

[Blog](https://www.studionope.com/blog)[FAQ](https://www.studionope.com/faq)[Contact](https://www.studionope.com/contact)[Legal](https://www.studionope.com/legal)

##### Get in touch

[hello@studionope.com](mailto:hello@studionope.com)[Contact](https://www.studionope.com/contact)[YouTube](https://www.youtube.com/@Hello-Studio-Nope)[Framer](https://www.framer.com/@studionope/)

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://www.studionope.com/before-after-pro#breadcrumb",
  "@type" : "BreadcrumbList",
  "itemListElement" : [ {
    "@type" : "ListItem",
    "item" : "https://www.studionope.com/",
    "name" : "Home",
    "position" : 1
  }, {
    "@type" : "ListItem",
    "item" : "https://www.studionope.com/modules",
    "name" : "HubSpot Modules",
    "position" : 2
  }, {
    "@type" : "ListItem",
    "item" : "https://www.studionope.com/before-after-pro",
    "name" : "Before and After",
    "position" : 3
  } ]
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://www.studionope.com/before-after-pro#product",
  "@type" : "Product",
  "brand" : {
    "@type" : "Brand",
    "name" : "Studio Nope"
  },
  "category" : "HubSpot CMS module",
  "description" : "A HubSpot before/after image comparison slider module, with a draggable divider handle to reveal two images.",
  "name" : "Before and After",
  "offers" : {
    "@type" : "Offer",
    "availability" : "https://schema.org/InStock",
    "price" : "24.99",
    "priceCurrency" : "USD",
    "url" : "https://ecosystem.hubspot.com/marketplace/modules/studio-nope-before-and-after-module-by-studio-nope"
  },
  "url" : "https://www.studionope.com/before-after-pro"
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "FAQPage",
  "mainEntity" : [ {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "A HubSpot before/after image comparison slider module, with a draggable divider handle to reveal two images."
    },
    "name" : "What does Before and After do?"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "No. Once it is installed, every setting is a field in the HubSpot page editor, so your marketing team drops it into a page and edits it like any native module."
    },
    "name" : "Do we need a developer to use it?"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "Yes. Colors, fonts, spacing, and layout are all controlled from the module's Style tab and inherit your theme tokens, so it matches the rest of your site."
    },
    "name" : "Can we match it to our brand?"
  }, {
    "@type" : "Question",
    "acceptedAnswer" : {
      "@type" : "Answer",
      "text" : "It is a one-time purchase of $24.99 on the HubSpot Marketplace. That includes free updates and support."
    },
    "name" : "How much does it cost?"
  } ]
}
```