This guide walks you through building a structured Webflow client handoff workflow from scratch. Following these steps takes roughly three to four hours to set up the first time, and under thirty minutes to repeat for each new client project.

What You'll Build

  • A staging-to-production publish workflow with locked design layers
  • A scoped Webflow Editor setup so clients can update content without breaking layouts
  • A Loom-based video training library stored in a Notion client portal
  • A pre-handoff QA checklist that catches the most common post-launch issues
  • A repeatable folder and naming convention your whole team can follow

What You'll Need

  • A Webflow workspace plan (as of 2026, the Basic site plan supports client Editor access)
  • Loom or a similar screen recording tool for training videos
  • Notion for the client portal and documentation (free plan works)
  • Access to the client's domain registrar for DNS setup
  • A completed Webflow build ready for review

Step 1: Audit the Build Before You Touch Handoff

Run your QA pass before you set up anything client-facing. Handoff problems almost always trace back to skipped QA steps, not bad documentation.

What should your QA checklist cover?

Go through these areas in order. Check each one against a real browser, not just the Webflow Designer preview.

  • All form submissions route to the correct email or CRM integration
  • Mobile breakpoints match the approved Figma designs at 375px, 768px, and 1280px
  • All images have alt text and are set to lazy load except above-the-fold hero images
  • Open Graph tags and meta descriptions are filled for every page
  • 301 redirects from old URLs are configured in Webflow's Hosting settings
  • Custom code embeds use the correct staging API keys, not production keys

Fix every issue before moving to Step 2. Clients remember broken forms on launch day for a long time.

Step 2: Configure the Webflow Editor for Client Safety

The Webflow Editor is what your client will use after handoff. By default it exposes more controls than most clients need. Narrowing it down prevents accidental layout breaks.

Which elements should you lock?

In the Webflow Designer, select any element you do not want clients to edit. Open the Style panel and enable the lock icon available in workspace-level projects. Lock these by default:

  • Navigation components and footer
  • Section wrappers and grid containers
  • Any element using custom code or Webflow Interactions
  • Hero backgrounds and video embeds

Leave these editable in the Editor:

  • Rich text blocks inside CMS Collection pages
  • CMS fields: titles, slugs, dates, category references
  • Static text in repeated sections if it is bound to a CMS field
  • Image fields within CMS items

How do you invite the client to the Editor without giving them Designer access?

Go to your site dashboard in Webflow. Select Share. Choose Editor access only, not Designer access. Send the invite to your client's email address. The Editor role gives them a clean, simplified content interface. They will never see the Designer unless you explicitly upgrade their role.

For agencies managing ten or more client sites, the Webflow Workspace plan (as of 2026) lets you manage all Editor invites from a single dashboard without logging into each site separately.

Step 3: Set Up Staging and Production Environments

Clients should never push changes directly to a live production URL. A two-environment setup gives them a safe place to preview before publishing.

How do you configure a staging subdomain in Webflow?

Webflow does not have a native staging slot the way some platforms do. The practical workaround used by most professional teams is straightforward.

  1. Create a second site in your Webflow workspace. Name it client-staging.
  2. Connect it to a subdomain like staging.clientdomain.com using a CNAME record pointing to proxy-ssl.webflow.com.
  3. Use Webflow's site export feature or a sync tool like Udesly to keep the staging build in sync with production as needed.
  4. Document which environment is which clearly in your client portal.

For simpler projects, the built-in Webflow subdomain (yourproject.webflow.io) works as a staging preview URL during the review phase. Disable it after launch to avoid duplicate content issues with Google Search Console.

What DNS records does the client need to set?

Webflow requires two DNS records for custom domains:

# A record for root domain
@ A 75.2.70.75

# CNAME for www subdomain
www CNAME proxy-ssl.webflow.com

If the client uses Cloudflare, set the proxy status to DNS-only (grey cloud) for both records. Cloudflare's proxy can interfere with Webflow's SSL provisioning.

Step 4: Record a Training Video Library in Loom

Written documentation alone is not enough for most small business clients. A short Loom walkthrough reduces support requests by roughly 60 to 70 percent based on what agency teams consistently report after adopting this approach.

What videos should you record?

Keep each video under five minutes. Cover one task per video, not one video for everything.

  • Video 1: How to log into the Webflow Editor (90 seconds)
  • Video 2: How to edit a blog post in the CMS (3 minutes)
  • Video 3: How to add a new team member to the team page (2 minutes)
  • Video 4: How to update the homepage hero text (2 minutes)
  • Video 5: What to do if something looks broken (1 minute, with your support contact details)

Record directly inside Webflow Editor so the client sees exactly what their screen will look like. Do not record from the Designer view.

