Intro to the CMS Editor

The Editor lets you update and add content in a simple interface, which is great for clients or teammates who don't need the complexity of the Designer.

 
This video features an old UI. Updated version coming soon!
Clone this project

Unlike the Designer, where you build and design your website, the Editor only allows you to edit and manage the content. With its simplified interface, the Editor gives you several 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 lesson:
  1. Accessing the Editor
  2. Anatomy of the Editor toolbar
  3. On-page editing
  4. Managing page settings
  5. Creating and managing dynamic content
  6. Viewing and publishing changes
  7. Accessing form submissions
  8. Editor settings for elements
The Editor toolbar is highlighted at the bottom of the webpage shown.
Client's guide to the Editor

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 on your site directly on the page or manage pages and content through the Editor panel.

Access the Editor through Webflow’s interface

If you're in your Webflow dashboard or designing a project in the Designer, you can access the Editor in one of the following ways:

  • From the Project menu in the Dashboard
Step one on the left, Click the ellipses (highlighted) at the bottom-right corner of your project thumbnail. Step two on the right, choose Editor (highlighted) in the menu.
Click the ellipses (...) at the bottom-right corner of your project thumbnail and choose Editor in the menu.
  • From the top toolbar in the Project settings
The top toolbar includes the project name, four settting icons, a share button, a designer button, an editor button (highlighted) and a publish button.
Click the Editor button in the upper right toolbar
  • From the menu in the Designer
Step one on the left, click on the Webflow W icon. Step two on the right, select the Editor button from the dropdown menu.
Open the Menu button (W icon) at the upper left corner of the Designer and choose "Editor"

Access the Editor from the live site

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). Once they log in, they can access their website in Editor mode.

When they return to the site later, they may see the “Edit site” button in the lower right corner, which they can click to hop into Editor mode.

Let your Collaborators know that they will need to set their browser to accept cookies from all third parties to use the Editor — otherwise, they may see an error message when trying to log in to the Editor.

Step one on the left, click on the Edit Site at the bottom-right of the Editor page. Step two on the right, notice the Editor toolbar has appeared.


Editor requirements: supported browsers

Webflow officially supports the Editor on the latest version of Chrome or Safari’s evergreen release, plus 2 versions for varying update cycles. Webflow also unofficially supports the use of all modern browsers.

Platform feature
IE
Edge
Chrome
Safari
Firefox
iOS Safari
Chrome for Android
Designer
x
x
Evergreen
+2
Evergreen
+2
Evergreen +2
(WIP)
x
x
Editor & Data Manager
x
Evergreen
+2
Evergreen
+2
Evergreen
+2
Evergreen +2
(WIP)
x
x
Dashboard
x
Evergreen
+2
Evergreen
+2
Evergreen
+2
Evergreen +2
(WIP)
x
x
Published Sites / Exported Code
11+*
15+*
Evergreen
+3
10.1+*
Evergreen +3
Evergreen +3
Evergreen +3
Interactions
11+*
12+*
Evergreen
+3
10.1+*
Evergreen +3
Evergreen +3
Evergreen +3

* Degree of browser support depends upon features used (e.g., flexbox has partial support in IE 11, filter has no support in IE 11 and partial in Edge). More details can be found at:

Webflow doesn’t support IE 9 or IE 10 in any situation. Read more about this decision

Good to know: An evergreen browser is one that updates itself automatically, meaning that most people have the newest, automatically updated version.

If you run into issues using Webflow on experimental browsers, please report your issue under the experimental browsers category on the Webflow Forum.


Note: You can determine the browser and operating system version you're using with What's my Browser.

Switch between Editor mode and Live site mode

When you open the Editor, you'll be able to explore the site in preview mode or "live site" mode. To switch to Edit mode, click the "Edit site" button at the lower right of the page.

Go "Back to live site" when you want to see the site in preview mode.

Troubleshooting Editor login errors

If you or your collaborators see an error message when trying to log into the Editor, try one of the following fixes:

Multi-user collaboration

