Components versus symbols
Symbols, the older concept, were identical everywhere. Components added properties: the structure stays locked, but nominated fields become editable per instance.
That is the difference between a header you can reuse and a hero you can reuse. The layout is fixed and safe; the words and images are not.
| Plain section | Component | Component with properties | |
|---|---|---|---|
| Reuse | Copy and paste | One master, many instances | One master, many variants |
| Edit once, change everywhere | No | Yes | Yes |
| Per-instance text | Always | Only in slots | Yes, via properties |
| Right for | One-off layouts | Repeated identical sections | Repeated sections that vary |
Designing properties well
Expose the fields an editor should change and nothing more. A hero component might expose the heading, the body, the button label, the button link, and the image, while locking the spacing, the type scale, and the grid.
- Name properties the way an editor thinks, not the way the DOM is structured
- Expose links as link properties, not as text
- Keep variants for genuine design alternatives, not for one-off exceptions
Why this is how a site scales
A site built from components is one where a brand change is an afternoon rather than a quarter. It is also the difference between a marketing team that can build a campaign page and one that has to ask for one.
Why it matters for B2B marketing teams
Components are what separate a Webflow site a marketing team can run from one that needs an agency for every change. On builds where we get this right, adding a landing page is a marketer's task rather than a support ticket.