DiviGrid · Before After Image Slider for Divi 5
Before & After: 10 sliders that show the difference
Drag the handle, move the mouse or click: two images, one frame. Here are ten ways to use it, from a photographer’s colour grade to a dark-mode switch.
Photographer · Architect · Restoration · Film colourist · Food · Ceramics · Real estate · SaaS · Print studio · Presets
Use case 01 · Landscape photographers
Shot at dawn. Finished in the studio.
Show buyers what a fine-art print starts as. The flat camera file on the left, the graded print on the right: drag to compare.
14 stops
of light kept from shadow to sky
3 weeks
from the shoot to the signed print
1 of 25
numbered prints of every photo
Wide frame with square corners · starts at 35% · handle in the page colours · your own label text
Use case 02 · Architects & designers
From the first line to the last window
Click anywhere on the image to move the line. Our pencil study and the finished roof line up exactly.
01 Sketch
02 Drawings
03 Built
Click to move · square handle · offset shadow like a mounted print
Use case 03 · Photo restoration
Faded, scratched, given back.
Send us the print from the shoebox. We clean the dust and scratches, bring back the colour and print it again on cotton paper. Drag the line up and down.
Scratches and dust removed by hand
Colour rebuilt from the faded dyes
Archival print, ready to frame
Vertical slider · gold handle · paper border made with a box shadow
Use case 04 · Film & video colourists
Every frame has a mood.
Move the mouse across the frame: flat LOG footage from the camera, then the final grade.
SC 12 · TK 3
23.976 FPS
2.39 : 1
00:01:24:12
REC.709 · TEAL / ORANGE
Moves with the mouse · cinema 2.39:1 frame with no corners · monospace labels
Use case 05 · Food photography
Make the menu look as good as it tastes
Daylight, a reflector and an hour of editing. Drag across the plate to see a menu photo before and after we finish it.
From $35
per dish
48 h
delivery
A round frame: radius 999px on a square slider · white ring from a box shadow
Use case 06 · Shops with colour options
One bottle. Two glazes.
Move your mouse over the shelf to swap the glaze. Customers see both colours on the same pieces before they choose.
Sage glaze
Clay glaze
Moves with the mouse · arched top corners (200px 200px 24px 24px) · see-through handle
Use case 07 · Real estate photography
Listing photos that open the door
The same shot as it left the camera and after our HDR edit. Put the slider right inside the listing card.
For sale · Harbour Lane 14
Sunny corner apartment with two balconies
3
bedrooms
2
baths
118 m²
living area
$640k
asking price
The slider inside a white card · 18px corners inside 28px · listing details in a Group below
Use case 08 · SaaS & apps
Dark mode is here.
Announce a new theme without two screenshots side by side. Drag the handle to switch the whole dashboard.
app.orbitly.io/overview
Inside a browser frame · violet handle and labels · the screen is a drawn mock-up
Use case 09 · Print & poster studios
ANY PHOTO.
TWO INKS.
ONE POSTER.
Send a photo, we print it in navy and pink on a risograph. Drag to see your photo turn into a print.
Poster frame · square handle and labels · hard navy shadow
Use case 10 · Presets, filters & LUTs
Three looks. Try each one.
Every card is its own slider, so visitors drag each preset over the same kind of photo they shoot.
Silver
Black & white film
$9
Fern
Moody greens
$9
Ember
Warm sunset
$9
Three modules in a grid · each label names its preset · dark cards with a lime price pill
For Flawless
Skin
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.
Give Your Car A Better Look
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.
Together We Make World Better
For Happy
Healthy Smile
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.
New Gym
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.
Checkout Our New T-Shirt Design
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.
Lightning
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.
Every comparison above is one module
Before After Image Slider comes with DiviGrid, together with all our other Divi modules.