Unlike the Designer, the Editor allows multiple people to edit static and dynamic content at the same time. One thing to note: one person can work in the Designer, at the same time - many people work in the Editor. If two people are editing the same content at the same time, the last edits "win," so you'll still want to coordinate editing times with your teammates. Learn more about the Editor.

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 to 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:

The Editor toolbar includes a Webflow logo menu button, a pages, collections and forms button for each. There are three icons for settings, help & support and log out. On the right side of the toolbar a "back to live site" button, saved notice, unpublished changes notice and a blue publish button.

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.

Pages - 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.

Collections - opens the Collections Panel, which lists all your Collections. Clicking on a Collection opens a new tab in the toolbar, which 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.

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

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

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

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

Back to live site (button) — Switches from Editor mode to Live-site mode, which allows you to view your site as your site visitors will see it.

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

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 with unpublished changes, and you can see which Collaborator made them.

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

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.

Step one on the left, click on the edit icon on the right side of the text box. Step two on the right, add the word "Outdoor" in front of Photography.
Step three on the left, click on the edit button on the top-right of the camera icon image. Step four on the right, replace the camera icon image with the outdoor photography 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.

A paragraph of text is outlined with a light-gray rectangle with an edit icon on the top-right.

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.

The floating toolbar includes the following formatting options: Bold, italics, insert link, wrap with span and clear formatting.

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

The word "paragraphs" is highlighted in a paragraph within a rich text element. The floating toolbar includes bold, italics, insert link, H1 through H6 and block quotes.

Replacing images

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

An image of a night sky full of stars has an edit icon on the top-right corner.

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.

A blue button with text "Learn more about editing buttons" has a settings icon on the top right.

You’ll see two options:

  • Edit link settings - lets you update the link of the button
  • Edit text - enables you to change the button text
The edit button drop down menu includes two options: edit link settings and edit 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.

The Pages tab is highlighted in the Page settings page within 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
There are six different blog post pages. The settings button for a blog post page is highlighted on the first page titled Ecommerce product photography tips: a beginner’s guide.

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

The search bar called “search pages…” is highlighted in the pages top bar section. There are five team member pages on this collection.
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 contains all Collection items within that Collection.

A new tab called Blog Posts has been added to the tabs section in the editors toolbar. This tab is highlighted among the other five tabs.

Creating and editing content

You can edit existing items by clicking on them or creating new items by clicking the + New button and filling out the item’s various fields. 

A green “new blog post” button is highlighted on the top right corner of the collection page called Blog posts. There are six pages already created and published on this page.
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 go live on your site next time you publish it.

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.

A green “create” button is pressed with a dropdown menu including a publish, save as a draft and schedule option. This dropdown menu is highlighted in the collection page “My amazing blog post” settings page.
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.

The collection page toolbar includes a icon to the right of the page name which is for navigating to the detail page. This icon is highlighted on the top bar.

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

The left arrow icon is highlighted on the collection page top bar. Next to it is the collection page name “My amazing blog post.”

Managing content

In the Collection Panel, you can see all your Collection items and their statuses. 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
The select button on the top-right of the Blog posts collection settings page is highlighted between the search bar and green “new blog post” button. There are six published collection pages already published.
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.

A collection page called Lessons includes a gray x icon in the top right of the page tab. This icon is highlighted.

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 clicking Publish.

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.

The View Site button is highlighted in its position above the editor tool bar.

In this view, you can browse your website just like you usually 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.

The green Published button has been clicked and a notice has appeared saying Publish successful and “You published 1 change to your site.” There is a check mark indicating the changes have been saved next to the Back to live site button.
Important
When you publish from the Editor, your site will publish to both the staging and custom domain. To avoid this, publish from the Designer or project settings.

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 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”
Under the editor settings section the Collaborators can edit this element setting is checked.
Shortcut keys

You can also toggle Collaborators on a selected element using the shortcut keys:

  • Mac: Command + Shift + L
  • Windows: Control + Shift + L
Must know
CMS elements are always editable in the Editor.
Try Webflow — it's free
No items found.
This video features an old UI. Updated version coming soon!