bbin电竞比赛排名手机版

Josh:

Hi creators, and welcome to this introductory webinar on getting started on bbin电竞 . I'm Josh from the bbin电竞 team. We've built this lesson with the focus of helping you to better understand the basics of the bbin电竞 platform. In this walkthrough, our product manager said we will be taking you through the steps to create a live website. First off, we'll start with an overview of the bbin电竞 workspace, and then we'll take a look at how best to structure your website. We'll also cover the best ways to use the various layering tools like grids, Flexbox, and stack. We'll also be covering how to make sure your design is customized across each breakpoint. The design that we're going to be creating today is based on a live website. So if you want to refer back as we go along and see the results of each step, you can find it at Sam Milo design.com. That's Sam Milo design.com. And remember, this webinar is just the tip of the iceberg when it comes to the world of bbin电竞 . So if you're looking for a deeper dive into the capabilities of the platform, then make sure to check out our educational hub Academy X to find videos, articles, how-to guides and a ton of other great educational content. Also, make sure to join our forum and get in on the conversation at our community x. Our product managers, UX designers, and of course, other bbin电竞 creators are there to share ideas, discuss features and answer your questions. So sign up and come say hi over at bbin电竞 community.com. That's editor RX community.com. Okay, so with all that out the way, let's get started. It's not for me 70, this hand this over to you.

Sebi:

Alright, thank you so much, Josh. So today, we're going to be talking about bbin电竞 . And we're going to be going over how to build a website. And we're going to rebuild this exact website I'm showing you here. This is called the SAM Milo website. It's a pseudo designer that we created ourselves. But it has everything you need to have a responsive website. And just to show you, we're going to resize it just a bit. As I resize here, you can see how the text is scaling, the images are scaling. Everything is kind of going into its place it's moving around as the screen size changes. And this is something that you know, it's unique to responsive sites is that they adjust as the screen size changes. So we can just make it just a tad bit smaller get to maybe a tablet size. And you can see how when it gets a tablet size, a adjust again. So there's a specific design for the tablet and a specific design that had for the desktop. And this is what we call breakpoints. So we'll be talking about going over breakpoints later on in the presentation. And if you look here, we also have a grid, this is based on CSS grids from the editor will cover that we have a full-height video here. And we also have a Flexbox container called the layout, which we'll also be going over today. So let's go ahead and get started with building our sites. So I'm gonna go over and open the editor. Okay, so there, we're going to be rebuilding this website from scratch. Before we even get started, let's go over the workspace and understand what we're working with. So that way we can be more efficient here. So here is that we have what we call the canvas here in this big, open space. And we have this tool over here on the side that you can move around and resize the canvas, you can see, there's a right under my cursor, my cursor, you can see that there's a number. This number represents what screen size we're currently editing. So one of the cool things about bbin电竞 is that you can navigate through different screen sizes while you're actually editing. You don't even need to open up a different device or open up a new tab or anything, you can actually preview the site as you're editing. And you can see here as I get to a smaller size, I actually switch to a tablet. And you can actually see the representation of the different screen sizes available. What we're actually designing, you can see it from here. This is what we call the breakpoints bar and the breakpoints, they actually represent a range of screen sizes. So here we have for the desktop design we have 1001 pixels and up so anything that's larger than that any screen that is larger than this will display the design that we designed on this breakpoint. Now if I want to design for the tablet or for the phone, I can switch between them as well from here or using the drag handles on the side. So let's go ahead and take a look here on the top bar and see what we also had as far as editing is concerned. So in the top bar we've we have the typical site management tools you can find here, if you click here, we actually will open up what we call the Add panel. That panel is where you add content onto the canvas or the stage. So just to see here, we have all the typical, you know, components you would find on a website, we have buttons, you have texts, menus, horizontal vertical menus, hamburger menus, media, you know, all the typical stuff you would find on a website. And then if you look up here, we have layout tools. So layout tools are different containers, they can use across your website. And, each container actually has its own behavior on how it behaves responsibly. So we have a grid container, we'll talk about each individually. So I know I'm just mentioning them right now. But we'll go over them later on in the presentation. So we also have layouts that are based on Flexbox technology, repeaters, which are also based on Flexbox technology, then we have lightboxes, which are basically any content that appears above your page content. So this could be a popup banner, you know, whatever you're trying to do that, you know, content that is not part of the page, but just on top of it.

And if you look a little bit up here, we have what we call compositions, compositions are basically sections or containers that we've designed. That basically, you can add to your page. And these were designed by our buyer designers in-house, which are very talented and very skilled with that direct. So they made sure to make the right decision in terms of what you know, sizes to put in how to organize all the content, and everything. So this is a very useful tool as well, for educational reasons, you can use this and you can add it to the stage. If you were to click on one, we're just going to click on one right now. And you can actually o the components, you can see all the different values that these components have, and understand how this was built. I'm gonna go ahead and undo what we did just so we can start from blank. BasicallyWeot of different options here different types of containers. So I recoat you use this, you know, either for educational reasons for bootstrapping your design, or even if you want some inspiration. Moving on down here we have some of you, the business solutions that you can use across your website if you're trying to do a blog, or you know, or store, take online bookings events, even have members sign up, create profiles, save store information, stuff like that. And you can use this, we also have something that's very, which is called the content manager. It's a database that you can use on your website to store you know, data that's either used across your you know, your website, or stuff that you want to hide on the back end. You know, if you're storing information on the users, behaviors, and stuff like that, you can use a Content Manager, you can also connect whatever content is on the content manager to, to components on your website, we're not going to be covering that today, because it's a little bit more advanced. But there are resources out there for you to find on the academy on the Content Manager. Also, with a Content Manager, you can use a dev mode. dev mode is basically where you can add custom code to your website. And you can create native applications or even just you know, create simple interactions or behaviors on your components to you know, give it a little bit more life. We won't be covering that as well. But you know, just so you know where to find it, it's right here on the top bar. Moving on over here we have the Layers panel. And this is very important to the actual building of your responsive site is the Layers panel, because the Layers Panel represents the relationship between elements. So here we have a page and we have three sections inside of the page. You can see here how it represents some sort of hierarchy. So let's go ahead and add a component. So we're going to add a title here, into this section. And we'll go back to the Layers panel. So what happened now you can see that inside of the section, we have a title. So this represents the relationship, this text has to the section. It's the child of the section that is apparent in the text. And the reason why it's important I will talk about it more going forward is there are responsive sites, you have to always consider the relativity of components. One core, you know the size of this text can influence the size of the section and vice versa. So we'll take a look and understand what we're talking about there. As we go forward.

