Work collaboratively with your team in the Webflow Designer and take turns editing content and building out styles and layouts with an easy handover process for full control of the site.
If you’re part of a team, you and your teammates can work together in the Webflow Designer. Multiple teammates can edit content while one person designs and builds out the site structure. To keep the design process fluid, you can also hand off design control between your teammates and see in real-time where other people are working within your project.
Note: These features are available for full members of team account plans only. Collaborators with Editor access only are not able to enter the Designer.
In this lesson you’ll learn how to:
Collaboration inside the Designer is a feature available for full members of team account plans. To start working collaboratively on a project:
When you enter the Designer and nobody else from your team is in the project, you’ll be in Design mode. Design mode gives you full control to add classes, style elements, build layouts, create interactions and everything else you need to fully build and launch your site.
When you’re in Design mode, as soon as other people open the same project, you’ll see their avatars or initials added to the upper right of the Designer, which indicates additional team members are editing content in your project.
Alternatively, if you open your project in the Designer and another teammate of yours is also in the Designer already in Design mode, you’ll be placed in Edit mode.
Edit mode allows you to edit content in the Designer while another teammate builds and designs the structure of your site in Design mode. Multiple people can be in the Designer at the same time, but only one person can use Design mode, and the remainder of your team can use Edit mode to add or edit content.
Your editing status appears in the upper right corner of the Designer alongside avatars of your teammates who are working in the project, too.
Teammates in Edit mode can work with the following content:
Teammates in Edit mode will not be able to:
As you work in Edit mode, your teammates’ content updates in other Edit mode sessions will sync live to the canvas in your session as well.
Structural and design changes that your teammate in Design mode makes (e.g., adding and removing elements, changing layouts, tweaking styles) will not automatically sync live.
When the site design and/or structure has changed, you’ll see a yellow indicator at the top of the Designer indicating that your Design mode teammate has made changes. To incorporate these changes and continue working with the most up-to-date version of the site, save your work and refresh the project to continue working.
Oftentimes, you or your teammates will need to move from Edit mode to Design mode to work on the structure of your site’s design. To switch from Edit mode to Design mode, you can request control from your teammate in Design mode.
To request design control and enter Design mode:
After you’ve pressed the request button, the person in Design mode has 30 seconds to respond to your request for design control. The person in Design mode can choose to either keep design control or hand over control to give you full Designer access in Design mode. Once your design control request is accepted, your site will refresh to load you into Design mode, and the teammate who granted you design access will be switched to Edit mode.
If the person in Design mode doesn’t respond within the 30 second time limit, the person who requested design control will automatically enter Design mode and have full access to the Designer. Meanwhile, your project automatically saves and syncs between all people in the Designer — whether they are in Edit mode or Design mode.
If the person in Design mode declines your request, you’ll be notified.
At the top of the Designer, you can see avatars indicating which of your teammates are in the project alongside you. Hover over an avatar to display full names and what they’re doing in the project (designing or editing) as well as what page they’re working on. If a number appears, click on it to reveal which pages your teammates are working on. You can also click on the teammate directly to navigate to the element they’re touching.
If you are the only person working on a page, your teammates’ avatars switch to a number (e.g., 2, 3, 4, and so on) to indicate how many other teammates are in your project, but on different pages.
If you click into a page where other teammates are working alongside you on the same page, the number indicator will change to individual avatars of each of your teammates to let you know you are all working on the same page together.
When you click into the numbers or avatars, you’ll see a dropdown indicating exactly which pages your teammates are working on. You can click on the teammate directly to navigate to where they’re working in the project.
And there you have it: team collaboration inside the Designer. Build all the things together!
Something went wrong while submitting the form. Please contact email@example.com