HTML elements + tool panel

Summary

In this episode, we'll learn how to add HTML elements onto our canvas, the ins and out of the tool panel, and much more.

‍

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: I know we tried to cover a little too much, maybe a lot in the first video. But we'll take a deeper dive in this one. How are you feeling after the first video? You ready?

Joel: That was good. That was good. You did good.

Joseph: All right, here we go. All right. So this video, we are going to focus on the left side.

The designer, all of these random tabs, we're going to either take a deeper dive into each one so that you understand because unless you hover them, they'll show you what they are, but otherwise you're just going off the symbols. So when I started, I'll take a step back when I started learning the, several of the people I was following and taking courses through, it was.

You're not going to learn something until you use it, which seems like a really good way to start learning a program. I'm not using something. I'll just push it down the road. The problem is when you start to solve problems, because this building in Webflow is about putting a puzzle to. When you are handed four or five pieces and everything seems to work really well and fits together and makes it really simple.

The problem is when you're only shown one way or one set of tools or solutions, when you run into a roadblock and get very challenging cause you didn't learn the surrounding content. So we're, I think I'm going to try to remedy that mistake and we are going to end up taking a deeper dive into each of the.

Each of the elements, each of the topics then you might be ready for or need. But I think long-term, it'll help you when you run into a challenge or you're trying to design something, you'll know all of the options and you can easily start eliminating stuff instead of the only having two options available to you.

You're like, all right, neither of these work. Now I've got to go learn a whole new tool set or way of doing things. Does that sound good to you? Yeah. All right. All right. So our first tab here is the elements. So I've blocked the, all these down. So they just a little easier to read. So this is your canvas, this white screen.

So to build your website websites are built in the block model, which is, very similar to WordPress. This isn't any different. And that is every section on every website is a square inside of a square with different contents. So if we look at. This right here, the whole website is one big square.

Then right here, we've got this white square with the canvas right here. We've got another square and inside that, so that is the structure of web design is just squares and squares. So anytime you're adding any elements and that's, we'll explain that right now to the canvas and you'll be using this plus button.

So another way to get to this and this. Might be too soon, but I'll tell you, so when you're over on the canvas, if you don't want to open this up and go and look for something you can just over here hit command E and that'll find anything and you can just type in, oh, I want a section. And there it is. So instead of going over here and grabbing a section and dragging it on, you can just hit command E and pop it up.

So that's a really quick way to find stuff. All right. So in our. Elements panel. Let's see how many other 1, 2, 3, 4, 5, 6, 7, 7 different sections of content. Are you ready for him where it take a deep dive? All all right. Good. All right. So the first section is the layout section. So this is pure structure of organizing your canvas.

So you see there. And there are titled section container grid and columns. So I'm going to open up basic year, cause it might help to understand this. All right. So the basic building of all of Webflow is this dip block right here. Okay. This dip block, this is the most common thing you would probably use.

This will be 50 to 70% of the elements you drag onto the canvas will be this div block. So we're or I'm sorry. Web flow has pre. Set styles to the dip block and it's called them section container grid and columns. So this section is full wit. This container is not full width. So web flow is just gone and created classes and stylings for these.

So we are never going to use any of these layout items. The ones were a flow. We will always be doing it from scratch. The issue is Webflow is already put styles on them that might not work with our site. And so instead of dragging container on and having to remove and styles, and then every time you drag a new container, you have to make sure the styles are cleaned.

You will just drag a div block. And so for example, we might drag into block here and we might call it section. But that has very different styles than adding a section here. Because if you notice this section says section, but there's no class over here and I know class we're going to get ahead of ourselves, but this has a, this is a div block with a class of sections.

So that is how we will be building those. So for any layout, any structure, we will just be using the dip blocks. You don't ever have to worry about the layout panel. We will never use those. So here we've got diblock that's our most prominent element. I would definitely make note of that. If you are ever trying to organize or structure something, you will grab the dip block.

So we've also got list where you can make a, just a simple list. So this can be number one. This can be number two, this can be number three. So it's just another pre styled that a web flow has made for us. So that's the list we've got. List items, which I think would just drag that, wait and see drag that into the list.

So that would just add a fourth item. Now we've got four. We don't use this very often. We've got a link block and a button. So let me pull both of those out here. Okay. So a here's how. The link block is different than a div block. I'm assuming you can very easily guess this. So a link block where any, anything you put in it.

