Cooperate in the Webflow Designer

If you belong to a team, you and your colleagues can collaborate within the Webflow Designer. Several team members can modify content while one individual designs and constructs the site’s structure. To maintain a seamless design process, you can also transfer design authority among your colleagues and see in real-time where others are working within your site.

Please observe: Workspace owners and administrators can oversee the roles of team members, defining their admin, design, and publishing permissions. For further details regarding roles and permissions, kindly refer to our Workspace roles and permissions article.

This lesson will cover:

1. Strategies for working in design mode
2. Approaches to operate in edit mode
3. Methods for requesting design control
4. Ways to track other team members on the site
5. Procedures to engage in comment mode

Strategies for working in design mode

All participants within a Workspace have the capability to engage in collaboration within the Designer. To reach your site:

1. Access the Dashboard
2. Hover over the Workspaces menu at the top left of the Dashboard and select your Workspace name
3. Pick the desired site to open in the Designer

Upon entering the Designer and if no other team member is present on the site, you will automatically be placed in design mode (provided you do not have a Can edit or Can comment role). Design mode offers complete control for adding classes, styling elements, creating layouts, establishing interactions, and all other essentials required to construct and launch your site.

While in design mode, as soon as other individuals access the same site, their avatars or initials will appear in the top right corner of the Designer, indicating that additional team members are making edits in your site’s content.

Conversely, if you access your site in the Designer while a colleague is already in design mode, you will shift to edit mode.

Approaches to operate in edit mode

Edit mode grants you the ability to modify content in the Designer while another colleague is focusing on building and designing the site’s structure in design mode. Multiple individuals can operate in the Designer simultaneously, with only one person utilizing design mode while the rest of the team utilizes edit mode to add or revise content.

Your editing status is displayed in the top right corner of the Designer alongside the avatars of colleagues who are active on the site.

Colleagues in edit mode are able to:

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

Colleagues in Edit mode cannot:

• Implement design alterations (e.g., structural, style, or element settings changes)
• Modify main components or component instances
• Revise dynamic content on the canvas
• Adjust page names, include or edit page folders, revise page slugs, or set a homepage
• Include or update custom code
• Update CMS settings or form new CMS collections

For further insights on edit mode, refer to the additional resources.

Techniques for incorporating design alterations

While operating in edit mode, the content edits made by your colleagues in other edit mode sessions will synchronize live to the canvas in your own session.

Structural and design changes executed by your colleague in design mode (e.g., adding and removing elements, adjusting layouts, fine-tuning styles) will not synchronize automatically.

Following structural or design alterations by your colleague, a yellow indicator will be displayed at the top of the Designer to notify you that your design mode colleague has made modifications. To apply these changes and continue working with the most current version of the site, save your work and refresh the site before proceeding.

Worth noting: Edits made in edit mode will synchronize live across all active Designer sessions.

Approaches to request design control

Often, either you or your colleagues may need to transition from edit mode to design mode to concentrate on enhancing the structure of your site’s design. To transition from edit mode to design mode, you can request control from your colleague in design mode.

Please keep in mind: Only colleagues with Site administrator, Can design, and Can design (limited) roles are eligible to seek design control.

For requesting design control and accessing design mode, follow these steps:

1. Select the mode status dropdown adjacent to your colleagues’ avatars (the mode status indicates that you are editing in the Designer)
2. Click Request design control 
3. Hit Request to inform the individual in design mode that you wish to acquire design control

Once the request is initiated, the person in design mode has 30 seconds to respond to your design control request. They can opt to retain design control or transfer it to grant you full Designer access in design mode. After your design control request is accepted, your site will refresh to place you in design mode, while the colleague who granted you design access will shift to edit mode.

In case the individual in design mode fails to respond within the 30-second timeframe, the person requesting design control will automatically transition to design mode with complete Designer access. Simultaneously, your site will automatically save and synchronize between all individuals in the Designer, whether they are in edit mode or design mode.

If the person in design mode declines your request, you will receive a notification.

If you are in edit mode and have submitted a design control request, your colleague in design mode has the option to decline your request.

Worth knowing: After 2 minutes of inactivity in the Designer, the individual in design mode will be automatically switched to edit mode. Should another colleague request design control, the original individual in design mode will be notified once the request is approved. If no one else assumes design control during the period of inactivity, the individual initially in design mode will resume design mode once their activity in the Designer resumes.

Approaches to track other teammates on the site

At the top of the Designer interface, the avatars displayed indicate which colleagues are present on the site along with you. Hover over an avatar to reveal full names and their respective actions on the site (designing or editing), as well as the specific page they are engaged with. Should a number appear, clicking on it will unveil which pages your colleagues are currently navigating. Additionally, you can directly click on a colleague’s avatar to be redirected to the specific element they have selected.

Worth knowing: You can update your personal avatar (profile picture) in your account settings.

Displayed at the top of the Designer, you can identify the team members working within the Designer in conjunction with you, along with the pages they are actively modifying.

Should you be the sole contributor on a page, your teammates’ avatars will switch to a number (e.g., 2, 3, 4, etc.) to signify the presence of additional teammates on different pages within the site.

Upon entering a page where other colleagues are also making modifications, the number indicator will transition to individual avatars of each of your colleagues, notifying you that you are collectively enhancing the same page. 

Upon clicking the numbers or avatars, a dropdown will indicate precisely which pages your colleagues are working on. You can directly click on a colleague to navigate to their specific location within the site.

Approaches to operate in comment mode

Comment mode enables you to exchange, review, and resolve feedback directly on the Designer canvas, streamlining your team’s communication and design workflow. Comment mode is provided across all Workspace plans for all members, including those with guest roles.

By selecting the “comment” icon in the top toolbar, you can effortlessly enter comment mode. From there, you can click on any element within the canvas to append a comment or review and respond to existing comments within the Comment panel. To learn more about comments, refer to the respective resources.

And that’s how you collaborate effectively within the Designer. Let’s build amazing things together!