Intro to the Legacy Editor

Updated

Learn how the legacy Editor lets you update and add content in a simplified interface.

Good to know

The legacy Editor is being deprecated and will no longer be available by the end of 2025. In its place, we're transitioning to the edit mode — a newer content editing experience that enables more collaboration and features directly within Webflow’s core platform. As part of this transition, legacy Editor users will be replaced by seats and whitelabeling will no longer be available. You can review our FAQ to learn more.

 

The legacy Editor is a simplified interface that lets teammates update and add content to a site. Unlike Design mode, which lets you build and design your website, the legacy Editor only allows the content to be edited (e.g., edit text or replace an image).

Note

Localization features are not supported in the legacy Editor.

Accessing the legacy Editor

You can access the Webflow Editor after publishing your site (either to the http://webflow.io staging subdomain, custom staging domain, or a custom domain). It allows you to edit the content on your site directly on the page or manage pages and content through the legacy Editor panel.

Access the legacy Editor through Webflow’s interface

You can access the legacy Editor from:

  • The Site menu in the Dashboard
  • The top toolbar in the Site settings
  • The menu in Design mode

Access the legacy Editor from the live site

Teammates can access the legacy Editor for their website by adding /?edit to the end of their website URL in the browser address bar (e.g., http://yourwebsite.com/?edit ). Once they log in, they can access their website in the legacy Editor.

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 the legacy Editor.

Let your teammates working in the legacy Editor know that they will need to set their browser to accept cookies from all third parties to use the legacy Editor — otherwise, they may see an error message when trying to log in to the legacy Editor. Learn more about troubleshooting legacy Editor login errors.

Supported web browsers

The legacy Editor is supported on the last 3 major versions of Chrome, Edge, Firefox, and Safari.

The degree of browser support depends upon features used (e.g., filter has partial support in Edge). For features that have limited support in some browsers, additional details can be found in their associated articles:

Webflow does not support Internet Explorer. While sites made in Webflow will continue to support all industry standard features supported in modern web browsers, we cannot guarantee that sites will function correctly in Internet Explorer. Learn more about sunsetting Internet Explorer support.

Pro tip

You can determine your browser and operating system version with What’s My Browser.

Switch between the legacy Editor and the live site

When you open the legacy Editor, you'll be able to explore the site in preview mode or "live site" mode. To switch to the legacy Editor, 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 the legacy Editor login errors

If you, your Workspace members, or your teammates working in the legacy Editor see an error message when trying to log into the legacy Editor, try one of the following fixes:

Note

If you have custom code on your site, the custom code may affect the legacy Editor. This happens because the legacy Editor renders over the published site. Try removing or disabling your custom code.

Multi-user collaboration

The legacy Editor allows multiple team members to edit static and dynamic site content at the same time. 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. The legacy Editor also provides a Site activity log so you can see who edited your site, and what edits they made, before publishing your site.

Similarly to the legacy Editor, you can collaborate with team members in Design mode, if you want to edit your site’s design. Learn more about collaboration in the Design mode.

Anatomy of the legacy Editor toolbar

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

The legacy Editor toolbar features the following tabs and icons:

Menu - Use this menu to go to the Dashboard, your Site Settings, or Design mode. This button features the Webflow logo.

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 Design mode. 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 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 legacy Editor.

Log out (icon) - logs you out of the legacy 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 legacy Editor. When you make a change to your site in the legacy Editor, you will see either a “Saving…” or “Saved” status.

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 teammate or Workspace member made them.

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

On-page editing

You can edit right on the page with the legacy Editor. As you hover over various elements, a “pencil” icon or “picture” icon will appear to the upper right of editable elements. To edit any of these elements, simply click the icon.

Note

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

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.

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, then click the "picture" icon. This will allow you to select and upload a new image from your computer.

Note

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

Editing buttons

To edit a button element, hover your cursor over the button and click on the Settings "cog" 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 - enables you to change the button text

Managing page settings

From within the Pages Panel in the legacy 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 legacy Editor

To access the settings of a page:

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

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

Note

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 site, you can access them in the legacy 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.

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. 

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 the 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

Learn more about creating and publishing Collection items.

You can view the Collection page for that item by clicking the "page" 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. If you work with a large database of content, managing your Collection items can be a lifesaver when determining what to edit. You can do this by: 

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'll want to view them, and make sure they're saved and ready to be published before clicking Publish.

Viewing changes on the live site

While working in the legacy Editor, the legacy Editor panel covers most of your website. To collapse the legacy 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 usually would, and make or view changes to any page.

Publishing

The changes made in the legacy 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.

Important

When you publish from the legacy Editor, your site will publish to both the http://webflow.io  staging domain (or your custom staging domain) and custom domain. To avoid this, publish from Design mode or site settings.

Accessing form submissions

If you have any forms in your site, the legacy 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.

Legacy Editor settings for elements

By default, you, Workspace members, and teammates working in the legacy Editor can edit all content on the live site using the legacy Editor, but you can make elements uneditable for teammates if you'd like.

  1. Open the site in Design mode
  2. Select the element you want to make uneditable
  3. Go to Element settings (D)
  4. Uncheck “Collaborators can edit this element”

You can also toggle teammates working in the legacy Editor on a selected element using Command + Shift + L (on Mac) or Control + Shift + L (on Windows).

Important

CMS elements are always editable in the legacy Editor.

Good to know

The ability to manage User Accounts users and settings is not surfaced in the legacy Editor. Instead, you will need to use Design mode or the API.

Permissions for teammates working in the legacy Editor

If your Workspace site has a CMS, Business, or Ecommerce site plan, you can invite teammates to collaborate in the legacy Editor. Along with opening the site in the legacy Editor, editing content, and staging changes, teammates can add CMS content and edit page settings.

Teammates working in the legacy Editor also have different publishing permissions than Workspace members. Learn more about publishing permissions.