Timeline
Explain how it works before anyone has to ask
Four steps from "you place the order" to "it arrives", in a shape people read without effort. The same element gives you a dated history, a numbered process down the page, or a stepper across it.
Numbered markers and a solid line, the default.
Fewer "where is my order" e-mails
A process shown as four steps is a process the shopper stops worrying about. The questions your support team answers most often are usually questions about sequence.
Reordering renumbers itself
The numbers are not stored anywhere. Drag the third step to the top and the whole run renumbers with nothing for you to edit and nothing to get out of step.
One element, three shapes
A dated history, a vertical process and a horizontal stepper are the same fields with a different layout. Switching between them loses nothing you have typed.
Use cases
Where shops put it
"How an order works", on the delivery page
Four numbered steps with a sentence each, answering the questions that otherwise arrive by e-mail on day two.
The story of the brand, on an about page
Dates alternating either side of a line, with an icon on each marker and a photograph where there is one worth showing.
A returns procedure, as a stepper
Three steps across the page with "Step 1, 2, 3" as the labels — the shape a shopper recognises from every checkout they have ever used.
- Three appearances
- Vertical, alternating either side of the line, or horizontal as a stepper.
- Marker style
- A counted number, an icon from the bundled library, or a plain dot.
- An accent colour
- That paints the markers and the line, and deliberately not the text.
- Line style and thickness
- Solid or dashed, in three widths.
- A reveal as the visitor scrolls
- Which is off until you ask for it.
- Per entry
- The date or step label, a heading with its own tag, a rich-text body, a picture, a marker icon and a link on the heading.
Shown in the demo store
Entries on both sides of a dashed line, with icon markers.
The same four steps as a stepper.
Dot markers with a picture on every entry.
Native and honest
Your content is written in Magento's own format
Not one decorative thing is stored in the page: the line is drawn by the stylesheet, the numbers are counted by it and the dots are drawn by it. What is in the page is a plain list with the label, heading, picture and text of every entry — which is exactly how it reads with the module removed.
The reveal hides nothing that matters. An entry waiting its turn is transparent rather than removed, so a screen reader reads the whole timeline at once. And the rule that hides it lives behind something only the script adds, so a page the script never reached shows the entire history rather than an empty column.
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.
Flip Box
A card with two sides that turns over on a tap, a click or from the keyboard — and on hover.
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.
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.