So if I put a heading in there or I put the list inside of the link block, but is ever in the link block, wherever you click on that is the link to the same thing. So it is just a div walk. That pole, when you click it, it pulls you to another. A button does the same thing, but you are limited with what you can put in it.

You're really doing text. So you could go, 1, 2, 3, 4, but you're very limited. So you've got a class button, very similar to WordPress where you can do a lot of things with that. That's also very useful. So in our first panel, in the basic panel, the only three things we'll really be using are the button, the link lock and the dip.

Joel: We got a good. Oh button.

Joseph: Yes. So those are the three things to pay attention in basic. So in topography, we've got six different options. So your very first one is heading. So any largely styled item could journal X, let me delete all this other stuff we built. All right. So anytime you're trying to stop. Text and you don't want to just be a paragraph.

You'll always add a heading in and then you've got your paragraph text very common. Then you've got a text link

so we can do 1, 2, 3, 4. So instead of putting a link block, I could put, so let's do command E we're going to do link. So now I will, inside of this, had a paragraph and I'm using command you to open this up. You would have our alarm it's 1, 2, 3, 4. So those don't look any different. Nope. So the one is a link block and the one is a text link.

So I can add more things into this link block. So if I want an image in here, I would use the link block. Let's see, where were we? So we've got our heading our paragraph, our texts. Our text block, which is very similar to our paragraph, but I

will have to get into some text details before I think we can dive deeper into what, how they're different. And then we can set up,

Joel: can you minimize the basic block so that I can see that since our pictures are over top of that, can you shrink the compact, the basic block,

Joseph: the basic.

Joel: Up above the topography block.

If you can.

Joseph: You want me to move? Are

Joel: yeah, that'll work too. Or if you just compact the basic block up top, that would be,

Joseph: oh, gotcha. I see what you're saying. Okay. There we go. Now let me throw you back that way. It stays the same. Thank you. All right. So you got your most common texts. Things are your heading and paragraphs.

So those are the two I would make note of the link block and the text block are not, are used or not used very often either with the not quote either. So the other one you want to pay attention to is rich. So rich text is how you style a blog. So for example, if you have a blog and you're going to have a heading, you're going to have paragraphs, you're going to have H twos instead of having to add in every element one, after the other, the rich text allows you to quickly add in.

You can add videos, you can add images, you can add graphics all inside of this. Whereas up here, it's really hard to add an image in your heading because that's not the same. So rich texts is important for blog or any long content. So those are your important items in typography, your heading your paragraph in your rich text.

So far we've covered three of the three of the categories and really the only things that are going to matter to you are the dip block, the button, the link block, the heading the paragraph in the rich text. All right. So next under. Whenever you are trying to transport the data from your CMX CMS collection, you will take a collection list.

Now this won't really make sense right now. But that is how you'll, once you create a CMS, that's how you'll utilize it.

Joel: So that's more like in a situation like the blog that we

Joseph: talked. Yes. Yes. So for example, when you say your blog, all of them had an image that you attach in your database. You can now drag in an image element.

So let's just go over here. I can do command B. I can grab an image. That's gonna work cause we don't have a we will save that for later. Get ahead. All right. So that's something the CMS tab. All right. The media tab, you can pull in an image, you can pull in a video, you can pull in YouTube and you can pull in a lot of the animation. So the image is going to be a very common one and then video and YouTube somewhat.

And I don't know, are you familiar with Lottie animations? Do you know what those are? Yeah, I've

Joel: seen 'em all man. Up to. Yeah.

Joseph: Okay. So in what it is pretty much a short video, a series of still images in sequence. So the two or three second video might have a hundred frames and a lot of animation allows you to trigger a scroll, a hover, a click, and it determine how many of those frames show up and over what period of time when you're doing that.

So you can change two bars into an ad. As your body animation and then undo it when you click it again. And so that's a lot of animation. You're changing the frames. So it's like a short controllable video. Okay. So that's your media tab. So down in forms you have let's see, does that 10 options, so you can only put them the wheat, all of this stuff.

You can only put form elements inside of form. So that kind of compacts all of this stuff, everything we're going to look at here has to go into a form block. So for example, if I try to drag this submit button outside of the form, you can see this red air submit button. You can only be placed in a form.

