Skip to main content

Page Builder

FREE!

Build premium pages in minutes.

A visual drag-and-drop builder on one modern layout primitive — a Flexbox & CSS Grid Div — plus 100+ content elements to build any layout. The page-building power Elementor Pro, Divi and WPBakery charge for, free.

The Page Builder lets you compose pages visually from shortcodes (called elements in the UI), using drag & drop — no code required.

The Unyson+ Page Builder — element palette with a populated Section on the canvas

This page is the practical "how to use it" entry point. If you want to understand what the builder does under the hood — the stored JSON, how loose elements become a valid grid, how the front end renders, and the value-shape traps to avoid when you extend it — read the deep-dive pages linked at the bottom.

One layout primitive: the Div

The builder is built on one layout primitive — the Div, a container you set to Flex, Grid or Block that outputs a semantic HTML tag. On a page it leads the palette as three tiles — Section, Flexbox (div) and Grid (div). The classic Section → Row → Column (Bootstrap) grid is still fully supported, just moved to a Classic palette group. Nothing you've built changes; see the Roadmap for what's next.

Enabling the builder​

The Page Builder ships as the Page Builder extension (it lives inside the Shortcodes extension). Activate Shortcodes and Page Builder from Unyson+ → Extensions, then edit any page and switch the editor to the builder with the Unyson Builder button above the content area.

Basic workflow​

  1. Open a page in the editor and click Unyson Builder.
  2. From the Layout Elements tab, drag a Section onto the canvas to start a band, then a Flexbox (div) for a row or a Grid (div) for columns — or drop any content element straight in.
  3. Configure it through its options panel (the modal that opens when you click the element).
  4. Save / Update — the layout renders on the front end.

You don't have to build the nesting by hand: drop a content element straight onto the canvas and the builder wraps it in a valid layout for you when the page renders. That wrapping is done by the items corrector.

Start with a prebuilt layout

To skip building columns one by one, use Insert Section in the builder header — pick a ready-made layout (equal columns, offset & sidebar, multi-row, nested multi-column, or masonry) and it drops a fully-formed Flexbox layout onto the page.

The element palette​

Elements are grouped into tabs in a deliberate order — not alphabetically (see FW_Option_Type_Page_Builder::sort_thumbnails_helper()):

Layout Elements · Content · Media · Interactive · Components · Header/Footer · WooCommerce · Classic

The Layout Elements tab holds exactly the modern Div primitives — Section, Flexbox (div) and Grid (div). Everything Bootstrap moves to the Classic tab, which always sorts last: the column-width tiles (1/1, 1/2, 1/3 … including the fifths 1/5–4/5, and Auto Column) and the classic containers (Section, Container, Bleed Section, Masonry Section). So a newcomer's first instinct — "click Section to start" — lands on the modern primitive, and the whole legacy grid sits together in one clearly-labelled place.

Every element has its own reference page under Shortcodes / Elements; the layout primitive is documented on The Div element.

Reusable content​

The Snippets extension lets you save builder layouts and reuse them anywhere — as an embeddable block ([snippet id="123"]) or as a global Section / Column template. See Snippets and Global Templates.

Editing modes​

  • Desktop / Tablet / Phone preview toggle re-previews the canvas at each breakpoint so responsive column widths, offsets and masonry counts are visible while you edit.
  • Bootstrap 3 Legacy Mode (Page Builder settings) changes how columns wrap — see Column widths & the grid.

Going deeper​

See also​