How to Build and Publish Your First Webflow Site in 2026
Webflow publishes a responsive website from a visual editor that outputs real HTML, CSS, and JavaScript. The path is: create a project, build sections with divs and the style panel, bind a CMS collection, then publish to a subdomain or a custom domain on a paid site plan.
It is not a drag-and-drop page builder in the Wix sense. The learning curve is real, and it exists because Webflow gives you CSS control rather than template choices.
What Is Webflow and Who Is It For?
Webflow is a visual web development tool. You place elements on a canvas, and every change writes real CSS properties — flexbox, grid, spacing, typography. Nothing is abstracted into a proprietary format at runtime.
That makes it a good fit for designers who know CSS concepts and want production-grade output without a developer. It is a bad fit for someone who wants to pick a theme and type text.
How Do I Build the Layout Without Fighting It?
Use the box model deliberately. Every element is a box, and every container controls its children.
- Add a Section for each page band. Sections give full-width backgrounds.
- Inside, add a Container to constrain content width — 940px or 1200px are common.
- Use Grid for card layouts and Flex for rows. Mixing both in one band creates the alignment bugs people complain about.
- Style the class, not the element. Renaming a class updates every instance; styling an element creates one-off overrides you will hunt down later.
Set breakpoints in this order: desktop, tablet, mobile landscape, mobile portrait. Webflow inherits down, so desktop changes bleed into tablet unless you override.
How Do I Add a CMS Collection?
Open the CMS panel, create a collection (say, Blog Posts), and add fields: Name, Slug, Rich Text body, Image, and a Reference to an Author collection.
Then on a page, add a Collection List, bind it to the collection, and style the first item — the rest inherit. Add a Collection Page so each item gets its own URL.
Collection limits matter: the CMS site plan caps items at 2,000 per collection, and 10,000 total across the site. That is fine for a blog and a hard stop for a product catalog.
How Do I Publish and Connect a Domain?
Click Publish and pick a webflow.io subdomain — that is free and works immediately for testing.
For a custom domain, you need a paid site plan. Add the domain under Project Settings → Publishing, then create the A and CNAME records Webflow shows you. SSL provisions automatically, usually within an hour.
What Does Webflow Cost in 2026?
The Site plan (Basic) is $23 per month billed annually and includes 150 pages, 2,000 CMS items, and 10 GB bandwidth. The CMS plan at $39 per month raises items to 2,000 per collection and adds 3 content editors. Workspace seats are billed separately, which surprises people — a two-person team pays for the site plan plus seats.
Staging is unlimited and free on paid plans, so build on staging and push to production when it is ready.
What Is the Export Gotcha?
The Basic site plan includes code export; the CMS plan does too, but exported sites lose their CMS — collections stay in Webflow’s servers and you get static HTML of whatever was published. If you plan to export and host elsewhere, CMS content has to be migrated by hand, and dynamic features like forms stop working.
That constraint is deliberate. Treat Webflow as a hosting commitment, not a temporary design tool.
Who Should Skip Webflow
Anyone who needs heavy custom application logic, server-side rendering, or a team of engineers maintaining the codebase. Also skip it if you want a blog running this week with no design ambition — the setup time is measured in days, not hours.
Quick Summary
- Webflow writes real CSS; it is a visual dev tool, not a template builder.
- Build with Sections and Containers, use Grid or Flex per band, and style classes.
- Basic site plan is $23/month annually: 150 pages, 2,000 CMS items.
- CMS data does not survive code export — treat Webflow as your host.
- Publishing to a custom domain requires a paid site plan.
