Skip to main content

Before / After block

What is the Before / After block for?

Show the change with one simple gesture. Before / After makes two states directly comparable with a draggable slider. It is strongest for renovation, landscaping, restoration, product updates or visual refinements when both images genuinely show the same subject from nearly the same viewpoint.

Mountain lake reflecting pine trees in a faded, cool-toned unedited photograph.
The same mountain lake after colour correction, with vivid autumn colours.
BeforeAfter
The same photograph before and after editing: the left side is the raw version without colour correction.
Faded, scratched, sepia-toned old portrait of a woman with long hair.
The same portrait restored with clean colours.
OriginalRestored
Portrait version for restoration, portraits or other vertical subjects. In this example, an aged-photo effect was applied to the same image for demonstration.
Yellow-tinted, underexposed photograph of a bright living room with a blue sofa.
The same living room with corrected white balance and exposure.
BeforeAfter
Square version for interiors, products or object photography. Here the same image shows improved white balance and exposure.

Credibility matters more than a dramatic difference. If the viewpoint, crop or lighting changes completely, visitors cannot tell what actually improved. Keep the comparison fair and easy to interpret.

When does it work especially well?

  • Renovation: the same room from the same viewpoint.
  • Garden or façade: the same area at two different times.
  • Website or app: the same screen in its old and new version.
  • Restoration: the same object before and after treatment.

If the two images do not show the same subject, use Gallery or Image with text instead.

What can you configure in the Before / After block?

Alongside the two images, you can control labels, aspect ratio, caption and separate focal points for both sides.

Two separate images

Before and after each have their own image, ALT and TITLE text and focal point.

Draggable slider

Visitors drag the divider with a mouse or touch. The comparison starts with both sides visible equally.

Custom labels

Replace Before and After with labels such as Old / New or Before treatment / After treatment.

Caption

Explain briefly what is shown, when the two states were captured or what changed.

Three aspect ratios

Choose wide, square or portrait to suit the images.

Separate focal points

Set a focal point for each image so the same important detail stays in frame.

When should you choose another block?

Before / After works when you are genuinely comparing the same subject in two states.

Image →

Use it when you only need to show the finished result with emphasis.

Gallery →

Use it when a project needs several viewpoints or several separate details.

Image with text →

Use it when the visual change needs a fuller story, explanation or background beside it.

MAKE THE DIFFERENCE CLEAR

Show the same thing in two states.

The strongest before-and-after comparison uses the same subject, nearly the same viewpoint and a similar crop.

Build my website →Back to Website Blocks