The editor at a glance

When you sign in, your portal looks exactly like the live site — the same layout, fonts, and colors — but with an editing layer on top. This overlay is called the editor chrome. It appears when you hover over a section or toggle editing on, and disappears again when you step back to view your work.

The toolbar

A bar runs across the top of the screen while you are in edit mode. On the left side you will find the primary action button:

• Save & Publish — saves your changes to GitHub and triggers a live rebuild. Use this when you are ready for your changes to go live.
• Publish — appears when you have saved changes that are not yet on the live site. Pushes them live without requiring a new round of edits.
• Up to date — shown when there is nothing new to publish.

When you have unsaved local edits, a Discard Changes button also appears on the left, so you can revert to the last published state if needed.

The center of the toolbar shows status messages — “Saving changes…”, “Publishing (0:12)”, “Published in 0:45” — so you know where things stand without leaving the page.

On the right side of the toolbar you will find four icon buttons:

• Reorder sections — opens a panel where you can drag sections into a different order.
• Media library — opens your image library for uploading and managing assets.
• Pages — manage the pages on your site (add, rename, reorder, or archive).
• Site settings — adjust site-wide settings such as your site name, brand colors, and typography.

There is also a Show Controls / Hide Controls toggle that pins the per-section editing controls on screen at all times, which can be helpful when you are making a lot of changes across multiple sections.

The floating edit button

In the bottom-right corner there is a small circular button. When you are editing, the button shows an eye icon — click it to switch to view mode. When you are viewing, it shows a pencil icon — click it to return to editing. In view mode you can preview how your content looks without any editor chrome in the way. A “Published / Unpublished” switcher appears at the top so you can compare what is live right now with what you are about to publish.

Per-section controls

Hover over any section to reveal its editing controls, which appear just above the section:

• Drag handle (top-left) — drag it up or down to reorder the section on the page.
• Insert ( + ) — adds a new section immediately before this one. On wide screens this appears to the left of the drag handle; on smaller screens it sits just below it.
• Status indicator — shows whether the section is draft, live, or archived, and lets you change it.
• Audience indicator — controls which visitor groups can see this section.
• Settings (gear) — opens a settings panel for this section’s options (layout, colors, and similar configuration choices).
• Delete — removes the section. You will be asked to confirm before it is removed.

Inline editing

To edit text, simply click on it. Most text fields become editable right in place — headings, body copy, captions, and similar content. The page layout does not shift or jump while you type. When you are done, click anywhere outside the field or press Escape.