Editing content on the live website with the Editor and Webflow CMS

Webflow CMS' Editor is the best way to edit and add any content on your site. While most CMS products offer only a backend dashboard — which looks nothing like the the actual site — Webflow lets you edit content right on the live website.

How to access the Editor

How you access the Editor may vary, depending on your role.

Site administrator or Team plan member

If you're an administrator, just click the Editor button you'll find in your Site Settings. This gives you instant access to the Editor without having to log in. 

Collaborator

If you're a Collaborator, you can access the CMS once you've been invited by the CMS Administrator. Just click the link in the invite email, create a username and password, and log in. After that, you can simply add ?edit to the end of any URL on the site to jump into the Editor.

Example: https://yourdomain.com/?edit

Both you (the site builder/admin) and one other Collaborator can access the CMS for free, once you have CMS hosting set up. If you need more Collaborators, it's just $6 per person per month for each additional collaborator.

On-page editing

The first, and most common, method of editing content on your site is through on-page editing.

Most content on your website is editable by default, but the site designer can lock down some elements.

It's also worth noting that any dynamic content you change (like a blog post title) will automatically update across your site.

Editing content

As we've mentioned, content can be edited directly on the page itself, without needing to log in to any back-end in order to edit text or images.

You can, however, make more advanced changes by accessing the Editor panel on the bottom of the page (which we cover more in the Managing content section below).

Editing images

Images are one of the most common website assets, and make up much of a site's design. Collaborators can edit both background images and static images, by simply hovering over the image (or other element, if a background image is being used) and clicking on the image icon on the top right.

Editing text

You can edit text right on the page, or within the Editor panel if you're working on dynamic content (like blogs). To edit content, just click into the field and start typing/editing, just like you would in Microsoft Word or Google Docs.

You can style text (with bold and italics) as well as add links. You can also convert text from one type to another, like from paragraph text to a heading.

Editing links

You can also add and edit links right on the page. If you want to add a link to a line of text (inline link), just highlight the text and click the link icon. Here you can choose to link to other pages of your site, sections of a page, or external URLs.

You can also edit the text and links in static buttons (buttons that aren't linked to dynamic collection items). Simply hover over the button and click the icon on the upper right to edit.

Saving changes

Any content that it is edited on the page will be automatically saved, but it won't appear on the live site until the next time it's published. It will instead be shown as an Unpublished Change. 

You can track any Unpublished Changes on the bottom right of the Editor Panel.

Syncing changes

If the site admin and a content editor are making changes to the site at the same time, neither will see changes until the browser refreshes. It's also important to note that if two people are editing the same content at the same time, whichever changes are published last will "win." In other words, if the designer and an editor make changes to the site's main headline, and the designer publishes at 10:13 a.m. while the editor publishes at 10:14, the editor's changes will actually go live.

Managing content

You can easily search for content in your collections by name with the search box at the top of the page. Your matching results will display almost instantly as you type.

You can also manage and filter your columns based on the fields you're using. Just click the thumbtack icon on the top right, and select which fields you want displayed.

Once displayed, you can sort and organize them as you see fit! You can sort ascending or descending for numerical fields, alphabetically for content fields, and even by color warmth with color fields.