Teaching Webflow To My Dad

Learning the Style Panel

eye icon
47
Min Read
By:
Joseph Virtue
teaching webflow to my dad episode graphic number three

Summary

In this episode, we’ll learn the basics of the style panel. How to give classes to elements, how to set styles, and how to reuse classes. We’ll also touch on the element settings tab and the interactions tab.

Watch Here

Listen Here

Weekly tips

Elements with same class inherit the same styles

Develop a class naming strategy 

Layouts give you new ways to structure you content

Margin = external padding = internal

Rems are the most accessible way to size 

Positions can break elements out of the page structure

Transcript

Joseph: In this video, we're going to cover the styles panel. So in our life cycle of how far along we are, if this was like teaching how to drive a car y'all know how to get in, turn it on and put it in reverse.

So now we could actually get. Learn some of the actual stuff. So let me pop over the screen here. All right. So this entire right panel is called our styles panel. Can you see my mouse? Right here. There you are. Yes, no again. Okay. So this entire window is your style. The styles panel, as you'll notice right now, there's no options to do anything on our little paintbrush icon.

And that's because we have nothing on the canvas. I'm going to hit our shortcut command E I'm going to pull in a dip block. So just diff and then hit enter and they'll pop up. All right. So now you'll see this entire window of settings under the paintbrush. So this is where. All right. So I'm gonna give you a brief overview.

And then in our next video, we'll actually start putting elements on the page and actually start playing with stuff. But for now, I'm just going to go over what these elements do. So that way, when we start talking about them, you'll have a reference point to them. So

Joel: one more time, the four things, the paintbrush and the gear and the along the top of the style.

Yes. I know over to the lightening bolt, please. I know you covered that to begin with, but I don't remember those.

Joseph: All right. So the first one is our, like our state, our CSS, our styles for the elements. Okay. The second one is settings specific to the element. So for example, like the blocks, you're not going to see that many elements.

You can add custom attributes, which is something we'll talk about way for the down the road. And otherwise there's this tag. Where you can let search crawlers, know what it is. So it could be the header. It could be the footer, the navigation it's a section. It could be an article. So whenever we're building like a new section, we'll come in here and tag it and then there's this ID slot.

And that is where you would go in if you want to do like anchor scrolls. So somebody would kick, click a button instead of jumping out of new page, it would drop it. This is where you would tag. And then the third one, this just shows you all the classes you have on your project. So when we go to the art brush, you'll notice there's a selector where you can select a class or tag right now, the only ones we have are section style.

We added those in the previous video. So this will just show the list of all of the styles you've created or on your project. So you notice right here, there's this little cleanup. And because we don't have any styles applied to our website or to our elements on the website, you can go in and clean up any classes you're not using.

So I can quick clean up and I can click remove, and it'll delete all unused styles. So let's say you would name this dip block, header element, and then you rename it something later, you can come in to the project setting and clean it up. So that's what this does. It'll show you all your styles you've created or.

And this last one is interactions. And if we're talking about teaching someone how to drive a car, this is the stunts, the tricks, all the fun stuff. So all of the interactions and stuff. So this is a, yeah, something, this is a big portion of making the website feel interactive, but definitely something we'll cover later on.

So this styles manager you're not going to need to work. Because even if you do have some classes that you'll be duplicating, it's sometimes safer not to go and clean them up. Let's say you had some classes you wanted used, but they weren't in use. If you clean them up, it would delete all of them.

So we're not going to really pay attention here. And this section is only going to be important for doing anchor scrolling or tagging our sections or adding custom attributes, especially, it's not really that important at the moment. So our main focus is going to be this, the paint brush, the styles.

And really

Joel: the element triggers is really the overdoing stuff that really is down the road stuff too. So really it is just the paintbrush, the styles. That is our,

Joseph: this wonder the element, correct? Yes. Yeah. So it goes your three-step process, our left panel, where you bring your elements on, then you use the paintbrush to style those out.

And then you use the lightning bolt to add interactions to the style element. So it's a 1, 2, 3 left to start here, go here and then finish up here. That's your rough way of doing things. All right. So we're going to touch briefly on and try to go over all of the elements in this styles panel.

So you used to have a brief understanding of them. We're not necessarily going to utilize them and implement them on this video. We'll do that in the next. But this way, when we start talking about stuff, you'll have already had an entire overview of everything. All right. So the very first thing you have right here is the class adder.

