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>
4.3 KiB
4.3 KiB
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