Here we can find the Masters which are sections that you can reuse across multiple pages so you can have a header that is on your homepage and you have a different type of header and your inner pages, maybe different color, whatever you're trying to do. And it's easy to create a new type of Master, you can just right clickright-clickon and select Set as Master, you can see here I get the option of a header, footer, or section, the footer is disabled because it's not on the bottom, the section must be on the bottom to be a footer. Okay, moving on here we have the pages management panel. And then here, we can also see we have the our theme manager, our site styles. So you can see we have some styles for our texts, you know, Heading One, Heading Two, Heading Three. What's rally cool about this is you can connect your, your text to it to the styles, and then you can update it from here directly. And it will update across your entire website, saving you time and keeping your design consistent, making sure you're not making the mistakes of having different fonts across your website. And then here, we also have the your site colors, you can also use this to connect it to components as well, it's very useful. Now something keep in mind is that you don't necessarily need to use a site size, you can use your oustom style, apart from the site styles, you know, for components. But this just will save you some time if you're using it. Here we have the app market, that market allows you to actually connect, you know, install applications onto your your web page. And we have tons of different business solutions here that's available for just about any type of project. So I really recommend you check it out. And then this, this is actually for a Content Manager, which we already have discussed. So actually, I'm going to show you one of my favorite tools from the editor, it's here on the right hand side, if I click into it, it's called the inspector, the inspector will actually show you all the different values of a component. So you can see the width, you know the size, the position of the component, you can do also the design, you will find for some components, like if I click on to the section, you can see here I have the design panel as well. So that the actual a you know the the inspector, what's really cool about it is that you can be very precise, if you're a really pixel perfect type of person, you can really use this and be very precise in your design and have it you know, perfect, keep in mind that everything is still a drag and drop, but the inspector will allow you to have a little bit extra control. Okay, great. So we've covered the editor. So I think we're ready to go ahead and get started into actually building the site. So let's go ahead and add our first component here. We're going to go into media. And I've already uploaded some media here. So we can use and save some time. And I have some folders. So let's go into our hero section. And we're going to go ahead and add this phone.

Okay, so the phone is added to the stage, let's just make this a little bit larger, so we can play around with it. Okay. So this section, you know, we have our, our image. And you can see, as I move it around, there's these blue dotted lines that appear around the edges of the phone. So what's actually happening is these lines represent what we call docking, the docking is actually showing you what is the margins from the starting point of the of the component. So here we have the starting point of this component is the bottom left hand of the section. So you can see here on the right hand side, we see the same representation, we have 5.5 and 47 pixels. So I'm just going to put zero just so you can see that if I have it at 00. It's on the bottom left. So basically the docking represents the starting position of a component. And you can also modify the margins in order to determine the spacing between those edges as well. And remember that I talked about the relationship is very important. And this is again, the same idea here is that the position of the section is relative to the position of the image. If the section moves, the image moves, basically. So this is why it's so important in responsive sites to be considering relationship and build the right structure first before you get started. So we're going to go ahead and give this a value for the image. So we'll go ahead and put 25% So what is percent actually mean? percent is actually taking a percent of the parents container and applying that as the value so if the section becomes smaller, the image will become smaller. Let's just take a look and see what it looks like here. Can see how it's scaling proportionately. So this the whole idea is I'm giving a 25% of the section and the sections becoming smaller. If I wanted to make a fix, then I would put pixels instead, which is, you know, the typical value that is used for non responsive sites. So let's go ahead and give it also some proper margins. So we'll do 7% From the left. And we'll also we'll do negative 7% on the bottom. So there'll be a little bit of an overlap here. But again, you know, this is the design that we're working with today. So let's go ahead and also add our secondary media here. So we'll go ahead and add, go into the hero section and add this image. And we're going to go ahead and put 30% for the size. And we're going to use these alignment tools, we'll put a line to the right and align to the top, you can see here in the document that says 0000 and the line to top and align to the to the right, perfect. So everything looks good here. Let's just resize just very quick. And you can see that as I resize that the you know, both images are becoming smaller. And it's very important as you're working to check every step that you're doing. Check if it's working, check the behavior of the image, check the behavior of every component, make sure it's resizing how you want it. Okay, so now we're going to add some background because we're almost ready to add some text. But we need to make sure we have some contrast when we do it. So we're going to go here, we're going to put this color. Okay, perfect. We're going to add some text. Okay, either heading one. And working in called Sam, my low. And we're also gonna change the color here. Let's give it this green. So make sure we can read it will also adjust here, there's some value. So we'll set some custom spacing 1%. One mean, okay, we'll also put a size of 200. Okay, resize just a bit. And we'll adjust the size later. I'm just trying to make sure we have the right formatting. So we have everything here. We'll also we'll give it a custom font, I've uploaded the font beforehand. But I'm going to go ahead and select my custom font.

