Josh Knapp
91a6b6f34b
Rebuilt the visual site builder from scratch using Craft.js, React 18, and TypeScript. The new editor renders directly in the DOM (no iframe), supports 40+ components, multi-page with shared header/footer, 16 templates, full-spectrum color/gradient controls, custom head code injection, save/publish workflow, and auto-save. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
103 lines
4.3 KiB
Markdown
103 lines
4.3 KiB
Markdown
# WHP Site Builder - Features
|
|
|
|
## Visual Editor
|
|
- Drag-and-drop page building with real-time preview
|
|
- No iframe -- content renders directly in the editor
|
|
- Responsive device preview (Desktop / Tablet / Mobile)
|
|
- Undo / Redo with full history
|
|
- Auto-save every 30 seconds
|
|
- Save as draft / Publish workflow
|
|
|
|
## Components (36 modules)
|
|
|
|
### Layout
|
|
- **Container** -- Generic wrapper with bg color/gradient/image, parallax, overlay
|
|
- **Section** -- Full-width section with centered content area
|
|
- **Column Layout** -- 1-10 columns with preset and custom splits
|
|
- **Background Section** -- Section with background image/gradient overlay
|
|
|
|
### Content
|
|
- **Heading** -- H1-H6 with inline editing, full typography controls
|
|
- **Text Block** -- Paragraph with inline editing
|
|
- **Button / Link** -- Styled button with color presets, radius, padding
|
|
- **Divider** -- Horizontal rule with color and thickness
|
|
- **Spacer** -- Adjustable vertical spacing
|
|
- **Icon** -- Font Awesome icon with size, color, background shape
|
|
- **Star Rating** -- Decorative star display (0-5 stars)
|
|
- **Social Links** -- Social media icon links (10+ platforms)
|
|
|
|
### Navigation
|
|
- **Logo** -- Text or image logo with link
|
|
- **Menu** -- Navigation links with page integration, CTA support
|
|
- **Navbar** -- Combined logo + menu layout (convenience block)
|
|
|
|
### Media
|
|
- **Image** -- Upload, browse, drag-drop, sizing controls (width/height/max-width with units)
|
|
- **Video** -- YouTube, Vimeo, direct files, background mode with overlay
|
|
- **Gallery** -- Image grid (2-6 columns) with optional lightbox
|
|
- **Map Embed** -- Google Maps with address, zoom, height
|
|
|
|
### Sections (Pre-built)
|
|
- **Hero** -- Gradient hero with heading, subtitle, CTA button
|
|
- **Features Grid** -- Multi-column feature cards
|
|
- **Call to Action** -- Full CTA section with bg options and dual buttons
|
|
- **Pricing Table** -- 2-4 tier comparison cards with featured plan
|
|
- **Testimonials** -- Quote cards with star ratings (grid or single view)
|
|
- **Accordion** -- Expandable FAQ/content panels
|
|
- **Tabs** -- Tabbed content panels
|
|
- **Countdown** -- Date countdown timer with live updating
|
|
- **Footer** -- Footer component with copyright text
|
|
|
|
### Forms
|
|
- **Contact Form** -- Complete form with configurable fields
|
|
- **Form Container** -- Wrapper for custom form layouts
|
|
- **Input Field** -- Text/email/tel/password/number inputs
|
|
- **Textarea** -- Multi-line text input
|
|
- **Form Button** -- Submit button with styling
|
|
|
|
## Site Design System
|
|
- **Basic mode**: Primary, secondary, accent colors + heading/body fonts + link color
|
|
- **Advanced mode**: Success/warning/error colors, background/text/border colors, border radius, button styling, nav style
|
|
- Design tokens applied across all pages and components
|
|
- Reset to defaults button
|
|
|
|
## Pages & Structure
|
|
- Multi-page support with unlimited pages
|
|
- **Header** -- Shared across all pages, edited separately
|
|
- **Footer** -- Shared across all pages, edited separately
|
|
- Clean URLs via .htaccess (no .html extension)
|
|
- Page management: add, edit, rename, delete, reorder
|
|
|
|
## Templates (16 pre-built)
|
|
- **Business**: Restaurant, Small Business, SaaS, Agency, Medical
|
|
- **Creative**: Portfolio, Photography, Content Creator, Event
|
|
- **Personal**: Resume, Blog, Wedding, Coming Soon
|
|
- **Community**: Church, Non-Profit, Fitness
|
|
- Each includes header, footer, and design tokens
|
|
- One-click loading with optional design token import
|
|
|
|
## Asset Management
|
|
- Image/video upload with drag-and-drop
|
|
- Asset browser with thumbnails
|
|
- Inline asset selection in component settings
|
|
- Assets stored in staging area, deployed on publish
|
|
|
|
## Settings Per Component (3-tab system)
|
|
- **General** -- Content-specific settings
|
|
- **Style** -- Typography, colors, spacing, borders, backgrounds
|
|
- **Advanced** -- Margin/padding (4-sided), CSS class/ID, responsive visibility, entrance animations
|
|
|
|
## Editor Features
|
|
- Component tree (Layers panel)
|
|
- Right-click context menu (duplicate, copy, paste, move, delete)
|
|
- Keyboard shortcuts (Ctrl+Z/Y/C/V/D, Delete, Escape)
|
|
- Dashed outlines for all containers/rows/columns
|
|
- Component selection with blue outline indicator
|
|
|
|
## Publishing
|
|
- **Save** stores to staging area (.site-builder/) -- does not affect live site
|
|
- **Publish** deploys to document root with header + body + footer composition
|
|
- Preview in new tab with header and footer included
|
|
- Coming Soon / Go Live toggle
|
|
- Clean HTML output with Google Fonts and responsive CSS
|