So this is how you name everything. So if you notice right now, we've got a div block on the screen. All right. If let's say we add a random, let's say we add a pen, just a padding, which were marginal. Explain later. You'll notice it now automatically gave it a club. Could you see that? Or

Joel: when you say class if you could define the word class, please.

Joseph: All right. So web flow has got this really power of the classes are really powerful. So if you let's say we wanted to make a certain set of styles to an element, and then you want to use that in multiple times over instead of having to go in and re add those settings, you can just apply the class.

And when a class is applied to something it'll automatically inherit those styles. And then when you change an item on one thing that has a class, it'll change it on all of them. So everything you're going to add, every element you're going to add to the canvas will either be a custom class, which means it'll be the only one given that class, or it'll be a, you'll apply a class to it's something you've already done.

So let's say you were building on the bread.

Joel: So this is what we talked about with the symbols is overall to a, like to the nav bar or to a group of items. This is to a specific singular could be to a singular block.

Joseph: Yes. Yep. That's yeah. That's a good way of looking at it. So where was I just going with my train of thought here?

Sorry. No, that's okay. I don't remember it. I was gonna say.

True. Yeah. I lost my train of thought.

All right. So let's

Joel: just, yeah. Naming of class.

Joseph: Yes. So everything on your art board will be given a class and it'll either be a custom class. So the settings you're applying to that are specifically for that. Or there'll be, you'll create a class and then you'll apply it. So actually now I remember I was going, so let's say you're building a website and all of the background is white.

Okay. You will then have dark text on it, but let's say on one of your pages, the whole background is black and white text. So in our S our styles panel, when you have the text element out, we can make a class and call it. And that means anytime you have a new text element, you can go in and just add the class white and it will automatically apply the color white to that text.

Does that make sense?

Joel: All right. I know there's some strategy going on here and I don't necessarily understand the strategy yet.

Joseph: Okay. Maybe we'll move on from classes we'll just utilize. That's probably the second most important, or maybe the first most important thing. The entire web design process are going to be the classes.

So we'll just keep moving on. But now, this is where you will create a new class. So we've got the div block selected and we could give it a class of, let's say main DIB. All right. Okay. Now let's use our command D and another dip on here. This is what I was going to do in the next video, but we'll start just so you understand.

So right now our main did has a class and this did block does not have a class. So if we make a change and say, I'm going to make this, I want every element. 70 pixels away. You'll notice this div block did not also separate itself from the previous diblock by 70 pixels. However, if we have over here and we can either type in main div or just select it because we can see it, it now has created that same pixel spacing as the other one.

And so now we can the same class. Yes. And now any change we make to the one that has a class makes the change everywhere

Joel: because it's a cascade.

Joseph: Class? Because they have the same classes applied cascading refers to yeah. Going to like different break points and it cascades down. Okay. All right. Yes.

All right. All right. So that's the first thing. That's how you just apply and name classes. So if something doesn't have a class, oops. I don't know what I did there. Okay. We'll do that. If something does not have a class, you'll just start in here and type to give it a new class or find the class you're at.

So either you're adding. Yeah, so that's what this things are. This is where you select your classes. All right. So the next thing is your layout settings, and this is the second most important thing.

Joel: Sorry. You said something that I thought might be really important. You said either everything has a class of its own or an, or did I misunderstand that everything there has a custom class or is assigned a, how did you phrase.

Or did I misunderstand that?

Joseph: I don't know what you understood, so I'll just, re-explain it. So you don't want to, if I start adding in dev blocks. Okay. So if I add in, oops, let's try that again. If I just add in five dip blocks, all right. If I don't give it a class and I start making a change to it, it's just going to start.

If you notice in the left side, it's now just naming them to block to diblock three div block four, right? Yup. And so we have no way of knowing what that div block is trying. So you'll either give every div block of already set of a class. So for example, I'd be like, alright, I'm going to already give this main div, okay.

So I want everything I'm going to give it, assign it to a class that already creates is created, right? So that's one option or you create a new class. So instead of this automatically naming itself, you would call this secondary. So we just don't leave things randomly saying give blocks. So now this dip block, we're either going to assign it to secondary NAF or secondary nav or main dev one of those two.

So we don't just let things have random classes. So

Joel: that's the same attributes has the previous

Joseph: Yes. And you want to try as much as possible to give things the same classes, if you can. So that way, when you make a change, it changes everywhere. So that's yeah. That's classes where we'd all this and that's the