Okay, make it just a bit larger. There we go. Okay, perfect. So now we have our text. Let's just resize and see what happens. Like I said, it's always good to check. And you can see one of the things is that you know, the images have become smaller, but the text is not. And it's very important that we want everything to be scaling proportionally. So we need to make the text also scale. So how do we do this, if you're going to edit text, you can find this button here that it's called scale text. So we can actually give it a range of how we want it to scale. So we can say that maybe I want this text to scale between 24 to 200 will still be a similar size to what we had before. Okay, and when I resize now you can see how the text is becoming smaller, even as, as I continue to make the screen size smaller, smaller and smaller, the text becomes smaller, smaller, smaller, so it doesn't, you know, create a new line for the text when it wraps around. So perfect, we have one text, we're gonna just you know, just do right click Duplicate. So that way we don't need to, you know, format the types all over again. And we'll do UX. Let's type over here. So we'll do UX, UI. Designer, okay. And that perfect, just make it a little bit smaller. Maybe we can also adjust the text color to what we had on the website, we'll put it white. And now let's resize again, so great. So both texts are resizing, they're both scaling down. But we have another issue now now, because the texts are becoming smaller, the space between them is becoming larger, because what's happening is the texts are relative to the top of the section, or this one actually in particular is actually relative to the to the center of the section. But yet again, because the the position of the text is not relative to each other, we want them to be you know, together we want them to seem like they're, you know, you know, uniform. So we need to create some relationship between the two, the two texts, their position needs to be related to each other. So what do we do we can we can multi select the text we'll select to stack okay, it's gonna take a second here now basically when I stopped I created a new container and this container is very special because what this container is doing, you can see here I have now these two texts inside of there. And what they actually does is it allows you to create a relationship between its position. And this blue area over here actually represents the distance between the two components. You can see here we have 72 pixels to the bottom. So if I want to adjust it to be zero, because I want them to be touching, I put zero pixels, and now they're both touching each other. And you can see how it's like, you know, it fits perfectly fine. Now, let's resize and see what it looks like now. And there we go, you can see how as I resize the screen size is, you know, is adjusting and the text is also adjusting and it's keeping they're keeping their distance together. So now let's go ahead and, you know, adjust the stack, give it the right dimensions that we wanted. So we're going to go ahead and actually dock the stack to the left and to the right. And when you dock something to left and right, it actually creates a stretch. So we're going to give it a stretch right now.

Please going to touch both edges of the screen. And see here. And then we're going to also will give also this, this text will give it also a different values. So we'll docked on both the left and right. We want actually the margins on the left to be six for this one, and we want this one to be 0%. Perfect. We'll do the same for this. But just the value just a bit, we'll give it 28% And then zero from the rate. Perfect. So now we have some space for the for the phone, you can see how the phone fits perfectly fine. But now we have another issue. As I resize the screen, you can see how that the phone is going down. It actually the phone is going down. Because the section is stopped shrinking, we want the section to continue shrinking with all the content as well because it's scaling proportionally. So let's try to understand what's happening here. So I'm going to click into a section, we're going to take a look here on the right hand side, we have a height set to auto and then we also have a minimum height of 692 pixels. So what does this mean? It means that, that when the section reaches 692, it's going to stop shrinking, no matter what it's going to stop at this value can be lower than 692 pixels. And the height auto means that it's deriving its value off of the content. So we actually want it to derive the value of the content because the content scaling, and we want the section to scale as well. So we're going to remove the minimum value, you can see it's going to kind of collapse the section just a bit. We'll adjust it in a moment. And now as I resize you can see how everything now is scaling proportionally. And looks nice and beautiful as everything comes down. So now we have this, we need to create a little bit of space, remember that the height of the section is now dependent on the content. So what do we need to do is create that make the console a bit larger. So one of the tricks that you can do here is that we can use margins from from the actual stack from the new container to push down the section. So here, we're going to go ahead and give it 13%. On the bottom margins is basically like you know, blank space that you're adding to the to the component. So because we have this 13%, it's now going to push it down. And now we're going to also add a percent from top, it will look very similar here. There we go. And that's pretty much it. Now, as I resize and see how everything is scaled proportionally, maybe we'll need to adjust some values. Later on. We'll talk about the breakpoints in you know, in a few minutes. But you can see as I resize how everything is scaling proportion, exactly how we wanted it. Perfect. So now we're gonna go ahead and add some sort of navigation. Now the sections, you know, that we're working with right now are horizontal, but you can actually have vertical sections. And I've already designed the vertical section as a sidebar, which is actually available under design assets. design assets are any sort of component or section that I've designed and saved it to use for later, I can reuse it across the same project the same site, or I can reuse it across another site. And these design assets. If you have a team that's working along with you, you can share these these assets as a library with your team as well. And you know, they can reuse it. And just to save, you know, it's very simple, you can just right click and you get an option save as design asset. You can choose where to save it to wherever, whichever library you want to save it to. So I'm going to go ahead and add my sidebar here. We'll go ahead and add this one. So just one click and it adds it to the site. You can see how it's a vertical sections that are horizontal. We can go ahead and right click here, and we'll move it to the right. And you can see now we have our sidebar, some in you know, we have some sort of menu there, and we have our social icons. Now the problem is that I don't necessarily see the menu in the first fold. Maybe I want this to be fixed as I scroll to show the sidebar all the time. So what can we do, we can make it fixed. So we'll go ahead in here and set it to pinned. And now we have it pinned to page, you might see this as fixed. But here we have a pin. So it's pin to page, simple as that now we have a pin and it scrolls with the content. And it's always visible. So it's very simple to do that. Let's go ahead and add our logo here as well on the top left. So go to media, sort of complete our section, we're going to hero without a logo.

