Webflow is a visual web‑design platform that lets coaches build professional sites without hiring a developer. This guide walks you through the conceptual overview, initial setup, core workflows, advanced patterns, and the most common mistakes coaches make. Follow each step to launch a site that showcases your services, captures leads, and supports client bookings.
Webflow combines a design canvas, a CMS, and a hosting platform. Think of it as Photoshop meets WordPress, but with clean code generated behind the scenes. For coaches, the biggest advantage is the ability to create landing pages that match your brand, embed video intros, and add a client‑only portal without writing a line of code.
Design lives in the Designer tab. Here you position elements, set colors, and define breakpoints. Content lives in the CMS Collections. A “Program” collection might contain fields for title, description, price, and a downloadable PDF.
Squarespace limits you to pre‑made templates. Webflow lets you start from a blank canvas and still export clean HTML/CSS if you ever leave the platform. You also get native SEO controls like custom meta tags per page.
Getting started takes less than an hour. Follow these steps to create a functional coach site.
Go to webflow.com and sign up with Google or email. Choose the free Starter plan to explore the Designer. You can upgrade later.
Webflow offers a “Coaching” starter template (free). It includes a Hero section, Services grid, and a simple Blog. Click “Clone to your project” to begin editing.
In the Project Settings → Hosting tab, add your domain (e.g., www.coachname.com). Update the DNS A‑records to point to Webflow’s IP addresses (75.2.70.75 and 99.83.190.102). Propagation takes up to 24 hours.
| Field | Type | Example |
|---|---|---|
| Title | Plain Text | 12‑Week Leadership Sprint |
| Description | Rich Text | Weekly video calls + worksheets |
| Price | Number | 1499 |
| File | ProgramGuide.pdf | |
| Featured Image | Image | hero.jpg |
These are the daily tasks you’ll repeat when adding new services, blog posts, or client testimonials.
1. Go to the CMS → “Blog Posts”. Click “+ New Blog Post”. 2. Fill in Title, Summary, Body (Rich Text), and Featured Image. 3. Set the slug (e.g., “mindset‑habits”). 4. Click “Publish” → “Publish to Live”.
Open the page where you want the scheduler. Add an “Embed” element, paste the Calendly inline widget code, and set the width to 100%. Save and publish.
Once the basics work, add these features to increase conversions and automate workflows.
Create a “Testimonials” CMS collection with fields: Client Name, Photo, Quote, Rating. Then add a Slider component, bind each slide to the collection, and set autoplay to 5 seconds.
Webflow’s Memberships (Beta) let you protect pages. Enable Memberships in Project Settings → Memberships, create a “Member” role, and assign the “Program Resources” page to that role. Users sign up via Stripe; you can set a monthly fee (e.g., $29/mo).
When a visitor fills the “Contact Form”, a Zap can add the lead to HubSpot, send a Slack notification, and add the email to a Mailchimp list. Set the trigger to “Form Submission” and map fields accordingly.
Paste the Hotjar script into Project Settings → Custom Code → Head. This gives you visual data on where coaches click the “Book a Call” button.
Even experienced designers slip up. Below are the top five errors and how to correct them.
Webflow shows Desktop by default. Switch to Tablet, Mobile Landscape, and Mobile Portrait. Adjust font sizes (e.g., reduce H1 from 48 px to 32 px) and hide large background images that slow mobile load.
Complex scroll‑based animations increase page weight. Keep interactions under 3 per page. Test speed with PageSpeed Insights. Aim for a score above 85.
Accessibility and SEO suffer without alt attributes. Select each Image → Settings → Alt Text and write a concise description (“Coach Jane speaking at a conference”).
If you rename a page, create a redirect in Project Settings → SEO → 301 Redirects. This preserves link equity and avoids 404 errors.
Webflow auto‑saves, but you can export the site (HTML/CSS) weekly as a safety net. Go to Project Settings → Export Code → “Download”. Store the zip in a cloud drive.
No. Webflow is a visual builder. You can create a site with drag‑and‑drop, but knowing basic HTML/CSS helps with custom tweaks.
Yes. Webflow offers hosting plans that include SSL, CDN and automatic backups. The Business plan costs $36/month per site.
The Lite plan ($24/mo) allows up to 10 pages and 100 GB bandwidth, which is enough for a simple coach portfolio.
Use the Embed element and paste the code from Calendly or Acuity. Position it inside a Section for full‑width display.
Webflow’s mobile view is independent. You must adjust typography, spacing and hide elements manually for each breakpoint.
Use this guide as a checklist. Build, test, and iterate. Webflow gives coaches the freedom to design a site that feels personal and converts visitors into clients.