Teaching Webflow To My Dad

Building out the website

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

Summary

In this episode we will start building out our Nessie website, we will be starting on the desktop breakpoint and building our site one section at a time.

Watch Here

Listen Here

Weekly tips

Collapse navigator next to the canvas

Build one page section at a time

Separate similarly designed sections

Build the desktop version first

Always keep the end user in mind

Make things easy to find, tell a story

Transcript

Joseph: So we are going to start the actual website prep. So we have added some assets. We've done some, a little behind the scenes planning on what the site's gonna look like. Yeah, I think we're ready to dive in and just start adding stuff. I think do a wide framework and just get the basics going and maybe not do too much of the in-depth tweaking on each section.

All right let's jump over to your screen. So really, I suppose you can delete everything, but the nav bar.

Joel: So we go to our navigate or we want to actually guess we could just expand everything.

Joseph: Probably not, probably just keep it closed. That'd be a little too hard. Yeah. Just open up one. So just a headache. So do we that H one heading, yeah. And then

open up your page

rapper and then just want to delete the other copy.

So that's probably a main wrapper.

Joseph: Aren't you just hover on the H one text on actual canvas and yet just delete that. Hit the delete button.

We go. All right. So when you have the navigator open no tip thing, you open that up and then hit the middle button between the acts and the expand or collapse all. Yep. That'll push it to the side and keep you a full canvas size.

All right. So I suppose we want to start maybe just with the navbar

Joel: we got, this is our new font that we implemented last time, so that looks good.

Joseph: It is a little hard to read, so we'll have to decide we might have to up it. All right. So the first thing we want to do is we want to make sure we delete the container on the nav bar and put our own div block in.

Okay.

Joel: That's this one here. Okay. Should we do that

Joseph: now? Yeah, let's start with that.

Should I just want to drag all the content that's inside of it, over to the

dev.

Joel: So we just want to start dragging individually.

Joseph: Yeah.

Joel: Basically

Joseph: just keep it in the same yard. Perfect. All right, then you can do it, the container.

And then, yeah, we'll probably just want to make sure we rename that dif block. So we'll give it a custom class. So I would probably just name it like NAF rapper or something.

Nav have dash rapper. Okay. And we can play around the size with the sizing later, but I would say the one thing we'll want to do is give it a width of 80 REM. Just

actually, let's go. Sorry. Let's undo that now. Let's go. Yeah. Let's yeah. Yeah. Facts with that. So you're not on the right item right now. So you want to make sure you're on the right item

Joel: wrapper and I go here. Ady around. Yeah.

Joseph: Okay. There we go.

All right. So do you know what sections you're going to be doing?

Joel: And if I click on nav rapper, oh, are now wrapper. Okay. There it is. Okay. Do I know what sections what we're going to be doing? So we offline, we did talk through this, so we have a little list of our sections that we want to do to tackle. So we're going to have a hero section, I think in if I'm not mistaken, Fin sweet calls that header section instead of the hero section,

Joseph: right? Yeah. So whatever you're going to want us to, we're gonna want to go down to each section and name them accordingly. So we've got a section main. So you want to start with the first one and you'll just go through and name them. So what you need to do is you're going to want to probably just click, duplicate class up in the class thing. Yeah. I would just click here. Yup. Click that duplicate and then delete everything about the section dash and then type in whatever section you're gonna keep that as

Joel: we're going to call this header.

Joseph: Sure. Yeah. And then just repeat that process for all of those.

Joel: And then I think we were going to call our next one, a map section. Is that okay to call that a section dash map,

Joseph: whatever you want.

Joel: I am feeling in charge here. So this is good. This is fun.

Joseph: And because these are custom classes, it does not matter what you name them. These are just for your own sanity while you're looking through the navigator.

Joel: Okay. Now I'm gonna want a few more, so can I come over here and just duplicate some of these?

All right. How do I do that? Do I just copy and paste? I do that worked pretty slick.

I like this. All right. And then teased and then

C or all right. I think we over flitter and I think that's all the section we have planned out so far.

Joseph: Okay. Where do you want to start? You want to start in the first one?

Joel: We might as well start from the top.

Joseph: All right. So what we'll do is we'll just, we'll just start to throw elements in until we don't need to style.

So we're gonna try to do is either do layouts, do structures keep moving on. If we suddenly get stuck on something, let's just move to the next one. I'll try to keep this a very broad starting point. So if you want to start in the header so one thing that we're going to do differently in here, and I'll walk you through this one.

So on this one, we're actually going to use the image as a background image. So instead of adding an image element, we're actually to go in and apply a background image. Okay. So if you remember how to do that, Nope. Cause it's a background image of the header.

Joel: Okay. The header. Okay. All right.

So where do we go?

Joseph: So then you just click image ingredient

Joel: here

Joseph: and then we'll add in an image.

I think that was the far right. One, the Scotland one.

Joel: Yup.

Joseph: And then we're just starting to cover and then put it in the center

