Quick Crash Course

[00:00] Hey folks, so I wanted to kind of give you a quick overview of just like how the site is built so that you have an understanding of what you're looking at or if you're totally overwhelmed by Webflow and kind of not breaking

[00:10] something or whatever, this is the first one to watch. So very very quickly, we have pages and then we have the navigator. So pages is how you actually

[00:20] go between pages, right, and then the navigator is showing you the objects that are actually on that page. So I'm going to jump to this page I made called

[00:30] styling demo just so that we have something fresh that we won't break anything else with. And now just to kind of illustrate how the whole thing works. So there's the body. You don't really have to worry about that because every

[00:40] page is already going to have one. And then you have some kind of repeated components. So the things that are green are components, meaning they are repeated

[00:50] across the site. If you edit it in one spot, it'll edit everywhere else. So I use those for the footer and for the nav, right, so that way we're editing it in

[01:00] one spot. After that, the whole site is basically built from these series of sections. Now the structure inside of a section is quite common, meaning that, or

[01:10] I should say typical, it's very typical across the whole site. Every single section basically has this and that's a really good way of controlling the mobile styling and just making sure the whole site always looks cohesive and

[01:20] loads consistently, etc. Then inside of there, right, there's sort of two pieces. We have the wrapper, which is where all of our content actually lives, and

[01:30] then we have the section background. And those are separate because that way we can do stuff like switch the background to blue, right, by adding a style up here.

[01:40] Basically adding a combo class to that section and defining it with a background color of blue allows us to then put as much content as we want in

[01:50] there and the whole section will stay that way, right. So that's what I'm doing for this one. If I click on the section, you'll see it's set to chalkboard. If I get rid of that, now it's white. And then I would have to manually go in and

[02:00] restyle those pieces. Okay, inside of the other pieces is the, or the other part of

[02:10] it, right, is the wrapper. So inside of the wrapper, we have a container. It's realized this is a bit of a box-in-a-box situation, but just ignore the container because everything that you're doing is going to really live inside of the

[02:20] container. A good example is this. So in this one, we have a whole bunch of things that are stacked on top of each other, right, and they're all inside of this one

[02:30] big container, all part of one big section. And the way that we would kind of, you know, approach this is that, you know, you can drag and drop to rearrange

[02:40] something, for example. So if I wanted to put this one up above, I would grab this two-column arrangement and literally drag it up there. And you can see now I have to kind of clean it up because I have some spacers in the way. So we, you

[02:50] know, we want it to be spacer content, spacer content, et cetera. Now, the AS2 column is basically just a quick way to organize two content groups. So content

[03:00] groups are kind of like the most basic way of organizing stuff on the site. Most things are in a content group, like this. This whole thing is in one content group.

[03:10] And that makes it just basically easy to kind of grab it and move it or keep it all together, keep the spacing tight, et cetera. So I use those as often as I can,

[03:20] you know, many times over. So you can see there's eight on this page, 172 on other pages, and that's just for the ones that are for a left column. So

[03:30] they're literally all over the site. When I need them left and right, I put them in this wrapper called two-col. That is probably the most complex thing you're

[03:40] going to have to deal with, honestly, because to rearrange things and to build new stuff, you can basically click on these, copy and paste, right? And then if you need to add a spacer, copy and paste, drag the spacer in between, and now you

[03:50] have this sort of repeated thing, right? So pretty easy to kind of to move stuff around and to reorganize. The other thing is like when you're going to add new

[04:00] pieces, right? So like, let's say you wanted to add another paragraph or whatever. You can do that in two ways. The one way is to find something similar

[04:10] and copy and paste it, right? So you can do like, I want to copy this thing and just put it here. Like that's one way. The other way is to actually go and get a

[04:20] new object. So you can go to add, and in this case, I could do like text. But you'll see when I drop it in that it's unstyled. It basically is a piece of

[04:30] text sitting there, and it doesn't have any style associated with it. So if you ever add new things, you want to make sure that you assign them some class

[04:40] that they will know how to behave, especially if it's something we've already defined. So in this case, this one's called AS paragraph. So if I click on the new piece of text and go here and just do AS paragraph, it'll inherit that

[04:50] all the styling for it and the animation and all the stuff needed to kind of make it feel on brand.

[05:00] As far as that sort of structure on the page, there are some things where, again, we're reusing elements.

[05:10] So you'll see this content group here, but it all of a sudden has these three items in it. And there is some combo class stuff that's happening.

[05:20] So this is where you can get tripped up. I'm just going to let you know. Because some of the things will have combo classes on them, like the grid 3, etc.

[05:30] So if I get rid of that, this is what would happen. Because the way that the content groups are designed is to sort of fit any type of content and where, unless they're given a constraint.

[05:40] There's a good reason that I'm doing it this way. I'm not trying to confuse you guys. But it does add a layer of complication or confusion if you're not used to it.

[05:50] So if I wanted to, I still have these three objects that are here. I can instead make it grid 2. And now it's going to arrange those objects in 2.