And let's make this smaller, maybe something like this. But it's here, and then we'll talk it's 2% from the left, and 2% from the top. Also, we'll just make the height just a little bit tighter. There we go. Perfect. And then we'll also give it a width of 7%. There we go. Perfect. So now let's take a look and see what it looks like. Let's make it smaller. So it's looking really good. You can see that as I make the screen size smaller that everything is sort of, you know, scaling down, we do have some sort of issue now because the sidebar in our real estate than the you know, in the phone and tablets become a little bit smaller. So we might need to adjust the design a little bit. So let's talk about designing across the different breakpoints. So here, we have our design that we've created for desktop, you can see how it's automatically cascading down to the tablet and the mobile phone. Now certain times you might need to adjust the design in order to you know, display the text a little bit smaller, a little bit larger, or hide some sort of components. And you can do this in Edit direct with the breakpoints allow you to override specific design properties that you have for the decided for different components, you can override all these properties. And any changes I make on tablet, i in terms of the design of the section will not affect my desktop. So let's go ahead and see what this means. So I'm going to go ahead and dock this to the bottom. And we change the value here. Let's change it to zero pixels. So it's gonna give it you know, a stretch. Remember, if you do the two opposite sides, it does a stretch. Now let's go to our desktop. And you can see our desktop is unchanged, nothing changed on the desktop. The tablet has, you know, this updated design. And because the tablet is the next, you know, the upper breakpoint of the mobile, the mobile will inherit these properties automatically. So we can do the same thing for you know, if we want to adjust. You know, for example, I want to hide this mobile phone, I'm going to go ahead and right click here and I can say don't display. And now it's going to hide it only for this breakpoint. But also the mobile because mobile is is inheriting the design from the tablet still, and desktop is unchanged. Now we're going to go ahead and adjust these values. So we'll move the margins here to the left, because I want them to be aligned, same line. There we go. Everything's fitting nice and neat. And maybe we need to also add a minimum for this logo. It's becoming too small. So let's go ahead and do a minimum height of 80 actual two with what do minimum width 80 pixels.

There we go. So now it fits. We can continue making it smaller. Okay

and there we go. Okay, perfect. So I'm just gonna adjust the values here of the stack. Let's go ahead and just put here set it fluid ducts left and right. And then we'll go ahead and also do the same thing for this one. Split two fluid There we go. Perfect. Now, I also maybe I want to adjust the me I want to adjust the design a little bit of the you know the text on mobile But let's go ahead and first let's, let's just move this sidebar. So I'm going to right click here and select don't display. So what happens when I select on display to the component? Well, what we're actually doing is we're only hiding for his breakpoint, you can actually find in the Layers panel. And the Layers Panel actually represents, depending on what breakpoint you're in, you can see here, there's nothing here. But when I do this, you can see it has the, the icon that says it's not displaying. So let's go ahead and also we'll make some adjustments to the text, the scaling, maybe we can adjust it just a bit, we'll do 45 To 90 to 90 here. Perfect. And we'll do 45 to 90 here.

Okay, perfect. And then we'll also we'll do, we'll change the margins just a bit here, just because the logo is becoming a little bit too close. So we'll do 10 to 10. Okay, perfect. All right, great. So this is our design for tablet, or mobile, maybe we want to adjust it just a bit more. So let's go ahead and make some adjustments. So first of all, we'll fix the doc in here, put it to six, and we'll put it to six from here as well. Perfect. And then maybe we want to also give some value a you know, create a little bit more margins on the bottom. So we'll go ahead and give it maybe we'll do 20 from the top and 35 to the bottom. So we'll need to remove this height will also we'll adjust the docking, we'll do we'll set this to scale proportionately. Okay, and then we also will to 40% from the top. There we go. And then maybe we want to show the phone again here. So there we go. Now we have our design. Let's take a look one more time, you can see how as I have our, our desktop I scaled down to tablet, it adjusts hides the phone changes the text size a bit, then I get to the mobile phone. And I have this now we're missing one final thing, which is that our our menu here because we had the sidebar, so we'll go ahead and go to Menus go to hamburger menus, we'll add a design that we'd like. Let's adjust the coloration just a bit, we'll put it to crazy green. There we go. And we'll resize this to 30 and 30. So 30 pixels to 30 pixels. Perfect square. Perfect, will do top left, just like we did with the other one with the logo. So we'll do 2% and 2%. Perfect. So now we have our menu. Now one final thing is that we probably want to edit whatever is inside the menu. So you can open the menu. Whenever you open the menu, this actually displays a container that just like any other container page, you can edit and add components from the Add panel. So if I want to add, you know, a social bar, I can go ahead and add a social bar in here. I can add images as well, I can do all sorts of editing, which is really cool for you know, if you're trying to do a custom navigation experience. So you can do that. And you can open and close them and you just like I did there. So we won't go into you know, the specific design for the menu. But just so you know, you can customize as much as you want. Great. So now we have our first our first fold of the page. So let's go ahead and move on to the following fold, we're going to add a section that I've already designed before, we're not really going to cover it because we've you know, we've already covered these concepts in the previous design design section. We have a section here, so we're gonna just delete this one, so it's not in the middle. So we have this, this section here is basically a stack and the text as you can see, as I resize, it's actually sort of scaling just a bit to make sure that adjust. So this we've already covered this stuff, so we're not going to go in depth into this. But we are going to go ahead and work on some grids section right now. So we're going to add our first, maybe we can add the header first. Before we actually work on this section. We're going to add our recent collaborations header and then we're going to add a grid so you can add a grid to any section or any container that you have on your page, you can just click into a huge can find this as a play grid. And you can add whichever type of grid you want. So let's do in this case, we'll do four columns by two rows.