So I have to go up into this form block and submit it. So if you were, let's say you didn't have a submit button and you go, and you're like, all right, I want to add a a button, a submit button to my. To my to my co my contact form. This is just a regular button. It's not hooked to your form button.

So you always want to make sure you're searching for your, anything going into a form and that whole tab. Yeah. So anytime you're building a form, that's, you're going, and all of those have to go into a form. So if you're not building a form, you can close that off and that will. All right. And your last one is the components here.

I'm gonna try to let's move your art images. This might get funky,

right? So the components tab has several really useful elements you can add. But they're not very common. All right. So let's just go over them really quickly. And I'll tell you which ones to make note of. So starting down here, you got to social media. Op elements. So this is where you can link your socials on the site.

So you can do Twitter, Facebook. Most of the times when I'm doing builds, I will not use these options. I'll make my own cause most times you're connected. You're yeah, you're connecting to five or six social platforms. And so having these two, you don't want to have two that are elements and then for your building separately, you'll probably just want to grab them all and build them custom.

The next one is you can have a map. Google maps embed these two right here, the slider or tabs. These are ones I would make note of Seoul, drag them over to the the canvas. So grab the slider and the tabs. All right. So as you might be able to just guess based on how familiar with WordPress, so we're gonna start at the slider.

So the slider allows you to make content inside these frames and then change. So obviously we don't have anything right now. And then tabs, same as slider. You can tab through different content and you can style the content underneath it. And there's some pretty powerful things you can do with sliders and tabs in flow.

So I definitely make note of those too. The search option you can enable search in web flow. It is complicated because if you're in enabled search, you've got to go in and say, let's say you've got a heading on your homepage that. Web design. And you also have a blog article on web design. If somebody goes in and searches web design, you don't want them to see the web design header.

That's just on your website. I was like, oh, this is a service we offer. You want them to go to a blog post? So it can be hard to configure or not hard. It's time consuming to configure search, but some clients are definitely in need of that. So then there's a blog you definitely want to enable. All right, then the next one is navbar and this is a one a Tracy on every page.

And we'll use this one. So this is, let's say it's not a place on the bottom. This is your starting component to let's see, week to week, we got to go to the three tabs. Delete that. There we go. That's where the navigator comes in handy. You can see where you're at. All right. So using the native web flow NAB.

It's very important. They have put in already certain settings that help with accessibility that helped for tabbing that helped for letting voice readers know that's where you're at on a nav bar. So you'll definitely want to use the native one and not build them custom. The one thing we'll notice though, is inside our nav bar for you over to the navigator, we can now click into these elements and it'll show us everything that's.

You'll notice though, that this is the container. This is the custom container class from Weblo. So anytime you add the navbar, you want to delete this container and we'll just throw in a nav bar of our own. So we can go over here. We can grab. I did block. Yup. Yup. So here's how you added it. So here's the, so we're going to jump down now from elements to the navigator.

So anytime you add an element to the canvas, it'll pop up at the very bottom, or I guess wherever you drop it, I suppose of your navigator. So you can try to manually, like we can grab this block on the canvas and try to put it where we want it. Sometimes it can be hard to finagle it so we can just come over to our.

And just, we want it rate up by our container. So it is now inside the container. You could see the layers inside the navbar is a container inside. The container is all of this stuff. So what we want to do is we want to put everything inside the nav bar and delete the container. So what we're gonna do is we're actually gonna pull the div block up here and we're going to bring in the brand into the div block.

We're going to bring up the nav menu in here. I don't want to place it in it. So I'm just dragging them over. I'm just dragging them up and then over until it kind of snaps in. So now I'm done reading that container and there we go. Now we have, can make settings to the navbar without worrying about web flows, custom stuff,

Joel: and try things.

So it's like in WordPress, where you can in the menu, you can drag it over. To to create the hierarchy.

Joseph: Yes. So I, yeah, touchback. So all of these elements, so every element that is underneath another element is called the child element. So if you open up navbar, this diblock is a child of now bar and nav bar is the parent element of diblock.

So if we were to add. And I'm going to open up another diblock and I'm in a place right here. If I pop right over Oop, not in there. So right now is a sibling element because they are on the same level. So right now it's a sibling. If I pop it in, it becomes a child element. All right. A couple more things we'll cover here.

