What are some recommended methods for setting up a staging environment in Webflow that allows for testing website changes before going live?
TL;DR
- Preview changes using Webflow’s default
.webflow.iostaging domain without affecting the live site. - Duplicate your project for sandbox testing of redesigns and features.
- Use Draft/Hidden settings to keep in-progress content off the live site.
- Preview individual pages via staging URLs for folder-level testing.
- Set up a custom staging domain (e.g., staging.yoursite.com) with DNS pointing to Webflow IPs for isolated testing.
To test changes before publishing on Webflow, you need a staging environment that mirrors your live site. Webflow doesn’t have native staging like Git branches, but there are multiple effective methods.
1. Use Webflow's Default Staging Domain
- Preview your changes by publishing to Webflow’s default staging URL (e.g.,
yourproject.webflow.io). - Live site changes are unaffected, so you can test functionality, design, and performance.
- This is ideal for most use cases unless you have complex logic that only works on the custom domain.
2. Duplicate Your Webflow Project
- Go to your Webflow Dashboard, click the three dots on your project, and choose Duplicate.
- The duplicated project acts as a sandbox, where you can:
- Safely redesign pages
- Test integrations and animations
- Send previews to stakeholders
- Note: Webflow counts this as an additional hosted project if you publish it, which may incur hosting fees.
3. Use “Draft” and “Hidden” Features
- Set pages or CMS items to “Draft” status to keep them off the live site.
- Use “Password Protection” or remove them from navigation to prevent public access.
- This allows collaborative testing without impacting the live experience.
4. Use Folder-Level Publishing (For Pages, Not Site-Wide)
- You can’t publish at the page level to custom domains, but you can preview these pages individually at the
.webflow.iostaging URL. - Example: test a new About page at
yourproject.webflow.io/about-new.
5. Separate Live & Staging Domains via Custom Domain Setup
- If you want advanced staging, point a separate custom domain (e.g.,
staging.yoursite.com) to the Webflow staging environment. - In Webflow, go to Project Settings > Hosting, and add the staging subdomain.
- Point staging DNS records to Webflow's IPs: (a) 75.2.70.75, (b) 99.83.190.102.
- Publish to only the staging domain to isolate it from the live site.
Summary
To create a Webflow staging environment, use the built-in .webflow.io domain, duplicate projects, hide draft content, or set up a separate custom domain for staging. Each method supports safe testing prior to publishing live.