and the position thinks are I'm just a little center icon. All right. And then you don't remember when we were looking through the examples and that don't want the way that the image kind of scrolls past. So instead of it just being like, it's just stagnant and you're moving the page off, it looks like it's scrolling, but that's that fixed option at the very bottom.

So you can either do on this one or on the, we can just start with this one.

Joel: Okay. All right. That was a cool look.

Joseph: All right. Perfect. So then you can exit out of that tab.

All right. So we'll go back to the head of. Okay, so now you probably want to decide what we're going to do inside of it. So we're thinking just, let's just talk about all six texts of icon or six words on the left. So right now we can't see the we can't see the image because there's no height to the thanks.

So we'd probably want to give it a mid height just for while we're designing this of probably 50 VH. So mid height to there's type in 50

DH.

Joel: The H yep. Perfect. So now why are we not working in around here?

Joseph: Because if you gave it a REM sizing that would work for the desktop, it wouldn't work for tablet.

Portrait and landscape like the other mobile stuff. So we're not giving it a direct with our size. We're just saying a minimum of this.

Yes. Like even right now, it's not quite big enough, but right now we don't have other sections in here. So when you're working with specific sizes, like if you're doing an image, that's where you might want a ramp, but for when we're looking for whole sections, we want to have a way to come to that.

Alright.

Alright. So you can either, we can look at the page padding, so let's go into the full element. So next is page batting. So section header, page padding, and it is not applying to the background because the background is in the header. So we can leave that so we can go to the next one.

In-page padding go down one. All right. So we've got a container large, which will be the total width of the section. So then inside of that, we can add another section for where we're going to put our content. So do you want to add another

and see if you can figure out how you would get that? So first the naming positioning and layout to get that to how we want it. So if you start working on that, I'll be in the background.

Joel: All so if we're just adding some text here we won't do that. Oh,

we would like to probably center that formatting center. Then we want to add some

Joseph: so why don't you walk us through your thought process on how you're doing this? What are you trying to achieve?

Joel: All so what were okay. So we have, are we ever did block with our text in it next? So do we need a block for our aligned center call

Joseph: what do you, would you, I guess the question is what are you trying to achieve? A, you have a div block in there without a name, so that'd be good to first name it. So you actually know what you're doing because right now you've created a class called div block.

Cause you started to make settings to that. So I would undo your setting. First you should, under your setting should not be aligning center to stuff yet. Okay. So put it back. All right. So first I would go in name what you're trying to do. So this is gonna wrap. This is a rapper probably.

Joel: Okay. So this is our header.

Header wrapper.

Joseph: Yup. Header underscored, text wrapper, Yelp

Joel: dash rapper. Yeah.

Joseph: So this div block member, now we're only working with this div block compared to the whole section it's in. So compared to the parent element, what do we want to do with this dip block?

Joel: Compared to the parent element, what do we want

Joseph: to do? So inside the section, where do you want it

Joel: inside this section? We would like to center alignment,

one it center aligned, and then we would also like to drop it probably about a third. Okay. We don't want it over the castle, but we want it hanging down and the end of the sky.

Joseph: We don't know. I We don't know yet where the castle is gonna end up because right now we don't know if this is going to be the right height. We don't know if this is going to be whatever

Joel: that's true. Okay. So we don't want it to, yeah.

Joseph: I just want to get rid of the, sorry. Do you want to get rid of that capital E it's really annoying me for some reason.

Joel: Yeah. That's been bad.

Joseph: All right. So let me just tell you how, since it's the first section, let me just tell you how I would work this out. Okay. So the container large, we don't necessarily want to make changes to that. However, we do want to have the entire element moved. Because we want to position it.

For example, if let's see, let's turn this layout to Flexbox.

Joel: Okay. So we're taking the header, text a rapper, and we're going to change this to the text call flex box.

Joseph: Very tough

Joel: lay out.

Joseph: Yep.

Okay. So now let's align it to the center and center on justify

and align center.

Okay. So here's where we're running into a problem. We are trying to make changes to this div, but it is only making changes inside of its parent. So because of the container, large is a global class. We can't go apply at these settings to the container. So what we actually need to do is we actually need to grab the header text wrapper and put that above the container large.

Joel: Okay. So what is the container large? Where's that? Where's those parameters.

Joseph: So grab the hetero tax wrapper and put it above the container, large container, large in it.

Okay. Then put heading one inside the container large for now. All right. So now we can go back to our header text wrapper.

And let's do horizontal petty click on the page padding one real quick.

All right. Let's pull the heading text wrapper above the page. Patty. All right. Delete the page padding.

And then we want to try vertical instead of horizontal. What we're trying to do is get this center in the why is that?

Joel: Obviously it's not as easy when you're not the one driving. I understand.

Joseph: All right. Do we need to contain a large, but you had to leave the container large, but drag the heading out. Okay. Oh, okay. So we actually need to go to the section header, sorry. And when you make that a flex box. Okay. So actually when you undo, hit command Z several times. Yeah. Keep going, keep keep going. Oh, they actually stop right there. Actually do one more. Okay. Perfect. All right. So we actually want to make the section header a Flexbox and then align that to the center and justified in the center.