Joel: formatting, obviously not just the, and then the content will be different.

Joseph: Yeah. Every, as soon as you drag an element onto the. You are either assigning it to a class. So this new develop diblock, I'm either going to immediately assign it main div, or I'm going to know it's a custom class and then we'll name this custom diff and then I'll go make my changes.

Joel: Does that mean you wouldn't necessarily name it according to where it is on the page, you would name it formatting.

Joseph: No. We didn't talk about naming strategies. No, you'll name it. There's a whole different naming strategy we haven't gotten to yet. Okay. This is just how you, where you add classes. So when I say, oh, you added of class, this is where you'll find it.

Got it. All right. So the next section is the layout and this affects how the element behave. So this will mainly apply to D blocks. So there are what, six or seven different options. So do you see these. Yep. These are all your different layout options. So we'll go over them. So everything starts off right here.

It's just a, it's a block element, which means it will take up the full width of the page that this block takes up the full width of it. And that's how it's satisfied. Another div block. It keeps adding them inside. So I gotta just command E actually let's do heading real quick. That'll be easier. And then we'll have command E wide and they're heading all right.

So the standard block, even though these, this heading thing only takes up about 10, 20% of the entire screen, because it's set to this layout, the other heading won't jump up. So that's the first one, just the standard setting. So the next one, this one right here, it's hard to tell them part a is in line.

So you noticed, as I selected, it went from laying out the entire width of the page to just the space it's taken up. So if I now set this one to inline block, they'll share a row. So inline block allows elements to come to the same space that they otherwise wouldn't be. So if I now put this one back to here, it's it won't go up, even though this one says.

Yep. All right, so that's the second one. So this is inline texts, which is the same thing as in block, but only applies to texts. Then we have this one right here, so this is hide the element. So if we if we collect, if we click this, it will hide the element from the. So hiding it is different from deleting it.

So you'll still see it over here and the navigator, but you'll notice you can't select it. There's no way to find it over here. So any hidden elements you'll need to go and find them in the navigator. And you'll see that it's hidden by that little symbol right here. That means it's hidden.

So a quick example where you'd use this, let's say you were going to make an interaction where as you scroll down the page, something kind of pops into. You'll set that you can set that as hidden first. And then once the page is scrolled, you'll set the interaction to show it once it scrolled. So there's a lot of utility in the display now.

Interesting. All right. So the most commonly used ones and these kind of get complicated. So the first, most common is the basic one. The block. And then it goes Flexbox and grid. So Flexbox and grid are a way for you to sort the content inside a div block. So let's command E let's grab a dif. And right now it's just taking up the entire space.

So a grid, which one would suggest, allows you to place content very neatly or quickly inside of a grid. So we'll notice a couple of things, a couple of settings we have here on. You can from right over here, change how much, which is between the rows and the columns. So you can adjust this, you can go 32, you can double it.

And then you can also determine how many rows and columns you have. So right here, you've got these columns and rows settings, so we can add more rows. We can add more columns and they just add. So the really powerful thing about grids in web flow is you'll notice there's a sizing right here. It's called one fr.

So normally when you've got elements on a page, you'll give them pixel values, REM values or percentage values. So an fr stands for, I think it's just a fractional value. So it's one fraction of the total. So interesting. So as the page shrinks, it still takes up its instead of, let's say your page right now is a thousand pixels.

If you set something to 330 pixels hoping it'll take up a third. If you shrink your browser, that first item will become more than a third of the width. So you can set a fraction of value started here. If I go up here and click this and I now change it to two FRS and then it enter it's now twice as wide is everything.

And then I can come down here on the height ones and I ended up being auto. I can change it to two fr and because the other ones are auto hasn't showed up yet, but I can do one fr amount of some content in there. So that's how you start a grid. So an interesting thing is that a grid slot can only take one element.

Okay. So that's that's something to remember is with, let's say we grab a couple of bullets command E let's, grab a heading and the community and let's grab a paragraph. So you'll notice they do not go into the same section. So to solve that we would need to grab a div block and inside this. We would drag.

We can either grab the heading and paragraph and drag it on screen into this, which I think you have to hit command. Yeah. You have to hit command to do it. Or we can just grab it from the navigator and drag it into the div block. So now our one section of the grid has both of the elements in it and the way we did that was with the div block.

