Edit mode

Edit mode gives content editors (e.g., copywriters, product marketers, content strategists, etc.) the power to edit site content directly inside the Designer. Edit mode ensures that site designs stay untouched, while content — such as copy, assets, and videos — is edited.

In this lesson, you’ll learn:

1. How to access edit mode
2. How to edit site content
3. How to manage page settings
4. How to publish in edit mode
5. Limitations of edit mode

How to access edit mode

Edit mode is available to all members of a Workspace except those with a commenter role.

If you have a “Can edit” role, you can access edit mode by hovering over a site's thumbnail in your Dashboard and clicking Open Designer.

If you have Designer access, you can access edit mode by going to the site’s Designer and clicking Designing in the top bar. Then, choose Editing from the dropdown. If someone is already designing in the Designer, you’ll automatically be placed in edit mode when you go into the Designer.

In edit mode, you’ll have access to the Pages panel, CMS panel, Assets panel, Settings panel, and the Site Activity log (on Enterprise sites). You also have access to comments and publishing (if you have “Can publish” toggled on).

How to edit site content

Edit mode allows multiple team members to edit static and dynamic site content at the same time. If multiple people are editing the same content at the same time, the last edits “win,” so you'll want to coordinate editing times with your teammates.

Within edit mode, you can:

• Edit text, links and images (excluding background images)
• Manage site assets
• Manage Collection items in the Collections panel
• Manage Ecommerce products, categories, and discounts

When you’re in edit mode, you’ll see a simplified version of the Designer, with fewer panel options. Learn more about the Designer’s icons.

How to control what can and cannot be edited

To allow or disallow users in Edit mode (or the Editor) from editing site elements, select the element and go to the Element settings panel > Editing permissions. Check or uncheck the box to change permissions.

Note that you won’t be able to change editing permissions for elements inside Collection lists or elements bound to CMS data.

Editing text, links, and images

Static content, like text, links, and images, are editable in edit mode. When you hover over an editable static element, a blue outline will appear. Note that you won’t be able to edit static elements in components, unless those static elements have properties attached.

To edit text (including rich text), select the text element and click the “pencil” icon on the upper-left corner of the element. Then, edit the text directly on the canvas. Additionally, you can select text on the canvas and format it (e.g., bold, italicize, wrap with span) using the menu that appears. When you select rich text, you'll have additional options for formatting your text. You can also click the “globe” icon on text elements or images to machine-translate text or alt text in another locale. Clicking the “globe” icon also changes the text or alt text back to the original language, if it has been previously translated. Note that you won’t be able to machine-translate elements in components.

To edit links, select the link element and click the “link” icon on the upper-left corner of the element. Then, you can edit the link and the link’s settings.

To replace images, select the image element and click the “image” icon on the upper-left corner of the element. To manage image settings, select the image element and click the “cog” icon on the upper-left corner of the element. Additionally, you can upload new images to the Assets panel.

Note: When you update static content within a Collection list (e.g., a button), that content will be updated across all instances in that Collection list.

How to create and manage dynamic content

You can also edit existing Collections and elements connected to Collections in edit mode.

Editing Collection items

When you have existing Collections on your site, you can create, manage, edit, delete, and import/export Collection items in edit mode. To do so, go to the CMS panel and click on the name of the Collection you want to edit.

When you’re editing a Collection item, you can preview your content on the Collection item’s page. Click the “View content on “Collection” page” and you’ll be taken to the Collection item’s page. To return to the Collection item, select a dynamic element on the page and click the “CMS” icon on the upper-left corner of the element or go back to the CMS panel. Learn more about how to edit, save, and publish Collection items.

Important: If you edit a Collection item and want to preview it, you’ll be prompted to save the item before previewing. This saves your Collection item either as a draft (if it was previously set to draft) or as staged changes (if it was previously published). If you don’t save the item before previewing, your changes will be lost.

Managing Collection items

You can view all your Collection items and their statuses in the CMS panel. If you work with a large database of content, managing these Collection items can streamline your workflow. You can do this by:

• Paging through Collection items
• Displaying Collection fields
• Searching Collection items
• Filtering Collection items
• Sorting Collection items
• Bulk-editing Collection items

Editing dynamic elements

Dynamic elements (i.e., elements connected to Collections) are also editable in edit mode. When you hover over an editable dynamic element, a purple outline will appear.

You can select editable dynamic elements and click on the “CMS” icon to go to that Collection field in the Collection item. There, you can edit the dynamic content (e.g., text, images, etc.). 

How to manage Ecommerce

If you have Ecommerce enabled on your site, you can add, edit, and publish new Ecommerce products, categories, and discounts in edit mode.

How to manage page settings

You can manage certain page settings in edit mode, including:

• Page password protection
• SEO title and meta description
• Open Graph settings

How to publish in edit mode

There are 3 ways to publish from edit mode:

• Publishing individual Collection items
• Publishing to your webflow.io staging subdomain
• Publishing to your production domain

Limitations of edit mode

In edit mode, you cannot:

• Make design changes (i.e., structural, style, or element settings changes)
• Edit the structure of main components or component instances
• Edit dynamic content on the canvas
• Adjust page names, add or edit page folders, edit page slugs, or set a homepage
• Add or edit custom code
• Add or edit custom elements
• Update CMS settings
• Create new CMS Collections