Page Builder
By default, pages use the classic TipTap WYSIWYG body. On Content → Pages, enable Page Builder to compose the page from reorderable sections. Sections are stored alongside the page as {slug}.sections.json.
When to use which
Classic WYSIWYG — simple articles, legal text, one continuous narrative.
Page Builder — marketing pages, landing pages, mixed media (hero, cards, forms, maps).
Turning the builder off keeps the classic body editor; the sections file is retained but unused.
Section types
| Section | Notes |
|---|---|
| Hero | Background color / image / video / animated shader (curated presets, background + accent colors, speed), media fit (cover/contain) + min height, heading, subheading, CTA |
| Heading | H2–H4 |
| WYSIWYG | Rich HTML block |
| Divider | Line or spacer |
| Call to action | Heading, body, button |
| Page Specific Navigation | Custom title and chosen in-page section jump links |
| Form | Embed a CMS form |
| Slideshow | Image carousel; autoplay off by default |
| Video | Self-hosted MP4 / WebM from Assets |
| Video embed | YouTube or Vimeo URLs |
| File links | PDF, Office docs, txt, md |
| Testimonials | Quotes with optional avatar / role, or from the Testimonials library |
| Cards | 1–6 columns (tablet + desktop); grid or carousel; Markdown descriptions; card background, image aspect, image area background (Default gray / Transparent / Custom), and borders (width or remove + optional color) under Styling Options |
| Map | OpenStreetMap (no key) or Google Maps. Size/zoom, themes, color overlay, auto-fit pins, Locations library merge. Google Maps requires GOOGLE_MAPS_API_KEY in server .env — keys are never stored in section JSON. |
| News list | Latest published News posts |
| Services list | Latest published Services |
| Procedures list | Latest published Procedures (Extras) |
| Practice Areas list | Latest published Practice Areas (Extras) |
| Attorneys list | Latest published Attorneys (Extras) |
| Insurance list | Accepted insurance plans (Extras) |
| Before & After gallery | Before/after photo pairs from the library (Extras) |
| Reviews list | Published Reviews with 1–5 stars |
| Teams / Groups / Individuals | Live people directory picks |
| Payment buttons | Stripe Checkout, PayPal.me, Square link, Zelle/Venmo display (cms.payments license) |
Styling Options: every section has a shared panel for background color/opacity, text and heading colors, alignment, text size, and (where relevant) button colors. Values apply as CSS variables on the section wrapper. Hero keeps its own background mode controls (including shaders); Cards also set image aspect ratio, card chrome, and image area background (Default / Transparent / Custom).
Autoplay: slideshows, testimonials, and card carousels use interval 0 (manual dots) unless you set 2000–20000 ms.
Spacing: Site Theme → section density (compact / comfortable / airy). Heading sections sit closer to the block beneath them.
Section links
Each public section is wrapped with a stable id (from the section JSON). Add an in-page jump list with the Page Specific Navigation section (custom title and which sections to include), or add site-wide jump links from Content → Layout / UX → Navigation → Page sections (site pages only — Knowledge Base articles are not listed). Sticky headers are cleared via CSS scroll-margin.
Knowledge base / FAQ layout
Page layout Knowledge base / FAQ (not a section type; front matter layout: knowledgebase) wraps the page in a sidebar + main column. Use one top-level hub and nest articles under it in Navigation. The main column still uses Page Builder or WYSIWYG. See Navigation.