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.
The interactive slider allows visitors to drag seamlessly between two images, revealing changes in a smooth, intuitive motion. Choose between horizontal or vertical orientation to suit your composition, and fine-tune label placement, label styles, and the slider’s starting position for complete presentation control. Every comparison remains fully responsive, ensuring a polished experience on desktops, tablets, and mobile devices alike.
With optional Pro enhancements like right-click protection, lazy loading, and advanced styling controls, the Before & After Block provides a clean, elegant, and highly effective way to highlight progress, craftsmanship, and transformation in your portfolio.
Features
Fully responsive
Set image resolution
Horizontal slider mode
Vertical slider mode
Display & position “Before” & “After” labels
Set custom slider start position
Add border & border-radius to block
Lazy Load Images
Right-Click Prevention
Gallery Demo
Bellow is a demo of the Before & After block with the slider set to horizontal mode and the before and after labels set to display:
* Images courtesy of Pixabay
Ready to unlock the full potential of Portfolio Blocks?
Choose a plan and start building professional portfolios today.
Compare Free vs Pro
Unlock advanced features and get the full potential of this block with Portfolio Blocks Pro.
| Features | Free | Pro |
|---|---|---|
| Set Image Resolution | ✅ | ✅ |
| Responsive Design Ready | ✅ | ✅ |
| Custom Slider Orientation | ✅ | ✅ |
| Custom Drag Handle Starting Position | ❌ | ✅ |
| Show Before & After Labels | ❌ | ✅ |
| Before/After Label Position | ❌ | ✅ |
| Disable Right-Click | ❌ | ✅ |
| Custom Lazy Load | ❌ | ✅ |
| Custom Border & Border Radius on Slides | ✅ | ✅ |
| Drop Shadow Effect on Images | ✅ | ✅ |
Note: Disable Right Click feature adds a layer of protection but cannot prevent image access through browser developer tools or page source.
Upgrade to 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:
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.
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.
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.
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 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:
“Folio Blocks has completely transformed how I showcase images on my WordPress site. Setup took minutes, and the block-based workflow feels natural—drop in a gallery, choose from clean grid or masonry styles, tweak spacing and captions, and you’re done.”
– Will MacDonald, Web Developer
“The Video gallery block is just want I was looking for to use my website. Straightforward and easy to use.”
– Dave Marshall, Production Designer
“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
Start Building Your Portfolio
Ready to showcase your work with the power and flexibility of FolioBlocks? Choose your plan today and start building.