The editor at a glance

The Webpress editor is built around three regions: a left panel for content and structure, a canvas in the middle where you build, and a right panel for styling. A toolbar runs across the top.

The header

Across the top you'll find your project name plus quick actions:

• Preview — see your page the way visitors will, with the panels hidden.
• Fullscreen — expand the canvas to fill the screen.
• Outlines — toggle element outlines on or off while you work.
• Publish (or Update) — opens the publishing settings. See Publishing your site.

The left panel

The left sidebar has several tabs:

• Blocks — the building blocks you drag onto the canvas (buttons, sections, cards, and more).
• Layers — a tree of every element on the current page; click to select, toggle visibility, or lock.
• Pages — add, duplicate, and manage the pages of your site. See Managing pages.
• Uploads and Images — your file and image library.
• Code — view the HTML and CSS of a selected element.
• Theme — your Brand Kit: set your colors, fonts, and corner roundness once and every page follows.

At the bottom of the left panel, the ⚙ Settings (gear) icon opens Project Settings, where you manage your domain, SEO, and advanced options.

The canvas

The canvas in the center is where your page lives. Use the device selector at the top to switch between Desktop, Tablet, and Mobile and check that your layout looks right on every screen. Click any element to select it, and drag blocks from the Blocks panel to drop them in place.

The customizer (right panel)

When you select an element, the right panel shows how to style it. It has two modes:

• Simple — friendly, context-aware controls (for a button: label, color, size, alignment, and so on).
• Pro — full control with CSS style sectors (layout, spacing, typography, background, borders, effects) plus class and hover-state management.

Next: Adding and editing content.