Introduction to the page editor

The page editor is a visual, WYSIWYG workspace: what you arrange on the canvas is what visitors see after you Save and Publish. You are not writing raw HTML—you are composing blocks inside sections, rows, and columns that ArtInStack turns into a fast, responsive public page.

Capability overview

• Drag-and-drop blocks — Text, images, heroes, forms, product grids, and more (see Editor blocks and layout reference and Supported media presentation blocks).
• Inline editing — Click text on the canvas to edit copy; select a block to adjust traits in the right sidebar.
• Responsive preview — Toolbar device buttons (Desktop, Tablet, Mobile) approximate how layout reflows before you go live.
• Interactions (Events tab) — Scroll reveals, hovers, toggles, and motion on the published site without custom code (see Page editor events and interactions).
• Shared chrome — Site header and footer often come from templates applied across pages (see Working with page templates).

Interface architecture

[Pages → Edit → Page Editor tab]
        |
        v
[Toolbar: save, publish, device preview]
        |
        +-- Canvas (center): sections → rows → columns → blocks
        |
        +-- Right sidebar (stacked panels):
              Icons: Edit | Layers | Blocks
              When Edit is active: Style | Attr | Events tabs below

Sections, rows, and columns

Most pages are built as sections (full-width bands). Inside a section you place rows, then columns (1–4 columns or sidebar layouts from the Layout category). Blocks live inside columns—never float loose on an invisible root.

Layer	What it does
Section	Vertical band; controls section spacing and background
Row	Horizontal row; max width, gap, and padding
Column	Cell that holds one or more blocks
Block	Image, Rich text, Hero, Contact form, etc.

Use Layers in the right sidebar when you need to select a row or section buried under other content.

What visitors see vs what you see while editing

The editor canvas applies the same layout rules as the live site: spacing, typography, and block structure are aligned so you are not guessing after publish. If something looks wrong on the public URL after publish, see Preview and publish and Troubleshoot publishing issues—usually cache, draft state, or a block still missing media.

Common core use cases

• Homepage — Hero + portfolio grid + contact CTA.
• Contact — Contact form block — Add contact form to pages.
• About — Rich text + portrait image block.
• Services — Features grid + testimonial blocks.
• Storefront — Product listing blocks (see Products and Selling).

Next steps & validation

1. Open the page editor on a real page.
2. Read Page editor sidebar and toolbar.
3. Read Page layout and content for section, row, and max-width.
4. Skim Page editor events and interactions if you want scroll reveals, hovers, or click behaviors without custom code.
5. Place one Section and one Image block, Save Page, preview on Mobile.
6. Preview and publish when ready.