Intro to components

Components in Webflow let you turn any element, including all its children, into something reusable. So for things like a navigation bar or a card, you can create it once, and you can use it on any other page in your site. The power here is that you keep the style and structure consistent. So if you make a change on any one instance of a component, it updates all instances of that component everywhere on the site.

Components are one of the core tools for building a design system for your site, and a great way to ensure parts and even full sections on your site stay consistent and easy to maintain. So components empower you and other designers and marketers on your team to build more efficiently and consistently.

In this lesson, we're going to cover how to create a component. Then we'll talk about how to reuse a component. We'll look at how to edit components. We'll unlink a component. And finally, we'll delete a component off the face of the Earth.

Let's start with creating a component.

There are two ways to create a component.

The first way is to start from scratch. Let's open up the Components panel, and we can create a blank component. We can give it a name, and we can assign it to a group to keep our components organized. Plus, we can add a description so others know what it's for. When we create, it takes us to a dedicated canvas to work on our component, with the Style panel, settings, and so on, and other variants for this component. And whenever you're done, you can go back to your site by clicking the arrow here.

But the second way to create a component is to convert an element from the canvas.

Here's a navbar on a page. We've added all of the elements we need and styled them, so it looks and works exactly how we want. So now that we have it all set, we can turn it into a component that can be reused.

Let's just right-click the navbar and click Create Component. We'll name it "Navigation," create a group for this component, and add a short description. But we can also choose to add properties to this component. Component properties let you customize specific content and settings in a component on different instances without changing the original, meaning you can reuse the same component across your site while easily swapping out things like text, images, or links. Our navigation will be the same on every page, so we won't need to create any properties. But once we're happy with everything, we'll click "Create." Now the component is created and we're editing it, but this time, in the context of the rest of the site. To exit, we can click the back arrow or just hit Escape on the keyboard.

That's creating components. Next, let's reuse our new navigation component on another page.

If we head over to this page, we can go into our Components and drag in Navigation, the component we just created. We can do that right here at the top, and we can see that the navigation component is on this page too.

That's two parts down. Next, let's look at how to edit our component.

We can click on this icon to edit the navigation component. So let's just move our button here. And now, if we exit out and go back to the home page, we can see that the navigation component here is also updated.

Now, that's how to edit components in context with the rest of the page. But if you ever want a more focused space, you can open the component in the component canvas. And any changes you make here will affect all instances of the component throughout your site.

That's editing. Let's unlink a component. What does that even mean?

If you ever decide that you don't want one component instance to be tied to the component anymore, we can just right-click on the component instance and click Unlink Instance.

This converts it back to regular elements, so changes to the original component won't affect it at all. This is helpful when you need a one-off design that starts from the component's structure, but doesn't need to stay in sync with it.

That's unlinking. Finally, let's delete a component.

Now, you might think that if you delete a component instance from the canvas that it's gone, right? Wrong.

If we head over to the Components panel, we can see that our tag component is still here. It's not deleted.

First, we'll want to make sure we delete all instances of this component. We can see where all those instances are. And if we click on one, it'll take us there. So we can just delete.

Once we've deleted all instances, now we can go to the Components panel and finally delete this component.

And that's it. Those are the basics of working with components, but there's so much more to components.

There are component properties to customize component instances, which we mentioned earlier, component slots to give you more flexibility with layouts while still maintaining consistency, and component variants to give each component multiple style options to choose from. You can also use code components to build custom functionality, and shared libraries to share your components with other sites in your workspace.

You can learn about all of these over at Webflow University and the Help Center.

Okay, let's recap. First, we covered how to create a component. Then we talked about how to reuse a component. Next, we looked at how to edit a component so it updates all component instances. We unlinked a component, so it's a normal element again. And finally, we deleted a component.

I just said components so many times, I think it's my new favorite word.

But that's components in Webflow.