Okay. There we go. All right. So now we can keep working our way down. All right.

Joel: Now the text for me is a little bit too. So I would want the Nessie sighting up higher the way that he it's the castle.

Joseph: So we are not going to have, we're trying to do left or when you can have actually yeah. How do you want it? So you want it centered in the middle.

Joel: So I would want the green tax just a little bit higher. I just don't want it quite on center. I just want it a little bit above center. Okay. So would that be just a little bit extra padding

Joseph: and then align top instead of aligned center

Joel: top.

Joseph: Yup.

Joel: And then padding on top

Joseph: and then we can add some padding on top of it. Yeah. If you want, but not on this. We'll add that to the actual container. No.

Joel: And then can I type in can I test six round or slump? Yeah. See, like that's perfect to me.

Beautiful.

Joseph: So the one thing that I would definitely say is the space. And what did you learn about spacing

from FinSweet?

Joel: What did I learn about spacing from FinSweet?

Joseph: There's already a global spacings. Yeah. There's a global spacing system that already exists. So instead of sending six REM, now you're gonna have to change it on tablet, on landscape, on mobile. You want to use the top padding so that it changes it unless you're happy with that, how it is six runs off.

Joel: Oh, I happened to be happy with that top padding.

Joseph: You want to use padding top pad and medium? Not just a random six Rams, but that's. But we can move on to the next section. All right. So that's a good start to this one. The one thing I would do is I would also make it an, a gradient overlay on this image.

Cause it seems like it's a little too bright, so let's grab the section.

Joel: Okay.

Joseph: And then go down to the overlays imaging gradient background first. So

I had another one and then we'll just want to do an overlay. So not an image top, top areas. Yeah.

Let's do that. Yep. No cover overlay. Yes. And then you could pick the opacity that's the far right. One, a value or you can use the little dragger that's yeah.

I was

Joel: just doing it to my text as well. Or is it

Joseph: just the image, but we'll probably actually want to change the text color potentially, but Actually let's just leave it. Let's we can ponder this. Let's go to the next section. So we keep moving on. This is stuff we can work on later. Okay. So you've got your map section. I'm gonna let you try to knock this one out. Let me know if you have any questions.

Joel: So now in this one, really, I think all we're doing is adding an image to this one, if I'm not mistaken. So we're going to add a

Joseph: whatever you're happy with, you don't have to decide, do this. Depends on how you want to style everything. If you like the dark text, it might look better in green.

If you like it darker might better do a white text.

Joel: All right. we're adding a div block to this one should be a really easy one. So we're adding a let's see, what are we calling now? What I should have is I should have had my notes out on my naming convention.

That's what I really should've had page with the, and I'd actually even taken a screenshot of the FinSweet naming convention so that I would remember all of the. Dashes and underscores.

Joseph: So dashes is just how you've separate names underscores how you separate components. So you could do what I would do is map underscore, yeah, I would do map underscore component wrapper, component dash wrapper,

and really to start, it's all about making sure as you're scrolling through the navigator, you understand what each element is.

Joel: And really, I should just have my I should have my cheat code. Until I get more familiar with this. All right. So we are going to our image section. It's not a background where my inventory is images. That's an element. No, because it's a media and this was a, what was this a map?

was this where we can't add it from the con from the from the what's the section called from the

assets.

Joseph: So that was the CMS.

Joel: Oh, okay. There's a reason. I can't see that suddenly.

Joseph: I don't know. You have quick settings on it,

on the actual little blue icon. That's the, or that's fine too,

but the thing is you probably need to add in content into the section so that way you can actually see what's it needs to have height to it.

Joel: But wouldn't the image.

So the image wouldn't automatically add height.

Joseph: Yeah. I don't know. I think it showed, but I guess not.

Joel: All right.

So I could define this the layout, my component wrap, or I could give that a size to it. So I could define the my max width to that

Joseph: you don't have an issue with,

Joel: so my max, why you're suggesting

Joseph: they don't have. So you need to start adding components, unit, whatever you're gonna add on top of this image to give it some depth.

Joel: I don't know what text I'm I guess I am adding some text on top of here. So I go on to my section. I can add another div block

and then this can be my all right. So what is my, without my clients without my naming convention stuff on my end. How on my naming? Let's cut for naming a text block.

Joseph: It depends on your strategy. It could be a copy wrapper, probably. It depends on how your depends on how you're building it and how you're stacking stuff.

Joel: So if I'm just adding random somewhat random coffee, so I'm not necessarily, it's not some, it's not copy that. I'm going to be reusing again. So it's going to be related to the map. So this is math component copy.

Joseph: And if I was right now I would just be doing a map. Copy rapper.

That's what I'd be doing. I'm assuming you're adding like a heading and then some paragraph, so you,

Joel: and then we're adding. Is this, am I defining this as am I adding another do block now as a paragraph?

