Intro to the Editor

 

Unlike the Designer, where you build and design your website, the Editor only allows you to edit and manage the content. With its simple, easy-to-use interface, the Editor gives you a number of tools to manage a published website. And with collaborator access, you can invite your clients to manage their own site without breaking the design.

In this guide, we cover:

We've built a client's guide to the Editor, which you're welcome to clone, customize, and share with your clients to give them easy access to all the following info.

Accessing the Editor

The Webflow Editor lives in your published website. It allows you to edit the content of your site directly on the page or manage pages and content through the Editor panel.

You can access the Editor in three ways:

  • From the Dashboard by clicking on the ellipses (…) at the bottom-right corner of your project thumbnail and choosing Editor in the menu.
  • From Project Settings by clicking on the Editor button in the upper right.
  • From the Designer by clicking the Menu button (W icon) at the upper left corner of the Designer and clicking Editor.

Collaborators can access the Editor for their website by adding /?edit to the end of their website URL in the browser address bar (e.g., yourwebsite.com/?edit). When collaborators return to the site later, they may see a little pencil icon in the lower right, which they can click to hop into their CMS. Collaborators need to log in to access the Editor. Learn more about Collaborators.

 
Collaborators will need to set their browser to accept cookies from all third parties in order to use the Editor — otherwise, they may see the “Missing authorization cookie” error.

Anatomy of the Editor toolbar

When you access the Editor, you’ll see your live website with the Editor toolbar (the gray bar) collapsed at the bottom of your screen. Through this toolbar, you can access the various Editor panels where you can manage page settings, dynamic content, forms, and your Editor account. You can also see and publish the changes you make through the Editor.

The Editor toolbar features the following tabs and icons:

Menu - Use this menu to go to the Dashboard, your Project Settings, or the Designer. This button features the Webflow logo. You can replace this with your own logo, or your client's, on our Pro plan. Learn more about Editor branding.

Anatomy of the Webflow Editor toolbar

Pages tab - opens the Pages Panel, which lists your site’s static pages and dynamic Collection pages. From here, you can browse for a page, click to view the live page, and manage the settings of any page.

Anatomy of the Webflow Editor toolbar

Collections tab - opens the Collections Panel, which lists all your Collections. Clicking on a Collection opens a new tab in the toolbar, which in turn opens the Collection items’ panel listing of all the items in that Collection. Here, you can edit any item or create new ones. This is very similar to the CMS Panel in the Designer. Read more about the CMS Panel.

Anatomy of the Webflow Editor toolbar

Forms tab - opens the Forms Panel where you can see and download form submissions made on the site.

Anatomy of the Webflow Editor toolbar

Account Settings icon - opens the Account Settings Panel where you can edit your Collaborator account info and upload a profile image.

Anatomy of the Webflow Editor toolbar

Help & Support icon - opens the Help and Support Panel where you can find answers to a few common questions about using the Editor.

Anatomy of the Webflow Editor toolbar

Log out icon - logs you out of the Editor after confirmation.

Anatomy of the Webflow Editor toolbar

Saving - all changes are saved automatically in the Editor. The Saving... and Saved status at the bottom left indicate this.

Anatomy of the Webflow Editor toolbar

Changelog - this shows the number of unpublished changes next to the publish button at the bottom left. Clicking the changelog reveals a list of items and pages that have unpublished changes, along with which Collaborator made them.

Anatomy of the Webflow Editor toolbar

Publish - allows you to publish all the changes you make when in the Editor.

Anatomy of the Webflow Editor toolbar

On-page editing

Editing right on the page is pretty intuitive with the Editor. As you hover over various elements, an edit icon will appear to the upper right of editable elements. To edit any of these elements, simply click the icon.

 
Some styling and custom code will not show as they should appear on the published site. That is normal behavior when you’re in the Editor.

Editing and formatting text

When hovering over editable text elements, you’ll see a light gray outline around the text element and a pencil icon in the upper right. You can edit the text by clicking into the box.

 Anatomy of the Webflow Editor toolbar

You can also format words or phrases by selecting them and choosing the formatting from the floating toolbar that appears. Read more about inline text formatting.

