Page Builder
The visual section-based editor for building and customizing your website pages.
Overview
The Page Builder (/admin/pages.php) is a section-based visual editor. Each page is made up of sections (Hero, About, Services, Gallery, etc.) that you can add, reorder, edit, and delete. Changes are saved to the database and static HTML is regenerated automatically.
Layout
| Panel | Description |
|---|---|
| Left — Page List | All pages for the current site. Click to switch pages. "Manage Extra Pages" adds optional pages. |
| Center — Canvas | Section cards for the active page. Drag to reorder. Click to expand and edit. |
| Right — Settings Drawer | SEO settings (meta title, description) and section-specific settings when a section is selected. |
| Right — Color Panel | Theme color pickers, font selector, and preset palettes. Opens via the palette button in the toolbar. |
Section Types
| Section | Icon | Description |
|---|---|---|
| Hero / Banner | view_carousel | Full-width hero with headline, subtext, and CTA button. Supports image background. |
| About | info | Two-column layout with text and image. Supports HTML body content. |
| Services / Features | grid_view | Card grid with icon, title, and description. Use for services, features, or values. |
| Stats | bar_chart | Horizontal stats bar with numbers and labels (e.g. "500+ Students"). |
| Gallery | photo_library | Image grid pulled from the site's Gallery. Supports masonry layout. |
| Testimonials | format_quote | Quote cards with author name, role, and optional avatar. |
| Team | people | Team member cards with photo, name, role, and bio. |
| Events | event | Event list with date, title, and description. |
| FAQ | help | Accordion-style FAQ with question and answer pairs. |
| Pricing | payments | Pricing cards with plan name, price, features list, and CTA button. |
| Contact + Map | contact_phone | Contact info with optional Google Maps embed. |
| CTA | ads_click | Full-width call-to-action with heading, subtext, and button. |
| Blog Grid | article | Blog post cards with title, excerpt, date, and image. |
| Social Icons | share | Row of social media icon links. |
Editing Sections
Click a section card header
The section expands to show its editable fields.
Edit the fields
Text inputs, rich text editors (Quill), image uploads, and toggle switches depending on section type.
Reorder sections
Drag the handle (⠿) on the left of each section card to reorder. Uses SortableJS for smooth drag-and-drop.
Save
Click the Save button (or press Ctrl+S / Cmd+S). This saves sections to the database and regenerates the static HTML file.
Theme Colors
Click the palette icon (🎨) in the canvas toolbar to open the Theme Color panel. You can:
- Pick primary and secondary colors using color pickers or hex inputs
- Choose a font family from 12 options
- Apply preset palettes (Ocean Blue, Forest, Crimson, etc.)
- Click Apply & Regenerate Site to save colors to the database and regenerate all pages
AI Assistant
Click the AI button (purple gradient) in the toolbar to open the AI Assistant. You can ask it to:
- Generate content for a specific section
- Rewrite existing content in a different tone
- Add new sections based on a description
- Suggest improvements to the current page
Draft Recovery
The Page Builder auto-saves a draft to localStorage every 30 seconds. If you accidentally close the browser, a yellow banner will appear on next visit offering to restore the draft.