Mockup — Structure Panel

Structure

⋮⋮ ▭ S-1 · Hero

⋮⋮ ▦ S-2 · Container

⋮⋮ ▦ S-3 · Container

⋮⋮ · T H-1 · Heading

⋮⋮ · T H-2 · Explore the World of Trees

⋮⋮ · ¶ T-1 · Text Editor

⋮⋮ · 🖼 W-1 · Image (tree)

⋮⋮ ▦ S-4 · Container (cols)

⋮⋮ ▦ S-5 · Column 1/3

⋮⋮ ▦ S-6 · Column 2/3

⋮⋮ ▦ S-7 · Column 3/3

⋮⋮ ▭ S-8 · Section (dark)

⋮⋮ · ▶ CTA-1 · Get Started

⋮⋮ · 🖼 W-2 · Image

⋮⋮ ▭ S-9 · Footer

S-1

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated, curriculum-aligned resources that make learning about trees fun, engaging, and meaningful.

S-2

Container with heading, text editor, and image

S-8

Books · News · The Team · Contact

Top navigation across the page (4 links + CTA button)

S-11

Hero image with overlay

Full-width section with image background and dark overlay. The text on the right shows what the page is about.

S-12

3-column layout

Books | News | Contact — equal-width columns with icons and short text

S-28

Footer

Contact info, social links, copyright

How this works (operator's #5):

Structure panel on the left, page stays normal on the right
Drag nodes up/down or into other containers to reorder/restructure
Click a node in the panel to select it on the page (and vice versa)
Hover shows actions: edit, duplicate, delete
Quick-add buttons in the footer: + Section, + Container, + Module
Page is not modified by overlays — keeps the operator's design intact
Collapsible: collapse/expand nodes with the arrow

Why Structure panel, not page-drag: dragging on the actual page is messy — the operator's design is the canvas, the panel is the editor. FreshVibe CMS leaves the page as a page, edits live in the dock.