Anatomy of the Webflow Editor toolbar

For rich text elements, you can do more: add media, create lists, style and format your text further. Learn more about rich text elements.

Replacing images

You can also replace images right on the site. Just hover your cursor over the image you want to replace and click the picture icon. This will allow you to select and upload a new image from your computer.

Any visual styles you’ve created for an element in the Designer, such as solid color overlay, border color, or shadow, will automatically apply to any image or background image you replace through the Editor.

Editing buttons

To edit a button element, hover your cursor over the button and click on the settings icon that appears in the upper right.

You’ll see two options:

  • Edit link settings - lets you update the link of the button
  • Edit text - lets you change the button text

Managing page settings

From within the Pages Panel in the Editor, you can manage vital page settings like SEO meta title and description, Open Graph title and description, and Open Graph image. You can also manage page password protection settings for static pages and RSS feed settings for Collection pages.

Managing page settings in the Editor
Managing page settings in the Editor

To access the settings of a page:

  1. Open the Pages tab in the Editor panel
  2. Hover your cursor over a page in the list
  3. Click on the Settings button that appears
Webflow Editor

You can also search for pages by name using the search bar.

Webflow Editor
Clicking on the page, instead of the Settings button, will close the Pages panel and open the corresponding page.

Creating and managing dynamic content

If you have Collections in your project, you can access them in the Editor through the Collections tab. The Collections Panel lists all your collections. Clicking on a collection opens a new tab titled the name of the collection. This tab lists all Collection items within that Collection.

Creating and editing content

Here, you can edit existing items by clicking on them, or create new items by clicking the + New button and filling out the item’s various fields. 

Create a new Collection item in the Webflow Editor
Create a new Collection item in the Editor

When you’re done entering content or updating fields, you can choose to:

Create a new item or save an existing item. It will be staged to publish, and will go live on your site next time you publish your site.

Publish your item right away (without waiting for the next site wide publish to take place).

Save as Draft if you aren’t quite ready for the item to go on the live site.

Cancel to discard changes.

Publish an individual item in the Webflow Editor
Publish an individual item in the Editor

Learn more about creating and publishing Collection items. Read also about publishing restrictions.

You can view the Collection page for that item by clicking the icon to the right of the item name. This collapses the panels to show you the page for the item you’re currently viewing right in the browser. If you’d like, you can edit it there, instead of in the panel.

To go back to the Collection item's list, click the Back (←) button

Managing content

In the Collection Panel, you can see all your Collection items and their statuses. Here, you can delete, archive, or change the status of several items all at the same time. To do that:

  1. Click the Select... button
  2. Select the items you want to manage
  3. Choose the action you want from the top toolbar
Manage Collection items in the Webflow Editor
Managing Collection items in the Editor
Read more about Managing Collection items.

To close the Collection tab, click the close (x) button in the top right of the tab.

Viewing and publishing changes

After making all these changes, you will want to view them, make sure they're saved, and ready to be published before pressing the Publish button.

Viewing changes on the live site

While working in the Editor, the Editor Panel covers most of your website. To collapse the Editor Panel and view your website, click the View Site button at the top.

In this view, you can browse your website just like you normally would, and make or view changes to any page.

Publishing

The changes made in the Editor won’t be made on the live site until you either publish the edited item(s) individually or press the Publish button to publish all staged changes. You will need to confirm that you want to publish all changes before the site is actually published. The green Published button will confirm this.

Accessing form submissions

If you have any forms in your project, the Editor will include a Forms tab. Here, you’ll be able to view some basic information from forms people have submitted, but it’s most useful as a place for you to download the complete form data. In the downloaded CSV file (a format that works with all the major spreadsheet apps), you’ll be able to see all the submitted info.

Editor settings for elements

By default, you and site Collaborators can edit all content on the live site by using the Editor, but you can make elements uneditable if you'd like.

  1. Open the project in the Designer
  2. Select the element you want to make uneditable
  3. Go to Settings (D)
  4. Uncheck “Collaborators can edit this element”
 
CMS elements are always editable in the Editor.