Designed to highlight every subtle change
Before & After Block
The Before & After Block is part of FolioBlocks — a premium WordPress plugin built for photographers, designers, and creatives who want professional-grade comparison tools directly inside the block editor. Designed for clarity and visual impact, it’s perfect for showcasing transformations, retouching work, design revisions, restoration projects, and any scenario where “before vs. after” tells a more compelling story than words alone.
Table of Contents
Block Features
Explore the key features that make the Before & After Block ideal for visual comparisons, transformations, edits, and progress stories. With adjustable orientation, labels, starting position, responsive behavior, and image styling, it makes comparisons clear and interactive.
Interactive Image Comparison
Let visitors compare two images with a smooth draggable slider built for visual transformations.
Horizontal or Vertical Orientation
Choose the slider direction that best fits the image pair and the story you want to show.
Custom Starting Position
Set the initial handle position to guide visitors toward the most meaningful comparison point.
Before and After Labels
Add clear labels so visitors immediately understand what each side of the comparison represents.
Label Position Controls
Place labels where they work best visually without covering important image details.
Responsive Comparison Layout
Keep comparisons smooth and usable across desktop, tablet, and mobile devices.
Custom Image Styling
Add borders, rounded corners, and shadow effects to match the presentation to your site.
Performance and Protection
Use custom lazy loading and right-click protection for better control over page behavior and media access.
For a complete breakdown of what is included in each version, visit the Free vs Pro comparison page to see the full FolioBlocks feature list.
Screenshots
See how the Before & After Block is configured directly inside the WordPress editor. These screenshots highlight the settings for images, slider orientation, handle position, labels, responsive behavior, lazy loading, protection, and styling options.
Guides & Tutorials
Learn how to get the most out of this block with our step-by-step tutorials and video guides. Whether you’re just getting started or exploring advanced features, we’ve got you covered.
Frequently Asked Questions (FAQ)
Use the Before & After Block when you want visitors to compare two images interactively. It is ideal for design revisions, restorations, editing examples, renovations, retouching, color grading, product changes, and visual case studies.
For best results, use two images with the same dimensions and similar framing. The comparison will feel much cleaner if both images line up closely.
Yes. Visitors can drag the comparison handle to reveal more or less of each image.
Yes. FolioBlocks Pro includes options for displaying Before and After labels.
Yes. The Before & After Block is designed to be interactive on both desktop and touch devices.
Absolutely. It is one of the best FolioBlocks blocks for showing editing work, retouching, restoration, presets, filters, and creative process.
Get FolioBlocks Pro
Unlock advanced features and get the full potential of this block with FolioBlocks Pro.
Explore More FolioBlocks
Ready to expand your creative toolkit? FolioBlocks includes a range of powerful gallery blocks, each designed to showcase your work in a unique way. Discover the right layout for your projects:
Background Video Block
Immersive responsive video backgrounds that anchor your content with motion. Perfect for hero sections that aim to engage visitors immediately.
Before & After Block
Let viewers interactively compare two images with a responsive slider. Perfect for showcasing retouching, transformations, or visual progress with clarity.
Carousel Gallery Block
Showcase your work in a sleek, horizontally scrolling gallery that draws viewers in one image at a time. Ideal for highlighting standout shots or curated image sequences with impact.
Filmstrip Gallery Block
Showcase images in a focused filmstrip layout with large primary visuals and intuitive navigation. Ideal for portfolios and visual storytelling.
Grid Gallery Block
Create clean, evenly spaced grids that maintain the original aspect ratios of your images. Perfect for portfolios with a strong focus on consistency and structure.
Image Block
Present single images with clean spacing, sharp rendering, and fully controlled styling. Perfect for highlighting key visuals with clarity and impact.
Justified Gallery Block
Create clean, edge-to-edge rows of images that automatically adjust to fit their container, maintaining a balanced, polished layout. Ideal for photographers who want to showcase their work in a professional, cohesive way.
Loupe Block
Give visitors a closer look with a smooth, responsive loupe effect. Ideal for portfolios and product images where highlighting textures, fine details, and craftsmanship is a must.
Masonry Gallery Block
For creative layouts that stack images of various sizes into a stunning, waterfall-like design. Perfect for portfolios with mixed aspect ratios or images that tell a story.
Modular Gallery Block
Mix and match rows of images with full control over spacing and aspect ratios. Build complex, multi-row layouts without compromise, perfect for creative portfolios that break the grid.
Video Block
Showcase videos with a polished, distraction-free presentation that adapts seamlessly to your layout. Ideal for portfolios where motion content needs to feel refined and professionally framed.
Video Gallery Block
Create beautiful, filterable video grids with customizable thumbnails, hover effects, and Lightbox support. Showcase your motion work with style and impact.
What Our Customers Are Saying
FolioBlocks is trusted by photographers, designers, and creative professionals around the world to showcase their work beautifully and effectively. Here’s what a few of our users have to say:
Fantastic
“Setup was quick, and block-based workflow feels natural – drop in a gallery, choose from grid or masonry styles, tweak spacing and captions. Hard to design something that doesn’t look great.”
– Will MacDonald, Developer
Verified Customer
Easy to use with good number of features
“Setup was quick, and block-based workflow feels natural – drop in a gallery, choose from grid or masonry styles, tweak spacing and captions. Hard to design something that doesn’t look great.”
– Donna
Verified Customer
A Wonderful, Full-featured Image/Video Gallery Plugin
“I tested this plugin in beta and was impressed both by how well–and intuitively–it worked “out of the box” and by how responsive its developer was when I had questions. Highly recommend.”
– Josh
Verified Customer
Great plugin and really easy to use.
“Great plugin and really easy to use. The free version is really full featured but the pro version takes it to the next level. Highly recommended.”
– Cyril
Verified Customer
Works great
“Had an opportunity to test this plugin during the beta testing period and it’s really slick. It feels native to WordPress and is incredibly full featured.”
– Johan, Web Developer
Verified Customer
Just what I was looking for!
“The Video gallery block is just want I was looking for to use my website. Straightforward and easy to use.”
– Dave Marshal, Production Designer
Verified Customer
Build Better Galleries With FolioBlocks
Join photographers, designers, and creative professionals using FolioBlocks to create faster, more flexible image and video galleries directly inside the Block Editor.