Updated: June 24th, 2026 for FolioBlocks Version 1.4 running on WordPress 7.0 or higher
Note: This article focuses on the Professional (Pro) version of FolioBlocks. Some of the features described here may not be available in the free version.
The Before & After Block in FolioBlocks lets you compare images side by side with a draggable slider — perfect for showing edits, transformations, or progress over time — all directly inside the WordPress Block Editor (Gutenberg).Note: his guide covers features available in the Professional (Pro) version of Folioblocks. Some options and settings described here may not be included in the free version.
Table of Contents
What Is the Before & After Block?
The Before & After Block provides an elegant way to compare two related images within a single frame. Visitors can drag a slider to reveal either image, creating a smooth, interactive transition.
This layout is popular among photographers, designers, and businesses who want to highlight before-and-after effects, retouching work, restorations, or renovation results.
Perfect for:
- Photo editing and retouching comparisons
- Design makeovers and color grading examples
- Home renovation or product restoration images
- Beauty, health, and transformation portfolios
How to Add the Before & After Block
1. Insert the Block
In the WordPress Block Editor, click the ➕ Add Block button and search for “Before & After.” You’ll find it under the Folioblocks section.
2. Upload or Select Your Images
With the Before & After Block added into the Editor you can use the Select Before Image and Select After Image buttons to select your two images.
Both images will appear in the same frame with a draggable slider dividing them.
3. Adjust the Width & Replacing images
Observe the block toolbar which includes options to change the block width (Content, Wide, & Full) and also has buttons to replace both the Before and After images.
4. Image Order – Swap Position
This first section in the blocks settings panel gives you an option to swap the order of images.
General Block Settings
Resolution
Choose between Thumbnail, Medium, Large, or Full image sizes to balance sharpness and page load speed.
Slider Orientation
Set the orientation of your slider. Horizontal is ideal for landscape images, while vertical works well for portrait formats or product shots.
Drag Handle Starting Position
Set where the comparison slider begins — for example, 50% (center), 30%, or 70% — depending on which image you want to emphasize.
Show Before & After Labels
Display “Before” and “After” text labels directly on the slider for clear context.
When this is active an additional setting is added that allows you to set the label placement choosing between Top, Center, Bottom when on Horizontal orientation and Left, Center, Right when set to Vertical orientation.
Block General Styles
Background
The Background setting allows you to customize the backdrop behind your Before & After block. You can choose any color from your theme palette or define a custom color to help your images stand out or blend seamlessly with the surrounding layout.
A subtle background tone can make white borders or drop shadows more visible, while a dark background often enhances contrast and gives a cinematic look.
Dimensions – Padding & Margin
The Padding and Margin controls give you fine-grained control over the spacing inside and around your Before & After block.
Use Padding to create breathing room between your gallery content and its edges — useful for highlighting the gallery within a colored background.
Use Margin to control the outer spacing between the gallery and adjacent blocks or page sections, ensuring perfect alignment and balance within your overall page design.
Border Color, Width, and Radius
Add or adjust borders around your before and after images to match your theme design. Rounded corners can help soften the visual edges of your gallery.
Drop Shadow
Add depth and contrast with subtle shadows — especially effective when your slider is displayed on white or neutral backgrounds.
Before & After Block Styles
Slider Handle & Line Color
Change the color of the slider handle and line.
Label Text Color & Label Background Color
Change the color and background color of the “Before” and “After” labels.
Page/Post Settings
Starting with FolioBlocks 1.4, several controls that were previously located in the block’s Advanced settings have been moved to a dedicated FolioBlocks Page Settings panel in the Page/Post sidebar.
These features operate at the page level rather than the individual block level, so moving them out of the block settings creates a more intuitive editing experience and prevents the same feature from being enabled multiple times when a page contains several FolioBlocks blocks.
The FolioBlocks Page Settings panel is automatically added to the Page or Post sidebar whenever a FolioBlocks block is inserted into the WordPress editor. From this central location, you can configure settings that apply across the entire page, including the following features:
Password Protect Page
Requires a password before visitors can view the page.
Disable Right-Click on Page
Attempts to disable right-click to discourage casual image downloads.
Note: This makes it harder for casual users to save images, but it’s not foolproof — advanced users can still access media via the browser’s developer tools or view source.
Enable Lazy-Load of Images
When active, images load as the user scrolls, improving initial page load speed.
Example Before & After Block
Bellow is an example of the Before & After Block created with Folioblocks:
Common Questions
How many Before & After sliders can I add?
You can add as many Before & After blocks as you like on a single page. Each block operates independently.
Can I use portrait and landscape images together?
There is nothing stoping you from using images that do not match, but obviously for the best results use two images with the same pixel size and dimensions. That will ensure everything aligns properly.
Does it work with my WordPress theme?
Yes. The Before & After Block automatically inherits your theme’s color palette & typography.
Is it compatible with WordPress 6.x or newer?
Absolutely. The Before & After Block is built for the WordPress Block Editor (Gutenberg) and fully optimized for modern WordPress versions. For the best experience we recommend WordPress 7.0 or higher.
Get Started
Ready to showcase your transformations with style? Get Folioblocks and start creating interactive Before & After comparisons in the WordPress today.