Media module

Before / After block

Compare two images with a draggable divider — mouse, touch and keyboard friendly.

Overview

The Before / After block stacks two images and lets visitors drag a divider to reveal one or the other. It is perfect for renovations, retouching, cleaning results or product comparisons. The divider can move left–right or up–down, can follow the mouse, and works with the keyboard.

At a glance

Block name: wpbb/before-after
Module: Media
Find it by searching: Before / After
Loads JavaScript on the site: Yes, a small script, only on pages that use this block

When and why to use it

Renovation and restoration results.
Photo editing and retouching.
Old vs new designs.

Example scenarios

Landscaper: a garden before and after, labels “2024” and “2025”, starting at 30%.

See it in action

These are live examples: real Before / After blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

Drag the divider

Open in a new tab

How to add the Before / After block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Before / After in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Before / After in the results. The block appears with two image pickers labelled Before and After.
Configure the content. Choose the Before image (shown on the left or top) and the After image (revealed on the right or bottom) in the Images panel, then adjust the comparison settings.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

Settings panel: Images

Before image

What it does: The image shown on the left (or top).
What to enter or choose: Choose image / Replace image.
Default: 0
How to use it: Click the button to open the Media Library, then upload a new file or pick an existing one and click “Select”.
When to use it: Always.
Example: The old kitchen.
Result: Shown on one side of the divider.

Alternative text (Before)

What it does: Describes the before image.
What to enter or choose: A short description.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Always.
Example: “Kitchen before renovation, dark cabinets.”
Result: Read by screen readers.

After image

What it does: The image revealed on the right (or bottom).
What to enter or choose: Choose image / Replace image.
Default: 0
How to use it: Click the button to open the Media Library, then upload a new file or pick an existing one and click “Select”.
When to use it: Always.
Example: The new kitchen.
Result: Shown on the other side.
Good to know: Both images are required; with only one, nothing is shown on the site.

Alternative text (After)

What it does: Describes the after image.
What to enter or choose: A short description.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Always.
Example: “Kitchen after renovation, white cabinets.”
Result: Read by screen readers.

Resolution

What it does: Which image size is loaded for both images.
What to enter or choose: One of your site’s image sizes.
Default: large
How to use it: Open the dropdown and pick an option.
When to use it: Always optional.
Example: Large.
Result: Sharper or lighter images.

Settings panel: Comparison

Direction

What it does: Which way the divider moves.
What to enter or choose: One of: Side by side, Top and bottom.
Default: Side by side
How to use it: Click one of the buttons in the group.
When to use it: Always optional.
Example: Top and bottom for tall images.
Result: The divider becomes horizontal or vertical.

Starting position (%)

What it does: Where the divider starts.
What to enter or choose: A number from 0 to 100 (%).
Default: 50 %
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: Always optional.
Example: 30 to show mostly the After image.
Result: The divider starts there.

Aspect ratio

What it does: The frame shape.
What to enter or choose: One of: Original, 1:1, 4:3, 3:2, 16:9, 3:4.
Default: Original
How to use it: Open the dropdown and pick an option.
When to use it: When the images have different shapes.
Example: 16:9.
Result: “Original” uses the Before image’s shape. Use two images of the same size for the best result.

Follow the mouse

What it does: On desktop, the divider follows the pointer without dragging.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Optional.
Example: On for a playful effect.
Result: Touch and keyboard work as usual.

Show labels

What it does: Shows labels on each image.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Usually.
Example: On.
Result: Small labels in the corners.

Before labelShown when Show labels is on

What it does: The before label.
What to enter or choose: Text, or empty for “Before”.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Optional.
Example: “2024”.
Result: Shown on the before image.

After labelShown when Show labels is on

What it does: The after label.
What to enter or choose: Text, or empty for “After”.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Optional.
Example: “2025”.
Result: Shown on the after image.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Before / After offers.

Element: Images selected first

The image frame.

Styles-tab controls for “Images”
Panel	Control	Per device	Available in states
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal

States: Normal only.

Element: Block

The whole block.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Divider handle

The round divider handle.

Styles-tab controls for “Divider handle”
Panel	Control	Per device	Available in states
Colors	Text	—	Normal
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
Border	Border	—	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States: Normal only.

Element: Labels

The Before/After labels.

Styles-tab controls for “Labels”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Radius	Yes	Normal
Spacing	Padding	Yes	Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Radius, Margin, Padding, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Opacity (%), Font size, Line height, Letter spacing, Alignment.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
Width alignment (block toolbar) — Wide width, Full width, when your theme supports them.

How it works on your site

Both images are in the HTML. The divider is a real range slider, enhanced by a small script for dragging and “follow the mouse”.

Accessibility

Keyboard: Tab to the slider and use the arrow keys (Home/End jump to the ends).
Screen readers announce it as “Comparison slider: Before and After images” with the current value.
Give both images alternative text.