Joseph: No, that's just an element. Yep. It's just an element. Okay.

Joel: So Greg, my or no, some in here. Okay.

Do I need to name this?

Joseph: No, not necessarily because

no. All right.

Joel: All right.

Joseph: And are you adding to that?

Joel: That's an interesting thought I could,

Joseph: donate or just block what'd. You can also use the command E for in search for,

Joel: and then I to want to take this, I can take this down to all right. Now I would have expected our math to show up here to give me some start of a, a.

Joseph: Okay that would probably have to do with how you're structuring stuff. So I definitely think you should pause for a minute and just look at your structure of how you have your section structured.

Joel: So is this because they are sibling elements now and they're not they're not child elements.

Joseph: That would part, yeah, that's partially has to do with it yet.

Joel: So I move them underneath it.

Joseph: All right. So part of the issue is with how you've set up the image. So when you want, so when you've got a section and you want an image inside of it, such that you've got copy and an image next to it, that's when you use the image element, but you're wanting to place elements inside an image, which means it needs to be a background on the section.

Joel: So would this make more sense than to do a grid,

Joseph: delete the image and add the image to the background of the section.

Joel: Okay. The rapper.

Joseph: Do you want it to appear just in the rapper? If you want it to appear in the whole section. Yup. You'd want to do the whole section

Joel: as a background section. All right. Okay. We can move that. That makes sense.

Okay.

Joseph: You'll probably want to do cover that's the setting and then determine where if it's centered and then whether or not it's fixed or not.

Okay.

So on this section, I'd add a very dark, so you definitely wanna use cover that's your best bet. That'll cover the section it's in. All right. So let's click out of it just up in the other style panel. That's click. Yep. All right. So you want to add an overlay on this one? I think, and I would make this very dark.

Yeah. That's probably a good darkness just like that.

And then I would go to your text and probably change it to white in this section.

Joel: All right. Do we need to do a new add on class?

Joseph: Yeah. The first thing you go to your text. Yup.

Joel: Okay.

Joseph: And then do you remember the, so it's text color and then that's that the class at all?

Joel: So you're saying here it's text dash color.

Joseph: Yeah. So it looks like there's only a couple color. So we don't have a white created yet, so I guess you could create the class. Yep. So then create that and then you could change that color to white in the topography setting, then scrubbed up probably the white from our car color panel,

our SWAT swatches.

Okay. Then I'd probably do the same. I'd probably do the same for the paragraph. And now that class should exist and you don't have to have all the dashes, you can just be like, yeah, that's perfect. All right. There you go. And so then the question is, are we centering this again?

Joel: Probably would make sense to get them centered at least,

Joseph: Okay.

Joel: All right, so now, all right this is where I'm going to get tripped up. Can we just turn this into a Flexbox then again?

Joseph: So you always want to start with the parent element once giving its current size and you want to go to a custom class. So the map copy wrapper.

Joel: No. So then what fits into a component?

Joseph: That's not the copy wrapper. And then I would probably, I would try centering it. So I had to go down first. I'd sent her the text. See if that works. There you go.

Joel: Yup. I don't know if I want to.

Joseph: Yeah. Okay,

Joel: good.

Joseph: All right. So then on the actual. So we'll actually, I actually know. I know I don't, we're missing, we are missing the vertical padding. So open up to this is not in the page padding either, right? So you want to take this whole section and put it in the page padding, cause it's supposed to be in the container large,

a further down, open up page padding and then throw it in a container. Large undo. You want to go open that up? You want to throw that component in this container? Large

Joel: throw map, component container, large. Okay. Through there,

Joseph: but you had started building it. You added a component to the section, making it a sibling element of the page padding. You didn't put it in. You didn't go enough layers in. So if you look at the next section NFT or something or newspaper, you'll notice there's page padding. Actually, I'm going to move our images real quick.

Okay.

Joel: Sorry. I can minimize the now far

Joseph: too. So you'll notice there's page padding container large. There's one more that we're missing. And I just need to find that real quick. It's vertical classes, vertical padding, I think. Yeah. Main rapper section. So I think what we'd want to do, I'm trying to figure out where I'd want to add the vertical padding. Let me go look at quick.

Boom. All right. It's a page rapper named wrapper section had a component. Okay. So that's what we missed. Okay. So we want to add a class. So it's the first one inside container, large.

Add a new dev when you've got the container large section. Yeah, it's a command E let's throw a div, and then you want a name that diff padding vertical in that class starting exist.

Okay. So you use grab that. All right. So this is one of the calm, the classes where you have to select that.

Joel: All right. Close says you're not currently logged in.

Joseph: Okay.

Joel: A lot of back in,

Joseph: I guess that's your copy. All right. So let's go back to the container.

Joel: All right. Let's see. So we're working on react to. The dinner container,