[06:00] And you can see it's reorganizing the image and stuff itself. It's not stretching or anything. It's just changing the crop so that it can always fit. So I can do the same instead with, say, grid 4.

[06:10] Now I have four tiny ones. And so if I wanted to add a new one, there's space for it there. So that's where you can get a little bit tripped up if you're trying to add one and it's copying and starting to nest and getting a little weird.

[06:20] Or what a lot of times will happen, people will end up with something like this. Where there's just too many happening and there's a content group inside of all of them.

[06:30] And it's sort of really messy. When you do that, you just want to look at your site structure. And be like, if I have a content group in a content group, that's probably a problem.

[06:40] So you can literally drag it and pull it to the left. And it'll sort of pop out.

[06:50] So anyway, that is a common thing I see that happens, trips people up. So good to know, setting that back to grid 3. The other thing related is these little components.

[07:00] So components are, I'm trying to build as many of those as we go. And you're like, actually, this is the wrong feature here.

[07:10] Instead, I want a different one. You can go over to the components and you'll see that there's all of these different ones already made. So we could say we want EHR. And if you have it selected already, the space selected where you want it,

[07:20] you can literally click and it'll just add it in place. And now that piece is part of that grid and will always be there. If you're like, this is in the wrong spot, I want to put it over there.

[07:30] You can drag it and it'll rearrange it. But you can also rearrange everything over there on the left. So this is a bit of a random crash course on Webflow interface.

[07:40] But just trying to kind of like show you how things work. Okay, let's talk about danger zone. Danger zone is anything you're doing over on the right here.

[07:50] So whenever you add or change an object, if you're changing anything over here, other than saying adding a class or something, be very careful.

[08:00] Because this is where you'll be changing other things across the site. So how does this work? Right now, if I were to get rid of this class, and this is just raw text, right?

[08:10] I go in here and I'm like, oh, this is the wrong size. I want to make it 24 pixels. You can see it just go ahead and invented a class.

[08:20] It just called it paragraph because we don't have paragraph already. We use AS-paragraph. So the point here in showing you this is you can see that the things that are

[08:30] inherited are orange. So the font, the height, the color are all inherited. I gave it a new size, so now that's blue.

[08:40] And so that's basically an override that's written into this class. And what is it overriding? It's overriding the AS body, the highest level thing where this stuff is pulled from.

[08:50] That's too technical. You don't have to worry about that. But the point is is that when you make a change over here, it's going to change the class.

[09:00] So if I were to go and add this back to AS-paragraph, right, you can see the overrides that I have in place are some positioning stuff,

[09:10] which you don't have to worry about, the size and the height of this style, right? So if I were to change, say, the color, if I'm like, oh, man, I really want this one to be red, that would be really cool.

[09:20] I can go and I can pick red, but you can see it's changing all of the paragraph copy across the whole site to red. So that's something that you want to be really careful when you're making style

[09:30] changes over here to check up here to see how many times it's being used, right? So like 68 on this page, 879 on other pages. It's literally everywhere.

[09:40] And so that's something you want to be very careful about how you're picking it. If you, as you can see, I kind of jumped over that. What I should have done is say, how do I get rid of this?

[09:50] You click on the blue part. So click on the thing that's showing the change, and it'll give you this little window and you can hit reset and that will remove.

[10:00] Override from whatever it's getting inherited from and then you'll be back to, you'll be good to go. Now the pivot to that is what if you do want to make a special case? What if you like this

[10:10] really needs to be giant text and my heart is set on it? Then I can go up here and after this class we already have, I can add a combo class. So there are some already there, right? Like bold

[10:20] is a pretty obvious one that I have. But let's say that you want that massive text. Massive text

[10:30] is what we're going to call it. Hit enter and now I've created a new class called massive text and it still isn't massive. So I'm like I really want this to be massive text. So this I'm going

[10:40] to make 50 and I'm going to use something fancy. I'm going to do vw which is the viewport width. Boom! Now we have some serious massive text, right? And all I did was apply that

[10:50] class to it. So if I get rid of the class it's back to normal size text. And if I go back in and I'm like nope, massive text time. Boom! Now it's going to do an override

[11:00] to that style just with that piece. And if I'm like that's too massive, I want it to be like more like that, then you can just change it and it'll change it there and of course anywhere else

[11:10] that that combo is in place. So if I go here, massive text time, boom! Now these two are going to behave the same and if I change that to five they're both going to change to five, right? Also

[11:20] viewport width is kind of fun because it keeps the text the same regardless of the width of the screen. Okay, so that's kind of quick crash course on how to move stuff around, how to change it.

[11:30] The only other thing that I'll quickly throw in is there are like again the combo classes,

[11:40] just pay attention to them because if you were say like now I really want these images to be swapped, right? You want to put the image on the left. One thing to note is that the padding is

[11:50] slightly different, right? So if you click on this side you can see this one has two col left. You'd want to switch that to right. So two col right and now it's going to add padding there. So nuance,

[12:00] that's something like I can come back and clean up later. No one will notice but me. But it is something that is how the page behaves and all that. So all right, random crash course complete.