CMS / WEBFLOW
Webflow: Complete Guide to the Visual Website Builder, CMS & Website Design Platform
Webflow combines visual website design, responsive layout controls, CMS capabilities, interactions, publishing and hosting into a single visual web development platform.
This guide uses Webflow’s own terminology accurately, with honest comparisons and no invented plan limits or pricing.
- The Designer, classes, variables and components
- CMS Collections, fields, items, pages and lists
- SEO, localisation, hosting, performance and migration
Design, content structure, behaviour and hosting live in one platform. That integration is the whole proposition — and the whole trade-off.
THE BASICS
What Is Webflow?
Webflow is a visual website development platform. You build sites in a browser-based Designer that exposes the underlying web layout model — the box model, flexbox, grid, positioning, typography and responsive breakpoints — through a visual interface rather than through code.
Calling it a “drag-and-drop builder” undersells and misdescribes it. Drag-and-drop builders usually abstract layout away behind preset blocks. Webflow does close to the opposite: it surfaces the actual layout concepts and expects you to understand them. Someone who knows CSS will recognise nearly every control; someone who doesn’t will face a real learning curve, because the platform is not hiding the complexity — it is giving you a visual interface to it.
Alongside the Designer, Webflow provides a CMS for structured content, a visual interactions system for animation, hosting with publishing, and SEO controls. These are integrated rather than assembled from separate pieces.
That integration is the defining trade-off. You get design, content, behaviour and hosting in one coherent system with no plugin maintenance and no server administration. You also accept that you are working within one company’s platform — its capabilities, its pricing, its roadmap — which is a genuinely different proposition from self-hosted software you control.
Webflow is not a traditional self-hosted CMS. You cannot install it on your own server or extend it with arbitrary server-side code. What it offers instead is a hosted platform where the infrastructure is someone else’s responsibility.
What Webflow combines
On plans and limits: Webflow’s pricing, CMS item limits, bandwidth and feature availability change, and vary by plan. Check webflow.com for current figures rather than any article’s.
└── Section — a major page region
└── Container — constrains content width
├── Div Block — generic wrapper
│ ├── Heading
│ ├── Paragraph
│ └── Link Block
└── Grid — two-dimensional layout
├── Div Block
├── Div Block
└── Div Block
The Navigator panel shows this tree. Structure matters as much as styling.
Items in a row or column, with alignment, spacing and ordering control. Suits navigation bars, button groups and card rows.
Rows and columns defined together. Suits page layouts, galleries and anything needing alignment in both directions.
DESIGNER
The Designer, Elements and Layout
The Designer is where Webflow sites are built. A canvas shows the page, an elements panel adds structure, a style panel controls appearance, and a Navigator shows the element tree. Breakpoint controls let you adjust layout per screen size.
Webflow’s elements map closely to HTML concepts. A Section is a major page region. A Container constrains content width. A Div Block is a generic wrapper. Grid and flex-enabled containers handle layout. Then headings, paragraphs, images, link blocks, buttons, forms, navbars and embeds carry the content.
The structure you build in the Navigator becomes the DOM structure of the published page, which has consequences for both SEO and accessibility. Using a heading element because it looks right, rather than because it is a heading, produces exactly the semantic problems it would in hand-written HTML.
Flexbox handles one-dimensional layout — a row or column with alignment and spacing control. Grid handles two dimensions, defining rows and columns together. Neither replaces the other. Flexbox suits navigation bars and card rows; grid suits page layouts and galleries. Most real pages use both, nested.
DESIGN SYSTEM
Classes, Variables and Components
Three mechanisms keep a Webflow site consistent, and understanding how they differ is what separates a maintainable site from one that becomes unmanageable.
Classes are reusable style definitions. Apply a class to an element, style it once, and every element with that class updates together. Combo classes add variations on top of a base class — a button with a secondary variant, say.
This is where Webflow projects most often go wrong. Styling elements individually rather than through shared classes produces hundreds of one-off styles that nobody can maintain. A naming convention agreed before you start is genuinely worth the twenty minutes it costs.
Variables hold reusable values — colours, spacing, typography, sizing. Reference a variable from many places and changing it once updates all of them. This is the design-token layer: your brand blue defined once rather than pasted into forty places.
Components are reusable structures. A navbar, footer, card or CTA section built as a component can be placed across the site, and editing the component updates every instance. Components can expose properties so instances vary in content while sharing structure.
Together these form a design system: variables define the values, classes define the styles, components define the structures. Changing the system in one place changes the site.
COLLECTION: BLOG POSTS
Illustrative structure. You define which fields a Collection has and of which types.
CMS
Webflow CMS: Collections, Fields, Items, Pages and Lists
The Webflow CMS is where structured content lives, and its five concepts are precise. Confusing them makes Webflow documentation hard to follow.
A Collection is a structured content database for one type of content — Blog Posts, Projects, Team Members, Testimonials, Events, Locations. You define what each one is.
Collection Fields define what information each record can hold, each with a type. Available types include plain text, rich text, image, video, link, number, date, switch, option, colour, file, email, phone, and the two relational ones: Reference and Multi-reference.
Collection Items are the individual records — one blog post, one team member. Each holds values for the Collection’s fields.
A Collection Page is a dynamic template. You design it once, connecting elements to Collection fields, and Webflow generates a page for every item in that Collection. Change the template and every generated page changes with it. This is the piece that makes the CMS worth using — a hundred blog posts means one template, not a hundred designs.
Collection Lists display Collection content on any page, with filtering, sorting and limits. A homepage showing the three most recent posts, a projects page filtered by category, a team grid — all Collection Lists.
The distinction worth holding: a Collection Page is the detail view for one item; a Collection List shows many items somewhere else.
CONTENT MODEL
Static Content, Dynamic Content and CMS Relationships
Static content is typed directly onto a page. Dynamic content is connected to CMS data — the page displays values from Collection Items rather than holding the text itself.
The practical difference shows up at scale. A testimonial typed into a page exists in that one place; a testimonial stored in a Testimonials Collection can appear on the homepage, a services page and a case study, all updating together when you edit the item.
Most sites use both deliberately. A homepage is usually static; blog posts, projects and team members are usually dynamic. Deciding which is which is content modelling, and doing it before you build saves rework.
Reference and Multi-reference fields connect Collections. A Reference field points one item at a single item in another Collection — a blog post to its author. A Multi-reference field points at several — a blog post to multiple categories.
These relationships are genuinely useful: an author page can list every post referencing it, and a category page can list everything tagged with it. They are also where Webflow’s CMS has real boundaries. It handles straightforward relational structures well, and it is not an arbitrary relational database — deeply nested or many-layered relational requirements will meet limits.
├── Author → Reference → AUTHORS
└── Categories → Multi-reference → CATEGORIES
PROJECT
├── Client → Reference → CLIENTS
└── Services → Multi-reference → SERVICES
EVENT
└── Location → Reference → LOCATIONS
BEHAVIOUR
Responsive Design, Interactions and Forms
Webflow’s responsive model works through breakpoints that inherit downward: desktop is the base, and tablet and mobile inherit from it unless you override. This direction matters — a change made at desktop affects everything below, while a change made at mobile stays there.
Webflow does not make designs responsive automatically. It gives you per-breakpoint control, which means responsive behaviour is something you build deliberately. Fixed widths, large type and complex grids all need attention at smaller sizes. Checking every breakpoint before publishing is not optional. See our responsive design guide.
Interactions are Webflow’s visual animation system: triggers (hover, click, scroll, page load), targets, actions (move, fade, scale, rotate, change styles) and timing. Scroll-based animation in particular is considerably easier here than writing it by hand.
Three honest cautions. Animation should support comprehension rather than decorate — entrance animations on every element make a page feel slow. Complex scroll interactions cost main-thread work, which affects responsiveness, especially on mid-range phones. And reduced motion deserves respect for people who have asked their system for less animation.
Forms are built visually with fields, validation and success and error states. Submissions can be collected in Webflow or passed to external services through integrations. Submission handling and limits depend on your plan, so check current documentation rather than assuming.
SEO
Webflow SEO and CMS Metadata
Webflow provides solid SEO controls: per-page titles and meta descriptions, Open Graph settings, slug control, automatic sitemap generation, a redirects manager, robots directives and clean semantic output when you build structure properly.
It does not make a site rank. No platform does. Claims that Webflow sites inherently outrank WordPress sites are marketing, not observation — implementation and content decide outcomes. See our website SEO guides.
The genuinely useful piece is CMS SEO. On a Collection Page template you can connect SEO fields to CMS data, so each generated page gets its own title and description built from that item’s content rather than all sharing one. This is set up once and applies to every item.
Getting it wrong is the common Webflow SEO failure: a Collection Page template with a static title means a hundred blog posts sharing identical metadata. Worth checking on any site you inherit.
Two further Webflow-specific points. Slugs are generated from the item name and can be edited — but changing a published slug changes the URL, so plan them before publishing and use the redirects manager when they must change. And Collection Lists with filtering can produce URL variations worth reviewing for canonical handling.
Webflow SEO checklist
- Page title and meta description set for every page
- Collection Page SEO connected to CMS fields
- Slugs readable and planned before publishing
- One H1 per page, with a logical heading structure
- Alt text on images, especially CMS image fields
- Open Graph title, description and image configured
- Sitemap generated and submitted
- Redirects set for any changed URLs
- Canonical handling reviewed on filtered or paginated lists
- Internal links placed within content
- Images compressed and appropriately sized
- Performance measured with real-user data
[ ] Page title and meta description set for every page [ ] Collection Page SEO connected to CMS fields [ ] Slugs readable and planned before publishing [ ] One H1 per page, with a logical heading structure [ ] Alt text on images, especially CMS image fields [ ] Open Graph title, description and image configured [ ] Sitemap generated and submitted [ ] Redirects set for any changed URLs [ ] Canonical handling reviewed on filtered or paginated lists [ ] Internal links placed within content [ ] Images compressed and appropriately sized [ ] Performance measured with real-user data
PLATFORM
Hosting, Publishing, Localisation and Performance
Webflow hosting is part of the platform rather than something you arrange separately. Publishing deploys to Webflow’s infrastructure with a CDN, SSL and custom domain support. There are no server updates, no PHP versions and no security patching to manage — a genuine reduction in operational burden.
The corresponding reality: you cannot host a Webflow site elsewhere while keeping the Designer and CMS. The platform and the hosting are one thing. That is worth understanding before committing, and it is the main argument self-hosting advocates make.
Publishing works from the Designer to a Webflow staging domain and to your custom domain, with version history available for reverting. Staging lets you review before going live. DNS configuration for a custom domain follows Webflow’s current documented instructions — check those rather than any article’s records.
Localisation handles multilingual sites through locales: a primary locale and secondary ones, with localised static content, CMS content, SEO metadata and locale-specific URLs. Availability and depth depend on the applicable Localize plan, so confirm what your plan includes.
For performance, Webflow handles delivery — CDN, compression, asset optimisation. What remains yours: image sizes and formats, font loading, interaction complexity, third-party scripts and page weight. Heavy animation and embedded scripts are the usual causes of a slow Webflow site, and neither is the platform’s doing. Measure rather than assuming. See Core Web Vitals.
CAPABILITIES
Accessibility, Custom Code, Integrations and Commerce
Accessibility
Webflow lets you set semantic tags, alt text, form labels, focus states and heading structure — and lets you ignore all of them. Using a div where a button belongs, or a heading chosen for its size, produces the same problems as in hand-written code. The tools are there; the responsibility is yours. See website accessibility.
Custom Code
Custom HTML, CSS and JavaScript can be added at site or page level, plus embed elements. Useful for integrations and behaviour the Designer does not cover. Worth restraint — custom code is the part that breaks silently, affects performance and nobody documents.
Integrations
Webflow sites connect to external services through native integrations, embeds, APIs and automation platforms — analytics, CRM, email marketing, payments, search and customer data. Which are native changes over time; check current documentation.
APIs
Webflow provides APIs for programmatic interaction with site and CMS data — reading and writing Collection Items, managing content and supporting automation. Useful for syncing content from external systems. See our website APIs guide.
Ecommerce
Webflow supports selling with products, product Collections, cart and checkout, designed with the same visual control as the rest of the site. It is not equivalent to Shopify or WooCommerce in catalogue depth or app ecosystem — it suits design-led stores with manageable catalogues.
Templates
Pre-built sites to start from, covering structure, styling, components and sometimes CMS setup. A template is a starting point, not a finished site — content, SEO, accessibility and responsive checking all remain to be done, and inheriting someone else's class naming is its own cost.
COMPARISONS
Webflow Compared With Other Platforms
These describe differences rather than declaring winners. Each platform suits some projects and not others.
Webflow vs WordPress
The core trade is managed platform against self-hosted control. Webflow removes maintenance and gives tighter design control within one system. WordPress gives you ownership, portability and an enormous ecosystem, along with the responsibility for keeping it all running. See our WordPress guide.
Webflow vs Wix and Squarespace
All three are hosted, which makes the real difference design control against accessibility of use. Wix and Squarespace are designed for people who would rather not think about layout systems. Webflow assumes you do want to. Neither assumption is wrong — they target different people.
Webflow vs Joomla and Drupal
Against Joomla and Drupal, the difference is both hosting model and depth of content modelling. Those platforms model arbitrary structures with granular permissions and run on infrastructure you control. Webflow handles well-defined content types with far less operational burden and far more visual design control.
Webflow vs WordPress with Elementor
This is the closest comparison, since both offer visual building with a CMS behind it — and it still needs care. Elementor is a third-party WordPress plugin, not part of WordPress Core, and not a CMS in its own right. The comparison is Webflow against WordPress-plus-Elementor as a combination.
They work differently. Elementor builds within WordPress’s theme system using widgets and its own controls. Webflow’s Designer exposes the layout model more directly, which gives more precise control and demands more understanding.
The practical differences sit elsewhere. Webflow is one integrated subscription with hosting included and no plugin maintenance, but you cannot leave the platform. WordPress with Elementor means managing hosting, updates and plugin compatibility — and owning everything, with a vastly larger ecosystem and the option to move.
FIT
When Can Webflow Be a Good Fit?
Webflow can be considered when a project’s shape matches what it does well. Fit is the honest question rather than ranking.
Design-Led Sites
Where visual precision matters and the design is a differentiator.
Marketing Sites
Where teams need to publish and iterate without developer involvement.
Agency & Portfolio
Where the site itself demonstrates capability.
Content Sites
Blogs, resources and case studies that fit the Collection model.
Startups
Where launching quickly matters more than long-term platform independence.
Design-Capable Teams
Where someone understands layout concepts and can use the Designer well.
Equally worth stating, because these save expensive mistakes:
Complex Backend Logic
Server-side processing beyond integrations and APIs.
Unusual Data Models
Deeply relational or arbitrary database structures.
Self-Hosting Requirements
Where data residency or infrastructure control is mandatory.
Platform Lock-In Concerns
Where the inability to move the site elsewhere is unacceptable.
Large Catalogues
Where commerce depth matters more than design control.
Non-Technical Teams
Where nobody has capacity to learn the Designer properly.
The one deserving most weight is platform dependency. A Webflow site cannot be moved to other hosting while remaining a Webflow site. For many projects that is a reasonable trade for everything the platform handles. For organisations with long-term infrastructure requirements, it is a decision to make deliberately rather than discover later.
Business Websites
Agency Sites
Portfolios
Marketing Sites
Blogs
Content Hubs
Startup Sites
Landing Pages
CMS Sites
Campaign Sites
Small Stores
Product Sites
OPERATIONS
Migration, Maintenance and Troubleshooting
Migrating to Webflow is a rebuild rather than a transfer. There is no import that recreates a WordPress, Joomla or Drupal site in the Designer — the design is rebuilt, and content is modelled into Collections and imported.
The order that works: audit the existing site, map every URL, decide the content model, rebuild the design, import content, implement SEO settings, set redirects for every changed URL, test thoroughly, then publish and monitor.
The step most often underestimated is redirects. A rebuild usually changes URL structure, and without mapping old URLs to new ones you lose accumulated search visibility and break every external link. Webflow’s redirects manager handles this; building the map is the work.
On maintenance: hosted platforms remove infrastructure maintenance, not website maintenance. Content still ages, SEO metadata still needs setting on new pages, forms still break, redirects still need adding, performance still regresses as content accumulates, and accessibility still needs rechecking after design changes.
For troubleshooting, the reliable first question is what changed? Most Webflow problems follow a style change, a new interaction or a structural edit.
These are possible causes rather than diagnoses. The same symptom frequently has several causes.
Maintenance checklist
- Content and CMS items kept current
- SEO metadata reviewed on new pages and Collections
- Forms tested end to end
- Redirects maintained for changed URLs
- Broken links checked
- Analytics reviewed
- Performance measured periodically
- Accessibility rechecked after design changes
- Interactions tested on mobile devices
- Custom code and embeds reviewed
- Integrations confirmed still working
- Localised content kept in sync
- Design system kept tidy as the site grows
[ ] Content and CMS items kept current [ ] SEO metadata reviewed on new pages and Collections [ ] Forms tested end to end [ ] Redirects maintained for changed URLs [ ] Broken links checked [ ] Analytics reviewed [ ] Performance measured periodically [ ] Accessibility rechecked after design changes [ ] Interactions tested on mobile devices [ ] Custom code and embeds reviewed [ ] Integrations confirmed still working [ ] Localised content kept in sync [ ] Design system kept tidy as the site grows
REFERENCE
Webflow Core Concepts at a Glance
Webflow’s vocabulary is precise, and using it correctly makes documentation, forums and tutorials considerably easier to follow.
Name Classes Consistently
Agree a convention before building. This is the main maintainability decision.
Use Components
Anything appearing more than twice belongs in one.
Define Variables Early
Colours, spacing and typography as tokens, not pasted values.
Plan the CMS First
Content modelling before building saves rework.
Check Every Breakpoint
Responsive behaviour is built, not automatic.
Connect CMS SEO Fields
Or every generated page shares one title.
Optimise Images
The most common cause of a slow Webflow site.
Use Motion Sparingly
Animation should aid comprehension, not decorate.
Maintain Redirects
Especially after any URL change.
FAQ
Webflow: Frequently Asked Questions
Short answers to the questions people ask most about Webflow as a design platform, CMS and hosted service.
NEXT TOPICS
Related CMS Topics
Each platform trades control, ease of use, hosting responsibility and portability differently. Which suits a project depends on the project.
WordPress
A self-hosted open-source CMS with a very large plugin ecosystem.
Joomla
An open-source CMS with hierarchical content and granular access control.
Drupal
An open-source CMS built around arbitrary content modelling and structured data.
Wix
A hosted builder designed for ease of use rather than layout control.
Shopify
A hosted commerce platform built specifically for selling online.
Squarespace
A hosted builder with design templates and integrated hosting.
Framer
Another design-led site builder with a visual canvas and publishing.
Website SEO
How SEO principles apply across any platform, including Webflow.
Explore the CMS Landscape
Continue exploring CMS platforms, hosting, website development, SEO, performance and ecommerce topics.