Joseph: the container. Yup. Command D out of div and a name that diff yeah, padding vertical. Okay. And then you want to give it so that this is the combo. So now it's padding vertical, which means it's going to add padding vertically. So now you want to do a combo cloud or the add-on class of what? So you can now do padding dash actually, I would just type in pad and then pick a size. So you can do large. Let's start with pad a large. Okay. And now you can put your map component wrapper inside. is you grab it and put it for you to go write a little more and then write 180.

Joel: Yeah quite do well, let me go right in.

Joseph: All right. We'll hit command Z on that item, then open up patting, vertical and commit maybe. And then do week the bottom one. Alright, there you go. So that's how you will give height to your section.

So you could also go probably I'd probably go pad X huge or something just cause pad large. Isn't nearly enough. Cause you probably are gonna want to take up a decent chunk or pat XX. Huge.

Joel: Where are we at? This one could change this.

Joseph: Nope. Delete it. Just remove it, backspace it, and then add a different one. So pad X huge or something. That's probably actually what we should've done with the top one. That's the component we were missing, which is why it wasn't giving us the sizing vertically.

Try moving this back.

Right here. Scroll down a little bit. We're losing you.

Joel: I can tape some of the splash screen. I just wanted to get a little bit of coffee in here so that it didn't just completely.

Joseph: Okay. I would definitely say let's take the fixed setting off the top thing. Cause it does kinda look weird having two images and we might have to change up the position, so it doesn't go image. But it's weird. I think to have both fixed. See if you can remember how to take that fixed setting off the top one.

Joel: So we go to section main wrapper and then we go to our background, maybe element main rapper section header. There we go. And I don't like the way that text.

Joseph: Yeah, we'll figure that out. A little later, the one thing we didn't have now is we actually want to DOE delete the REM that you added on the padding in that site. So I think we added it in just the main wrapper or sorry

Joel: that we can deal with that later, okay. Yeah.

Joseph: All right. So let's go down to the next section you're going to build, and that's your newspaper one. So what I would do is right off the bat, I would go in and fix the vertical padding issue. So see if you can figure out how to fix that in the next section. So to see how you did it in the first one, and then fix it in the second one.

Joel: All right.

Joseph: Okay. You muted yourself.

Joel: Sorry. All so I was just, I was kinda mumbling, so that was okay. You didn't miss anything intelligent. I'm scrolling through these sections here. Painter large. So we want to add a, another div block which we're going to then look for had backs

Joseph: so that, so if you look at that and I'll go look at your sizing, go look at your sizing on that.

Yeah. Command C command Z. I think you must read it. There you go. So now, if you look at Patty, it's huge. So now go to patting H X huge. So click it, but notice now it's padding on all of them. Cause you didn't assign the vertical.

Joel: Okay. Padding. I just want to name this patting vertical

Joseph: and then give it to size

Joel: thing. Yeah. Okay. And then we don't know what slides I want yet.

Joseph: I'd probably just give it one so that it's a filler. Yeah. I'd start with one,

one other interesting thing that we could change is if you look at, I just wanted to do this while we're thinking about this in your Middlesection. The copy is a little wide, so that would be exactly a good place to change the container width. So right now, instead is container large. So you should go up to container large.

Joel: Okay.

Joseph: And then drop and delete the class and just add in container medium. So you can do COMT med and container medium should come up. No space. There you go. And that's also not short enough, so you could do container small.

Let's see. That's a max with a 49. I guess that's checking it, but all there we go. I guess it's still on small, small actually doesn't make sense. But okay. We can tell, take a look at that later. All right. Do you want to close some of your, like the main rapper, your son, some your other clothes at all, but just the way that works, I'll just collapse it all first and then refund where you're at. That's okay. There we go.

Joel: All right. Makes this mine newspaper. So this was my I just want to open some of that up again, just trying to use that as kind of some cheat codes for how I'm structuring it. All right. And then let's see. Now we have here, we have an image, but this really isn't the background image. This is a featured image. That is part of the a highlighted image that could, we could talk about that. Isn't. So that's more just inside

this room.

So that I can just insert as an image here.

Joseph: No, because that's the background or, sorry. Yeah. Yeah. You do it as an image. Not as the background. Yeah. Not as a background. You could, but the problem is, so the background images play differently to screen readers and stuff. So when possible we want to add actual images.

What did you just do there?

Joel: Okay. Oh, so I had clicked on background, but I didn't want to do that.

Joseph: I don't know how to do,

Joel: I just want to add an image. I want to do that from the element

I want to go here. So can I just go right from immediately?

Joseph: I always don't start with the media. Always start with a block. I think you added the image section beneath you. I think you go to the image to the section beneath you or something. Okay. Yeah. So I always start with command E and then image.

There you go.

Joel: And that's really all we want for this particular image for now, or for this entire section for now.

Joseph: Oh, it looks like it's doing decently. I would say let's start by grabbing that whole section and let's bring it above the other two. Let's split them up because I do some of that white.

Joel: So we want to have. So we want it. So we want this after the header.

Joseph: Yeah. There, and it is a little big side almost. I guess it's not too bad. I was almost gonna say, I would almost go from container large to container medium.

Joel: That would be that's reasonable. I just delete this