So we didn't have bar. All right. So light box. Are you familiar with.

Joel: Cause I just I know I've used it before. Is that just for displaying images?

Joseph: Yes. Yup. So when, if you want, let's say you had a group of images from let's say Instagram or something, and when you place them, they're individual elements.

So a light box allows someone to click on something and Fullscreen it, and then you can make other elements or other light box element. I guess there, I guess you could call them sibling elements where you can open up any of the images and all of the other group of images appear in that light box.

Also just some cool settings for that. Then you've got the background video. So if you want to have your, your hero section, have some texts, then a cool background. Like I think we've done it. Some other sites you can just drag this over and place. Then you've got the last two are dropdown. So the dropdown will be used for your most commonly you're now bar.

So let's say we want to drag a drop down. We're just going to pop it right up here and now it says drop down. So this is how you would add a drop-down menu in your navigator. So I just dragged that nav bar or the drop-down right. So that's what that does. Oops. Where are we? And then the last one is the HTML embed.

So if you want to put in any custom code, if you want to put in some snippets, some API from some social media platforms or something or anything that it takes HTML code, you can just drag that in bed over and then edit it on screen with HTML. So that is our that has all of the elements. And I know.

But I think it's important to know, for example. So I'll just recap real quickly. We don't use any of the layouts options. These are native. No, no layouts in basic our primary, anytime you're adding structure, we will be using a deadlock and then styling. It. That's the most important one in that topography.

We're going to be mainly focusing on heading and paragraphs and then styling. We're not gonna be dealing with CMS till further down, but there's only one thing you can drag and under CMS, and that's your collection list. Then you've obviously got your media where you can bring in images, videos, or a lot of animations.

You've got your forms, which everything in this panel is only going to be used in forms. So you don't have to worry about any of these elements unless you're using a form. And then the components, the ones to keep in mind are the slider. And then obviously when you're building your navbar now bar and dropdown.

All right. Do you have any questions regarding the elements tab besides the sheer quantity of content?

Joel: I'm looking over my notes cause I did do a good I took a bunch of notes. It was just seeing if I have anything that jumped out to me from my notes. Let's see that was good. I think I'll probably have some good questions once I actually get get my hands on the mouse, get to start using that.

I'm going to come up with some good questions. I'm sure.

Joseph: But

Joel: from now I think I'm, I'll be ready to tear off my next sheet of paper and move on to the next section.

Joseph: All right. So the next one we're doing is a.

Okay. All right. Let me know when you're ready. All right. So here's what a symbol is. Let's see, let's just use the navbar bar as an example. So a symbol allows you to very quickly at a group of elements to different pages or different section at the bottom of your page, something like that. So if we open a bar nav bar, which is this third one right here, it's like stack thing.

We can see that inside the NAB. There's the div block, the brand, the nav menu, all of these elements. Okay. So what a symbol does is make a copy of the navbar. So let's imagine, like we already went and made the change where we added the dip block and had we not been making a symbol, let's say we community, that's our search.

And now we searched for now bar because they were on a different page. Our navbar that we now just added looks completely. Then the one we've already built. So if you didn't have a symbol, you would have to go in and every time you go to a new page, you have to redesign all of the elements. So in symbol allows you to make a group element.

So you click right here while you have the elements selected. So I want to do the bar. So I've got the navbar selected and I'm going to go over to the symbol thing. I'm going to create a new symbol and I'm going to name this symbol. Navbar boom.

Joel: If I were going to, maybe if I were going to name it something, I wouldn't maybe name it something different than a symbol.

A symbol a weird word to call this. Is that just me? I haven't really run out of words. And then, and the naming convention, what do we call it? Like the Nessy name bar NAB.

Joseph: No, just to make sense of it. You certainly could, you can name it, whatever you wanted had this been a site with subdomains and you've got a Nessie dot whatever, and a Bigfoot dot, whatever you certainly could.

But since we're only doing this one now, as far as just finding out that you certainly, yeah.

Joel: It would be understood. Yeah. Cause it would, I guess it would be obvious. Okay.

Joseph: Alright. Alright. So I kind kinda

Joel: understand the symbol is basically just a group or a, template's

Joseph: not the right word either.

It's like a template. Yes. That's pretty much what it is. It is a small version of a template. Okay. So I was holding the nav bar and while I had it in the nav bar selected, I went over to the symbols and. And then I named it. So now that I've named it, you can see every time I hover over it, it's green.

