Edit mode

Edit your site’s content in edit mode in the Designer.

getting-started
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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.

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.

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:

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:

How to publish in edit mode

There are 3 ways to publish from edit mode:

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
  • Update CMS settings
  • Create new CMS Collections

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?