Add a before and after slider to WordPress

Two pictures in one frame, with a handle your visitor drags to compare. Made for redesigns, edits and makeovers.

Get Grinner free

See it live

Type

A Grinner block

Find it

Press + and search “Before / After”

Phones

Drag sideways to compare. Swiping up and down still scrolls

Speed

Its code loads only on pages that use it

Live demo

Drag the handle. Meet Friday.

This is the real Before / After block, running on this page.

Before / After example, Grinner grinning on yellow, labeled Friday

Before / After example, Grinner asleep on gray, labeled Monday

Settings Start position (%) 50 Attract nudge on Divider and handle Secondary

What you can change

The settings worth knowing.

The block works the moment you add two pictures. These four make it yours.

Orientation

Side by side, or top and bottom

Horizontal is the default. Vertical puts one picture over the other, with a handle that slides up and down. Try it.

Start position (%)

Where the handle starts

75 by default. Attract nudge drifts it once when the block scrolls into view, so people know they can drag.

Labels

Say what changed

Your own words for each side, in dark pills you can recolor and move.

Divider and handle

Match your colors

Set the divider width, the handle size and their color. This page uses Secondary.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Add Before / After

In the editor, press + and search for Before / After.

3

Pick two pictures

Use two images of the same shape. Add labels if they help, then publish.

Good to know

Fair questions.

Before / After is a Grinner block that puts two pictures in one frame, with a handle your visitor drags to compare them. Use it to show a makeover, a repair, a redesign or any change that is easier to see than to describe.

Its code loads only on pages that use it, and your two pictures load like any other images on the page.

Drag sideways to compare. Swiping up and down still scrolls the page. In the vertical layout, only the handle drags.

The nudge never plays. Dragging still works as normal.

Not inside the block. It holds two images, so put a caption or a button just below it.

GrinBot -⁠ coming soon

Make your next site beautiful.

GrinBot designs and builds it for you. Join the waitlist for the launch price.

Studio-quality design
Built for speed
Pay once, no subscription

We’ll email you about the launch. Unsubscribe any time. Privacy policy

Or get the free Grinner plugin →

Pairs well with

Try it with these.

All images features

See it on the plugin page