HubSpot Marketplace Module

Before After Pro

Drag-to-Compare Image Slider for HubSpot

A smooth drag-to-compare slider that lets visitors reveal differences between two images. Perfect for renovations, retouching, product changes, or any visual transformation — fully customizable from the editor with 26+ style controls.

Get the Module arrow_outward Works with any HubSpot CMS theme
Before After Pro module for HubSpot CMS showing drag-to-compare image slider

Everything you need in a comparison slider

swipe

Smooth Drag Interaction

Clip-path based image reveal with fluid mouse and touch support. Visitors drag the handle to compare — works seamlessly on desktop and mobile devices.

aspect_ratio

5 Aspect Ratio Presets

16:9 Widescreen, 4:3 Standard, 3:2 Landscape, 1:1 Square, or 21:9 Ultrawide. Plus min/max height controls and 5 box shadow presets for the perfect frame.

vertical_split

Custom Divider & Handle

Full control over the divider line color, width, and shadow. Circular handle with configurable background, icon color, border color, and size. Brand colors inherit from your theme.

label

Configurable Labels

Show or hide "Before" and "After" labels. Custom text color, background with opacity, font size, border radius, and padding. Position them exactly how you want.

closed_caption

Optional Captions

Add descriptive captions below each image for additional context. Configurable text color and font size to match your design.

tune

Adjustable Start Position

Set the initial slider position anywhere from 10% to 90%. Control exactly how much of each image visitors see before they start dragging.

devices

Responsive Design

Custom breakpoints for tablet and mobile. Handle and labels resize gracefully. Touch-optimized for smooth mobile interaction.

palette

26+ Style Controls

Container width, aspect ratio, border radius, box shadow, divider styling, handle colors, label appearance, caption typography, spacing, and responsive breakpoints — all from the Style tab.

Works with any HubSpot theme

Before After Pro is a standalone module. Install it in any HubSpot CMS Professional portal and drop it on any page. No theme dependency, no conflicts. Handle colors inherit from your theme settings automatically.

Questions

What HubSpot tier do I need?

add
Before After Pro works with all HubSpot plans that support custom modules — CMS Hub Professional or higher, or Marketing Hub Professional with CMS.

Does it work on mobile?

add
Yes. The slider supports touch interaction out of the box. Handle and labels resize at each breakpoint, and the drag gesture works smoothly on phones and tablets.

Can I use multiple sliders on one page?

add
Yes. Each module instance operates independently. You can place multiple Before After Pro modules on the same page, each with its own images, labels, and styling.

Do you offer support?

add
Yes. Documentation included, plus email support for setup and customization questions.

Show the difference with Before After Pro

Before After Pro is available on the HubSpot Marketplace. A smooth comparison slider for any HubSpot theme.

Get the Module arrow_outward