Shape Divider
Stop your landing page looking like a stack of rectangles
Seven shapes that turn the seam between two sections into a wave, a slant or a curve. Each one is an inline SVG with the colour you pick, not a background image to export, upload and re-cut for retina.
The seven shapes at the default height of 80 px.
A designed page without a designer
The single change that makes a Page Builder landing page stop looking assembled. Pick a shape, pick the colour of the section below it, and the two sections read as one design.
No image to make, host or maintain
The shape is drawn in the page itself. Nothing to export at two sizes, nothing to re-cut when the brand colour changes — the colour is a picker.
Half the height on a phone
Eighty pixels of ornament is a fifth of a phone screen. Below 768 px every divider is drawn at half the height you set, without a second setting to remember.
Use cases
Where shops put it
Home page hero into the first content band
A wave under the hero, coloured to match the section below it, so the fold stops being a straight line across the page.
A tinted section inside a long landing page
A curve into the tint at the top and out of it at the bottom, which is what makes a promotional block look like part of the page rather than a box dropped on it.
Category and campaign pages
A tilt between the banner and the product grid, in the same colour as the grid's background — one element, one colour, and the page stops looking like a stack of rectangles.
- Seven shapes
- Wave, Double Wave, Tilt, Curve, Triangle, Zigzag and Arrow, picked from tiles that show the actual outline.
- Height in pixels
- Halved automatically below 768 px.
- Shape colour
- The fill, which you set to the background of the section the shape points into.
- Flip vertically
- Turning a shape that rises out of the section below into one that hangs from the section above.
- Flip horizontally
- For the shapes that are not symmetrical.
- Edge
- Which side of its row the divider tucks against, pulling one pixel into the next section so no hairline shows.
- Advanced tab
- For alignment, spacing, border and CSS classes.
Shown in the demo store
The real use: a curve joining a tinted section to the white one below, and the flipped variants hanging from the top edge.
One shape at three heights and in three colours.
Native and honest
Your content is written in Magento's own format
This is the element that survives best of all. The geometry is written as attributes of the SVG and the colour into the style block stored with the page — so with the module removed the divider is still there, in its shape, at its height and in its colour. What goes is the flipping, the one pixel of overlap and the half height on a phone.
It is also the only element in the module with no JavaScript at all: no widget, nothing to initialise, nothing to fail.
Worth knowing before you buy: the divider does not divide anything by itself. It is a content type standing in a row, and the seam is finished with two settings on that row — its background colour and its cleared bottom padding. The documentation gives the three-step recipe, and the demo page shows it built both ways round.
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.
Advanced Tabs
Tabs across the top or down the side, with icons, each tab holding any 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.
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.