And this is our design, this resizes just a bit, so we have a wider space to work with. We'll also I'll also add a section beneath just so we can see the full section without scrolling. Great. So we have our section here. Now, just to understand the grid, what the grid actually does, is that it's getting a container, and it's dividing this container into separate areas. So you have different cells in this case, or we can even have rows, you know, we have, you know, row here and a row here, a column here, column here. These are a different areas that you can create. And what this allows you to do is have full control over this specific area, and the components that's inside of the area. So I'm going to add an image here, just so we can kind of understand what this actually means. This image. Now first things first, as I move it around, you can see how the darkened lines aren't relative to the section anymore. Now, the position of this text of this excuse me of this image is relative to the grid cells that it's in or the grid area that it's in if it's more than one grid cell. So you can see here, as I move it around, the lines are moving as well and docking to different grid lines. So I wanted to have it over here. And I also want to click on this button, which is a stretch, so only because it's because it's over these four cells, it's only going to stretch over these four cells. So the size and the position of this image is not relative to the grid area, it's saying are these four cells in this case. So we can play around with that. So also, maybe I want to design just a bit on these, these cells as well. Now something to keep in mind about the grid is the grid is not a container, it's actually, you know, it's the property of the container that allows you to kind of create these areas. So I can't necessarily add a background to a grid cell. So if I want to add a background to grid cell, what I need to do is I need to go into to here we'll add a container. So we'll do container here, we'll do a stretch, just like we did before. Also, we'll change the remove the border, we'll give it the color that we want. Excuse me, we want it for the background. So we'll do for the background. Great. So now we have a background. I'm going to do the same thing for another one. So I'm just gonna duplicate by using my keyboard shortcuts. I'll stretch it over here. And we'll do here we'll do the crazy green. Perfect. Okay, so now we have our first design. And we're gonna go ahead and just add some text. So we'll add some text here. And we'll give it the proper values as well. So let's first give it for this one. So right here, Mass. Perfect. We'll also give it some scaling. Because we want to work on the smaller breakpoints as well, you know, the least adjustments I need to make, the easier it is for me, so I'll do that. So we'll do free mass, we'll also will to, will do Docker to the left and right. So on the right, I'm going to put 0% Because it's okay if it touches the edge. But on the left, I want it to be we'll leave it at six. Or we can actually do 6%. And then we'll do sound actually we'll do 334 Perfect. There we go. This is not present. So we'll do 4% Here. Perfect. So we have this there and then we'll go ahead and just just maybe I want to put Helvetica here so Helvetica perfect, looks nicer. So we'll duplicate this text. Just so you know, we don't need to do all the copying and pasting of the values. So we'll do again three and four.

Here we'll be right. Hey, they also will set this to white. Perfect, and now we'll add text over here. Here, we'll do we should do. Six 3% 6% from the left. 3% Perfect. Okay, great. So, um, great. Thanks. She was just the one mark. So one of the things they notice is that the values of the margins here are basically half of what we have here. So why does this happen is you can see we have three and four. And here we have 1.5. And two was this happen is remember that the percent is taking a percent of the parent and applying that as the value. Now, in this case, this text is covering two cells. So it's twice as large as these two cells. So that's why we have to cut it by half because the actual parents is twice as large. And we want to keep similar margins. So keep that in mind. As far as it's concerned, I the you know, you have to always keep in mind that the value, if it's inside of a grid, it's the actual sizing is relative to the grid that it's in and not the parent directly anymore. So we'll adjust the coloration here, so we can see this, set it to black. Perfect, and then we'll go ahead and do 152 from the top and set this to zero. Perfect, great, should also be zero. Great. So let's take a look and see what it looks like when I resize now, oh, man, I need to read just the text here. So let's do

