Wuilt — Sections, Reimagined
Wuilt (No-code Website Builder)
The section engine behind every Wuilt site — a categorized section library, a live layout panel, real background controls (theme colors, gradients, images, video), and section-level actions that make composition feel like typing.
Overview
The problem
Context
Research signals
- R01Watched fifteen non-designer users add and style a section on Wuilt. Every session stalled at least once — either at the raw color picker, the padding number field, or the background mode toggle.
- R02Audited 40 live Wuilt sites. Found that 78% used only three of the fourteen section categories, and 62% had at least one section with a hard-coded off-brand hex color instead of a theme token.
- R03Interviewed six power users. They all wanted gradient backgrounds, video backgrounds with color overlays, and a way to copy a finished section to another page without rebuilding it.
- R04Benchmarked Webflow, Framer, Squarespace Fluid Engine, and Elementor — noted where section settings shared a panel, where backgrounds unified across modes, and where hover actions stayed discoverable without cluttering the canvas.
Design principles
Categories, not a flat list
The section library is organized into 14 named categories (Hero, Page Header, CTA, About, Gallery, Video, Contact, Team, Testimonials, HTML Embed, Pricing, Features, Call to Action, Logos). Users pick intent first, variant second — the choice cost drops before it starts.
One settings panel, three tabs
Every section settings panel opens with the same three tabs — Layout · Background · Visibility. Whichever section a user selects, muscle memory is preserved.
Backgrounds are one system
Theme color, custom solid, gradient, image, and video are five modes of the same panel — same preview, same overlay control, same mental model. No hidden 'video mode' with its own settings.
Tokens over hex
The default color picker shows the site's Brand, Secondary, Base, and Accent swatches from Site Styles first. The custom hex + opacity picker exists as an escape hatch, one tap away — never the default.
Actions live on hover
Save, duplicate, move, copy-to-page, and delete appear on section hover, in a fixed right-rail order. The canvas stays clean; the actions never disappear when a user needs them.
Composition feels like typing
The Add Section button appears between every section, in the same position, every time. Adding to the page is a keystroke, not a workflow.
Phases
Phase 01 — Map the section library
Goal — Turn a flat, unlabeled variant list into an IA a non-designer can navigate.
- 01.01Clustered every existing section variant into 14 intent-first categories, from Hero at the top to Logos at the bottom, in the order users actually reach for them.
- 01.02Wrote every category as a single, plain-language word — no 'Marketing Modules' or 'Content Sections'. Users pick what they mean, not what the CMS calls it.
- 01.03Placed the Add Section entry as a persistent button between every section on the page, so adding is a keystroke — not a menu hunt.
First-time users find the section they need on the first scan. Returning users stop reading the labels entirely — their hand knows where Hero and CTA live.
Phase 02 — The section settings panel
Goal — Collapse every per-section knob into one predictable panel.
- 02.01Fixed the tab order — Layout · Background · Visibility — across every section type. The panel never re-shuffles.
- 02.02Made Row count, Padding (S/M/L/custom), and Show grid the only controls on Layout — the three knobs 95% of real edits touch.
- 02.03Kept the panel pinned to the right rail so the canvas never re-flows when the user opens or switches sections.
Users stop hunting for controls. Every setting is where it was last time, and switching sections never resets the mental model.
Phase 03 — The background system
Goal — Ship five background modes as one connected panel.
- 03.01Modeled Theme, Custom, Gradient, Image, and Video as five tabs of one panel — every mode shares the same overlay, opacity, and preview affordance.
- 03.02The Theme tab shows Brand, Secondary, Base, and Accent swatches straight from Site Styles — the default path is always on-brand.
- 03.03The Custom tab is a full HSV picker with hex + opacity for one-off colors, gated one tap deeper so it never becomes the default.
- 03.04Video background accepts a paste-in link from YouTube or Vimeo; format detection is invisible, and the color overlay + Fit / Fill / Fixed / Parallax knobs mirror the image mode 1:1.
A user who's styled a solid-color section can style a video section without learning anything new. The mode changes; the mental model doesn't.
Phase 04 — Section actions on hover
Goal — Give every section a full action set without permanently occupying the canvas.
- 04.01Drew a single icon set for section actions — Settings, Save, Duplicate, Move up, Move down, Copy to page, Delete — in a fixed right-rail order.
- 04.02Actions only appear on hover / focus, so the reading canvas stays visually quiet while editing.
- 04.03Destructive actions (Delete) are red-tinted and gated by a one-sentence confirmation modal; fast for confident users, safe for hesitant ones.
- 04.04Save-as-my-section pattern turns a finished section into a reusable variant the user can drop on any page later — a small feature that quietly builds each user's own component library.
Editing a page never feels crowded. Every action is exactly one hover away, and no page-level toolbar hides what the user's actually doing.
Phase 05 — Copy section to another page
Goal — Turn a common power-user need into a one-minute task.
- 05.01A two-field modal: pick the destination page from the site's page list, confirm, done. Zero rebuild, zero copy-paste of hex codes.
- 05.02The pasted section inherits the destination page's grid and Site Styles tokens — never a visual regression when a section moves.
- 05.03The modal reuses the same shared modal shell as Delete and Discard changes — one component, three destinations.
Multi-page sites stop drifting. A finished CTA on the homepage lands identically on the pricing page — one action, one mental step.
Phase 06 — Live preview, no save button
Goal — Every setting writes to the canvas in real time.
- 06.01Every knob — padding stepper, background mode toggle, overlay opacity — writes to the preview immediately, with no explicit Save.
- 06.02The panel exposes a Discard changes affordance for the rare rollback moment, gated by the same confirmation modal used elsewhere.
- 06.03Grid overlay is a Layout toggle — the guide never lives on the published page, only in the editor.
Experimentation stops feeling risky. Users try five padding values in ten seconds because reversing is one click, not a re-open of the editor.
Phase 07 — Hand-off and component library
Goal — Ship a spec engineering can build 1:1 without a Slack thread.
- 07.01Documented every panel state — default, hover, focused, disabled — in a shared component sheet.
- 07.02Named every icon and every action verb once, so Figma, code, and analytics all agree on 'Duplicate section' vs 'Copy section to page'.
- 07.03Wrote the section action contract as a single table: which action shows on hover vs. always visible, which is destructive, which requires a confirmation.
The shipped product matches the design pixel-for-pixel because engineering never had to guess a state. Users see one consistent surface across every section they'll ever build.
By the numbers
Screens
The lesson from Site Styles carried straight into Sections — non-designers don't want fewer knobs; they want the knobs to be connected. Once every section inherited from Site Styles, every background mode shared one panel, and every action lived one hover away, users stopped fearing composition and started treating Wuilt as the design tool it is.
