Navigating the Editor Interface

The Webflow Editor is where you’ll make all of your content updates. When you open the Editor, you’ll see a simplified version of your website along with a few tools that allow you to edit text, swap images, and manage Collection items.

Here’s a quick overview of what you’re looking at inside the Editor.

1. The Main Page Preview (center of the screen)

This is the live view of your website.

• You can click directly on text to edit it.
• Click on images to replace them.
• Any content that can be edited will highlight when you hover over it.

You will always make changes directly on the page itself.

2. The Editor Toolbar (bottom of the screen)

This bar includes the most important controls:‍

• ‍Pages‍
  
  • Opens the list of all pages on your website.
  • Select a page to load it in the Editor.‍
• Collections‍
  
  • Shows all CMS Collections (e.g., publications, team members, news).
  • You can add, edit, or remove items here.‍
• Forms‍
  
  • Shows all form submissions sent through your website.‍
• Help & Shortcuts‍
  
  • Provides quick guidance or keyboard shortcuts if you need them.

3. Publish Button (bottom right)

Any changes you make in the Editor must be published to go live.

• Publish sends your updates to your public website.
• Until you publish, your edits are saved as drafts and are only visible to you.

Common Mistakes to Avoid

• Forgetting to publish changes
  Edits won’t appear on your live site until you press Publish.
• Trying to change layout or styling
  The Editor only allows content updates. Layout, structure, and design changes must be done in the Designer.

Extra Tips

• Hover over different parts of the page to see what is editable.
• For CMS items, it’s usually easier to use the Collections panel instead of finding them directly on the page.