Do you see that? Okay. Yup. And now when I go to our navigator, you'll notice instead of being like we had what, 10 or 12 different elements. It's all just one now. So let's say I wanted to edit this symbol to edit segway. Now I can't. So you have to double click on a symbol and it now grays out opaques everything else.

And now you are in editing that. Okay. Okay. So to edit a year in this symbol, and now you can make a change. And if we say hello instead of home, oops, that's now going to change. If we now command D bring in, we search no nav bar and here's our navbar symbol. We don't want to use the regular nav bar now change to hello.

So now I go in here and I type. You'll notice it's immediately changing the top one. So any change I make to a symbol changes all other symbols. Nice. That's pretty cool. It's very handy. So let's say I'm on my homepage and I, so let's say I type in home here on own page and let's say I don't want it to appear on my home page.

I don't want to waste one of my tabs as the home tab. So what I can do is I can double check. And I can, or sorry, I can right quick once I'm in it. And I can write, oops, maybe I write quick and I can click unlink instance. Okay. So it's now copied everything that I had done, but now I can say hello,

copied it. Once when I unlinked the instance, it no longer takes the changes with it, but I can quickly populate all the dates. Now it's on the symbol over.

Joel: And so now any other times you go to the bottom one that is still a symbol, and now you make a change. It's not going to ever make any

Joseph: other change.

It is not going to have to change. However, if I add a new element and I use the navbar symbol, it'll still pull from this one, then. Yes. So in our style panel, so this is, we haven't gotten over here yet, but there is a way to, let's say, in our symbol, we can now go over here and say, I want to make something an override field.

So an override field allows you to create a symbol and pre say, Hey, inside this symbol, you're allowed to change this. And it won't affect anything. So we won't go into that right now. We'll see if during the project build, we come up with something where we'll actually want to utilize that, but there are ways to say, Hey, copy everything, but don't copy the image.

I can change the image on every page. So there's some really cool options you can do. So you're not just stuck with having to unlink stuff, because if I now change the location, let's say I go in here and I want to change this dropdown over here. I'm gonna have to go to every place I unlinked it and do the same thing.

And I don't get very annoying. All right. So that's your symbols. That's how they work. You can create new ones. You can, all you have to do is, so let's say I could now come up to this one and I can go over to symbols and I can create a new symbol and I can be like nav bar. Hello. And now that's my now bar.

Joel: And it turned red there for a second because you had already named something red bar.

Joseph: Yeah. So before I started typing. That's what I did. It can't be the same, right? Yes. So you also notice, let's say I don't want this hello nav bar. Okay. When I come over here and click edit, I can not delete. So you cannot delete a symbol that's been used on the page.

So you'll notice it says, oh, there's one instance of this being used on the website. So I would have to come over here and I would either have to unlink it on LinkedIn instance. And now I can go to my symbol and now I can go delete this.

So you have to make sure everything's unlinked. So you're not destroying your website as you go. So that's cool. All right. So our next tab is the nav bar and, or sorry, the navigator. And this is how you can quickly see the hierarchy of everything on your website. So this is very helpful instead of let's say, I want it great.

Come over here. And I want to click this dropdown thing. I have to come over here and I have to like, where do I want. Or I can just pop up the navbar and I can see exactly what order something's in. So maybe it's better if I wanted to like switch, let's say I wanted to move his icon somewhere else. Okay.

It's going to be tricky to do right now. It's just easier to open up the navigator. So a couple things over here, these buttons up here. So the first one is you can show. I guess the, my screen is not wide enough. If your screen, if you're working full screen, you can click this little expand button and it will shrink or expand this.

So you can see more of the canvas. This button is either collapse or expand all. So instead of having to go open up, navbar open up this I can just quickly expand. So that's pretty helpful. So NAB navigator, very important, helpful tool for quickly finding something inside your site, organizing stuff, et cetera.

Joel: And so it's turning locations blue as you're hovering on it over on the, in the designer.

Joseph: Oh, yes. Yes. I can find exactly where I am and vice versa. I can come over. Oops. I can come over to my navigator and I can click items and you can see it lightly graze it as I move down.

Joel: So if you click on it will then turn blue. Oh, no,