And so anytime you get stuck inside grids it's can I, should I put something in a D a D. For example, we would not let this be named D block. So we'd call this grid first or something like that. And now we know when we're looking inside of our grid, we're like, oh, we know that's the first item we can open up and see our heading and that.

So that's div block or that's grid. All right. So the next one we're grabbing the block and it's called Flexbox. So if grid allows you to set things up in evenly spaced, X and Y axis's are the Flexbox allows you to shift where they are in that plane. So you'll notice that our heading and paragraph still start on the left.

They're not styled, let's say we wanted them centered inside of our grid. Flexbox is a really cool way to utilize that. So when you make something a Flexbox, it pops up this whole window of setting. So started. Irregular and we hit Flexbox and it's got all of these different combos. So let's add a couple of elements in there.

Let's add a couple of headings and then let's command the, add another heading. And those automatically got added into the div block because I already had the div block selected when I hit command. Yup. All right. So inside our div block, you'll notice that everything is going horizontal. We also have it set.

So if I now wanted to stack them vertically, I would just hit vertical and then I can center them. I can align them to different ways. Let's say I wanted them to both be on the outsides and then I can line them all the way out this gate spacing. I can line them to the right, I can center, align them. I can align them to the left and all of these really cool settings where you can align them vertically horizontally.

So let's, I want to put that in the center. So we now have a grid. So this div block has a grid and inside of this is another div block, which we can now change to flex. So I can come down here and I can get Flexbox and now we can now align these vertically in the center.

Instead of our grid, we have a div block. That's a flex box and inside of our flex box, we can add. Just using staffed div blocks. So notice that blocks really are almost are using almost every element of your website is going to multiple dip blocks and we'll just give them classes. So it doesn't clash.

So that's what all these layout options do. So I'll come down, let's delete all this. Let's grab another dip block just so we have the settings window. All right. So that was our layout tab. The next one is. So anytime you want to move an object you can, or you want to tweak it on the go, let's go command D let's go to bring up our heading.

So inside of our diblock, you'll notice our heading is all the way to the left. So we've got these down settings inside of our diblock, where we can add Marden margin or padding to it and move the heading around. So if you notice I'll add some padding and it'll push the item. I had some margin. It also pushes the image in, but its margin is different because it's on the outside of the object.

So that's really noticeable if we grab a button real quick. So if we grab our button, you'll notice right now it's got automatically 15 padding so I can quit hitting the shift button to change all of them. You'll notice it now changes the inside. Like how far off from the edges of the button. If we now change our margin, that'll push it up other elements.

So if I go this way, it pushes it away from other elements. And then the padding is for that item. So that's pretty similar to margin and padding.

Joel: You're just clicking on that and dragging it in that little block. Yeah.

Joseph: Yeah. So you can either click on it once and just type in what you want for that item.

If you want them different, you can also just hold on it. And then you. So right now, if I hold it and just drag left and right. It changes just this one. I can hit command or sorry, I can hit shift and it'll do all of them and then I can hit alt and it'll just do the one on the opposite side of it.

Joel: Nice.

Joseph: All right. So we'll do this, grab another one. Just so we have a clean canvas and we'll put a heading in here. All right. Another really cool thing is if you want something to happen. Let's actually change this headings were in changes heading to inline where you want to layout. So it just takes up space.

If you automatically let's say you want this headache in the middle. So instead of coming here and figure it out, I got all of this padding over here. All right. And now I've pushed it 400 pixels off of, without a page. That looks pretty good. Now, if I went down to my tablet, you'll notice it's not centered because it's not counting how many pixels off the left edge.

So there's this cool little setting here. So we're going to clear that. So we'll hit reset. There's this nice little setting here, spacing where it automatically puts it on either side so we can add that to okay. That should maybe, cause I went in line and then center should be centered the content. I don't know why it's not a lot of oh, because I didn't give a max width because we haven't gotten that part yet. So let's say I added a thousand pixels and then now do

Joel: automatic.

Joseph: Okay. I guess that's not working, so let's delete this diff and let's do something else. Just did something wrong with that. And you have that. Inside the stable it's at another div. So I'll drag then, on this tube, we're going to do Pato. Let's do command heading into this dev. All right. So now it's being difficult with me.

And so this is where I need to do width of let's see 500 pixels. And that's what this.

My heading element.

