B2B Website Design in Webflow: What Actually Worked
Fix the footer once, and it’s fixed on all nine pages. That’s the whole idea behind how we built the Distil website, a B2B Webflow site where designers control the layout and the team edits content through Webflow’s built-in CMS. When you sell to other businesses, your site is usually the first thing a buyer or investor looks at, so it has to hold together.
We’re a B2B website design agency, and this was one of our Webflow web design projects. If collections, items and fields are new words for you, Webflow’s own CMS guide explains them well. Here’s what we’ll cover: what Distil needed, who visits the site, how the build ran, and how to copy the approach for your own.
What Is a Component-First Webflow Build?
You build the navigation, footer and cards once, before any page exists, and every page borrows them.
Most sites get built the other way round. Page one, then page two, and somewhere around page nine every page has its own slightly different footer and nobody knows which one is right. Components fix that. Edit one, and the change shows up everywhere. The first few weeks feel strange, since nothing looks finished. After that the pages come together fast, and they match.
Case Study: A Specialty Chemicals Startup With No Website
Distil helps companies source specialty chemicals, and it handles the research, formulation, quality control and supply coordination that come with them. Two IIT Bombay alumni started it in 2024. Today about 20 specialists work there, many of them from Dow, BASF, L’Oreal, Huntsman and Reliance Industries.
The funding came quickly: a $3 million seed round by mid 2024, then a $7.7 million Series A by early 2026. The website didn’t exist yet. No site, no design system, and not much time. On top of that, the team wanted to publish their own press articles without waiting on a developer each time.
B2B Website Structure: Where Should Each Visitor Land?
Distil had three kinds of visitors, and each one needed a different front door.
Image X Media’s B2B web design guide says to organize pages around the problems you solve and the industries you serve, not your internal product names. Distil’s structure does exactly that. The product pages were the hard part. Personal care chemistry and polymer chemistry are two different conversations, so each page had to speak to its own sector and still look like it came from the same company. Shared components made that possible.
Webflow Components and Property Overrides: How the Build Worked
We worked in five steps:
- Discover: map the site structure and the three audiences before building any page
- Components: build the navigation, footer, feature cards, team cards, news cards and industry blocks first
- CMS: set up three collections, with Resources built so the team can publish alone
- Pages: build nine pages across distil.market and four alias domains, with layouts adjusted for desktop, tablet and mobile
- Handoff: 34 Resources items live, and the Distil team publishing by itself
The leadership section is the easiest place to see it. There are five cards, and each name and title is set through a property override, so adding a sixth person is a content edit, not a layout job. The investor logo strip works the same way.
Get Design Studio UI/UX’s stories in your inbox
Join Medium for free to get updates from this writer.
The build ran in two phases, one in 2024 and one in 2026, about 18 months apart. According to the case study, the component system more or less documented itself, which is why phase two extended the site instead of rebuilding part of it.
Webflow CMS for B2B Websites: Publishing Without a Developer
A good CMS lets someone publish a press article in a few clicks, with the right page, category and search settings, without ever opening the designer.
Distil has three collections: Resources, Services and Testimonials. Resources is the busy one. Each item carries a category, thumbnail and date, filters split press coverage from thought leadership, and the SEO title and description fill themselves in from the CMS fields. Webflow also lets you put components inside collection lists, so CMS layouts stay in step with the rest of the site. Webflow’s update on the feature has the details.
B2B Website Design Best Practices Used in This Build
Most top ranking B2B guides repeat the same handful of ideas. Four of them showed up here.
Keep the layout clean. Giant Focal and Ramotion both list a clutter-free design as a basic, and Dev Rix says to drop autoplay video and auto-rotating carousels. Make it work on phones too. Giant Focal and Verpex both ask for mobile friendly design, and each of Distil’s nine pages has layout adjustments at every breakpoint.
Think about SEO from day one, as Ramotion puts it, which is why the CMS pages here pull their titles and descriptions from content fields. And show proof. Ramotion points out that visitors trust sites with testimonials, so Distil has a Testimonials collection, investor logos, leadership cards and a milestone timeline.
How to Build a B2B Webflow Website Step by Step
If you’re doing something similar, this is what we’d carry over:
- Map your visitors before you draw a page, and decide where each group lands
- Build the navigation, footer and cards as components first
- Put content that changes, like names, titles and logos, into property overrides
- Design CMS fields for the person who’ll publish, and tie the SEO title and description to those fields
- Name and organize components clearly, so a second phase can extend them
Final Thoughts on Component-First B2B Webflow Design
Building the shared parts first gave this B2B Webflow website a solid base: one set of reusable components, a clear entry page for each type of visitor, and a CMS the client can run without a developer. You can see how the whole project came together in our full B2B Webflow case study. The result was nine pages, three collections and one component library that carried straight into a second phase.
We don’t have traffic or conversion numbers to share, so we won’t claim the site raised the Series A. What we can say is that it went live in time for the round, and the team now publishes on its own.
If you’re planning a B2B website, a good first step is to map your visitors and list the parts you’ll reuse. And if you’d like a second opinion on that plan, we’re glad to take a look.
