Skip to main content
WebProCMS Logo

Documentation

No results found.
Guides

Editing Page Content

Open the page editor, find the text or image you want to change, edit it with a live preview, and save. No code required.

For a complete walkthrough of everything the editor can do, see the Page Editor Tour.

Open the editor

  1. Go to Dashboard → Pages.
  2. Click the page you want to edit to open it in the page editor.

The editor shows a list of rows on the left (the full-width sections that make up the page) and a live preview of the page on the right. What you see in the preview is exactly what visitors will see — there is no separate preview mode.

Rows, items, and the sidebar

Pages are built from three nested levels:

  1. Rows — full-width sections such as a hero, a features grid, or a call-to-action.
  2. Items — the elements inside a row: a heading, a paragraph, a button pair, a set of cards.
  3. Fields — the editable details of an item: its text, its image, its colors.

Click a row in the sidebar to see its items. Click an item card to expand its fields. Each item card shows up to three small icons:

Icon Tab What you edit there
Document Content Text, images, on/off toggles, repeating lists
Paintbrush Design Colors, spacing, alignment, styling classes
Code brackets Advanced Element IDs and custom attributes (for jump links and integrations)

If an icon is missing, that item simply has nothing to edit in that tab.

Edit text

  1. Drill into the row, then click the item (for example the headline).
  2. Type in the text field. The preview updates as you type.
  3. Headings also have a dropdown to change the heading level (h1–h4).
  4. Longer body text uses a rich text editor with bold, italic, lists, links, and headings.

Edit images

  1. Click the image item, then click the image (or the Pick from media library button).
  2. The media library picker opens — choose an existing image or upload a new one.
  3. Hover an image and click the red X to remove it.

All images flow through the media library, so alt text and reuse are managed in one place — see Managing Images and Media.

Button items expose the button label, the link URL, an "open in new tab" toggle, and a show/hide switch (for example to hide a secondary button). Edit them in the Content tab like any other field.

The design (paintbrush) tab

Click the paintbrush icon on a row or item to switch to design mode:

  • On a row, the first card is the Color Preset — a dropdown (with previous/next arrows) that changes the section's background, text, and link colors together. See Section Color Presets.
  • On an item, you get styling controls: colors, padding and margin chips that snap to your site's spacing settings, alignment, and a classes box with autocomplete for advanced tweaks.

Every change renders in the live preview immediately, before you save.

Saving

Click Save in the editor header. Saving:

  • Stores all of your pending edits in one step.
  • Takes a snapshot of the page so you can restore an earlier version later.
  • Pushes the changes live — new styling appears on the site within about a second.

Undo, redo, and discarding changes

  • Undo / Redo buttons in the header step back and forward through your recent edits (up to 50 steps per page).
  • The discard menu in the header offers bigger resets: drop unsaved changes, discard saved content or design customizations for a row or the whole page, refresh a row from its original template, or restore the page from an earlier saved version.

Discard actions ask for confirmation first — they cannot be undone.

Next steps