Page bifurcation

Reminder: This functionality is exclusively accessible to Webflow Enterprise patrons and Business Partners, therefore kindly reach out to our Enterprise team if you wish to employ page bifurcation on your website.

Page bifurcation enables multiple creators to collaborate on different pages simultaneously, facilitating rapid development and deployment of updates for sizeable teams. When you bifurcate a page, you create a “snapshot” of one of the pages on your site, allowing you to experiment with new design alterations without impacting the original. Once you are satisfied with your modifications, you can integrate your page branch into the primary site to replace the original page.

This tutorial will cover:

1. Functionality of page bifurcation
2. Process for bifurcating a page
3. Techniques for editing a page branch
4. Procedure for merging a page branch
5. Steps to delete a page branch
6. Method for staging a page branch

Functionality of page bifurcation

With page bifurcation, you have the ability to refine the design of a specific page while other designers work on separate page branches or the primary site. After completing your design revisions, you can blend your page branch to overwrite the original page design.

Reminder: Any alterations made to the content of the original page during bifurcation will be forfeited post-merge. Changes to components, categories, or interactions will remain intact. To prevent losing modifications, Webflow issues a cautionary message when attempting to modify a page on the primary site that has an existing branch.

Modifications on the main site will not impact page branches unless you explicitly choose to integrate updated categories, statuses, HTML tags, components, parameters, or interactions from the primary site into your branch. Adjustments made on page branches will not affect the main site until the branch is reintegrated into the primary site.

Reminder: Bifurcated pages are not counted against the fixed page limit.

Reminder: Page bifurcation is compatible with Localization. Utilize the Locale view drop-down to navigate to the locale(s) for which you want to adapt your site.

Roles and authorizations

Any user with Designer access (e.g., Site administrator, Can design, Can design (restricted)) can create and blend branches. More information regarding site-level roles and permissions can be found.

Design management

You do not require design control to bifurcate a page — effectively, a designer can collaborate with design control on the primary site while other designers work on page branches. However, you will need to possess or request design control to merge a page branch, alternatively, you can request your colleague with design control to merge your branch on your behalf.

Publishing

Complete-site publication is not impeded by page bifurcation. Any user with design control can publish the primary site without publishing the branches — your branches serve as a secured workspace for development. To publish your page branch, you must initially merge it into the main site.

Transfers and duplication

Page branches will not be transferred when transferring your site to another user or Workspace. Furthermore, page branches will not be duplicated during site duplication.

Process for bifurcating a page

The types of site pages eligible for branching include:

• Stable pages (inclusive of Utility pages, User pages, and Ecommerce pages)
• Draft pages
• Dynamic pages (encompassing Ecommerce and Collection pages)
• New pages

To create a page branch for a new page:

1. Access the Pages panel
2. Click on the “Create new page” icon
3. Select Create new page as a branch

To create a page branch from an existing page:

1. Access the Pages panel
2. Hover over the page you intend to branch
3. Click on the “Create page branch” icon

The page branch will open in the Designer, enabling you to commence designing. Your colleagues will observe your new page branch upon refreshing the Designer.

How to modify a page branch

Alterations to a page branch are comparable to modifying a page, with a few distinctions. Only one designer can work on a page branch at a time. If your colleague wishes to work on your page branch, you must navigate to a different page first.

Additionally, only one branch per page is permissible at a time. To establish a new branch for a page, any existing branch must be merged or deleted initially.

Tasks allowed on a page branch

Elements

• Incorporate, reposition, and eliminate static elements
• Stylize elements utilizing current classes, new classes, and combination classes

Classes

• Utilize and adjust existing classes
• Manage class conflicts during updating or merging a branch
• Create new classes and combination classes
• Update classes on the page branch to reflect class amendments made on the main site

Components

• Edit existing primary components
• Utilize existing components, override component attributes, and unlink components
• Update components on the page branch in alignment with component alterations made on the main site

CMS

• Branch CMS Collection pages
• Establish connections and detachments of CMS content from dynamic elements (e.g., Collection lists)

Interactions

• Generate new interactions using prebuilt animations
• Develop custom animations
• Utilize existing custom animations

Page configurations

Adjust SEO settings, Open Graph settings, Site search settings, and custom code

Tasks prohibited on a page branch

Variables

• Alter variables

Classes

• Create or modify color palettes

Components

• Create new components or component attributes

CMS

• Create or modify CMS Collections or Collection items