and then need to put our scaling again, we go accidentally click to remove the our style here. So now we're back. Perfect. So let's resize and see what it looks like. You can see it looks nice as I resize Now the only problem is that, you know, the the square cells are now kind of getting, you know malformed a little bit and they're becoming more so rectangle. So all we need to do is we need to kind of understand what we're working with here. So first things first, let's take a look at the grid. And let's understand why the grid is doing this. So let's go into adjust grid and click Edit grid. And this will open up what we call the Edit grid mode. And this will display all the different values of the grid, rows and columns. In this case, all the columns are set to one fr fr actually a fraction of the remaining space. So it takes up whatever many spaces from the other cells, you know, other values. And it applies that as a fraction. And because we have four fractions, and each one has one fraction, they're all equal. So if I was to make this, you know, we'll change this one to two fractions we'll change it to there we go is now because this is two fractions is always going to be twice as large as these other two. So fractions are very easy to work with in terms of grid. So I really recommend that you know, if you can try to use fractions, you can also use other types of units, we have auto just so we did for the section, the top percent pixels, viewport width, viewport height, we'll talk about those two in a moment. Min Max, if you want a minimum and maximum range, you know combination of some and then you can also have min content Max content calculation is a little bit more advanced. We won't cover those in this, this webinar. But you can you know play around with this, you can also use the you know the drag handles in order to adjust the values as well. We'll set them back to one and then we'll adjust. You know the problem was the height not the width. So we need to look at the rows. So let's take a look at the rows. So actually the row values right now is a minimum and maximum value is the minimum is pixel the maximum is max content Max Taunton just basically means that the content is deriving the size of the of the max in this case. So we have a minimum of 250 pixels and remember, the minimum is going to stop it from shrinking. So we want to shrink as much as it can as much as the content will allow it to. So in this case, we will set it back to a fraction and we'll do fraction here as well. So that way they're equal one fraction one fraction, perfect. It didn't change much. You can see as I resize it's sort of still the same behavior. But the reason why it's the same behavior is because As we still have to adjust the section, remember, the section has its own values as well. So in this case, we need to adjust the section, what I'm going to actually do is I want the width of the screen as the width of the screen to become smaller the height of the section to also become smaller. So I need to give it a value that will make the width of the screen to just that as well. So what I'll do is I'll put 40 V w, so viewport width is the translation, you can see here, it's viewport width. And what this is actually doing is I'm giving it 40% of the screen size, the viewport is the screen, so 40% of the screens with as the height. So you're going to see how what's going to happen is it's actually a scale proportionally because now the height and the width are both scaling at the same rate, causing it to have this sort of behavior. As long as it gets smaller, you can see how it's becoming a little bit too cramped in terms of space. So maybe I want to adjust it a bit. So we'll click Adjust grid, click on this two by four switcher layout just a bit, we'll change the minimum here to 500 to make them a bit smaller. And now I have a fully responsive grid section.

So you can see how the grid is a very powerful tool that gives you a lot of control. The design doesn't necessarily need to be in a grid. This is just how we designed it for this for this example, but you can see how it gives you full control over the size and position of the all the elements inside by creating different areas. So moving on, we're gonna go ahead and work on another SEC component type, we're going to work on images just a bit. So we understand how to play around with the images when it comes down to responsiveness. So you can add our added section. No, we're only we're not really focusing on the actual building of the design, but the image itself. And first thing you'll notice is that we have the three models and the model in the middle is unfortunately being covered by the text. And we want to make sure they're all easy to see. So what we have is we have this will call a focal point, it's very important in response to sites designed to use a focal point, because the focal point allows you to adjust the focus of the image, making sure that you know whatever components on top is not covering remember that responsive sites means that some components will be moving around. So this gives you control and you can set the focal point depending on each break point. So now I set a focal point to the chin, you can see out now you know the the image moved up just a bit. And now it's easy to see. Next thing is maybe you want to put some sort of you know scrolling effects. So in this case, I want to put the you know scroll behavior to parallax, which is just going to give it a little bit of a depth effect the image they move a bit, but this is only for the preview, when you actually go see the actual site, you will see the difference. You know, we'll start from the top and scroll down, you can see how it kind of creates like this depth effect. So it's very cool, very easy to set up for image images that you have, you know in the background of or below another component. Okay, moving on, we're gonna go ahead and add our next section, which is actually our repeater section. We'll find it here and design assets as well. We're not going to build it from scratch, but we're going to play around with it just a bit so you guys can learn about how the repeaters work. But the repeaters in essence, basically what it what it is, is a container that displays multiple items with the same exact design, but different content per minute per item. So let's just take a look at the design property. So if I go ahead and click on this image, and then make it just a bit smaller, you can see how now, everything every other item is also becoming smaller, there's because all the items have the same design. So you can see here we also have if I click on to repeater, we have the Change Layout option. We have different types of layouts, in this case, I'm displaying them as cards, I can change it to list, you know, the here's our list, of course we can adjust the values is obviously a little bit too, too large for our design here. But this is you know, just just to show you guys what it looks like. Here, we can also select a slider. And slider is basically imagine that you have on your phone, you can slide the content, reveal the content as you slide with your phone. We'll go ahead and undo those two so we can kind of look and see what it looks like oh by the way, you can also have control over the items. So let's take a look and see what it looks like between the breakpoints. You can see here we have it for the phone. And that can adjust here. We'll say let's set this to maybe three items per per row. Go. And then on the phone, we have the slider layout. So it's a very useful tool and very cool. If you're using the Content Manager, you can connect your content to this, I, you know, you create a new project, and the content will automatically populate these components, if you set it up to work with the content engine. Great. So moving on, we're gonna actually now work with, you know, creating a full height section, I want to first add this header, here, we'll right click here and move it to the top. Okay. Great, make this a little bit longer. Great. So we're gonna set a minimum height here, of 100 feet. Ah, so what does this mean? is now we're taking 100% of the viewport height, because 100 VH means 100% of the viewport. And applying that as the value of the of the section site, so it's this section itself is always going to fit the screen size, we'll add it will add some background here, we'll put this here, we'll also add an image or actually, we'll add a video in this case. Let's see, here we go. We can drop it from here.

