Page Builder Sandwich: Layout and design system, part 1 of 2

What it does

• Flexbox and CSS Grid containers — Sections and containers with full flex and grid controls, including a visual grid editor: drag to set columns and rows.
• Three built-in breakpoints — Separate settings for desktop, tablet and mobile, previewed live.
• Global colours and fonts, shared with your theme — Site-wide colours and typography that read from and write to the theme's settings (theme.json), so the builder and theme always match.
• Copy and paste styles between elements and sites — Copy an element's style, or a whole section, and paste it into another page or another website.
• Shades and opacity of your palette colours (OKLCH) — Make any palette colour lighter, darker or see-through right in the colour picker. Mixed in OKLCH so the hue stays true, still linked to the palette colour, with a plain-colour fallback for older browsers.
• Conditions in the style builder (media, container and supports at-rules) — Style an element only when printing, in a dark colour scheme, with reduced motion or on mouse devices; developers add their own media, container and supports presets with the pbsw_style_at_rules PHP filter.
• Transform options on every block, rows and columns included — Rotate, scale, skew and move any block per screen size and on hover; the move follows the reading direction in right-to-left languages.
• Default item styles for groups and repeatable blocks — Style every item in a row, section, accordion or tabs at once, per screen size and on hover; an item's own value still wins.
• Name your rows and sections — Give any row, section or container a label ("Pricing", "Hero") from its settings; the label shows on the row in the canvas and in Layers, so a long page is easy to find your way around. It is never printed on the page.

Free or Pro

Everything here is in the free edition.