The Editor

Adding and editing content

Drag blocks onto the canvas, edit text inline, replace images, and style elements with the customizer — the core building loop.

Last updated 2026-06-29

Building a page in Webpress is mostly drag, click, and type. Here's the core loop you'll repeat over and over.

Add a block

A block is a ready-made piece of a page — a button, a heading, a hero section, a pricing table.

  1. Open the Blocks tab in the left panel.
  2. Browse the categories or use the search box (try "button", "hero", or "card").
  3. Drag a block from the panel onto the canvas and drop it where you want it. Snap guides help you align it with nearby elements.

The block appears instantly with a sensible default name. For the full catalog, see The blocks library.

Dragging a block from the Blocks panel onto the editor canvas
Drag a block from the Blocks panel and drop it onto the canvas.

In a hurry? Let the AI assistant build a whole section — or a whole page — from a sentence, then fine-tune it by hand.

Select an element

Click any element on the canvas to select it. The selection also highlights in the Layers tab, and the element's name appears at the top of the right panel — click that name to rename it, which makes the Layers tree easier to scan. To learn how to move, copy, and delete elements, see Selecting & moving elements.

Edit text inline

Double-click a text element to edit it directly on the canvas. A small formatting toolbar appears with bold, italic, underline, links, and alignment. Press Esc or click outside the element to finish.

Typing replaces only the words — it keeps the element's existing styling (its font, color, and size), so your text stays on-brand.

Replace an image

Double-click an image (or select it and use the Properties tab) to swap in a different picture from your library or a fresh upload. Always fill in the image's alt text so screen readers and search engines can describe it. See Images & media.

Style an element

With an element selected, open the Customize tab in the right panel:

  • Simple mode gives you the most common controls for that element type — for a button, that's label, color, size, weight, and alignment. Color pickers pull from your Brand Kit so everything stays consistent.
  • Pro mode unlocks full control through style sectors (spacing, dimensions, typography, background, border, effects) and lets you target states like hover.
The right-panel customizer showing Simple and Pro styling modes
The Customize tab in Simple and Pro modes.

The whole Styling & Design section walks through every control in detail — start at Styling overview.

Tip: set your colors and fonts once in the Brand Kit (the Theme tab). Every element that uses brand colors updates automatically across all your pages.

Where to go next

Next: Selecting & moving elements, then Managing pages.