Before / After
Show the difference instead of describing it
Two photographs of the same thing under one handle. The visitor drags it and the second picture wipes across the first — which is what makes a renovation, a restoration or a treatment believable without a word of copy.
The default, with the handle dragged off centre.
The proof your copy cannot give
"Removes ninety per cent of the stain" is a claim. The same thing shown under a handle the shopper moves themselves is evidence, and it takes no words at all.
It invites a second of play
A handle is a thing people move. That second is attention you did not have to buy, on the one part of the page where the product does the arguing.
Works with a keyboard and a finger
The control is a real slider, so the arrow keys, Home and End move it and a screen reader announces it properly. On a phone, the page still scrolls under your finger.
Use cases
Where shops put it
A renovation or a fit-out
The room before and after, on the service page where the quote is asked for. The handle is where the visitor convinces themselves.
A cleaning or care product
The surface before and after one application, with the labels switched off so the pictures argue on their own.
A retouch, a restoration, a treatment
Vertical for a lawn, a roof or a floor; horizontal for a wall, an interior or a face — one field decides which.
- Two appearances
- A handle to drag, or a comparison that follows the pointer with no press at all.
- Orientation
- Wiping left to right, or top to bottom.
- The starting position
- Anywhere from 0 to 100 per cent, which is also where a page without JavaScript stays.
- A handle colour
- Of your own, transparency included.
- Both labels and whether they are shown
- Plus an optional caption under the comparison.
- Advanced tab
- For alignment, spacing, border and CSS classes.
Shown in the demo store
The handle dragged to the right, across to the left and back to the middle.
The same control wiping from top to bottom.
Labels off, with a starting position that shows the work.
Native and honest
Your content is written in Magento's own format
The control is a real range input rather than a hand-written widget, which is why the keyboard, the touch gestures and the screen reader all work without a line of our code doing it. Both photographs are in the page with their own alternative text at all times, whatever the handle is doing — the crop is a clipping rule, not a removal.
And when nothing of ours runs: without the module you get two photographs one under the other, each with its label and the caption below. Nothing is broken, because the handle is stored hidden and a browser honours that on its own. With the stylesheet but no script you get a static comparison frozen at the starting position, which reads as a composed photograph rather than as a dead control.
Every element saves itself the way native Page Builder saves its own: a plain <div data-content-type="wrizu_…"> with its settings in data-* attributes, stored with the page. There is no proprietary database table, no shortcode, no second editor and nothing that has to be converted later.
That has a practical consequence. Disable the module and the storefront keeps serving those pages: headings, copy, images, links and buttons stay visible and clickable, and the styling you set per element — alignment, colours, spacing — stays with them, because it lives in a <style> block stored with the page rather than in our stylesheets. What you lose is what our CSS draws: the layouts, the borders and shadows, the button variants and the bundled icons.
One honest warning
With the module switched off, do not open and save a page that contains Wrizu elements — Page Builder flattens any page holding a content type it does not know into a single HTML Code block, and that save cannot be undone. It behaves that way with every unknown content type, not only with ours, and the storefront is unaffected either way; the rule is simply to leave those pages alone until the module is back on.
Works with any Luma-based theme
The elements are built on the same front-end stack the native Page Builder uses: jQuery and the libraries Page Builder already loads. They target Luma-based themes — Magento Blank, Luma, and the custom themes shops build on either of them.
Buttons use Luma's own button mixins, so a Wrizu button looks like a button from your theme rather than like a button from a plug-in. All of the module's CSS is scoped to [data-content-type^="wrizu_"], so it styles our elements and nothing else in your theme.
Requirements
- Magento Open Source or Adobe Commerce 2.4.6 or newer, with the
Magento_PageBuildermodule enabled - PHP 8.1 to 8.5 — whichever your Magento version supports
- No other extension, no external icon font, no CDN dependency
Questions about this element
Media & motion
More in Media & motion
Animated Counter
A figure that counts up as it comes into view, with an icon and a label.
Animated Headline
A heading whose key word changes — rotating, typed with a caret, or marked by a drawn shape.
Image Gallery
A grid, a masonry wall or a carousel of photographs, with a lightbox.
Marquee
A strip that scrolls without end, in claims, logos or tiles.
Progress Bar
A bar or a ring that fills to a percentage.
Video Popup
A poster or a button that opens a YouTube, Vimeo or self-hosted video in a window.
Thirty-five conversion elements for the Page Builder you already have
Wrizu Page Builder Extensions adds them to the native Magento 2 Page Builder — no second editor, no proprietary format, no content held hostage.