Flip Box
The short promise on the front, the details one tap away
A card with two sides that turns over on a press, a tap or a key, and on hover for a mouse if you want it. A shopper on a phone reaches the back as easily as one with a mouse.
The same row turning: a front, a card mid-flip, a back turned from the keyboard.
Two messages in one place
The front says "Free delivery" at a glance. The back says how it works and links to the terms. A row of three cards carries six messages without making the page longer.
No shopper is left on the front
Most flip cards only turn under a mouse, so a phone never sees the back. This one turns on a tap, a click, Enter or Space, and a screen reader hears it as a button that says whether it is turned.
Nothing to wire up
Pick an icon or a photograph, write the two sides, choose how the card turns. The card is drawn before its script arrives, so nothing on the page jumps when it does.
Use cases
Where shops put it
Promises under the hero
Free delivery, free returns and the warranty, each with an icon on the front and the details and a link to the full terms on the back.
Photographs that turn into an offer
A category photograph with its name on the front, and the discount with a button to the category on the back, turning top over bottom.
Questions with the answer behind them
"Do you ship abroad?" on the front and the answer on the back, turned by a press only, with a quiet outlined style.
- Two appearances
- Filled sides, or outlined sides on the page's own colour.
- How it turns
- A 3D flip, sideways or top over bottom, or a fade.
- What turns it
- Hover for a mouse plus a press, or a press only. A tap and the keyboard always work.
- The size
- A minimum height, or a card exactly as tall as its taller side, with the words at the top, the middle or the bottom.
- The front
- An icon from the bundled library in a colour of your choice, or a picture, then a heading and a line of text.
- The back
- A heading, a text and an optional button in the Primary, Secondary or Link style, linking to a page, a category, a product or any address.
- Each side's background
- A colour, a photograph, a tint over it and the colour of the words.
Shown in the demo store
The promise row under a moving pointer, each card turning over beneath it, then one turned from the keyboard with Tab and Enter.
Three promises with an icon on each front.
Photographs under a tint, one card turned to its offer.
Outlined cards that fade, one pressed to show its answer.
The same cards with JavaScript off: each back under its front.
Native and honest
Your content is written in Magento's own format
The page stores both sides, the front and then the back, and nothing in it hides either one. The card, the turn and the button that turns it are added in the visitor's browser. With JavaScript off, or with the module switched off, the back simply stands under its front, and everything you wrote is still there to read. A visitor who asked their system for less motion gets a fade instead of the turn.
Where the promise stops: if the card's script fails to load, the visitor sees the fronts for about five seconds, and then every card lays out its back under its front. The page moves once at that moment. When the script loads, nothing moves at all.
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
Content blocks
More in Content blocks
Blockquote / Pull Quote
A quotation set apart from the text — beside an accent bar, as a pull quote or on a card.
Data Table
Size charts, spec sheets and price lists, typed straight into the page.
Icon List
Rows of icon and text, stacked or in a grid of two, three or four.
Image Box
An icon or an image, a heading, copy and an optional button.
Notice Box
A framed message with an icon, in one of five meanings.
Team Members
The people behind the shop in cards or rows — a photo, a name, a job title, a few sentences.
Timeline
A history with dates or a process with numbered steps, down the page or across it.
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.