And we're going to stretch it. So great, we have our video and it fits the full screen, which is great. But, you know, maybe I wanted to show you know, just change the design a little bit to show the the background of the section. And you know, because the videos covering the section, it might be a little bit harder to click into a section, you can use either the the here the inspector, we can use the breadcrumbs here to select or the the Layers panel to select the section. And we're just gonna use the breadcrumbs in this case, I now have a section selected, you can see here a section, and I'm going to add what's called padding. padding is basically Inner Inner spacing inside the component container. In this case, we have a section. And we want to do a 3% here from the left, and we want to apply this to all the sides. Now we have, you know, clicking this lock will apply to all the sides. So now we have our nice and beautiful section. If I click on Preview, you can see how it fits the entire screen. And it looks nice, you know for displaying videos, images, any sort of full height content, you can use this type of, of value the viewport height, you know, if you try and do that, now we're going to go ahead and work with with the layout, which is very similar to the grid. It's a container that allows you to kind of create different, you know layouts between breakpoints and allows you to control the items. So what it actually is based off of if you if you're familiar with CSS, it's based off of Flexbox. And what Flexbox is do is it actually uses some logic in order to distribute the this the the spacing between the different items, so gives the item sizes depending on how much available space there is. So you can see one of the things is I'm going to delete this item here we have four items, I delete this one item. And now because I deleted this one item that the the content automatically adjust. And this is what the layout allows you to do is have the content, I just as the size of the layout or adjust, the content will also adjust you can see here as I make this smaller and larger, you can see how the actual design is adjusting and you would see the same as if I make the screen size change as well. It gives you a lot of control here, you know gives you a lot of you know fluidity and allows you to easily set up a responsive section without having to do so much of the complicated work. And let's just take a look into kind of how is this the values setup for each component, each item. So you can see here that we have a value of 20% for this item, a value of 40% for this item and a value of 20% for this item, they also have a minimum width of 200. And because there isn't enough space to fit, you know, they're all 200 So it'd be 600. And there's enough space in this in the first row to fit 600 What actually happens is that it creates a new, completely new row for this item only. And because it's a new row this item needs to take up all the remaining space even though it's 20% You know it's going to take up 100% Because the only item here now if I add a new item, I'm just going to right click here, drop this item into the letter, see how easy it is. Now we have 20 and 20 on both sides. It's not 50, it looks like it's 50. But because it's taken up the remaining 60% and split in between the two items, it will resize like that. And you can actually play around with the numbers like this, you can actually move the items around very easily, you can click here, just move them around, you know, adjust them however you want. So it's very cool to use the layout there, it saves you so much time. And another thing about the layout here is just like the repeater. It has its own layout type, you can select, you know, columns rows slider, as well, to kind of, you know, adjust the content and give the layout that you're really looking for. So now we're going to add actually a final design for the layout or just so we can kind of see what you can really achieve with the layout. So we'll go back to design assets, and I'm going to add my layout or I design before I clicked on the wrong section. I'm just gonna undo that for one moment. Okay, so we'll go ahead and add or the outer over here.

Great. So now we have our layout, or you can see here how we have multiple items. They're all resizing as the screen size becomes smaller, it just starts to kind of wrap around. And you can obviously, you know, if you want to hide an item from a layout, you can go ahead and right click, Hide don't display, just like we did before, and now will automatically adjust, then you can play around with the focal point, just like I showed earlier, I can adjust the focal point maybe to be something like this. Yeah, whatever you're trying to do. And then when we get down to mobile, we have you know, different layout, again, we can move the items around, you know, and adjust them as per the breakpoints. So, this is our site, you know, we kind of covered a lot. And we have a, you know, a lot of different components and a lot of different behaviors here. But, you know, for the most part, everything is, you know, scaling proportionally, we have a nice, nice, skinny proportionally header here. You know, the text, we have a grid image, a repeater for full height section, and our layout. And this completes our, our site for today and the webinar. So thank you so much for joining. And we'll go ahead and take some questions now.

Josh:

Thanks, Sebi. That was in depth as always, we're not going to cover a few of the popular FAQs that come up in these sessions said if you don't mind, I'm gonna throw a few questions your way. Go ahead. Yeah. So the first question is, why was the tech scale adjusted over the lower break points.

Sebi:

Okay, so basically, when you're when you set the text scale, you're setting it, you know, I set it on the desktop. And it's not always going to be perfect if you set it from the highest breakpoints all the way to the lower because you know, there's a there's a large range of screen sizes. And remember that you're setting basically a scale, as you can see here, it's it's it's basically like a range, you know, you have 24 to 200. And the range of the screen sizes is very large as well. So the changes, you know how much it would scale. And I want to have a little bit more control over my desktop sizes. Sorry, my desktop and my tablet sizes. So I gave it us scaling on desktop. And then I said, you know, 224 to 200 on mobile on the tablet is, is probably too much. So maybe I need to adjust it just a bit. So I give it 45 to 90. But it's mostly just because I want to make sure I have a good range for both the tablet and the desktop.

Josh:

Great. Second question is, can you set something to not show on desktop but appear on tablet or mobile?

Sebi:

Yes, actually, we cover this earlier in the presentation. But basically, if you if you look here into the tablet section, I've hid the phone icon, the phone image you can see in the Layers panel. If I click into the section, we actually have actually a few things are hidden. We have the hamburger menu, and we also have the image the hamburger menu. I've added it beforehand, inside of the mobile and when you add a component inside of a smaller breakpoint, it automatically hides it on the higher breakpoints. And then you can also right click to select to display any sort of component on your page. And it will automatically hide it from this breakpoint and any lower breakpoints if it's if it that's how you set it up.

Josh:

Great This is an important one that we get a lot, what is the difference between using grid and stack

Sebi:

