Webflow Components Explained

Hey YouTube, So today I'm going to walk you guys through Webflow components.

‍

When I first used Webflow components, they were a bit confusing and I just didn't quite understand how to set them up in a way that makes sense. So let me show you. And so what we have here is I've just got a couple pages made.

‍

This is a Relume style guides starter. So let's go ahead and get started. So I'm going to go to the Relume library and I'm going to grab a nav bar and we're going to go ahead and paste this in here like that.

If we wanted to, we could wrap this, option+Shift+G twice. And I'm going to name this a main wrapper, and then we're going to name this page wrapper just to keep, um, the client first set up going here.

We'll drop that in, um, below PageWrapper, but above MainWrapper for the nav. And then let's grab a basic hero section. We'll take, hero1 looks good, or header1, sorry. We'll drop this in here. And there we go. So now we have... Two components from reloom library and now these technically a lot of people call these Webflow components But the actual Webflow component portion comes in when you create the component So don't let those naming conventions get get you kind of messed up like this is you know It contains a lot of stuff in here.

And so it is a component But let's create this into a reusable piece within Webflow. So how would we do that? While we go over here, we click create component. Let's just call this hero and we'll back out there. And then let's click on the nav, and we're not really changing any class names right now. I know they still have some of the names from Reloom, but we'll just leave them for now.

Call this nav. So now we have a nav and a hero. So what do we do with that? Well, let's go ahead and jump into here. And I'm going to hide, um, this navigator using Z as a shortcut. And I'm going to move myself down here. So let's go ahead and click on this header, um, heading. We want to be able to change this heading to whatever text we want.

So how do we do that? Well, we got to create a property. And so you may be seeing this, um, This view right here, this is your styles panel. If you click on D, um, this will take you to the settings panel. Or you can obviously use these right here. So, go ahead and click the add symbol here in purple. And we want to create and connect a new property.

So let's call this hero text. Okay. Now, this is where I kind of got stuck before. And I was like, well, I just created the property, how do I change it? Well, Right now we're looking at the default for this component, right? Medium length, you're hiding this, this plain text right here. This is the default. So if we want to change this property, we actually have to back out of the component.

And this is where I think some people get stuck. So if we back to the instance here, you'll see now over in this settings panel, right? This is where we manage this. So if you click on the component, you'll see this dotted line. And then if you click on this, you can actually change. This so we just call this, um, here heading and now we've changed that in this instant of the component.

Um, and so if we double click in, we see the default. If we click back out, we see the instance text. Hope that makes sense. I'm going to click Z again, and let's go ahead and do command D. And if we duplicate this, let's scroll down. We see the same thing. If we go in here, we have that same default text, remember?

So this is the same component we just duplicated. I'm going to hide the navigator. And if we click in here, we can actually just do it right on the screen, or we can go over here as well. And this could, uh, say anything. Um, maybe we're using this for a landing page. Um, and now we've changed the text for that instance, because if we go back, for this instance, we still have hero heading.

So that's kind of the basic frameworks and structure of components. Um, so now if we want to create more, let's double click back into the component. And let's make this um, kind of subheading, this longer subheading here, um, changeable as well. We'll just call this um, hero Subheading, create the property.

Again, if we want to change the text, we've got to back out of the instance and now we can do that, or we can do it right here on the screen as well. Um, so if this were like the top of the landing page, we'd probably want to make this image, um, as well changeable. Oops,

caps lock on here. Okay, so now that's changeable and this is where it gets even better. So there's these buttons here. Um, we can change the link where they go to, and we can change the text within it. So, let's um, for simple naming, let's do, um, left button. And we'll do, oops, you know what? That's not gonna work.

Let's do manage properties here. We're gonna delete that real quick. Um, let's create it again. So, let's do left button link.

And then we'll do the left button text. I'm just using caps just to make it really clear. Even though you do select these when you're changing stuff. But just to keep it super simple, super clear. And let's do, this is the link again. Right

button link. And we'll do the text as well. And you'll see here in just a second.

How powerful this can be. Okay, so we have link, text, link, text. Awesome, for both sides. So let's go and back out. We've now created a property for everything within this component. So we can change everything. So if we click on the component you see all these extra settings now. So, and if we scroll down we see this component has also changed because components are all synced up.

So a change on one instance will change. The other, um, if you're changing default parts of the component, um, if you're changing per instance scenarios, that would be the property. Okay, so let's see. Um, we do have a couple of pages created in here, um, just to link to, so maybe we want this button to go to the about page so we can just say page, say about, and then we'll just change the text here and maybe we want this button to go to team, page, team.

Awesome. So that's set up. And these again are still defaults because we haven't changed the per instance portion of that component. Awesome. So now you kind of see how this can be used, right? If this was on a top of a landing page, um, if this was your hero section for every page and you just wanted to change the image and the text and where the buttons go.

Awesome. You have that ability now. Um, and you simply just, uh, go to the page you want it on. Let's go to the about page real quick. Your components all live right in here. You can also do command K, which is actually my favorite way to really get anything on the page. So what do we call that hero? So now we have that hero component.

Um, great. So, let's do another, um, common use case. Let's go to the team page, and what we have here, I'm going to open the navigator real quick, we kind of have a lot going on, um, this is a grid of team members, but let's go ahead and find the card portion of this, so we have the list, that's the grid wrapping around all these cards, so I click on a single card, I'm going to close the navigator with Z, As my keyboard command and let's go ahead and create a component.

And we'll just call this a team member. Uh, let's go ahead and select the image. And we're just going to set this up real quick. So image, we want to be a property spelled that wrong, but we're going to leave it. Just for sake of time, call this name, we'll call this title,

call this bio.

Sorry, my mic is totally blocking my view of my keyboard. Now we have these social icons. We gotta select the link portion of these. And I'm gonna delete the dribble icon. And then we'll select the link. We want the link. And we're gonna make a component. Property, um, LinkedIn. And Twitter. Twitter slash X.

How about that? Until they finally switch the name over. Alright, so this Twitter link, a property. LinkedIn link, property. Bio is a property. Title is a property. Name is a property. And image is a property. Awesome. So let's back out and now we can change these. So, we're just going to throw in, um, Some random default stuff that's already in here.

Throw that in there. Um, and remember we can just click right on the page here.

John Smith, he is the owner. Um, and he likes coffee and

weekend with. His dog.

Awesome. Um, and again, now we can change where his LinkedIn goes to, and where his Twitter goes to. So now, how do we do this? Again, it's fairly simple. We duplicate it. So, if we let's go ahead and delete all these other ones. And we'll just duplicate this. If you had, let's say, 18 members here. And now these are all set up, ready to go.

You just have to put in the data for the other ones. So think of components kind of like a floating CMS, right? If you're familiar with CMS and how that works, you put the data in the database, or the CMS, and then you pull it to where you need on your pages. Whereas this is like a floating CMS, almost, if you will.

Um, You have the data just kind of living on the page and you can change it per instance for the components. Again, once you set the properties, so hope that kind of opens your eyes to the possibilities of what you can do with components is super powerful. We're just honestly scratching the surface here.

Um, you can get really crazy with these and how they work. Um, but this was just kind of the simple, most common use cases, um, that people would use. So hope this video is helpful and I would really appreciate a like and a follow.

‍