Advanced Tabs
Details, delivery and care on one screen, and on a phone too
Tabs whose content is real Page Builder content: text, pictures, buttons, lists and other Wrizu elements. Across the top or down either side, with icons, and below 768 px an accordion built from the same headings instead of a row of tabs that wraps.
Underline tabs with icons, an Icon List in the open tab.
Answers next to the product
Delivery, returns and care sit one click from the product description, not three screens further down the page. A shopper who has a doubt finds the answer without leaving the purchase.
Readable for every shopper
The keyboard walks the tabs with the arrow keys, screen readers hear tabs and panels, and a phone gets an accordion. With JavaScript off, every tab is still on the page as a section.
A tab is built like a page
Drop any content type into a tab: a paragraph, a picture, an Icon List, a Category Tiles grid. Everything inside keeps its own settings form, so there is nothing new to learn.
Use cases
Where shops put it
The product information block
Details, Delivery & Returns, Care and Reviews under the description, each tab with an icon. On a phone the four headings become an accordion, with the first one open.
Shop by department
Pills for Men, Women and Gear, each holding a grid of category tiles. On a phone the tabs stay a single row that scrolls sideways, so the shopper still chooses first.
A size guide in a popup
A CTA Popup holding tabs for Women and Men, one size table each, behind a "Size guide" link on the product page.
- Two layouts
- The list of tabs above the content, or in a column on the left or the right.
- Three tab styles
- Underline, pills or boxed, with an accent colour for the open tab.
- Alignment of the row
- At the start, centred, at the end or stretched across the row.
- Icons
- From the bundled library on any tab, before, after or above the label.
- Which tab opens first
- And optionally the open tab kept in the address, so a shared link opens the same tab.
- The phone layout below 768 px
- An accordion with one or several panels open, or a row of tabs that scrolls sideways.
- Per tab
- The label, its heading level and its icon. The content is whatever you drop in.
Shown in the demo store
The product block with Care open, in a window narrowed below 768 px: the tabs become an accordion with Care still open, and turn back into tabs as it widens.
Pills, centred, with a Category Tiles grid in each department tab.
The list in a column, on the left with underline, on the right as pills.
The same elements on a phone: an accordion, and a row of tabs that scrolls.
Boxed and justified, with the second tab open on arrival.
Native and honest
Your content is written in Magento's own format
The page stores plain sections, each a heading with its content under it, not tabs. The list of tabs, the roles screen readers need and the phone accordion are built in the visitor's browser from those headings. With the module switched off, or with JavaScript disabled, every tab is still on the page, readable, in your order.
Where the promise stops: if the tab script fails to load, the visitor sees the open tab alone for five seconds, and then every section unfolds. 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
Layout & navigation
More in Layout & navigation
Accordion
Collapsible panels, each holding real Page Builder content.
Anchor / Section Link
A named place on a page — #delivery, #size-guide — that a menu, a list or an e-mail can link to.
Content Slider
A carousel whose slides hold any content — one to six on screen, with a pause button.
Shape Divider
Seven decorative edges between two sections, drawn as inline SVG.
Show More
A block clipped to a chosen height, with a toggle under 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.