A
WYSIWYG Editor
Full-width preview with inline editing. Click on a section to edit in place. Left sidebar shows the section list for navigation. Closest to a "what you see is what you get" experience.
←
Website Editor
SGA Legacy v2.3
3 draft changes
Preview
Publish
Hero Section
Welcome to Smile Center Buckhead...
About Section
Serving the Buckhead community since 2005...
Editing: Providers
Our Providers
!
Dr. Nguyen
General Dentist
Photo needs update
Change Photo
Edit Bio
Photo
Dr. Williams
Orthodontist
Up to date
Edit Bio
Photo
Dr. Patel
Pediatric Dentist
Up to date
Edit Bio
+ Add Provider
Services Section
General, Cosmetic, Orthodontics, Pediatric...
Gallery Section
15 approved photos from Content Engine
WYSIWYG keeps the office manager oriented by showing the entire page with the active section highlighted. Non-active sections are dimmed but visible for context. The blue dashed overlay makes it very clear what's being edited. Asset picker in the sidebar provides drag-and-drop photo swapping. Trade-off: requires more vertical scrolling on complex pages, and the inline editing can feel constrained for long-form content.
- - - - - - - -
B
Form + Preview
Left (50%): structured edit form with fields. Right (50%): live preview that updates as you type. Clear separation between editing and viewing.
←
Website Editor
SGA Legacy v2.3
› Providers
3 unsaved changes
Preview Full Page
Publish
Live Preview
smilecenterbuckhead.com/providers
Our Providers
!
Dr. Nguyen
General Dentist
Dr. Nguyen has over 15 years of experience...
Photo
Dr. Williams
Orthodontist
Dr. Williams specializes in Invisalign and...
Photo
Dr. Patel
Pediatric Dentist
Dr. Patel creates a fun, comfortable environment...
Last published: March 15, 2026
Save Draft
Publish Changes
Form + Preview gives the clearest editing experience: structured fields on the left, visual result on the right. The accordion-style provider cards (expanded for active, collapsed for others) reduce scrolling. Live preview builds confidence that changes look correct before publishing. Trade-off: the 50/50 split can feel tight on smaller screens, and the preview doesn't show full-page context.
- - - - - - - -
C
Block Editor
Gutenberg-style block layout. Each section is a draggable block. Click to expand and edit. Familiar to WordPress users and allows reordering sections.
←
Website Editor
SGA Legacy v2.3
3 draft changes
Preview
Publish
!
Dr. Sarah Nguyen, DDS — General Dentist
Dr. Nguyen has over 15 years of experience in general and cosmetic dentistry...
General
Cosmetic
Implants
Photo
Dr. Williams
OK
Edit
+ Add Provider
+ Add Section
Block editor treats each section as an independent, reorderable unit. The drag handles on the left signal reorderability. Only one block expands at a time, keeping the page scannable. Familiar to anyone who's used WordPress Gutenberg. Trade-off: no side-by-side preview (need to click "Preview" button), and the single-column layout can't show the full website context. Best for users who think in terms of content blocks rather than visual layout.
- - - - - - - -
← Back to Practice Ops wireframes