Okay. I don't know why it's not working here, but it normally works. Move on it. And I'm going to come back to this one. Yeah. And just come back down and that's very strange. It's of course it does not want to work when we're trying to show it how it's supposed to work. Your next. So after you get off of spacing, your next one is your sizing.

And so this is how you set parameters for the element on the webpage. So you've got several settings here, so there's your regular width and height. Then you've got your minimum width and your minimum height and your maximum width and your maximum height. So let's say you had an element that you wanted to have 500 pixels.

So let's give it some height of also 200 pixels. Okay. So right now that's about half the page. Now, if we go down to tablet, you'll notice again, it's more than half, so we can come down here and on our max width, we can do max with a 50 and then do the percent sign. All right. So now when we come down, you'll notice it's half on all of them.

So we gave it a whip and. So it's 500 pixels wide, but up to 50% of your screen, it'll tell if you click on one of these little elements right here, you'll notice there are several different sizing options. So this most standard one, I guess if you use like Adobe products, you're very familiar with pixels and then we've got percentages, which we just used.

And then there's M and REM, I don't know. Are you familiar with them?

Joel: Only familiar with Ram just cause you've mentioned them before, but I'm not familiar with them at all.

Joseph: Okay. You better run me through both of them. Yeah. So REM the R on a, instead of M it's just for the rut. So on your basic computer, you can adjust your general font size, how many pixels your font might be.

And we'll automatically, if you make something right. So I can go here and I'll make this dip block 500 pixels in 200 pixels. So command C, we're going to make another dip block right beneath it. And so instead of getting it pixels, we're going to just go over here and 500 divided by 16 rim.

So that's 31 Ram and then 200 pixels divided by 16 Ram. All right. So now this is in REM sizing. So as Tom. Oh, I guess they're the same class. That's what happens when you make something in the same class? I changed on both. So REM sizing changes if the viewer wants the size to change. So if somebody had a hard time where let's say that bad vision and a hard time, like reading text, if I had a heading on here and I set it to 16 pixels and let's say they wanted everything to be twice that size, I would be able to set it as one REM and whatever they said.

Size on their computer. It adjusts with that. So for all of our builds, we use REM we don't use pixels and that's something we'll get into fin suite later. That's something that they've documented why you should use Reb and why it's accessible to everybody. So we don't, we're not going to use em, we're trying not to use percentages or pixels.

So let's go to the other four. So the next one is character. So character width. So let's say let's open up a heading now let's see if the heading will cooperate this time. And right now we've got heading text. So a little more. All right. So right now we're going to pull it out of the dip block. So it doesn't, it's not confined by width.

All right. So your C H with we'll set, how many characters will be allowed? In that general actually, let's go to, what's got a paragraph that's a little easier to see or read all this committee paragraph. All right. So if I wanted a certain amount of letters on each line, I can go in here and just type in, let's say I want 60 letters.

I'll type in 60 C H, and now it'll give me a Whit of 60 zeros of that font size. So that's where handy, if you've got, let's say you have on your home screen on your like hero section, you've got like four words and you, every, on every screen size, you want them to be two and two, you can set a max character with, and that won't lock it in to the size of the screen and want adjusted that it'll just keep the same characters on it.

So that C H characters then the VW and VH is vertical width and vertical height. So that sets something. So instead of We'd get rid of this map. Let's go from CHT VW. So this now will take up 60% of the width of the screen. So if we now go here 60%, 60% and 60%, that's what the vertical width does.

It's similar to percentage. But there are there are some scenarios where they wouldn't line up, but what we'll have to get down the road before we start talking about those. So it's vertical width and same with vertical height. If we now change it to a hundred H this would now, oh, sorry. Cause I'm putting that in the wet gear to that.

So the height is a hundred VH and now it will take up the whole screen. Yeah. So breaking here, you can either type in the items. If like a hundred, I can type in a hundred VW or VH it'll automatically grab them. Or you can just come over here and click on it and grab them.

All right. A couple of our next, so we don't want size where right now our overflow is net. Okay. So if so the overflow, are you familiar with the overflow? Just regular overflow from WordPress. Okay.

Joel: I'm not sure. Okay.

Joseph: Okay. So let's say I set the height of this diblock to 300 pixels. If I had an image that was 500 pixels tall, it would be on the outside of that frame.

So if I don't have, if I have overflow set anything outside of that LN shows where you're visible or invisible shows, content that overflows it's. Anytime you have something, let's say you want that image. Exactly. 300 pixels by 300 pixels. You can set it to overflow hidden and that anything that would fall outside those borders won't show.

