Builder quickstart
Design pixel-perfect pages visually with the WordSafe block builder.
Builder quickstart
The WordSafe Builder is a visual, drag-and-drop page designer. It replaces Elementor, Divi, and Gutenberg — with cleaner output HTML and native responsive controls.
Open the builder
From any page or post, click Edit with Builder in the top toolbar. The page opens on an infinite canvas with the widget library on the left and the style panel on the right.
Add widgets
Drag any widget from the Widget library onto the canvas:
- Layout — sections, columns, containers, grids
- Content — heading, text, image, button, list, icon
- Media — video, gallery, carousel
- Forms — contact, booking, newsletter
- Dynamic — post loop, related posts, breadcrumbs
- Marketing — testimonials, pricing tables, CTAs
Style panel
Select any widget to open the Style panel:
- Design — spacing, sizing, colors, typography, border, shadow
- Layout — flex/grid, alignment, gap
- Advanced — custom CSS class, ID, motion, custom CSS
Responsive
Toggle Desktop / Tablet / Mobile in the toolbar. Every style value can be overridden per breakpoint. The base value cascades unless overridden.
Global styles
Open Design → Global styles for site-wide colors, fonts, spacing scale, and headings. Every widget respects these tokens.
Templates
Save any section as a reusable template — ⋯ → Save as template. Reuse across pages via the Templates panel.