Why modern websites are made up of reusable sections
Webflow has come a long way in recent years. What was once primarily seen as a visual website builder is now a robust platform for scalable websites, landing pages, and content structures. It becomes particularly exciting when you stop thinking of websites page by page and start thinking in terms of reusable building blocks.
This is exactly where components come into play. In Webflow, these building blocks are called “Components.” They can be flexibly customized using what are known as Component Properties.
Instead of rebuilding each section from scratch every time, hero sections, content blocks, feature sections, teasers, sliders, FAQs, CTA areas, etc., can be created as components. Each section then follows a uniform structure but can be customized individually via Component Properties. Webflow itself describes Component Properties as a way to override specific elements within a component on a per-instance basis with custom values without losing the component’s basic structure.
That might sound technical at first. In practice, however, it changes one thing above all else: the entire workflow between the agency, the development team, and the marketing team.
What is a component-based structure in Webflow?
In a component-based structure, a website is no longer built from individual elements assembled freely, but from predefined sections that can also be created entirely from scratch. Each section is a component. For example:
A Hero component with a headline, text, button, image, and optional badge.
A feature section with two or three columns.
A testimonial block featuring a quote, a person, a logo, and an image.
A CTA section with different background options.
A blog teaser that displays different CMS content depending on the page.
The advantage: The design remains consistent, but the content remains flexible. So instead of starting from scratch every time, you assemble pre-tested building blocks.
This is especially valuable for larger websites. That’s because they often feature many similar pages: campaign pages, product pages, landing pages, event pages, case studies, or SEO pages. If each of these pages is built individually, minor design discrepancies, inconsistent spacing, varying button styles, or custom technical solutions can quickly arise.
With a component system, that’s exactly what doesn’t happen. The agency defines the building blocks. The marketing team uses them.
Component Properties: The Real Game-Changer
Components are only truly powerful when they aren't rigid. That's what component properties are for.
These allow you to customize content on a per-instance basis. Webflow supports text, rich text, images, links, videos, numbers, switches, attributes, and code, among other property types. This means that a section can look completely different on different pages while still being based on the same component.
Here's an example:
You have a Hero section as a component. You can use the Properties to control the following, for example:
- Headline
- Subline
- Button text
- Button link
- Image or video
- Show or hide badge
- Show or hide the second button
- Layout option
- CMS data
- Custom Attributes
- Custom Code
For Webflow developers, this is a huge advantage because it allows them to centrally control both the technical and visual quality. It’s just as valuable for marketing teams because they don’t have to wait for development resources every time.
Why this is particularly exciting for marketing teams
In many larger companies, the website is no longer just a static project. It is an ongoing marketing system.
New campaign? Landing page.
New webinar? Event page.
New lead magnet? Download page.
New target audience? Create a separate subpage.
If every minor adjustment requires a designer or developer, the website quickly becomes a bottleneck. That’s exactly why a component system is essential.
The agency is developing a clean set of sections. These sections are responsive, accessible, well-structured, and designed in line with the corporate identity. The marketing team can then independently create pages, update content, combine sections, and manage CMS content.
The Role of Lumos
Timothy Ricks’ Lumos Framework is particularly well-suited for this approach. Lumos brings structure to Webflow projects and helps build layouts, spacing, classes, and responsive logic in a more systematic way. Especially when creating many components, having a clear system in the background is crucial.
After all, a component system is only as good as its foundation.
When spacing, classes, wrappers, containers, and breakpoints are inconsistent, components can quickly become confusing. Lumos helps you establish a solid foundation. This makes it easier to design sections in a modular way and reuse them later.
The major advantage lies not only in the speed of development, but also in maintainability. As a project grows, it remains easy to understand. New developers can get up to speed more quickly. Changes to the design system can be implemented more cleanly, and components don’t feel like isolated workarounds, but rather like part of a well-thought-out system.
The latest Webflow updates make Components even more powerful
Recently, Webflow has released several features that make its component-based architecture significantly more powerful.
Component Props in Custom Code
One particularly exciting update is the ability to use component props directly in custom code. Webflow now allows you to reference component props, locale settings, and page settings within code embed elements. This works similarly to CMS fields.
Why is this important?
This makes components not only visually flexible, but technically flexible as well. For example, you can control structured data, custom CSS values, SVG markup, or third-party embeds on a per-component-instance basis. Webflow highlights, among other things, the ability to use text props in custom CSS or generate JSON-LD from props.
This is a major step forward for modern websites. That’s because many requirements today fall somewhere between design, content, and code. Component props in custom code bridge exactly this gap.
Dynamic Attributes for Components
Custom attributes are also extremely important in everyday Webflow use. They are constantly used for tracking, accessibility, Finsweet attributes, animations, and external scripts.
With Dynamic Attributes for Components, attributes can now be controlled much more flexibly on a per-component-instance basis. Webflow explains that the new Attributes property can be linked to any element within a component, allowing the entire list of attributes to be modified or expanded for each instance. Additionally, attribute names can be dynamically linked to properties, CMS fields, or page data.
This is particularly relevant for scalable systems. Instead of building a new component for every minor variation, you can make attributes specifically configurable.
For example: A CTA section can have different tracking attributes depending on the page. Or a slider can have different configuration values for each instance. Or a section can have different ARIA labels depending on the context.
That sounds like a lot of fine-tuning, but it makes all the difference in large projects.
Use Page Settings directly on the canvas
Another useful update: Page Settings can now be used directly on the canvas. Webflow notes that Page Settings such as Title, Description, and Open Graph Data are often repeated in multiple places on a page, such as in headings, hero images, or social share links. This data can now be linked directly to compatible elements, props, or conditionals.
That, too, fits perfectly with the component-based approach.
Instead of manually entering content multiple times, sections can access existing page data directly. This reduces errors, saves time, and ensures that content remains more consistent.
Conditional Logic: Cleaner Components, Cleaner HTML
Conditional logic is also particularly important. Webflow has expanded conditionals so that they no longer just control visibility, but can also affect variants, text, attributes, images, and videos. Additionally, component slots can be referenced in conditional logic.
This is extremely valuable for Components.
That’s because many sections require optional content. Sometimes there’s one button, sometimes two. Sometimes there’s an image, sometimes a video. Sometimes there’s a label, sometimes not. In the past, this often resulted in empty elements in the HTML or required the use of workarounds.
Webflow also notes that hidden component elements are removed from the DOM order. This means they are not read by assistive technologies, do not create duplicate content, and do not negatively impact SEO.
That's exactly what makes the components cleaner—not just in the designer, but also in the final code that's delivered to the user.
A real-world example
Imagine a company that regularly needs landing pages for campaigns. In the past, the process might have looked something like this:
Marketing writes a briefing → Design creates a layout → Development builds the site → Marketing provides feedback → There are rounds of revisions → Development implements the changes → The site goes live
With a good component system, this process can be much simpler:
The agency builds a set of pre-approved sections → The marketing team creates a new page → The marketing team inserts the appropriate components → Text, images, buttons, and CMS content are managed via properties → Optional elements are controlled via switches or conditionals → The page automatically adheres to the design system
This doesn't just save time. It also ensures that pages can go live faster while still looking professional.
Components are no substitute for good web design
But it's important to note that components don't automatically solve every problem.
A bad system remains a bad system, even if it’s made up of components. That’s why components need to be well-designed. They require clear names, meaningful properties, a clean class structure, and an understanding of what options a marketing team actually needs.
Too many properties can quickly become overwhelming. Too few properties make components inflexible. The trick is to find just the right balance.
A well-designed component architecture therefore always answers these questions:
- Which sections are most common?
- What content needs to be changed for each instance?
- Which options are really worthwhile?
- What options does marketing need?
- Which options should be intentionally set to non-editable?
- What content comes from the CMS?
- What kind of logic do conditionals require?
- Which attributes or code embeds need to be controllable?
The better these questions are answered at the outset, the more stable the system will be later on.
There are still limits, though
As powerful as Webflow Components have become, this approach isn't entirely without limitations.
Another issue is CMS nesting. By default, collection lists in Webflow cannot be nested arbitrarily.
This is sufficient for many projects. However, it can be limiting for more complex CMS structures, such as when multiple related categories, tags, people, products, or references need to be displayed within a collection.
External solutions can help here. With CMS Nest and List Nest, Finsweet offers a solution for implementing nested CMS lists with fewer limitations. According to Finsweet, this allows users to nest more than five items and multiple collections on a single page, among other things. Timothy Ricks also provides a solution with FlowTricks CMS Nest, which allows nested collection lists to be inserted using defined drop zones and attributes.
This clearly illustrates where Webflow stands right now: a lot of features are working better and better natively. However, for specific requirements, you still need experienced developers and sometimes external tools.
The Future: The Agency as a Systems Architect
The most exciting aspect of a component-based architecture isn't the technology itself. It's the new division of roles.
The web agency no longer just builds individual pages. It develops a system.
This system consists of design, components, CMS structures, properties, rules, and documentation. With it, internal teams can work much more independently. They can create new pages, customize content, maintain CMS entries, and test campaigns without having to start from scratch every time.
For businesses, this means:
- faster time to market
- less reliance on development
- more consistency in design
- easier maintenance
- clearer workflows
- fewer errors on recurring pages
- more focus on content and campaigns
For agencies, however, this also means more responsibility. It’s no longer enough to just build a nice-looking website. You have to develop systems that work in the long term.
Conclusion: Webflow is becoming more modular
Webflow is increasingly moving toward scalable website systems. Component Properties, Dynamic Attributes, Conditionals, CMS integrations, and Custom Code Props make it possible to build websites in a much more modular way than just a few years ago.
For us as Webflow developers, this is a very exciting development. That’s because we can now build systems that are technically sound, visually consistent, and flexible for marketing teams.
The future doesn't lie in rebuilding every landing page from scratch. The future lies in developing the right building blocks.
And when these building blocks are carefully planned, clearly labeled, and structured using a framework like Lumos, Webflow becomes a true website system: flexible enough for marketing, robust enough for businesses, and efficient enough for day-to-day use.
Want to build a more scalable Webflow website?
A component-based architecture is particularly beneficial if your website is regularly expanded, customized, or used for new campaigns. With a clean system of reusable sections, flexible component properties, and a well-designed CMS structure, Webflow becomes not only easier to maintain but also significantly more efficient in day-to-day use.
We'll help you build your Webflow website so that design, development, and marketing work together more effectively—whether you're starting a new project, relaunching a site, or updating an existing one.
Are you planning a Webflow project or looking to make your existing website more flexible? Then contact us directly about your project.