So it just hides everything. Oh no. And then this scroll setting, let's say you had, let's say you had someone's bio. 80 lines long, and you only wanted it to appear 10 lines long in the design. You can have Pitt scroll on the overflow. And if there is any extra content, that'll just keep it at 10 lines and give you a scroll.

And auto will only show the scroll option. If the contents. So let's say you have four bios and you give them a class of bios. So now they're all the same. The, if you have the scroll option, it'll show the scroll bar. Even if their bio isn't longer than the 10 lines. And the auto will only show the scroll bar if it's longer than 10 lights.

So that's the sizing options.

Joel: We just had a Whiting malfunction.

Joseph: You had one earlier and I didn't say anything. Oh now I'm gonna have to go cut this middle section out and sorry. That is where there's. I don't care what the lighting. We can just keep it rolling. Alright. Alright. Wait, where were we

actually need some water real quick while we're,

Joel: this can be one of our inline bloopers that we leave in.

Joseph: Yeah, let's leave this whole. Pardon? All right. Okay. So the next thing after size is position. So this allows you to manipulate items around the screen, even though they're not in accordance with the navigator. So everything starts out by being static, which means it'll just follow proper HTML structure.

So let's say we grab, that's grabbing our dev block. So static is the first one and the next one is relative. So as soon as I selected that, you'll notice that it popped up this window. Okay. So the relative sizing allows you to move the object relative to its original placement in the document. So if you'll notice.

That it's right next. It's following this dip block. I can now move it. Like I can overlap div blocks. I can move it all the way down while it's still taking its original spot. So it's still holding this original spot as a placeholder, and now you can manipulate it around. So let's say you had a white bag.

And then beneath it, you change to a black background and you had an image that you wanted to be 50% on each of the backgrounds. You could change it to relative positioning and move it so that it was exactly half and half. Like right now I can see a pop rate of half on that diff and that's what relative does.

So there are three more so absolute makes the position of the item relative to the entire breath. If you've ever seen like those little chat modals or accessibility modals, you fix them absolutely. To someone's browser so that it would always show up in the bottom right. Of someone's browser.

That's what absolute does. All right. Wait, is that fixed? Oh, I might've actually spoken. That is the fixed one. Fixed the up positioning valid relative to the browser. So that's fixed. Absolutely.

Oh, absolute positions it to the element. It's like parent element. So right now it would be this. All right. So I explained to you fixed. Sorry. So fixed is the one where it's fixed to the browser. Absolute changes it relative to its parent item. So for it to work on absolute, you have to have set the parent item to.

So let's say we grab, let's do community, let's grab a div block. Let's set this one to relative, and then let's throw this div block in here. You'll now notice that this inner block that we've set to absolute yeah. Is now relative to the previous one. So relative changed. It is positioned corresponding to the next element.

Does that make sense? Okay. So if I do committee and I had in several diffs, let's sleep absolute one. All right. So if I move this middle diff and I do relative, you'll notice I can change it around, but the middle spot right here is left open. If I change this now to absolute, it does not leave that spot open.

I can still set it where I want it. I can still set it between. But it does not take up its original space. Okay. So if you, yeah, so there's some, we'll have to get into how you would actually utilize it, but you, if you're just trying to move something a few pixels, you probably, and you'd want it to keep its original holes, a placeholder you'll just throw in relative.

If you want it to change the position for the whole document, you'll just put it in absolute. All right. And the last one is. And the last one is sticky. So here's how I will show you sticky. We're gonna grab a dif and we are going to give it a we're going to make it a grid. So we've got two sections or the wheat, one of the rows.

So we've got two. So over in this one, we're going to add a heading. Okay. And in this one, we're going to do command E and we're going to add. So for the demonstration purposes, we're going to give this a size, a height of 200 to VH. So it is now the size of 200 or two of our browser windows.

All right. So here's how sticky works. So are heading right now. When I scroll down, it disappears. It does not come with, if I change it. And our position too sticky. And now it doesn't show up in the messaging of the preview. It will now, oh, wait, I didn't give it an offset. Sticky with a zero. All right.

So when I now go preview, I just not

Joel: wouldn't, it need to be a non or a, I'm not a like an inland. Plex what's the word like a flex box. What's the right word. A cried. I should know this

