Every Webflow site is assembled from the same small set of building blocks. Learn what each one does, then follow the build process in the order that avoids rework.
Eight pieces make up nearly every Webflow site. Define the shared ones first and everything built on top stays consistent.
Your colors, fonts, and spacing are defined once and applied across the whole site. Change a brand color in one place and it updates everywhere.
Reusable visual rules, like how a button or headline looks. Consistent styles keep the site on-brand as it grows.
Reusable pieces like the navigation, footer, buttons, testimonial cards, and call-to-action sections. Edit a component once and every page using it updates.
Standard pages like Home, About, Pricing, and Contact, assembled from components.
Structured content your team adds regularly, like blog posts, case studies, team members, or events. Each has its own set of fields, such as title, image, author, and date.
One design for every item in a collection, so each new blog post or case study automatically gets a finished page.
Feeds that pull CMS content onto other pages, like "Latest Posts" on the homepage or "Related Case Studies" on a service page.
Animations and effects, like elements fading in on scroll or menus sliding open.
Nine steps, in order. Each step depends on the ones before it, so skipping ahead usually means redoing work.
Set up colors, fonts, and spacing from your brand guidelines.
Build the navigation, footer, buttons, and common page sections.
Define the types of content your team will publish and what fields each needs.
Design the page layout for each content type.
Assemble the main pages from components and content feeds.
Add motion and effects once layouts are final.
Adjust every page for tablet and phone screens.
Page titles, descriptions, social sharing images, and redirects from old URLs.
Publish to a private staging link for review, then go live.