What are some recommended methods for setting up a staging environment in Webflow that allows for testing website changes before going live?
- Use Webflow’s free webflow.io subdomain to publish and test changes without affecting your live site.
- Alternatively, duplicate your project for staging, test changes, then manually sync to the live version.
- Create a
/stagingfolder within your site for test pages, optionally password-protected. - Set up a custom subdomain like staging.yoursite.com pointing to Webflow for branded staging access.
- Use CMS draft and preview tools for content-only updates.
- Apply page or site-wide password protection to control access to staging versions.
To safely test changes before publishing your live site, you’ll need a staging environment in Webflow. Webflow doesn’t offer traditional staging environments, but several reliable methods can serve the same purpose.
1. Use Webflow's Built-In Staging Domain
Webflow automatically creates a staging version of your site using its webflow.io subdomain.
- Each project includes a free staging domain, like
yourproject.webflow.io. - Publish changes to this staging domain for safe previewing before pushing to your custom/live domain.
- Go to Publish → Select only the webflow.io domain (uncheck your custom domain).
- Test pages, animations, and responsiveness without affecting the live site.
2. Duplicate the Webflow Project
Create a separate copy of the project to use as a staging environment.
- In your Dashboard, click the three dots (⋮) → Duplicate next to the project.
- Give the duplicate project a clear name like "Project Name - Staging".
- Publish this version to its own webflow.io subdomain.
- Make changes and test without impacting the original project.
- Once tested, manually replicate approved changes to the live project.
3. Use Folder-Based Staging Pages
Keep staging content inside a protected folder on the same project.
- Create a folder like
/stagingin your page structure. - Build and test new versions of pages within this section.
- Optionally set page passwords under Page Settings to restrict public access.
- Once tested, move approved content to the live structure or replace existing pages.
4. Use Custom Domains Strategically
Set up an alternate subdomain (like staging.yoursite.com) pointing to Webflow’s staging environment.
- In your domain DNS, configure a subdomain to Webflow’s A records (a) 75.2.70.75 and (b) 99.83.190.102.
- Connect this subdomain inside Project Settings → Hosting → Custom Domains.
- Use DNS TTL settings to manage propagation delays.
- This allows clients or stakeholders to test via a branded URL separate from the live site.
5. Use Webflow’s Versioning Tools
If working with a CMS, use Webflow’s CMS versioning and draft preview features.
- For CMS content updates, use draft mode and preview inside the Designer.
- You can’t stage structural changes (e.g., layout or design) this way, but it helps for content-only updates.
6. Limit Access with Password Protection
Enable password protection on your staging version to control who can access it.
- In Page Settings, set a page password for individual test pages.
- Alternatively, under Project Settings → Hosting, apply site-wide password protection for the webflow.io domain.
Summary
To set up a staging environment in Webflow, most users rely on the webflow.io subdomain or create a duplicate project. You can also use staging folders, set up custom subdomains, or combine these methods with password protection. Choose the approach that best fits your workflow and collaboration needs.