Joseph: it won't. If I click it, it opens it. But over here, I can now quickly go to the dropdown list and start making changes. All right. All right. So that's the navigator. The next is the pages, which I don't think there's much to go over here. This is how you would add a new page that you can click up here, create a new page.

You can now name your page, give it a slug. This is some of the SEO settings. We'll talk about later, how you display, how comes up when you're searching. Same with opening. And I'm not sure if you're familiar with OpenGraph is how content would appear on social media. If it's either shared or push, if you posted your website and you can choose what image and stuff comes up based on what URL you're using.

And then this is some site search settings, which would be very important if you're enabling search on the website. And then you can add custom code. Obviously we don't have the hosting plan enabled, which we will later. And that's all in this thing. So those are all years paid utilities. So we're not going to open up a new page.

So that's the pages tab right here. This is where also it'll showcase when you create new CMS collections. You'll find those in here. Okay. All right. So our next one is our actual CMS. And so this is your pretty much your spreadsheet, your blueprint to you. All of your data. So here's a, here's how a spreadsheet or your CMS collection works.

So you, you are pretty much creating the backend to a like a Google spreadsheet. So now you can make in your rows or columns, you can add fields to fill out. So you are at when you're creating collection, you're creating all of the data points you want entered in. So let's say you were to create a Nessie CMS.

So on every time you post a new blog about Nessie, let's say you wanted to set an image. So let's just create a collection real quick. I want to create an, a customer not create a custom one. Oops. Create we'll have to use that. There was a way to all right. Just click blog posts, for example. So this is their basic template for a blog CMS.

So you can in here set up fields that you want filled out and displayed. Right here that says the name. So let's say we wanted this to be Nessie sighting, and then we could do over here, we could do location, and then you can create the data points you want to be filled out. We can add in new fields, we could add in, let's say, oh, I want to display now an image of Nessie.

Ad image Nessie, and you will create what elements and fields you want to be filled out. Every time you create a new post in your CMS collection. So you'll build that in here. And then when you're going to go create one. So let's say we created the collection. I don't know if we can say changes. All right, here we go.

So now we've created this. I should have named that my bad. Yes. I really do that right now. I should have named this messy sightings or something. So now we can go and create a new Nessie sighting and that then now it shows all of the fields that we need to fill out to build that set of content. Does that make sense?

Yep. So your first off you go in and you say, here are all the variables. I want this, and this filled out. And now every time you create another collection, You fill out that same content. And that's really helpful for if you're creating, let's say a blog project that you're handing off to a client and you need every time to an image added or a description or Mehta texts, you can create all of those requirements and then they know what to fill in.

So your blog post is complete. So you can very easily create a very detailed blog post, and then people can add a new items. So that's how your CMS works and we'll get into that once. We're actually gonna go build one. Got your next one. Is your e-commerce. I don't think we're going to tackle that in this project.

No, I think that, yeah, that's just beyond our scope. And then, so the next one let's just discard changes is your asset panel. So in your asset pedal, if you had all of your images in a folder and you can just drag all of those images and drop them, you can also click here and add your assets from the cloud or something like that.

And that's where you'll find all your assets. So pretty straight

Joel: forward. It's all low logo graphics.

Joseph: Yeah. Employee images. Yes, exactly. And you can create folders for your branding for whatever. So that's that your settings? I don't think there's anything we need to cover further in depth in here.

And then we already talked about your assets or your audit panel. Oh, so this is entry. So you can see right now we're getting flagged for one item. So that's cool. So right here it said there's link content to blah, blah, blah, blah. So it's now complaining about our brand, this right here, this brand thing is linked.

There's a link on it. And so it's just letting us know that there's nothing's happening right there. So we can. On the little audit arrow, send us to the issue and now brings us there and tells us what's wrong and what we should fix. So that's cool.

All right. So that's a lot to cover, but that is our HTML structure. How you're adding, how you're going to add assets, how you're going to add blog or CMS content, how you're going to add pages how you're going to add elements to the page and then your navigator, where you can see what elements to your niche that have been added to.

So I think we'll wrap that up for now. We'll give you some time to mall and digest that. And then on our next video, I think we'll start talking about the designer panel, where you can start styling things and we'll go in depth into that. So is there anything else you wanted to cover on any questions you had about this before we wrap this up,

Joel: give me a, give me time to digest.

Thanks for reading!