Joseph: and this really should be shrinking it down 60 room. Yeah, it goes 64 Ram. Oh, I guess we're the problem is actually you want a command C once or outside knocking Menzie command minus.

Do medium. Yeah, the problem is we're at we're zoomed into a low pixel thing. Okay. There we go. Now scroll up. Okay. I don't know why. Cause 64 REMS is, yeah, it should be smaller one. You can see actually the copy go down to small. I don't know why that's well, actually, nevermind. Let's we'll deal with that later. Let's keep going. I think it's looking decent. Are you starting to get there? Let's go to the next section.

Joel: Okay. All right. So we've got newspaper header map. So then we're on tour NFTs.

Joseph: Yes. Okay. So let's do the same vertical padding, all that stuff. And this is where we're gonna actually pull in our CMS stuff.

Joel: Okay. So it looks, it's going to be a little bit more complicated than. This is going to be had vertical, and then this is going to go large.

Joseph: Okay. So what we're going to do is let's go down to your section that you're working on.

Joel: Oops. Do I do this in the wrong place?

Joseph: So open up your section all the way. There's some other on the open device.

Joel: One second here. Excuse me, one second.

Joseph: So it was finishing, opening up your section? Yeah. Just cause there's some more stuff in there. Okay. So in the. Oh, sorry. In that cutting vertical. Let's do command E at a div.

Alright. And let's name this NFT component for NFT honor score component.

Perfect. All right. So we're now going to go to our elements tab and we can obviously she's coming to you, but we're gonna go to the elements tab and we're going to go down to the CMS and you're going to drag in a collection list. Okay. So you're never collect a select list you want. All right. And then do command E and that image.

All right. So now you've seen all these purple options come up. So that is an option to bind something. So let's also go over to the style panel, into the settings icon. All right. So these are the two settings where we will start setting up our binding. So under the settings image or the image settings, that's on the campus, let's grab, get image from Nessie, NFT, sorry like that.

And then select the field and then the NFT image. All right, there we go. So we are going to probably want to set a heightened with you. That's really cool. Now it's already pulled in all those images. So let's set in like a 10 REM height.

Joel: We do realm.

Joseph: Okay, maybe this does not take a REMS. Yeah. Try it over there. We might've already had to set. All right. Let's just do 160 pixels for now. We'll have to see if that's something we can change and then,

okay. So they are all coming up uneven sizes. So there's two options. Number one is that we can leave all of the options, different sizes, but that doesn't look very good. So what we're actually going to do, so we're going to leave those images. We're actually going to pull in another div into the collection items. So grab, go collection item one now and command E grab a div.

And we're going to give this div a size of, so now I go to the style. So we can set a size and we're going to set the width to 10 REM and the height to 10 red.

Okay. So now we're going to go back to the settings icon, and we are going to click get background image from Nessie NFT. Perfect. And then select the field. Boom. All right. So let's delete the first stop . The first one. All right. So now we just want to work on centering it. So we want to make sure it's set to cover and center. Oops, go back to where you just were. We want to be able to set the click under the NFT image. Somehow we want to be able to center it and cover click the NFT image real quick.

The NMT image setting started over in there. No down under where you grabbed the NFT in the trunk. Yeah. There you go. Okay. All right. So go back to the style panel. I'm trying to remember how we would style this to cover.

Maybe we have to go down to backgrounds, open up the background tab and then do image and gradient and then clicks, cover and center. There we go.

Okay. There we go.

All right. So that's how we roughly start our CMS. So that'll crop some of the images, not all of them are a hundred percent. All right. So now the question is, how do we want to sort this? So I would grab the whole collection list. If you go to the navigator and grab the collection less, not the collection item.

Let's now change this to a grid.

Joel: All right. Good luck with that. How do we do that? That can we just yeah. How do we do that?

Joseph: So just scroll up to your layout and select good

In your settings and your style panel. You just scroll up, sorry, not in your settings and your stop and I'll scroll up and click grid to, right? Yep. There you go. So let's go three wide. So let's add a row.

I guess how many rows do you want or call them? Sorry, let's go through restart. So add a column, sorry. So you could do four by three, three by four, however you want.

Joel: Yeah. Depending on what other information we add, this should be sufficient.

Joseph: Okay. And then let's change the gap and the gap to one red instead of the pixels

Joel: one around.

Joseph: Perfect. All right. So that is the start of our collection.

And so later we can pull some of the copies, some of the descriptions, some of the other stuff too. That's our very stark, how you bind items. So I would say, do you want like a header in there above the collection list that says like Maya, my NFT collection, or do you want to just left like that?

Joel: It would make sense to have a header in here.

Joseph: Okay. So you would just add that above the NFT component.

Joel: Okay. We'll move out. And so this is going to say this is going to be a, an Ft

Joseph: toppy rapper. So dash copy dash rapper

Joel: header, wrapper.

Joseph: Copy. Because it's not a header.

