Editing Pages
ClearCMS uses a visual editor. What you see while editing is exactly what visitors see on your live site.
The top bar
A slim bar runs across the top of the editor. It is divided into three areas:
- Left — Your site logo (click it to go back to the admin dashboard) and Undo / Redo buttons.
- Center — A breakpoint switcher with Desktop, Tablet, and Mobile icons. Click any icon to preview how your page looks at that screen size, right inside the editor.
- Right — A Settings gear, a Help button, and the Publish button with a status indicator (see Publishing & Versions for details on the Publish button states).
Clicking to edit
Click on any text on your page to start editing it. Use the right panel to change the text and other settings for the selected block. Click somewhere else when you're done — changes save automatically.
Click on an image to replace it or adjust how it's displayed.
The right panel
When you click a content block, a panel opens on the right side of the screen. This panel shows all the settings for that block — text, images, links, colors, and layout options.
Settings are organized into groups. The panel starts with only the first group expanded and the rest collapsed, so you can focus on the most common fields first. Click any group header to expand or collapse it. The panel remembers which groups you have open, so your preferred layout is kept the next time you come back.
If you are a view-only user, the right panel shows a lock icon and the fields are read-only. You can browse settings but not change them.
For example, clicking a Team section opens the right panel where you can:
- Edit each team member's name, title, and bio
- Upload their photo
- Add or remove team members
Need a contact form on your page? Add a Contact section and customize the fields. For more advanced form options, see the Forms guide.
The left panel — Pages and Layers
The left panel shows a tree-style hierarchy for the current page. The page name appears at the top, and each section on the page is listed below it as an indented child — similar to a layers panel in a design tool.
Every section row shows:
- A drag handle (appears when you hover) — drag to reorder sections on the page
- A colored dot indicating the section's category
- The section name
- A visibility toggle (eye icon) — click to hide or show the section without deleting it
- A three-dot menu with options to Rename, Move up, Move down, Duplicate, or Delete the section
Your Navbar and Footer appear as locked rows with a lock icon. They stay in place and cannot be reordered.
Between each section, a blue insert line appears on hover. Click the blue circle on the line to add a new section at that exact position.
On screens narrower than 1024 px (tablets and phones), the left and right panels appear as slide-over drawers on top of the canvas instead of side-by-side panels.
Adding content blocks
Hover between sections in the layers panel to reveal the blue insert line, then click its blue circle to add a new content block. A menu shows all available block types: hero banners, feature lists, testimonials, contact forms, and more.
ClearCMS ships with 16 built-in sections across these categories: Headers, Features, Social Proof, Pricing, Team, Contact & FAQ, Blog, CTA, and Navigation. Browse the full Sections catalog to see every section and its fields.
Drag sections up or down using the drag handle in the layers panel, or use the Move up / Move down options in the three-dot menu.
Removing content blocks
Select a section and choose Delete from its three-dot menu in the layers panel, or select the block and press Delete in the right panel. You'll be asked to confirm before anything is removed.
Auto-save
There is no Save button. ClearCMS saves your changes automatically as you work. After you stop making changes, the editor waits a short moment and then saves. You will see a status indicator in the top bar: Saving... while a save is in progress, then Saved once it is done. You can also press Ctrl+S (or Cmd+S on Mac) to save right away.
Auto-saving is different from publishing:
- Saved means your changes are stored as a draft. Visitors cannot see them yet.
- Published means your changes are live on your site.
When you're ready to go live, click Publish in the top bar.
Every time you publish, ClearCMS saves a version snapshot. You can roll back to any previous version from the version history. See Publishing & Versions for details.
Previewing
Click Preview to see your page as a visitor would. The editing controls are hidden so you can check how your content looks before publishing.
Responsive preview
The breakpoint switcher in the center of the top bar lets you see how your page looks on different screen sizes at any time — you do not need to enter preview mode first. Click the Desktop, Tablet, or Mobile icon to resize the canvas.
Undo and redo
Click the Undo or Redo buttons on the left side of the top bar, or use the keyboard shortcuts Ctrl+Z (or Cmd+Z on Mac) to undo and Ctrl+Shift+Z to redo.