Interactions

• Modify existing interactions or custom animations

Page configurations

• Modify page title, page URL, file structure, access control settings, and homepage status

Integration of classes, statuses, HTML tags, components, variables, and interactions with page bifurcation

If a class, status, HTML tag, component, variable, or interaction is utilized on both the main site and the page branch, and is altered on the main site (but unchanged on the page branch), the effects of these alterations will materialize on the page post-merging your branch — they will not immediately reflect on the branch.

However, you can examine for updates to classes, statuses, HTML tags, components, variables, and interactions on the main site and draw them into your branch whenever needed. It is recommended to regularly import these updates into your page branch to ensure you’re designing with the latest classes, components, variables, and interactions from the main site.

If any classes, statuses, HTML tags, or primary components were modified on both the main site and the branch during page bifurcation, you must resolve those conflicts before updating your branch. Learn the process to address conflicts prior to updating your branch.

Essential: You can copy and paste content between pages and branches. Nonetheless, if you paste an element into a branch with modified classes from the main site, the branch’s class versions will take precedence. The classes of the main site will remain unaffected.

Note: If you establish a class on a page branch that shares the same denomination as a class created on the main site, the class name will be incremented.Upon merging your branch, for example, when you create a “Button” class branch on a page, and another person creates a “Button” class on the main site, your “Button” class will be changed to “Button 2” once the merge is completed.

Ways to make changes to classes, states, HTML tags, components, variables, and interactions in a page branch

To inspect updates for classes, components, variables, and interactions on the main site:

1. Proceed to the top of the Designer where the branched page is listed
2. Click the dropdown arrow
3. Press Check for updates

If any updates have been applied to classes, components, variables, or interactions on the main site, a modal window will appear to prompt you to pull the updates from the main site. To merge updates from the main site into your branch, press Pull updates. Then confirm the branch update by clicking Okay on the modal window.

If you prefer, you can delay pulling updates by selecting Update later on the modal window.

Essential note: In cases where classes, states, HTML tags, or main components were modified on both the main site and the branch while the page was branched, you’ll need to address these conflicts before proceeding with the update of your branch. Refer to conflict resolution before updating your branch.

If no updates are found for classes, components, variables, or interactions on the main site during the examination, a modal window will inform you that there are no updates to integrate into your branch. This implies you are already working with the latest designs from the main site. You can close the modal window by clicking Okay.

Dealing with conflicts before updating your branch

In scenarios where classes, states (e.g., Hover, Pressed), HTML tags (e.g., All H1 Headings, Body (All pages)), or main components have been altered on both the main site and the page branch while the page was branched, it’s necessary to resolve these conflicts before updating your branch.

To address conflicts:

1. Navigate to the top of the Designer where the branched page is listed
2. Click the dropdown arrow
3. Press Check for updates
4. Select the preferred class or HTML tag version (Main site or Branch) from the dropdown beside each conflict
5. Click Resolve conflicts and update

CMS management in page branching

Page branches and the main site share the same CMS, allowing any changes made to the CMS during a page branch to reflect on the specific page branch. For instance, if a Collection list initially includes 4 items when the page branch is created, and another item is later added to the Collection on the main site, the CMS will indicate 5 items in the page branch’s Collection list.

Branch authority

If a designer departs from a branch, any other Workspace member with design privileges can assume control of the branch for editing, merging, or deletion. For example, if designer A exits the branch, designer B can take over provided designer A is not actively working on the branch concurrently.

Collaboration using a read-only link

After completing your design, you can distribute a read-only link to fellow team members before merging the page branch. Learn further about sharing a read-only link.

Site Activity tracking

You have the option to monitor branch activities on specific page branches via the Site Activity log. Furthermore, clicking the “list” symbol adjacent to Branch merged activity enables you to view alterations that were integrated into the main site from the branch. Explore more about the Site Activity log.

Merging a page branch

Once you finalize your design in the page branch, you can integrate it back into the main site. Your team members will see your combined page branch upon refreshing the Designer. Note that merging the page branch will replace the content of the original page on the main site; hence, ensure satisfaction with your design before merging.

Important: Content modifications made to the original main site page while branched will be overwritten after merging the page branch. However, component, class, or interaction alterations will persist. We advise against altering the original main site page if a page branch exists.

If any classes, states, HTML tags, or main components were modified both on the main site and the branch during the page branching, conflict resolution is necessary before proceeding with the merge of your branch. Learn how to resolve conflicts before merging your branch.