a inline fixed, not fixed width because otherwise your head of your heading is taking up that whole 200%.

Joseph: Not with snow sticky. It should not be it's a little

Joel: bit, your head you're heading it. Isn't taking up the whole 200%.

Joseph: Oh, there we go. Now it's working. So I just had to put it in a damn. So now you'll notice. I'll throw some offset on it. So before I, and I'm scrolling right now, but it's staying where it is. Yep. So let's center. This is there a way, let me up the offset. So we offset how's it. How long we wait. So let's do 200 axles.

I think I'd have to have.

Let's see, this is just a gradient, so you can see there's going to give it a color gradient real quick. So now you can see that I'm scrolling up and down and the header is staying there. So I'm scrolling up and down and now it stays versus if I take this off of.

Joel: Right now. I can't see the word. I can't see the word heading

Joseph: that's cause I wasn't in the browser. Yeah, I wasn't browser. Got it. All right. So now it's sticky. I now go into the settings. I go to the heading, I just turned it to static. I should've did block and set to just do static and you'll notice it now.

Yep. So sticky allow something to come down. It's in the entire section with something. Got it. All right. So that's your committee given here. All right, so that's the positioning. All right. So topography pretty straightforward. It allows you. If I had a heading on here, oops. I had a heading on here. I can.

All right. So now we're going to go on the topography. So I'm gonna add a heading in here and we're going to drag that into the dip block. All right. So the type progress settings allows me to make changes to the heading very similar to WordPress. Yeah. I can change the font sizes, stuff like that. Okay.

All right. One other interesting that I think we'll touch on here since there's not too much to go over on the topography section. You'll notice there are two colors here and the styles panel, there's a blue and there's a red. So when I made those changes, let's see, I'm going to command Z twice.

So right now a static heading doesn't have any class and you'll notice they're all orange. That means they're just inheriting the standard settings from the web. So as soon as I change something, you'll notice it'll go to blue. So if I like changed the weight to normal, it now has given at the same time I changed it.

It gave it a class. So whenever a style is being applied to directly from that class, it will go blue. Does that make sense? So let's say I added another one there. Okay. And now let's say I give it another class, which is heading seven, which we really should not be doing that. So you'll notice that both appear blue.

So let's now say I give this a combo class and I call it heading seven large. Now you can see it's the weight no longer is blue because the most recent class is this large one. So if I now apply any settings, it will only apply to the large setting, not to the. So if I now go and change the size and let's say I do a hundred, you'll notice that's blue.

This one hasn't inherited anything from the size, because the most recent class isn't applied to it. So I now go apply large here. Oops. I need to select that large scroll down. That'll have the same settings and now you can see it's being applied to blue. If I delete that class and just keep the previous.

And now shows that it's getting the weight from this class and you can click on anything that's blue and it'll show or blue or orange, and it'll show you where it's getting it from. So if I click on size if I reset this blue thing and then that'll show you where I'll get it from the weight, it says the weight's coming from heading seven.

So it's telling me that this class is, this setting is getting applied from that class. So when you're going through and trying to look for things, you always want to keep an eye on what's orange and what's. Okay. So yeah. Yeah, that's very useful. And then when you close something, you'll notice it's showing me if it's orange or blue.

So even when I closed that, like if I get rid of the two classes, you'll now see that it doesn't have the blue settings, because it's not getting anything custom from that. All right. So that's typography, the next section is backgrounds. And so if we grab our. We're adding a div block. So backgrounds allows you to add in multiple things in the background of that item.

So you could add in an image you could add in a gradient, you could add actually think these are all gradients. You could add a background color. I think somewhere in here you could add a video, maybe that was that actually a background video thing. So let's say you added in Let's see, I don't think we have any assets prepared right now, but this is where you could change.

Yeah. Where you'll just make your style, the background. So we could right off the bat, we'll just open up the background. Let's just give it a background color. And that changes that. So any settings you want to make to the background of that section are written here. So if you wanted to add a funky image, you can then start changing the position of.

You can start saying, look, cover will it contain, will it go over several times? Like here's the tiling option and stuff like that. So you'll notice when I click tile, you can have a background image and the color also. So notice it's doing both, like you can keep stacking, you can keep stacking stuff, gradients and a background image.

So you could have a background image and maybe it was of the sun and it was too bright on the top. And so you can keep stacking a different background there's over and over. All right, so that's background. All right. The next one is a border radius. So let's pull out, I think the best way to show this would be with a button to grab one of those out.

