How to Build a Webflow Site

Webflow sits in an interesting position: it's more powerful than page builders like Squarespace and more designer-friendly than writing code by hand. The learning curve is steeper than most tools, but it's worth it if you need production-quality, custom websites without a developer.

Here's how to build in Webflow without spending weeks figuring out the basics.

Designer workflow: Figma first or design in Webflow?

You have two approaches, and the right one depends on your project.

Figma → Webflow: Design fully in Figma, then build in Webflow. This works well for client projects where you need stakeholder approval before building, or for complex layouts where you want to work out all the visual decisions before touching code.

The downside: designs that look great in Figma often behave unexpectedly in Webflow. You'll spend time adapting. If your Figma layout uses techniques that don't translate to CSS well, you'll need to rethink them during build.

Design in Webflow: Start with a rough wireframe or Relume-generated layout, then refine directly in the Webflow Designer. Faster for simpler sites and for designers comfortable with the tool. The feedback loop is immediate — you see exactly what you're building in the browser.

For your first Webflow project, design in Webflow after blocking out the layout. Trying to faithfully reproduce a detailed Figma design while learning Webflow is frustrating.

Webflow's core concepts

Before building anything, understand these four concepts. They map directly to CSS, and Webflow is essentially a visual CSS editor.

Box model: Every element in Webflow has margin (outside space), padding (inside space), a border, and a width/height. You set these in the Spacing and Size panels. Same as CSS box model.

Flexbox: Webflow's flexbox controls let you align children horizontally or vertically, control wrapping, and set gaps. The "Flex" button on the parent element toggles flexbox layout. Use this for most row-and-column layouts.

Grid: For more complex, two-dimensional layouts. Add a Grid layout type to a div, then set columns and rows. Webflow's grid editor is visual — you drag to resize cells.

Positioning: Elements default to Static (document flow). Relative, absolute, fixed, and sticky work as they do in CSS. Use absolute positioning sparingly — it breaks responsive behavior if used carelessly.

If you understand those four, you can build nearly any layout in Webflow.

Using Relume to start faster

If you're building a marketing site or landing page, Relume can dramatically cut your setup time. You describe your site's purpose and Relume generates a full page wireframe using pre-built components.

Copy the Relume wireframe into Figma to refine the layout, or export it directly to Webflow as a starting structure. The exported components are clean and properly structured — they're not perfect, but they're a much better starting point than a blank Webflow canvas.

Generate your site structure with Relume

Relume is best for standard marketing page structures: hero, features, testimonials, pricing, CTA, footer. For custom application UI, it's less useful.

Building nav and footer as symbols

In Webflow, Symbols (now called Components) are reusable elements. Build your nav and footer as components immediately — don't build them on one page and paste them elsewhere.

To create a component: build the element, right-click it, and select "Create Component." It appears in your Components panel and can be added to any page. Updates you make to the component apply everywhere it's used.

Your nav should include desktop and mobile variants from the start. Use Webflow's Navbar widget if you need the built-in hamburger menu behavior, or build it manually with a custom component and Interactions for full control.

CMS basics

Webflow CMS is the right choice for any site with repeating content: blog posts, case studies, team members, projects, testimonials.

The concepts:

• Collection: A content type (e.g., "Blog Posts"). You define the fields: title, body text, featured image, category, date, etc.
• Collection item: One entry in the collection — one blog post.
• Collection template page: The page template that renders a single collection item. One template serves all items in the collection.
• Collection list: A component you add to any page to display multiple collection items (e.g., a blog index showing all posts).

Set up your CMS collections early in the project. The field types you choose affect what you can build with them.

Responsive breakpoints

Webflow has breakpoints at 1920px, 1440px (desktop default), 992px (tablet), 768px (mobile landscape), and 478px (mobile portrait).

Start styling at 1440px desktop and work down. Styles cascade downward — a style you set at desktop applies to all smaller breakpoints unless you override it. Styles don't cascade upward.

The mobile breakpoints require the most attention. Use the mobile landscape breakpoint to catch tablet-range issues. Check mobile portrait on a real device before launch, not just in the Webflow preview.

Common responsive fixes: images set to fixed widths instead of percentage or auto, text sizes that need reduction on mobile, spacing values that need to shrink.

Publishing

Webflow hosting starts at $14/month per site for the Basic plan, $23/month for CMS, $39/month for Business. You can also export the code and host it yourself (available on paid Designer plans).

Before publishing, check: page titles and meta descriptions for SEO, alt text on images, 301 redirects if you're replacing an existing site, and your custom domain settings.

Use the Webflow SEO settings panel — it's under each page's settings. Set the Open Graph image so link previews look right on social.

Build your site in Webflow

Webflow has a steep first-week curve. Push through it. By the end of your first real project, the mental model clicks and you'll build the next site significantly faster.