Where should you host these videos for the client?

Embed them in a Notion page dedicated to the client. Loom embeds work natively in Notion with a simple paste of the Loom share link. This keeps all training materials in one place alongside your documentation.

Step 5: Build the Client Notion Portal

A Notion portal gives the client a single URL for everything they need after handoff. It replaces the scattered email threads that otherwise pile up in the weeks after launch.

What pages should the portal include?

Structure the portal with these sections as top-level pages:

  1. Welcome and Overview: Project summary, live URL, staging URL, launch date
  2. How to Update Your Site: Embed your Loom training videos here
  3. Content Guidelines: Image sizing requirements, approved fonts, brand tone notes
  4. Technical Contacts: Who to call for hosting issues, domain issues, or urgent fixes
  5. Maintenance and Support: Your retainer options and response time SLAs

Share the Notion page as a published link. The client does not need a Notion account to view it. Update this document whenever anything changes. A stale portal is worse than no portal because it sends clients to the wrong place.

At Lenka Studio, this Notion portal structure is part of every project delivery. It removes the most common post-launch confusion before it starts.

Step 6: Run the Final Pre-Handoff Review Call

Book a 45-minute video call with the client before you hand over credentials. Do not skip this step even if the client says they are comfortable with Webflow. The call serves two purposes: it confirms the client knows how to use the Editor, and it sets clear expectations for what is and is not included in your post-launch support.

What should you cover in the review call?

Follow this order:

  1. Walk through the live site together and confirm every page matches the approved designs
  2. Share your screen and show them the Editor login process
  3. Let them drive. Watch them complete one real task, such as updating a team member's bio
  4. Walk through the Notion portal and confirm they can find the training videos
  5. Confirm who on their team has Editor access and who is responsible for content
  6. Clarify your support scope: what you cover, what costs extra, and how to reach you

Record the call with the client's permission. Add the recording to their Notion portal under the Welcome page. Clients often refer back to it months later.

Step 7: Deliver Credentials and Archive the Project Files

Credential delivery is a security step, not just an admin task. Never send passwords in plain text over email.

How should you share login credentials securely?

Use a password manager with secure sharing built in. 1Password, Bitwarden, and Dashlane all support one-time share links that expire after the recipient views them. Send the Webflow Editor invite separately from the Notion portal link. Keep these as distinct access points so if one is compromised the other remains safe.

What project files should you archive for yourself?

Before closing out the project internally, archive these:

  • A full Webflow site export (HTML, CSS, JS) as a point-in-time backup
  • The source Figma file with all design decisions documented
  • A copy of all custom code embeds stored in a private GitHub repository
  • The signed project brief and any scope change approvals

Store these in a folder structure like /clients/clientname/project-name/YYYY-MM/. Consistent naming saves hours when a client returns eighteen months later with a change request.

Frequently Asked Questions

What if the client accidentally breaks the site in the Webflow Editor?

Webflow automatically saves a version history for CMS content. Go to the site dashboard, open the CMS Collection, and restore a previous version. For static page edits made in the Editor, Webflow also saves drafts before publishing. Coach clients to always preview before they publish, and remind them in your training video.

Does this workflow work for Webflow sites with e-commerce enabled?

Yes. The Editor access and locking approach works the same way for e-commerce sites. Add a training video specifically for adding new products and updating inventory. E-commerce clients tend to need more hands-on training than content-only sites.

Generic Webflow tutorials show how the platform works in general. Your training videos show how their specific site works, with their actual content and their actual CMS fields. Clients engage with the second type far more. Sending a generic link often results in the client never watching it.

What if the client wants to make design changes after handoff?

Design changes outside the agreed scope should be handled as a new project or retainer task. Document this clearly in your support section of the Notion portal. A locked Designer access means they physically cannot change layouts on their own, which protects both of you.

How long does it take to set up this workflow for a new client?

The first time you build this system takes three to four hours. Once your Notion portal template and Loom script are ready, repeat setups take closer to ninety minutes per project. Most agencies recover that time within two weeks from reduced support requests.

Next Steps

Once your handoff workflow is running, the natural next investment is a retainer structure that keeps the client relationship active after launch. Maintenance retainers, content update packages, and analytics reporting are all easier to sell when the client already trusts your process.

If you want to go further, review your broader marketing and content systems too. A well-structured social media content calendar can help your clients stay consistent with their content after you hand the site over, which means their site actually gets used and they see results from the investment.

If you are building out a client delivery process for your agency and want a second opinion on your workflow, the team at Lenka Studio is happy to talk through what is working and where the gaps are. Get in touch and we can take a look together.