using grid and stack. So first things first is the stack is, is really understanding that, as I mentioned earlier, it's very important to understand relationships between components. And with the stack, what you're actually doing is creating a relationship between multiple components. In this case, I did the text, but you can add all sorts of components can add a gallery, image, text buttons, and what you're doing is you're creating a relationship between the position of those components. So you can have a lot of control over the position of these components have created some sort of vertical margins, stack only works with vertical margins. Now the grid gives you a little bit more control, you're not necessarily creating a relationship between the two items. But you are, you know, adding an item inside of a grid cell, and then that, that grid cells position is also relative to the grid cell below it. So it is kind of created similar behavior, but it has a lot more you can do with the grid. But you know, it takes a lot more to set up in some cases, because it has, you know, you have so much control over the size and position and stuff like that, that you might need to, you know, configure it a little bit more the stack is very quick, when it comes to setting relationships between elements and creating those vertical margins.

Josh:

Great, that's real. Thank you. And that leads us to our next question when stacking in mobile will also stack in desktop and tablet.

Sebi:

Yeah, so basically, remember that I showed earlier that a stack, when you create it, it actually creates a container behind the components. And breakpoints are you are used to override design properties. And design properties are, you know, if we're talking about HTML, CSS design properties are coming from the CSS. When you change the structure of a web page, you're actually changing what we call the HTML. And in this case, if you create a stack on mobile, it's going to change the structure that you have on desktop. So whatever you did on desktop, sorry, on mobile is going to reflect on desktop as well. Because now we've changed HTML and HTML does not change between breakpoints. HTML is always the same across all websites, it needs to always have the same structure across all the different breakpoints, but you can have a different layout for that structure. So the content can be moved around can be on top of another one. But it needs to always have the same parent no matter what. So in this case, we're creating a new parents for the for those items added by adding them into the stack. So that's why it affects all the breakpoints.

Josh: 

Great. So while we're on breakpoints, all the breakpoints, sizes, presets, and if so what are they set to?

Sebi:

Sure. So they are we do have some default sizes that, that your that comes with a brand new site 1001 pixels and up, it covers pretty much all the common desktop screens or you know, computer screens, that we have 751 2000 pixels, that also covers pretty much all the tablet screens. And for mobile, we have 320 to 750 pixels, these are all default values that you can obviously adjust if you want to, not really needed to, because we're already covering, you know, most common screen sizes for all these different ranges. But in some cases, maybe you want to, you know, adjust it just a bit. So you can click into here, adjust it from here, click edit, you have full control here. Or you can add a brand new one, if you want to have a specific design for I know maybe very large screens, you can add a new breakpoint or Sue design for maybe the iPad Pro, you can add a new breakpoint in this case as well.

Josh:

Great. And why is that when you change the grid layout on mobile, the desktop layout is the layout excuse me is not affected? What happens to the structure of the page?

Sebi:

Sure. So going back to what we discussed earlier, with the the structure of the page, why changing the structure of the page affects the all the breakpoints, when you're working with grid grid is actually a layouting property, it's not necessarily a container type. So you can see here in the Layers panel, I'm gonna go into section we can see there is no grid container that's holding everything else. The section itself is still the container that's holding all the other content. So this is why if you add a grid and adjust the grid on the smaller breakpoints, nothing happens in terms of like the upper breakpoints because we're not changing the structure of the webpage. We're just changing the layout to layout property, the grid. So this is another reason why grid is so so great is because you can kind of create these elaborate designs that are very unique for each range. You have screen sizes for each breakpoint. And it's not gonna affect other breakpoints. Whereas if you're using only containers to create this design, it could probably affect your breakpoints if you mess up and accidentally put something in the wrong, parent.

Josh

Great. And how do we know when we should use a layout grid will repeat it.

Sebi:

So basically, if you, you pretty much keep in mind that, you know, they're all different. They all have their own use cases, for the most part, the layout, or you can easily create a responsive design, with a few clicks. And you but you don't have so much control over the sizes of the items. Remember that the items if you have one item that is 20%. And it's the only item in this layout, or it's actually going to be stretched, because the layout or has some logic that makes it so that all the items are stretched across the layout. And it uses some logic in order to determine how they're stretched. So you're losing a little bit of control there. But you can create some sort of layout. And also keep in mind that the layout is actually what we call the one dimensional container. So that the actual content is is going and flowing in one direction. So it's either a row or column. Now in the letter we have here, these are actually rows. So we have a row now creates a new row. But these rows, if I was to make this, I'll just make this smaller. You see, because I made it smaller. Now this item moved up, because what's happening here is that this row is can't fit all the content. So it just wraps around the creates a new row. But it's not really like a like a grid where like you set each row to have its own values. In here you have one row that is just wrapping around in the Z order. And then in, you know the grid, we mentioned it a million times you have full control over each column, each row, you can create a little bit more elaborate designs have more values, unit types that you can use for each row and column. And the repeater is very similar to layout or in terms of you know, uses Flexbox. But for the most part, you're using common element or items that have the same design across multiple items. So this is the use case for the repeater.

Josh:

Great. So while we're on the theme of sizing, when sizing by percent width, or height is the percent in relation to the parents containers with night.

Sebi:

Yes, so percent is always going to take whatever the parents value is and get the percent of the parents stop shrinking, because it has a minimum value, it's gonna stop shrinking as well is shrinking, it's gonna shrink as well. So typically, in responsive sites, this is probably the most common unit type used. Because it's easy relationship, you know, between the container and the child that's inside. So typically, you would use these

Josh:

great Sebi Thank you very much that was always very in depth and very helpful. And that pretty much covers our introductory demo for the session. We really hope you guys found this session helpful in giving you the knowledge base you need to get creating on bbin电竞 . Remember, if you want to learn anything more about what we covered in this video, you can check out our academy X. And also if you have any questions make sure to sign up and join the conversation on our community X forum or write to us directly and hire an bbin电竞 .com We always love to hear from you. And until next time, we'll see you soon and keep creating