There exist two methods to combine the changes from your page branch into the original page:

• Merge your modifications from the page branch
• Merge your modifications from the Pages panel

Prior to merging your branch, you can review all changes made on that branch in the merge summary. For a detailed overview of these modifications, you can click on a row in the merge summary to delve deeper into the changes within the Site Activity log.

To merge your modifications from the page branch:

1. If you lack design control, request full design control
2. Navigate to the top of the Designer where the branched page is listed
3. Click the dropdown arrow
4. Press Merge with site
5. Review the modifications in the merge summary
6. Click Merge branch

To merge your modifications from the Pages panel:

1. Navigate to the Pages panel
2. Hover over the page branch
3. Click the icon for “Merge this branch with your site” on the right of the page branch name
4. Review the modifications in the merge summary
5. Click Merge branch in the subsequent modal window

Pro hint: In cases where you merge a page branch but wish to access the original page’s design or completely restore it to your site, you have a couple of options. You can preview the original page’s design in a site backup by hitting the backup’s “Preview” button and then copy-pasting the design into your present site. Another option is to fully restore the original page (along with the entire site) from a site backup by selecting “Restore.” Page branches can also be restored via site backups. Note that restoring your site from a backup impacts certain site settings and data. Understand the process of previewing or restoring a site backup and the implications of restoring a site backup.

Resolving conflicts before merging your branch

If you encounter classes, conditions (e.g., Hover, Pressed), HTML tags (e.g., All H1 Headings, Body (All pages)), or primary components that have been modified on the main site and the page branch during branching, you will need to address those conflicts prior to merging your branch.

To address conflicts:

1. Navigate to the page’s name in the Designer’s top section
2. Click the drop-down arrow
3. Choose Merge with site
4. Examine changes in the merge summary
5. Select the desired version of the class or HTML tag you want to use (e.g., Main site or Branch) from the drop-down menu next to each conflict
6. Click Resolve conflicts and merge

Deleting a page branch

If you opt to retain the original page design or initiate a new page branch, you have the option to delete a page branch. To delete a page branch:

1. Access the Pages panel and locate the page branch you wish to delete
2. Go to the page’s name in the Designer’s top section
3. Click the drop-down arrow
4. Choose Delete branch
5. Confirm by selecting Delete branch in the subsequent modal window

If you accidentally delete a page branch but desire to view the branch’s design or completely restore the branch to your site, you have several alternatives. You can either preview the page branch’s design in a site backup by clicking the backup’s “Preview” button or fully restore the page branch from a site backup by clicking “Restore.” Restoring a site backup will revert both the main site and page branches to their state at the designated timestamp.

Important: Please note that restoring your site from a backup will impact certain site settings and data. Learn how to preview or restore a site backup and the consequences of restoring a site backup.

Staging a page branch

Prior to merging it into the main site, you can publish your page branch to its dedicated staging subdomain (distinct from your primary Webflow staging subdomain or custom staging domain). This enables you and your collaborators to test and review branches on a live site — assessing custom code, performance, integrations, and responsiveness across various devices. The branch staging subdomain link can also be shared with individuals, regardless of whether they possess a Webflow account (e.g., for review by stakeholders or testing by quality assurance professionals). Private staging access necessitates authentication for viewing staged branches.

The URL of your staged page branch includes a snapshot of the complete site — facilitating the observation of how your branch modifications influence the remainder of the main site. In instances of class conflicts between your page branch and the main site, the branch changes supersede.

It is feasible to publish a single branch to a specific staging URL only — with a distinct staging URL auto-generated for every page branch created (e.g., having 10 page branches results in 10 staging URLs). Merging or deleting a staged branch will lead to the URL being unpublished and removed.

Note: To stage page branches, initial site publication is necessary. Furthermore, only Collection items that are created and published during staging will be included in the page branch URL.

To stage your page branch:

1. Access your page branch
2. Click Stage branch in the Designer’s top right corner
3. Proceed with Publish branch

Subsequently, visit the staging URL to inspect your branch on the main site. Kindly note that moving a branch from branch staging to production for publication is not feasible, as branch staging exclusively serves testing and review purposes. Once satisfied with your branch’s design/changes, proceed to merge the branch into the main site and subsequently publish the alterations to production.

Note: Any member within your Workspace (excluding those with the commenter or Can comment roles) can stage a page branch.