Joel: Oh. I thought it was going to be a header wrapper. Yeah, you're right. Yeah, you're right. Okay. All right. So we're moving this up to above the ball's there. Then we're adding in, we adding, we're adding a dude block.

Joseph: Nope. Just the heading because of your copy rappers now wrapping all of your heading.

Joel: And then we're saying my off after that, changing that.

Joseph: So here's how we want to do this for SEO settings. So we actually do want it to stay the size of a huge one, an H one, because you want to be visible. But for SEO purposes, we need to have it H two. So over in these styles panel, you could now do open up the class heading large.

Joel: Okay.

Joseph: Because on our style panel, that was a xL. Sorry, a headache ex excellent XL, sorry, extra. There you go. And then how do we center this?

Joel: We can make them flex Fox and

Joseph: no first off, no, cause you're on a different you're on page padding. So you need to undo that because you were just about to make, so there's two ways you can do this. You can either add text align center, but that would stack classes on the actual heading. You could do that or you can just grab the copy wrapper and center that cause that's a custom class

Joel: we can do is copy that center alignment center here. Yup.

Joseph: And then something I would probably do would be to add two Rams of padding on the bottom.

Yeah. Just so kind of space. And then it seems like the whole padding vertical needs a little more because it is a little too close to the map. So to add some more spacing in there. Nope. Just on the padding vertical. That's what the petty Merkel does.

Joel: And that won't change it on added on other padding verticals.

Joseph: No, cause that's a global add on class. What are we, what are you talking about? Oh no. So you need to delete padding large and do padding extra large.

Joel: Okay.

Joseph: There we go. So it started that section. So we did the news, we did the NFT display. So I see we have, we did have the nav on there, but I'm seeing, we need to add a history. You're going to have a history section, a forum section, and a footer. Those last three.

Joel: We got some videos of story.

Joseph: Okay. All right. Let's go to the next one.

Joel: Okay. Next one is our form.

Joseph: So if you just want to clean up the, yeah, make sure that's all finished off in there.

Joel: And then we're calling us extra or grabbing large.

Joseph: Yeah. Either way. That's the nice thing about having it, having all of these separate div blocks is you can literally now go padding vertical and boop, delete that. Add an extra large, add an extra huge or whatever, instead of having to go find the stacked. And you can just copy that padding vertical dev block and paste it into the bonding.

Joel: The bottom two. Okay. Very good. You're tracking.

Joseph: Oh, I see what you're doing. Okay. And that actually should have been on our on our first section when we copied them all out of the way that wasn't. So what are we doing on this one?

Joel: Really, we had already really done this on our sample site. Really just that straight up. Can we copy this from that other sample for site?

Joseph: We will not want to cause the the classes are different, so okay. But we can copy the copy. Yes. So it's one of them that,

Joel: all right, so this is our myths. This is our.

Joseph: Okay. So that is so Howard was thinking well, so delete that all, when you are going to be searching, let's say you're on the next page and your starting to build that. Yeah. So you actually want to do form underscore component because that is something we might use on other pages. And I would just not, I would lose the rap.

Oh, that's fine. Yeah, that's fine. Perfect. And then let's add in, so you can click done on the, how many videos do you have?

Joel: I think I have five floats make room for six.

Joseph: Okay. So let's see, I do a two. Perfect. All right. So let's now click down on the very bottom. You might need to scroll down a tiny bit. We're losing that bottom thing. Okay, so now let's grab the first item, the first block on our grid. Oops. Click done. Do community and add in a video.

Yeah. All right. So then you can put in the uRL. All right. So we've got that. So on the previous section, then the the origin story, how are you wanting to display that information? Are you wanting to one of those back and forth grid where it's got some content and image, content, and then like go down or you want it to pick a timeline? Are you like, how are you wanting to display that?

Of these videos? No, the origins.

Joel: Oh, the origin. I just thought it's was just a little bit of paragraph texts.

Joseph: Is it, how is it separated by year, by

Joel: it's really just some CA it's really just some so far. Just some short paragraphs of, from Wikipedia. Yeah. Or they

Joseph: categorically, I'm not ask about the actual content. Are they, how are they, how is it sorted? Is it categorically? Is it chronologically?

Joel: It's so far, it's just a little bit of information.

Joseph: Okay. Let's I just want to see if we can teach you another thing. So let's inside that section. Let's add a new div. To want to click the vertical padding. So we had the div actually goes in or that's fine too, that he can drag it. So if you're in the item, if you have the items selected that you wanted in and it'll automatically pull it into that item. All right. So let's change let's name, this origin component or origin wrapper either way.

All right. And let's bring in a tabs element. All right. So what this will do is now we can first go in and start naming these tabs, but you can name them different things. I don't know if these are categories, like we can name them categorically so you can click edit here.

Joel: And we could do so we could do a. Back folks or fact section folks or something like that.

Joseph: Yeah. Whatever. However, the information is sorted it's about sightings or get whatever you want.

Yeah.

Joel: There. How about we'll make a fact fiction, fables or

fun

