Using Components for Marketers

In this video, we're going to build a page using only components. We’ll talk about what components are, we’ll build from a page template, then—we’ll go over building from a blank page,make changes to components, send changes to our team for approval,and we’ll talk about some best practices to ensure we are set up for success.

We don't need to know how components are built. That’s a job for the web team you’re working with. You just need to know how to use them. And by the end of this video, you will. Let’s talk about what components are.

Components are pre-built, reusable design elements that our web team has already created and approved (hopefully). Think of them in two categories: full section components and content blocks. Full section components are use case-specific and ready to drop in as-is — things like hero sections, feature sections, navbars, and footers. Content blocks are more modular — individual pieces like cards, list items, and logos that get combined to build out a full section.

Each component has a consistent structure and style that's locked in by your web team. And that's actually a good thing — it means you don't have to worry about every little pixel and color, and can focus on creating a great experience for your page visitors. Think of components less like guardrails and more like puzzle pieces that are already designed to fit together. Most marketers don't want to build sections from scratch anyway — they just want to assemble a page and move on. Components let you do exactly that, fast, and always on-brand.

Let’s talk about static page templates. If you need to build a new page from scratch, always check first: does a template exist for this? Static page templates are pre-built page structures your web team has set up for common page types — landing pages, event pages, campaign pages, and so on.

Starting from a template means the layout is already in place. The page slots are already positioned. All you need to do is fill them in with the right components and update the content. The structure is done — you're just making it yours.

What if we DO need to start from scratch? If no template exists for what we're building, we can start from a blank page. A blank page still comes with a page slot, and we can see it here in the middle of the canvas. So the same rules apply — we're just assembling the layout ourselves.

Let’s move on to a page template, we can select one here in our pages tab. And once we do, we notice there is an area here called Page Slot. This is where we can drop our full section components in and build out our page. Any content within a page slot can be modified. For example, our web team has added the navbar and footer to the template already, and this page slot is where we can drop in our components. And, this is a really common setup. The navbar and footer are elements your web team wants to keep consistent across every page — while the rest of the template is ours to work with.

To add a component, just open the Components panel, find the one we want — we can hover over it to preview it — and drag it directly onto a page slot. It snaps right in.

Now, within the component that we’ve just dropped in, you might find component slots: the designated drop zones where you can place and swap other components. This gives us flexibility to adjust the layout or add more content without breaking the overall design.

And, once a component is on the page, we configure it through its properties. These are the editable fields your web team has intentionally exposed — things like headline copy, body text, button labels, images, and link destinations.

Now that we have components on the canvas, let’s go over making changes to a component, we have a few options: we can click on the pencil icon at the top of the component, we can click directly on the content in the canvas to edit it there, or use the Properties panel on the right hand side of the canvas. The one exception is if your web team has explicitly made something non-editable — in that case, we won't be able to touch it regardless of where we click. Webflow is built as a visual canvas, so editing on canvas is generally the recommended path, but there's no right or wrong answer.

Remember, we'll only see the fields your web team has made available. Everything else — the layout, the spacing, the fonts, the colors — that's all locked inside the component. If we need something that isn't in the properties panel, that's our signal to loop in the web team, not to try to work around it.

Now we’ll move on to reviewing and approving our work. You can publish a page with a click of a button, and one more click of a button. However, if you do not have publishing access, you'll need to send the design changes to your web team and they can approve and publish.

When changes are approved, your web team will merge them.

Okay. Before we wrap up, let’s go over some best practices. Some components come with a variants dropdown in the Properties panel — your web team may have set up alternate versions of a hero, or a primary and secondary button, all from a single component. Switching between them is just a dropdown selection.

If you're working on a page at the same time as a teammate, keep an eye on the presence indicators in the top-right corner. Webflow does have conflict resolution, but it's still worth paying attention to who else is on the page — a quick check-in before jumping in goes a long way.

And finally, when your web team updates a main component, those changes automatically roll out to every instance across the site, including pages you’ve already built. Your content will be preserved, but the layout or structure may shift.

And that's it for this lesson. We covered what components are — from full section components to modular content blocks — walked through building from a template and a blank page, made edits to components both on the canvas and through the Properties panel, sent changes to our team for approval, and went over some best practices to keep us building fast and confidently. But that’s using components for marketers in Webflow.

‍