All right. So you'll notice our standard button. I'm going to give it some margin real quick on our spacing, just so it comes off the edge of the screen so we can see, oh, easier. Let's see. Maybe a little more. All right. So you wanna straight now the box has blunt squares. So our borders allows us to grab this and round them off.

So we can just up this and you'll now notice it changed so we can grab it here. So there's, this button changes every corner and this button allows us to go in and manually set each corner. So we can do this one at 50, we could do as much 25. We can do this one at a hundred. We could do this one at 40 and your notices gives us.

Textures to our button. That's the most common time to use borders. The other thing we could do is let's say we had a, another button, so let's grab let's just change it. So the background let's see, how would I do this? All right. So right now it's just a solid blue it's command plus to zoom in a little bit here.

Nope. Is that going to work? Let's hide that panel. All right. So right now this button just has the blue. Let's say we wanted to add a border. We can have select all the sizes. We're gonna add a border. We're gonna make it three pixels wide and it's going to be red. So we can now add borders to something.

So if you had two button types, you had one where it actually had a background color and then the white text, or you had a clear center and just wanted to give it edges. That's how you would go and style it just written here under borders. All right. There's a lot of options in here. This is really useful for like images and stuff where you want to change any of the blending modes.

So we'll have to go over that when we have an image or something, you can change an item's opacity right in here,

Hides that. Another couple of things here, you can build some box shadows. Yeah. We can get it, put it away. We can make it a little smaller. We can choose what direction it's from. We can put it on the inside of the box, again, choose a direction where I'm from. So like a nice way to do it. So let's say we want to rotate a little shadow.

We don't want it to be that far off. Probably. I probably want a little more blur or decrease the size a little bit and out something just pops it off the screen a little bit better. So that's how we'd use the box. Transforms get a little complicated and transitions. Let's see how I do this.

Let's see what are some interesting things to cart? All. Alright. Another cool option is here in, in this cursor panel. You can change the cursor when it's over an item. So let's say when we want it to go over to the button, we want it to click to a pointer. If I now go over here and I give now go over the button.

It's now a pointer. So for any of your elements, you can add custom curses on there. So that's pretty cool. If you had a, something you could grab and move on the screen, you can now, oops. Let me grab it. So that's cool. Let's see, we've got some just general filters down in here where we can grayscale stuff, do some other stuff.

Okay. So this would be how this would be applied to interactions, but you've got these two 2d and 3d transforms. So for example, you could set up an interaction and say on hover, I want the whole button to scale and get a little bigger, and then you could give it a timing, transition of whatever.

And when you could set up a hover interaction for it to grow and shrink depending on if you're hovering. So there are a lot of cool things in the effects and that's, it's either you're using it in combination with the interactions, or you're trying to use it before use interactions because some of the interactions you have to build manually.

So sometimes you can come in here and just quickly grab an effect and apply it much easier than doing customer interaction. So that is our style panel. This is where you will probably spend 90% of your time changing and tweaking. 'cause it. It's very easy to, command, grab a diff and pop it on the menu and now the rest of your time is going to be on this.

So once you really get in, once you're probably 10 hours in, you'll almost never use this left side and it's not oh wait, how do I do this? It'll just be, oh yeah, I click it. And I do something. Whereas this is where all of your changes, all of your tweaks and all of the brilliant, cool stuff.

Huh? Wow. So I think in our next lesson, we started in this one, but I think in our next video, we'll start to grab probably the most common elements and we'll start to utilize and do changes to stuff. And I'll just show you some stuff. And there'll be two Encore. We just handed off to you and maybe let you play around with stuff and go from there.

Joel: It just happens that I, you just used my last page. He notes, no paper. Oh, so this must mean I'm ready for a new notepad and be ready for my next session.

Joseph: Nice. So I would ask you, I would ask you, do you have any questions, but I'm assuming in some ways there are almost so many where there are none there are so many things like it's like, where do you even start to ask the question?

So I think maybe in the next video hopefully will provide some clarity or stuff like that. So this is probably a good place to wrap up.

Joel: Once again, a lot of good information. I appreciate the style you're using. And thanks for answering my questions that I did ask

Joseph: you bet. We'll see in the next one.

All right. Good job.

Thanks for reading!

Previous post

There are no previous posts

Next post

There is no next post