IncomeWikiCategoriesDevelopment ToolsWebsites
Webflow
Created by @namkyu · Updated Sep 3, 2026
Linked Pages
View all 6 →Backlinks
No published pages link to this document yet.
Contributors
- Created by
- @namkyu
Created by @namkyu · Updated Sep 3, 2026
No published pages link to this document yet.
Webflow is a visual website development platform that combines design tools, content management, hosting, interactions, and code-oriented customization in one system. It is commonly used for marketing sites, landing pages, portfolios, company websites, content sites, and client projects.
Its main advantage is giving designers and developers more control over layout and responsive behavior than many template-based website builders while avoiding the need to manually build and host every frontend from scratch. The tradeoff is a steeper learning curve and a pricing model that separates Site plans from Workspace plans.
Item | Details |
|---|---|
Main use | Visually designing and publishing websites |
Best for | Marketing sites, company sites, portfolios, agencies, and design-led projects |
Free option | Yes |
Basic Site plan | $15/month billed yearly |
Premium Site plan | $25/month billed yearly |
Freelancer Workspace | $16/month billed yearly |
Agency Workspace | $35/month billed yearly |
Hosting | Included with paid Site plans |
CMS | Available on Premium and higher relevant plans |
Custom domain | Requires a paid Site plan |
Code export | Available on paid Workspace plans |
Ecommerce | Available through separate Ecommerce plans |
Coding required | No for standard builds; useful for advanced customization |
Webflow pricing has two important layers:
Site plans
Workspace plans
This distinction is one of the most important things to understand before paying for Webflow.
A Site plan applies to an individual website and is mainly used for hosting, custom domains, CMS capacity, bandwidth, and site-specific functionality.
A Workspace plan applies to the environment where you build and manage sites and is mainly related to staging, collaboration, code export, client work, and team features.
You may need one, both, or neither depending on how you use Webflow.
Current self-service Site plans include:
Plan | Price Billed Yearly | Main Use |
|---|---|---|
Starter | Free | Testing and small webflow.io sites |
Basic | $15/month | Simple sites without a CMS |
Premium | $25/month | Content-rich sites using Webflow CMS |
Team | $2,500/month | Larger organizations |
Enterprise | Custom | Enterprise deployments |
The current Starter plan includes:
Webflow combines several parts of web development into one visual environment.
A typical workflow is:
Design layout → Configure responsive styles → Add CMS content → Add interactions → Connect domain → Publish
Instead of manipulating only prebuilt templates, users can visually work with concepts similar to frontend development, including:
Containers
Flexbox
Grid
Classes
Positioning
Breakpoints
Components
This gives more control than many simple site builders while still reducing the amount of manual HTML and CSS required.
Start with the free Starter Workspace.
You can experiment before purchasing hosting.
The free Workspace currently supports two staging sites.
Create:
Navigation
Hero section
Content section
Call to action
Footer
Do not begin with a complex animation-heavy project.
First learn how Webflow handles:
Containers
Classes
Spacing
Flexbox
Responsive breakpoints
Webflow allows layouts to be adjusted across different screen sizes.
At minimum, test:
Desktop
Tablet
Mobile
A design that looks correct on desktop can still have overflow, spacing, or typography problems on smaller screens.
For a simple five-page company website, a CMS may not be necessary.
Use CMS Collections when the site has repeatable structured content such as:
Blog posts
Projects
Team members
Case studies
Locations
Jobs
When the site is ready for a custom domain, choose the appropriate Site plan.
Webflow's styling system relies heavily on classes.
For example:
button-primary
could define:
Background
Padding
Typography
Border radius
That class can then be reused throughout the site.
Avoid creating a completely unique class for every single element when the styling should be reusable.
A consistent class system makes larger sites much easier to maintain.
Reusable sections can be turned into components.
Examples include:
Navigation
Footer
CTA
Pricing card
Testimonial block
Update the component once and connected instances can remain consistent across the site.
This becomes increasingly important as the number of pages grows.
A CMS Collection defines a structured content type.
For example:
Blog Posts
Fields:
Title
Slug
Author
Date
Image
Body
Category
You then create one Collection template instead of manually designing a new page for every article.
A practical model is:
CMS data → Collection template → Automatically generated pages
Design homepage → Add service pages → Add case studies → Configure contact form → Connect domain → Publish
This is one of Webflow's strongest use cases.
Businesses can create a highly customized site without maintaining a traditional CMS and separate hosting stack.
A service business can combine this with SEO, paid advertising, and lead generation.
Client brief → Design system → Build Webflow site → CMS setup → Client review → Transfer or publish
Webflow is commonly used by freelancers and agencies because the visual environment allows designers to create production websites while clients can later manage structured content.
This can support a Freelancing or web development service business.
The main risk is building an unnecessarily complex class structure that the client cannot maintain.
Create Collection → Build template → Add articles → Publish → Update through CMS
This is useful for:
Blogs
Resource libraries
Case studies
Company directories
Job boards
Use structured fields instead of manually recreating page layouts.
Webflow is visual, but understanding CSS concepts dramatically improves efficiency.
Learn:
Box model
Flexbox
Grid
Positioning
Overflow
Responsive breakpoints
Without these concepts, users often solve layout problems with unnecessary margins and nested containers.
Do not create random names such as:
div-block-47
for important reusable styles.
Use understandable classes such as:
section-hero
container-main
button-primary
card-testimonial
A predictable system makes maintenance and client handoff much easier.
If the same section appears on multiple pages, make it reusable.
Examples:
Navigation
Footer
CTA
Pricing card
This reduces inconsistent updates.
Do not manually create 100 individual case-study pages with identical structures.
Create:
CMS Collection → Template → Content items
This turns content management into data entry rather than repeated page design.
Webflow plans have limits involving:
Pages
CMS items
CMS Collections
Freelancers can sell:
Webflow site builds
Landing pages
Website redesigns
CMS setup
Site migrations
Maintenance
The visual workflow can reduce development time for projects that do not require a heavily custom backend.
Startups and SaaS businesses can use Webflow for:
Homepage
Pricing pages
Landing pages
Blog
Case studies
Documentation-style marketing content
Marketing teams can update content without requiring a software deployment for every copy change.
The Freelancer and Agency Workspace plans are specifically designed around managing client projects.
Useful functionality includes:
Staging sites
Client access
Site transfers
Shared Libraries
Publishing permissions
This makes Webflow more suitable for repeat client work than a simple consumer website builder.
Webflow also provides native Ecommerce plans.
Current yearly-billed U.S. prices include:
Ecommerce Plan | Price |
|---|
Webflow can connect with external tools through:
Native integrations
Apps
Custom code
APIs
Automation platforms
Common integration categories include:
Analytics
CRM
Email marketing
Forms
Advertising
Automation
Examples include:
Google Analytics
Google Tag Manager
Mailchimp
Meta
Google Shopping
Use a native or established integration when available.
Custom code becomes useful when an external service only requires a script or tracking tag.
APIs are more appropriate for deeper data synchronization.
Paid Workspace plans can export production-ready HTML and CSS.
This can be useful when Webflow is used primarily as a visual frontend development environment.
However, dynamic CMS content cannot simply be exported in the same way as static site content.
Before building around code export, verify that the site's dynamic requirements will still work outside Webflow.
Paid functionality allows custom code and scripts to extend Webflow beyond the visual editor.
Typical uses include:
Analytics scripts
Custom JavaScript
External widgets
Structured data
Third-party integrations
Use custom code selectively.
Too much custom JavaScript can remove some of the maintenance advantage of using Webflow in the first place.
Webflow provides APIs for managing content and connecting external systems.
For example:
External database → Webflow CMS API → Update Collection → Publish site
Current Ecommerce plans list Content Management API limits of approximately:
120 requests per minute
for relevant plans.
API-based workflows are useful for automation or custom data sources, but most standard sites do not need them.
Webflow's Site and Workspace plans are separate.
Beginners sometimes assume upgrading the Workspace automatically gives every site full custom-domain hosting.
It does not.
Understand what each subscription pays for.
Webflow exposes more web-layout concepts than basic drag-and-drop builders.
This creates more control but requires more knowledge.
Content-heavy websites should check:
CMS item limits
Collection limits
Bandwidth
before committing to a large architecture.
A WordPress site can generally be moved between compatible hosting providers.
A Webflow-hosted CMS site is more tightly connected to Webflow's hosting and CMS environment.
Static code export reduces this concern for some projects but does not reproduce every dynamic Webflow capability.
Webflow can run online stores, but ecommerce businesses should compare its catalog, app ecosystem, checkout, fulfillment, and operational features with dedicated commerce platforms.
Poor structure can still create:
Bad responsive layouts
Inconsistent classes
Accessibility issues
Weak SEO
Slow pages
The visual interface reduces coding requirements, not the need to understand good web design.
Platform | Best Fit | Main Difference |
|---|---|---|
Webflow | Design-led marketing and CMS websites | Visual development with managed hosting |
WordPress | Content-heavy and highly extensible websites | Open source with a large plugin ecosystem |
Shopify | Ecommerce-first businesses | Dedicated commerce platform |
Custom development | Complex applications and unique functionality | Maximum technical flexibility |
Choose Webflow when:
Design control matters
You want managed hosting
Marketing teams need to update content
You want to avoid managing WordPress plugins and hosting
The site is primarily frontend and CMS driven
Choose WordPress when:
Plugin extensibility matters
You want hosting portability
You need a broader CMS ecosystem
Choose Shopify when ecommerce operations are the primary requirement.
Yes.
Webflow has free Starter Site and Workspace plans that can be used to learn and build small staging sites.
A paid Site plan is required to publish a standard Webflow site to a custom domain.
The current Basic Site plan starts at $15 per month when billed yearly.
Content sites requiring Webflow CMS can use the Premium plan, currently starting at $25 per month when billed yearly.
A Site plan applies to one website and controls hosting and site-specific functionality.
A Workspace plan controls the environment used to build and collaborate on multiple sites.
No for many Webflow sites.
However, understanding HTML and CSS concepts such as classes, Flexbox, Grid, and responsive design makes Webflow substantially easier to use well.
Yes.
Webflow offers Freelancer and Agency Workspace plans specifically intended for client-site workflows.
Neither is universally better.
Webflow provides integrated visual development and managed hosting.
WordPress provides greater plugin extensibility and more control over hosting and the underlying platform.
Webflow.io subdomain
2 static pages
1 GB bandwidth
50 form submissions
Limited CMS
Webflow AI
The Basic plan currently includes:
Custom domain
300 static pages
10 GB bandwidth
Unlimited form submissions
Password protection
The Premium plan adds Webflow CMS and additional content-oriented capabilities.
Webflow simplified its Site plans in 2026 by combining the previous CMS and Business plans into the newer Premium plan.
Every Webflow account includes a free Workspace.
Current freelancer-focused Workspace pricing includes:
Plan | Price Billed Yearly |
|---|---|
Starter | Free |
Freelancer | $16/month |
Agency | $35/month |
Freelancer currently includes:
10 staging sites
Full CMS access on staging sites
Client payments
Shared Libraries
300 AI credits
Agency adds:
Unlimited staging sites
3 free client seats per site
Unlimited Shared Libraries
Site-level roles
Publishing permissions
400 AI credits
For teams rather than agencies, Webflow also offers Core and Growth Workspace plans.
Not always.
For example:
One business website hosted on Webflow
→ Paid Site plan
→ Free Workspace may be enough
Freelancer building multiple client sites
→ Paid Freelancer or Agency Workspace
→ Individual client Site plans when sites are hosted on custom domains
Developer exporting static code and hosting elsewhere
→ Paid Workspace
→ Webflow Site plan may not be required for the exported site
Understanding this distinction prevents paying for a Workspace upgrade when only site hosting is needed.
A simple static site can use Basic.
A content-heavy site usually needs Premium.
Connect a domain you control and publish the production site.
Test:
Navigation
Forms
Mobile layout
Metadata
Redirects
Analytics
Important integrations
before treating the site as complete.
Bandwidth
Form submissions
Ecommerce items
Plan the content model before importing thousands of records.
A site that outgrows a limit may require an upgrade or architectural change.
Webflow makes animations relatively accessible.
That can encourage excessive:
Scroll effects
Page transitions
Hover effects
Moving backgrounds
Use interactions when they improve communication or usability.
Do not make basic navigation harder simply because animations are available.
Webflow provides controls for:
Title tags
Meta descriptions
Alt text
Open Graph
Canonicals
301 redirects
Robots.txt
Structured data through custom code
Check these before launch, particularly when migrating an existing Website.
Webflow Transaction Fee |
|---|
Standard | $29/month | 2% |
Plus | $74/month | 0% |
Advanced | $212/month | 0% |
Payment-processing fees from Stripe or PayPal are separate.
Standard supports 500 ecommerce items.
Plus supports 5,000.
Advanced supports 15,000.
For businesses primarily focused on ecommerce, compare Webflow carefully with Shopify or WooCommerce before choosing it.
Choose custom development when the project behaves more like an application than a marketing website.