Joseph: so you can X out and then actually go in you name the each tax. You have to double click to edit that text. Oh, all right. And we'll end up going into organize them later. So if you want to click on that little extra element underneath yeah. Click that. All right. So inside D tab one, so you'll see how it's sorted. It's very interesting. So you've got a tabs menu, the actual links, and then the actual contents, if you want in this one, if you want to do a command E open up a div and we'll just call it coffee rapper for now, actually we probably should call it tab one.

Copy, wrapper, or fact, I guess probably not tab one. Cause we might reorganize the tabs. So do origin fact copy wrapper, something that you'll fact copper after they go that's good enough fact copier happen.

And then you can throw in just a paragraph by. And then throw in your copy. And you said, this is not our copy. This is someone else's. So it's just, we're not going to cite our sources. And then later we'll have to learn how you like we style the tabs as we're hovering on which ones are active, et cetera, et cetera. You want you to scroll down a little bit? We can't see the bottom.

Actually it's pretty ugly. Get rid of that. That's just put Wikipedia. I don't think we're actually going to use it or, okay, good enough. So then you need to go in there. Perfect. Yup. Yup.

Joel: Alright. So fact fiction,

Joseph: Cindy, to go into the tabs content menu.

Joel: I got to figure out in this menu here that I got to make sure I'm in the right minimize that. Yeah. Link blank. All right. Contact. Back here. I need to do a paragraph.

Joseph: So it did first.

Joel: Yeah, we do little did I not do it? Do okay. Yeah, but I'm calling this my this is my

Joseph: fact or fiction. Sorry. Dash copy dash

Joel: origin

Joseph: now fiction, dash copy. Dash wrapper.

Joel: Excellent coffee underscore rapper.

Joseph: No, the underscore just signifies. If it's a new component, that'll house. Many of us. So hypothetically, we could just put the paragraph in here without any dip block, the issue would come. If we end up adding a header, if we want to add styles or sizing to each tab, we definitely want a div block inside of there.

So that's why we just go and grab the and we did not add the fable to the tab three. Did you command C do you want to make sure that we still have copy in the first tab preview button?

Yeah. And then just click the first one. Okay. There we go. Okay. So I will have to work on some copy for each of these. Okay. So then we've got our footer section. That's the last one.

Joel: So the fact that the fable is gray, is that throwing me off? Does that signify?

Joseph: It means it's the active tab. So if you click on the settings, if you clicked on the settings icon,

Joel: okay. There now we're in the fiction.

Joseph: Yeah, there you go. Yup.

Joel: Okay.

Joseph: All right. So now for our footer, I don't know what you want to do on the footer.

Joel: I really haven't thought that far ahead yet,

Joseph: so we could wait for a little bit then on the footer, we wouldn't do that. Okay. So why don't you condense real quick, your last sections. And then what we're going to do is we're actually in a, before we're done on this video, we're going to do one or two more things.

We're going to actually go into each section. So grab the first one, the section header, and we're going to go into the settings icon, and we're going to give them each an ID section. You give them each an ID.

Joel: Okay. What does that mean? What would that look like?

Joseph: I would just, you could do header our. And if they like, so it's just that if we use anchor scroll and then we'll also want to rename the tag, see where it says diff, we'll go back up. Sorry, go back to the first one div and we want to go down to section. There you go. Perfect. All right. That's just for a Google, letting them know that each one of those is its own section.

And then just go grab a main rapper. I just want to make sure that's gotten the right class, the main rapper real quick, the main rapper, and then just give it a diff of go to tag and go to oh, I think I've made, yeah, that's the one you want me. Okay, so let's for fun. We're just going to do this, the last thing we're going to have this video. We're just going to go grab one of those tabs for the up in the navigator. And we're just going to set up one anchor scroll.

So if you want to rename one of those things up in the navigator to one of the random sections

Joel: what navigator, what did we talk about?

Joseph: The nap bar? Like the menu buttons. Yeah. Yeah, just rename one of them to a section and we'll link it to one of the sections. So is you have to double click on the button to name it, text yet. Stoke the up. There you go. And rename it to a section.

I can barely read that. We'll definitely have to. What does that say? Okay. So then if you want to go in the link settings, you can go over one more

Joel: page section. We're going to call this video.

Joseph: Alright, there you go. So you can click the preview button. Now. Now we can click that.

Joel: Bam. It takes us right down to the video.

Joseph: There we go. So there is one if you are building this, let's say you've got many pages. You can you don't actually use the anchor scroll. You actually use a custom URL and you put in the full URL of the page and then do hashtag that. So that way it actually jumps you to the right page.

All right. So there's still a bunch of work we need to do, but I think I think it's a good time to wrap this up for this video. I don't know. I don't want, do you think we can knock it out in one more? Do you think we'll need to? And we actually got a bunch of other,

Joel: I think it might be a couple more, but this is good stuff.

Yeah, I guess we have to add some interactions and responsive stuff, but all right. Good job.

Thanks for reading!

Previous post

There are no previous posts

Next post

There is no next post