Page Builder Roadmap
This is a living roadmap for the Page Builder's layout system. It's here so you can see what's coming and why. Backward compatibility is a hard rule — see Your existing pages — so nothing here breaks what you've already built.
🟢 Shipped · 🟡 In progress · ⚪ Planned · 🔵 Exploring
The direction: one simple layout model
The layout system is moving from the classic Section → Row → Column (Bootstrap) grid to one primitive — the Div — a container you set to Flex, Grid, or Block. That's the whole model. It maps directly to real, modern HTML/CSS, and it means there's one way to lay out a page instead of two.
Section → a full-width band (a <section>) ← start here
Grid → columns inside it ← "I want columns"
Flexbox → a row or a stack inside it ← "I want things in a row"
↳ your content
That structure is exactly how a developer writes it by hand — <section><div class="grid">…</div></section> —
so the builder now teaches good structure instead of hiding it behind a grid framework. If you're
new to this, the Bootstrap columns → CSS Grid & Flexbox
guide explains Flex vs Grid vs Block from scratch.
What you'll see in the palette
The Layout Elements tab leads with the modern primitives; the classic Bootstrap containers live in a Classic tab that always sorts last (still fully supported):
| Tile | Creates | For |
|---|---|---|
| Section | a modern Div, tagged <section>, full-width with contained content | the root band of a page — where you start |
| Flexbox (div) | a Div set to display: flex (a <div>) | a one-dimensional row or stack that can wrap |
| Grid (div) | a Div set to display: grid (a <div>) | columns — a card grid, an even split, a hero |
| Classic tab ▸ | the column-width tiles (1/1…7/12, fifths 1/5–4/5, Auto Column) · Section · Container · Bleed Section · Masonry Section | existing pages & anyone who prefers the old grid |
A beginner's instinct — "click Section, it's the main content area" — now lands on the modern primitive, not the legacy one. No one has to understand "flex" or "grid" to start a page; they discover Grid the moment they want columns. Everything Bootstrap — the classic containers and the column-width tiles — sits together in the Classic tab, so the modern Layout Elements tab stays to just three tiles.
Columns without the math (but the fractions stay)
Modern builders dropped the palette of fixed column structures. Instead of picking "1/3 + 1/3 + 1/3" up front, you set a Grid and say how many columns — children fill the tracks. But the fractions you know aren't going anywhere:
- They live on as Width presets on a cell —
1/2, 1/3, 1/4, 2/3, 5/6…are all still one click. - Under the hood a
1/3cell becomesgrid-column: span 4, a2/3cell becomesspan 8— modern CSS Grid instead of a Bootstrapcol-*class. - An uneven split like 1/3 + 2/3 is a Grid with
grid-template-columns: 1fr 2fr, or two cells at span 4 and span 8. - Auto columns fill the remaining space (the grid equivalent of
flex: 1).
So the feel is the same — familiar fractions — while the output is clean, responsive CSS Grid.
What's coming
| Phase | What | Status |
|---|---|---|
| The Div element | The Div (Flex / Grid / Block) ships as a Page-Builder element, with Direction, Wrap, Justify, Align, Gap, Grid tracks + Auto-fit, and the full item toolkit (Grow, Shrink, Align Self, Order). | 🟢 Shipped |
| Responsive Width control | A per-device Width picker: the twelfths grid (as fw-span-*) plus fifths 1/5–4/5 and content-sizing (Fit / Max / Min), plus a Custom px/%/rem/vw value. | 🟢 Shipped |
| Responsive Collapse | A multi-column Grid / Flex row steps down on its own — 2 columns on tablets, one stacked column on phones — with an opt-out. Emitted as shared fw-grid-collapse / fw-collapse classes. | 🟢 Shipped |
| Section = full-width band | A section-tag Div is always full-width (its Width control is hidden); use Content Width to constrain the content. Matches the classic Section. | 🟢 Shipped |
| Insert Grid picker | The palette Grid tile opens a grouped picker (Equal / 2- / 3- / 4-column, ~22 layouts incl. fifths); every tile in both the Insert Grid and Insert Section pickers is captioned with its fraction sum (1/3 + 2/3). | 🟢 Shipped |
| Clean output | Every preset Width is a shared frontend-grid.css class (twelfths fw-span-*, fifths fw-fifth-*, content-sizing fw-w-*); grid rows are a fw-grid-N class with bare cells; and the long tail (a hand-typed value, per-device, min-height, gap) collects into one consolidated footer <style> keyed to .fx-<id> — the Elementor/Bricks/Divi model. No per-element <style> blocks. | 🟢 Shipped |
| Content Width on the Div | A container option so a full-width section Div centres its content to a max-width (no accidental full-bleed). | 🟡 In progress |
| Converter → flex/grid | The Site Converter rebuilds a source's content rows as flex/grid Div rows instead of Bootstrap columns. | 🟡 In progress |
| Div = default wrapper | Dropping an element on an empty canvas wraps it in a Div (tagged section at the root, div when nested) — not Section → Column. | 🟡 In progress |
| Modern palette | Section (modern Div) / Flexbox / Grid lead the Layout Elements tab; the Bootstrap Section / Container / Bleed Section / Masonry Section move to a Classic tab that always sorts last. | 🟢 Shipped |
| Insert Section → Flexbox | The header Insert Section picker now builds modern Flexbox layouts (Equal Columns, Offset & Sidebar, Multi-Row, Multi-Column); only its Masonry tab still inserts a classic masonry_section. | 🟢 Shipped |
| Columns as Grid | Drop cells into a Grid Div; fractions become grid spans (1/3 → span 4). | 🟡 In progress |
| Live Editor parity | The modern layout tiles + Div inserts now work in the front-end Live Page Editor too, matching the backend builder. | 🟡 In progress |
Your existing pages
This is an evolution, not a rip-out:
- Every existing Section / Row / Column page keeps rendering and editing — the Bootstrap shortcodes are not removed, only demoted to the Classic palette group.
- The two models coexist. New pages lead with the Div; existing pages stay Classic — no migration is needed and nothing is forced. Rebuild a page on the Div model whenever you want, or simply leave it as it is.
Principles
- Straightforward for newcomers — one obvious way to lay out a page; no dual systems in your face.
- Nothing breaks — backward compatibility is non-negotiable.
- Clean output — semantic HTML and vanilla CSS (grid spans, not a wall of utility classes).
- Teaches good structure — the builder mirrors how a developer hand-writes a modern layout.
Scope and order can change as the work lands and as feedback comes in.