0:00:00
The section element is one of the most important and fundamental elements in web design and page building. I’ve already introduced you to the section element in a previous lesson, but we were mainly talking about code quality output from builder to builder. What we really need to do is deep dive the section element so that you know exactly how it’s used, how it should be used, how to interact with it, how to style it properly, some very common mistakes that you need to avoid. And I also want you to know how different page builders handle the section element from a page building perspective so that you can overcome any limitations or any potential issues that they create.
0:00:40
All right, so I’m going to hop over to screen sharing. I will say that some of the stuff that we’re going to talk about is a little bit on the technical side, but it is very, very important for you to understand because some of these technical issues will create problems for you. And it’s important for you to understand exactly what is happening so that you can have your workarounds or whatever needs to happen based on the page builder that you happen to be using. And I do promise that at the end, we are going to build an example hero section.
0:01:09
It’s gonna have a full screen background image, an overlay. It’s gonna be a very traditional hero section because I want you to see how all of the concepts that we’re talking about come together into a finished section. All right. So let’s talk about this first. We’ve, you know, just to kind of reiterate, sections typically have two elements. They don’t have to, but they typically have two elements and probably should have two elements like 98% of the time. It’s an outer wrapper, that’s the section wrapper. I’m gonna select it right here, it’s this outer wrapper. And then we have an inner container, which I’ve selected now, where you can see the blue outline of the actual container element.
0:01:49
That container, of course, is our website’s content width, and it’s centered on the page. That’s what creates that central column of content that you see on most websites. Even though background colors and background images break out of that content width, or even some content breaks out of the content width, that’s okay too. But most of the content on the page is defined in containers that sets a standard content width of the website.
0:02:19
And as you’re gonna see, most content needs to go inside of that container. The content on most websites does not just live in a raw section element, it lives in a container inside of the section. Now with that said, some content like this image right here can absolutely be placed outside of the container. Or you can make containers wider, which we’re going to see in just a second. But the containers do in fact still exist. Of course we talked about semantic HTML, so the section should have a semantic section tag. A div and a section are not the same thing. So if your page builder adds a div instead of a section, then you don’t semantically have a section element and you should semantically have a section element.
0:03:07
And then of course some page builders allow you to add multiple containers. So in Bricks, I can duplicate this container and I can have as many of them as I want. We talked about grouping content in our lesson on boxes, everything as a box, and the importance of grouping content. Bricks allows me to group content in a container element, which is absolutely fantastic. This is very, very, very helpful. Not every page builder allows you to do this. In fact, Bricks allows me to interact with this container element, which is not something that every page builder allows you to do. If it were up to me and if you’re taking my advice, I would say you should be using a page builder that allows you to interact with the container element, have multiple container elements.
0:03:53
See Brics even has one called container right here, that I can add to any section. So this is very important to efficient page building. What I want to do before we go any further is hop over to see how Webflow does this, how does Oxygen handle sections, and how does GenerateBlocks handle sections, because they all handle them differently. And depending on the page builder you’re using, you need to know what’s going on when you’re adding a section in order to do things the right way.
0:04:20
So in Webflow, they have a section element right here. Webflow is, by all estimation, a professional page builder, but I do have some bones to pick with Webflow and the Webflow team. Number one, they don’t give me an inner container by default. So in order to get that inner container, it’s going to require an extra click. So I have to add the container elements separately. Not a huge deal, but it is, you know, this adds up over time. You’re going to be using sections and containers all the time on your builds, so the fact that I have to constantly add two separate elements instead of it kind of giving me a shortcut and making it all one element, that’s a little bit frustrating, right?
0:05:00
But the major, major issue that I have with Webflow is that it doesn’t give the section a semantic section tag by default. On the front end, it is just a div, and I don’t understand that. It’s basically unexplainable, because I’m asking it to add a section which is a semantic element in HTML and it’s not giving me the semantic section tag. So what I’m forced to do on every section is go to the settings wheel right here that’s one additional click come down here and set it to section that’s two additional clicks and it’s also something that I have to do every single time or I’m gonna end up with some sections in the code some divs in the code and it’s gonna be a little bit messy on the backend.
0:05:40
So it’s creating a situation where we can forget, right, or another team member can forget to add these semantic tags, and suddenly our code is not the way that it should be. And again, that’s unexplainable because I’m asking Webflow to add a section element. It should be giving it a semantic section tag by default. Now I’m gonna hop over to Oxygen, and we’re gonna see yet another professional page builder handling sections inappropriately.
0:06:06
So I’m going to add a section element to this page. I’m going to add a heading. And the reason I’m adding a heading is because I want you to see that there is in fact a section element or I’m sorry, a container element inside of this section, but oxygen does not give me access to it. So I cannot see it over here in the structure panel. I only see one element, the section, but there is a hidden container inside of the section. I just don’t have the ability to interact with it. I also don’t have the ability to add additional containers inside of this section. If I want content to break outside of the container, so some content is contained and some is not contained, or in a container with a different width on it, that it requires a bunch of workarounds and hassle in Oxygen, where in something like Bricks or Webflow, this is very, very easy to accomplish.
0:07:00
Suddenly, it’s not so easy in Oxygen because a very important rule has been violated. And that’s the rule that I’ve established for a long time now with page builders and their developers. I say, if you’re gonna create a box, give the user access to the box. Do not create boxes that you do not give the user access to. Should be a fundamental rule in page builder development. Oxygen violates this rule.
0:07:24
Of course, Elementor heavily violates the rule. Divi heavily violates the rule, even worse than Oxygen, right? But Oxygen is a professional builder and handles sections inappropriately in my estimation. That’s not the most egregious issue though. The most egregious issue is with regard to the gutter padding on sections, which we’re going to talk about in just a second. But before we get there, I want to hop over to generate blocks and let’s see how this handles sections. So I’m going to add an element, and you’re going to notice there is no section element. There’s nothing called a section.
0:07:59
In generate blocks, we have to use what is called a container. I know, it gets confusing, right? Because we talked about containers being the things that are actually inside of the section. Well, in Generate, it’s just called a container element. It also is a div by default. And so, in order to make it a section, we’ve got to come down to Advanced, and then we have to set the tag name to Section Manually, kind of like how we had to do that in Webflow, which again, extra clicks, extra scrolling, extra inefficiency.
0:08:30
And then what I can do when I select this element, I’m gonna open our list view here, generate blocks actually gives me the ability to insert an inner container. I kinda like this functionality. So I can insert an inner container. It’s like kind of a mix between Bricks and Webflow, right? Bricks gives you the inner container by default, and I can still click on it, duplicate it, interact with it, whatever.
0:08:52
But what generate does is it says, hey, if you want the inner container, it’s just one click away. If you don’t have to go find the element and add it. Though if I want more than one inner container, I’d have to duplicate them or I’d have to come up here and add another container like this, but then it adds it outside of the section. So then I actually have to drag it inside of the section. And it’s just kind of a lot of different, and actually, yeah, that one’s, you know, it’s a different width.
0:09:18
See, it’s creating a little bit of complication. It’s not very intuitive, but you can arrive at the same result. You can arrive at a semantic section with inner containers, multiple containers if you want them, and you can put, obviously, content outside of those containers if you want to. So Generate ultimately passes the test here. It just requires extra clicks. Webflow passes the test, but it requires extra clicks.
0:09:44
Oxygen fails the test, but there’s workarounds, right? Just added inefficiency. And then Bricks makes this as efficient as it can possibly be. And so you see there’s differences even among professional page builders. There’s differences in how sections are handled. Let’s talk about why sections are so important. Number one, aside from establishing that content width of our website using the containers inside the sections, it’s also all about grouping content by subtopics. So you think about a page like services, that’s the main topic of the page. Well you’re gonna have other subtopics of a services page and here’s an example of like an outline where we have a hero section, that’s where your H1 heading is going to be that says services, and then you’re going to have a feature section, that’s a different topic from our hero section, right?
0:10:33
We have explainer content, we’re explaining the service, that’s an entirely different section from features, it’s a different topic from features. Then we have testimonials, which is yet another topic. Then we have a portfolio, which is yet another topic. And then we have pricing, yet another topic. FAQs, yet another topic. Biggest beginner mistake I see constantly is they add one section to a page and then they just put everything in that section. Well semantically, this is all out of whack now.
0:11:02
You’re supposed to define your subtopics using these individual sections. And then this allows you the efficiency of actually moving one topic to a different area of the page. It’s like, hey, we want our testimonials to be up top on the page. I can drag that section of testimonials to the top of the page and drop it and everything is good to go. Topically everything is very organized. Remember we talked about grouping content how important it is to group associated content. Nothing is more important than grouping content into sections on a web page. This is how a web page should be organized. So don’t make the mistake of throwing multiple topics into the same section. If the topic is changing, you need a new section. It’s kind of like when you’re writing, they teach you, Hey, the topic is changing. This would be more for academic papers and stuff.
0:11:51
If the, if you’re kind of changing thoughts, right? Make a new section or make a new paragraph. Okay. Kind of the same concept when you’re building out a web page, if you’re changing topics, create a new section for that page. Another issue or another feature of sections, just by their nature, is that they create a gutter on the sides of the website that protects the content from touching the edge of the screen. I’m going to go ahead and view this on the front end. You cannot see the gutter right now. The gutter is more or less, it’s there, but you can’t see it because it’s not interacting with any of our content. But the minute we start to look at this on a smaller device Now you can see the gutters on the left and the right we never want our content like this like written content Main content of the page touching the edge of the device. That’s never desirable It looks horrible in a hundred percent of cases, okay?
0:12:49
So we define this gutter on the left and the right, and that’s what creates the gutter on mobile devices, and even laptops and tablets and things like that. We don’t want that content touching the edge of the screen. So our gutter is very important, but I wanna hop back to oxygen because I said I have another bone to pick with oxygen. It has been a long time disagreement of where should this gutter be placed should the left and right padding be placed on the section element itself Or should it be placed inside of the container that’s in the section and I think that this is not a debate It’s objective that it should be placed in the section element itself And I’m going to prove that to you right now and this is important to understand again because Bricks puts this gutter in a different place than oxygen puts the gutter.
0:13:39
And when oxygen puts the gutter in objectively the wrong place, it creates other complications with your web design. And you need to know that this is happening so that you’re not like, whoa, what’s going on here? Okay? So let’s go back into Bricks. See in Bricks, I’m going to select this section right here. By default, there’s 60 pixels of padding on the left and 60 pixels of padding on the right. And here’s where I think people get confused. I’m gonna come down to this section down here and I am going to remove that gutter.
0:14:09
And notice on desktop, you cannot tell that I have removed the gutter. So here we are, the gutter is gone on this section down here. It’s present on all the other sections. The content is all still in perfect alignment. You cannot tell that there is no gutter. Now we come down to mobile and suddenly it’s obvious. It’s very obvious that this section down here has no gutter and that all of these have a gutter. Now and you can also see why the gutter is desirable to have right? So now what I’m going to do I’m going to bring this even in even further and I’m going to add the gutter back but I’m not going to add it where it was in the section. I’m going to select the container element and I am going to add the padding in here. So there’s 60 left 60 right save Refresh on the front end on mobile devices. You cannot tell that the gutter is in the wrong place It all looks exactly the same and I think this is why people are like it doesn’t really matter Whether you put it in the section or in the container, but watch what happens when we get to desktop. Oh Now it’s obvious what the problem is.
0:15:15
And people will say, well, that’s not a problem if you just have all of your gutters and all of your containers by default instead of your sections by default. But it still is an objective problem. And I say objectively wrong to do this. I have effectively, when that gutter is inside my content container, it’s changed my website’s effective width. So I’m going to inspect this right here and I’m going to grab this div. I want my site width to be 1366 pixels and if we look over here I inspect this it is 1366 with the content touching from the edge of the start of that 1366 to the end of that 1366, but it has padding inside of it, forcing the content inside of the container to come in further.
0:16:08
And so the effective width of this content is no longer 1366. It’s 1366 minus 60 plus 60. And that’s a completely different number than 1366. It’s not the number that I asked for. And if I have to calculate things in web design based on my website’s max width, I now have to change the calculation because the website width that I’ve set is no longer the real width of the content on the website. It creates a major, major issue.
0:16:40
So what are we learning? The gutter should not be placed in our inner container. And you might think, this is Kevin, this is technical. This is, man, like you’re really overthinking this. It’s not, trust me, trust me. Gazillions of hours of web design. These things are real problems that should not be happening. There’s no advantage to putting the gutter inside of your container. There’s only disadvantages.
0:17:03
So the fact that a builder is doing this, and it’s not the only builder, it is not the only builder that makes this mistake. The fact that builders are doing this is an objective problem. And I want you to know that this problem exists. Okay, so you could, cause you’re gonna need to work around it and you’re gonna need to know where the problem is coming from and what the underlying philosophy is. So we talked about inline padding, establishing the gutter.
0:17:27
You must make sure that the gutter stays consistent. There should not be 60 pixels of gutter here and then on this section there’s 30 pixels of gutter and then on this section there’s 24 pixels of gutter cause on mobile devices, your website’s gonna look all janky. Your content is not going to be in alignment. It is important to keep that gutter consistent across all sections. People ask though, well wait, sometimes I want my content maybe to go to the edge of the screen.
0:17:53
Like I want an image to touch the edge of the screen. Or I want content to just be wider than the website width. So let’s look at an inner container like this. Well, we’ll just do it right here. So I’m gonna duplicate this. Let’s say I wanted this content to go all the way to the gutter. Not all the way to the edge of the screen, but all the way to the gutter. The mistake that a lot of people would make here is that they would, and I’ve seen this happen, they take the content outside of the container and they’re like, well, that fixes it right there.
0:18:23
But now you’ve lost the grouping of your content. So really, you wanna keep the content in the container and just change the width of the container. Remember this container is 1366 by default. There’s nothing stopping me from coming in here and setting 100 percent width. And now we have content that is a different width. Let’s go ahead and get this out of the way. So now you can see that content goes all the way to the left side of the section except it’s still being protected from touching the edge by that gutter that is there. So you can create, you know, different widths of content. Now you have to be careful. Obviously, this doesn’t look good, right? But up here, this looks fine, where we have a big media or image or something. And then our content is contained in a smaller container above it. This kind of layout is fine. I wouldn’t say that this kind of layout is fine. This looks disconnected, disjointed, whatever you want to call it out of balance, out of alignment. This just does not look pleasing to the eye, but you can absolutely change these container widths to anything you want.
0:19:23
You can even make the container widths smaller. So I can come in here and I can put a max width of let’s say, um, 400 pixels on it. Right? So I can make this even smaller than website width. And in some cases that might be desirable. Of course in this case it’s definitely not, but in some cases it would be. Simply because the the container is 1366 by default or whatever your website width happens to be. It could be 1280, it could be 1440, it could be a lot of different things. You don’t have to keep it your website width at all times. Most of your content should be website width, but you’re able to mix and match or do it, you know, make changes as you see fit based on the layouts that you’re trying to achieve.
0:20:06
Now, let’s talk about where this gutter actually comes from and where just this general section padding comes from. Because if you look in, for example, our Webflow install, we have no default section padding. There’s no, these boxes are just up against the top of the screen. They’re nice and scrunched up. If we look in Oxygen, it appears like, wow, there’s some default padding going on in our sections. If we look in Generate, we see that there appears to be no gutter and there appears to be no top and bottom padding, no block padding.
0:20:44
So where do these styles come from? I talked about in web design, CSS, adding the styling to elements on a page. You’ve seen how I can add classes to add styling or I can add styling at the ID level. The question is, do I want to add a class to every single section that establishes my gutter and my top and bottom padding? Do I want to style every section individually at the ID level?
0:21:12
Both of these things seem extremely inefficient. What I actually want to do is target the main section element by default and say, hey, every section that I add to a page by default should have this top padding, this bottom padding, and this gutter. And that way, every time I add a section, like you see in Bricks, the padding is already set, it’s already established. If I need to override that on a section by section basis, I absolutely can, but I don’t have to manually add it via a class or ID styling to every section.
0:21:43
That’s so tedious and so inefficient. So the most efficient way to handle this is to use what’s called global styling. Global styling in CSS is to target the actual section element and add my padding instructions. Global styling in a builder is often done in a global styling area. For example in Bricks I can go to settings, I can go to theme styles and then under my theme styles I can come down to the section elements. Notice in Bricks every element pretty much can have default styles. I just want to go to the section element and I want to say hey here’s my padding, my gutter is on the left and right. Now these are set in rims, but I could easily set this in 60 pixels since you guys don’t know what M’s are.
0:22:32
So we’ll do 60 pixels here. This could easily be 120 pixels or it could be 80 pixels here, right? And 80 pixels on the bottom. You want the top and bottom to be the same and you want the left and right. Ooh, that’s wrong, that’s six. You want the left and right to be equal to each other as well. Okay, so this is how every section on my site now is going to have this padding by default, meaning every section will have the same exact gutter, it’ll have the same top and bottom padding.
0:23:02
Again, I can override those on an individual section by section basis, but I won’t have to constantly add this or add a class in order to get the padding that I want inside of my sections. Every builder is going to allow you or should allow you to add this kind of global styling to your sections by default. I looked for it in Elementor and could not find it. So some page builders are going to have these pretty crazy limitations and it just makes your workflow so much harder, so much more inefficient. This is why it’s important to use a builder that does these things the right way. But this is called global styling. So if you’re using a page builder, you’re like, I don’t, I don’t want to add this padding every single time I add a section, you know, where can I go to make this the default? You’re going to want to look for a global styles area.
0:23:54
Now we’re going to talk about, um, full width colors and images, because this is another area where it’s like, Kevin, I want my, my section to have a background color that does touch the edges of the devices. And that’s very easy to do because the padding that’s in a section, as we talked about with the box model, does not affect the colors or background images from touching the edge of the screen. So we’re going to talk about that right now. Anytime we want edge-to-edge colors in our sections, which is quite common, you can simply add a background color to the section itself. I’ll just add a really ugly yellow, but it’s going to make this very, very obvious. So let’s go ahead and hit save. Let’s go to the front end. And now we see, hey, full width color, edge to edge, no issues whatsoever.
0:24:39
Take a look at this on mobile, always edge to edge with the color, but the content is still contained. That’s why it’s called a container in that section. The content is still contained and there’s still a gutter established where our main content is not touching the edges of the page. Well what about images? What if we want an image back there? Hey, no problem whatsoever. I can throw in an image and it will also go edge to edge when it is a background image on the section. Now this is not the only way to add a background image but we’re gonna do this in a future lesson. I’m not gonna, man you’re already drinking out of a fire hose a little bit, so I’m not gonna throw the difference between CSS background images and HTML background images at you.
0:25:22
That’s gonna be a future lesson. But just know that this is not the best way to add a background image to a page. I’m gonna show you a better way later on in the course. But I just wanted to show you that yes, in fact, we can get images to go edge to edge easily with CSS background images on these sections. So, you know, full colors, background images, stuff that you see all the time on websites, this is how it’s done. These things are applied to the section element, not to the container element.
0:25:52
A mistake that I see people make is they put the background image or the background color on the container, and then they’re like, ah, it’s not going full width, so then they make it 100% wide, full width, and then they end up having to adjust all of the padding, and it just becomes an absolute nightmare. Absolute nightmare. There’s an infinite amount of ways that people can break these things and do things incorrectly, right?
0:26:15
It’s why I’m trying to strive for best practices in my instruction at all times, because the mistakes that I see, you don’t wanna know, you don’t wanna know how these mistakes end up. But best practice, just put the colors and the background images on the section element itself, not the inner container. Now let’s talk about, what about bigger sections? I need my section to be bigger.
0:26:40
I want my hero section to be maybe the height of my screen, or I just want more breathing room in there, more spacing inside of my section. There’s two different ways that are common to approach this and to solve them. They both have pros and cons. This is not a situation where one is objectively right and the other is objectively wrong. There’s just two different approaches and you have to know the pros and cons, and you also have to know what you’re trying to achieve, and then you make the best possible decision for that particular layout.
0:27:09
One method is to use what’s called block padding. And just quickly, we’re going to do a deep dive on this later, but this is logical semantic terminology. On a normal website, block describes the up and down axis, the Y axis, and inline describes the X axis. So block padding is top and bottom padding. Remember, we don’t want to change our gutters. We don’t want to accidentally change our gutters, right? So when we’re doing a section padding, we’re mainly talking about top and bottom.
0:27:43
We’re not really touching the gutters at all. We’re just talking about changing top and bottom padding. But if I want this section to get bigger, I can simply make the top padding 300 and the bottom padding 300. I can choose any value here that I want to. Though I would tell you, you know, try to keep your padding as consistent as possible. Okay. We obviously have some padding by default on the top and the bottom.
0:28:07
By default, it’s 120. So really I could say, hey, let’s double that to 240. Let’s not just choose a number willy nilly. Let’s still try to, you know, keep some semblance of rhythm going. So 240 looks like this. Obviously there’s much more white space. Now, the downside of using padding to do this is that you’re locking your content in. It can’t free flow.
0:28:30
There’s no free space in the section for you to align your content. Okay. And you’re going to see what I mean in just a second when we look at the second method. Now I can make it seem like, like you don’t have to make these even. Let’s say I wanted this to appear, this, this heading to appear like it’s toward the bottom of this container right here. Well, all I have to do is remove, let’s go back to our default of 120 on the bottom and then leave 240 on the top. And now it’s aligned more towards the bottom of this section.
0:29:00
You see, here’s the entire section. Content looks like it’s as if it’s aligned to the bottom, but really it’s not, it’s just a mismatch in padding. I have 240 pixels pushing that content down and then I only have 120 pixels pushing it up from the bottom of the section so it looks like it’s aligned toward the bottom and again This could be you know 480 right so I can put 480 in here and I get this effect right here on the front end so I’m doing all of this with block padding Because some people and some builders actually Have you do this a completely different way, so let’s take a look at how some builders would encourage you to do this.
0:29:38
So we’re gonna talk about virtual breathing room in your sections. This is actually supposed to say sections instead of seconds, but this is a free course. And I’ve said many times, you get what you pay for in the free course. You know, there might be some misspellings here and there. Okay, so let’s create this virtual breathing room. So instead of using padding, what I’m gonna do is I’m gonna go set a minimum height, not an actual height, not a fixed height, but a minimum height that this section needs to be.
0:30:06
And I’m gonna say it’s 640, okay? So both of these sections are exactly the same height, right? You know, 640 pixels of padding versus 640 pixels of minimum height, exactly the same. But clear distinction here. I’m gonna go up to this section, which has the padding in it, and I’m gonna try to use these alignment controls and you’re going to see that my content goes absolutely nowhere because it is locked in place by physical padding that exists in that section. Now I’m going to go down here where we set a height on the section a minimum height but we didn’t set any extra padding and watch now as I use these controls. Now I’m actually able to move that content within the section because there is free space created.
0:30:54
There’s no physical padding sandwiching this content in. It’s basically free space, and now I can move elements inside of that free space. Now, mid-height versus padding, why and when, what’s going on here? Okay, so here’s how you know. Number one, if you want content to be physically locked in place in your section, then you may want to use padding. If you want to let your content free flow and be able to move it around in the section, then you can use minimum heights.
0:31:23
Minimum heights are tough because what I see is a lot of inconsistency in the heights that people use. They might be using 640 here, 800 here, 710 here, especially in builders that allow you to use draggable handles where you’re dragging the height, dragging padding. That is an absolute disaster for consistency. Don’t use those handles ever, right? You always want to set actual values and watch this. Another benefit of the minimum height, let’s say I have multiple containers in this section. This all uses Flexbox by the way, to do all of these alignments, parts of Flexbox is not just top, middle, or bottom. See how they’re saying grouped together stop top middle bottom?
0:32:04
I can also separate the content. Here’s space between, there’s something called space around, there’s space evenly. We’re gonna do a deep dive on Flexbox in a later lesson, but this is all made possible by the fact that I allowed free space in my section rather than locking my content into place using padding. Again, there’s no right or wrong. There is what are the pros, what are the cons, what am I trying to achieve, and what is the best method to arrive at that destination that I want to arrive at. Okay, we need to talk about fixed height. Why I use min height and not an actual height because I will see people make this problem, make this error all of the time So let’s say I do my 640 pixels of height and you can see look nothing has changed I can still use all these controls. Everything looks great looks fantastic There’s no issue whatsoever, but watch this if your content ever needs to get longer I’m gonna duplicate and make more content and watch what’s gonna happen. Oh I Oh, I broke the section.
0:33:16
The content is now spilling outside of the section. Why is this? Because I told the section, I’m gonna grab that section right there, I said, hey you, be 640 pixels high no matter what. I don’t care what’s inside of you, I don’t care what’s going on, you are going to be 640 pixels high. And as you see, the content has no choice. The section’s not responding to the content anymore.
0:33:42
The section is locked in at 640. The content has to spill outside of it. Very, very, very undesirable. And you’ll see this happen on certain websites. This is not good whatsoever. But the minute I move this 640, take it out of the height box, move it to the min height box, there’s no issue whatsoever. The content will be 640 at minimum, but if it needs to get bigger it is allowed to get bigger. So let me delete some of these containers and look it’s still 640 because there’s not enough content to make it bigger, but if there is more content it will in fact get bigger so that it doesn’t break. Now let’s talk about avoiding margin on our sections and then we’re going to build an example hero section.
0:34:27
Okay, so margin on sections. Yet another big, big, big issue and mistake that I see all the time. I’m going to add a background color to this. Actually, before I do anything, I will add a background color to this one. Okay, so save. Let’s look at this on the front end. Let’s look at a situation where I want this content right here to appear as if it’s further away from this whole yellow section right here. What I see people do is come over to this section and they say, oh, you know what moves content down the page?
0:34:58
Margin. And so they come over here to layout and they do margin top 100 pixels and then I’ll hit save. And if you look, hey, I mean, to me, it looks like we’ve accomplished exactly what we wanted. We moved this content 100 pixels away from this yellow section. But what we don’t realize we’ve done, which is an egregious, egregious error, right back to prison time, prison time for this kind of thing, uh, is we’ve created a no man’s land on our website, an area that we can’t interact with, that we cannot change the styling of.
0:35:31
And I’m going to prove that to you right now. So I’m going to put the same ugly background color on that section right there. And then we’re going to view this on the front end. See this white space right here. That is margin between the sections. This should not be happening. This should not be happening. This is a no man’s land that I cannot interact with. I cannot style it. I can’t put content inside of it. I can’t do anything with this. It is effectively a gap, a broken gap of content on our website, your sections should all stack on top of each other with no space in between. If you need to create a visual kind of striped effect like this, there are other ways to create it.
0:36:14
Creating gaps between your sections is not a desirable way, that is not a best practice way to accomplish this. So my general rule of thumb, do not put margins on your sections. So I’m going to change the background color here and let’s say you wanted this section to overlap the section above it. So I’m going to change this 100 to minus 100 and what you’re seeing is another error, another issue. This is another bad practice. We don’t want to be doing this with our sections. You can do negative margins with other things. You can do negative margins with containers and divs and everything else, but I would strongly recommend that you do not do it with your actual section elements. So if you need things to look like they’re overlapping and all of that, that should be done within the section. Inside of the section you can use elements to create that effect. I would not recommend creating that effect with the actual section element itself.
0:37:19
Let’s build an example hero section so you can kind of see all of these concepts come together. So I’m gonna go ahead and hit save here. I’m gonna go back and we are going to just create a blank page for our hero section. All right, and this hero section is gonna be very traditional. It’s gonna be a full screen background image with a darkened overlay. We’re going to have a heading, we’re going to have a lead paragraph and we’re going to have two buttons that are going to be our calls to action.
0:37:46
Those are going to be in line with each other and that’s it. Let’s go. It’s a very simple section. So I’m going to build this in bricks. Here’s my section element. Here’s my container in my container. I’m going to put the majority of my content, right? So I’m going to add my heading, I’m going to add some paragraph text, and I’m going to add a block, basically a box for my buttons. Why am I adding a box for my buttons? Because I need all of my content to be stacked top to bottom, except for my buttons, which need to be inline.
0:38:19
So I need to group them together, number one, because they’re associated content, we talked about grouping associated content, but also because I need to give them different layout instructions from everything else that’s in the container. So I’m going to add a block here, and that’s my box for my buttons. I’m going to add two buttons inside of that box. Now, you can see right off the bat all this content stacks, but because these buttons are grouped together in their own box, I can simply change that box to say, hey, I want you in a row alignment instead of a column alignment, and now suddenly those buttons are side by side. Now I want a, let’s say a 30 pixel, let’s do a 20 pixel gap between our buttons.
0:39:02
Again I don’t use pixels, I don’t recommend using pixels, but I’m meeting you where you’re at. I don’t want to use a bunch of fancy other units until we’ve talked about what those units are and what they mean and how they behave. So I’m just gonna use pixels for right now, but best practice, we don’t use pixels in web design anymore. Okay, so 20 pixels of gap there. Remember in our main container, we wanna gap out our content, right?
0:39:26
We don’t want all of our content smushed together. So what do we use? We use gap, that’s the most efficient and even way to do this. So I’m gonna do 30 pixels of gap in our main container, and that’s gonna give us nice spacing with our content. I’m also going to align everything to the center. I’m going to select the container to do this and I am going to align everything to the center. Remember these buttons are in a different box right so they’re obviously getting different instructions. So I need to select that box and I can align everything to the center on that box. And now let’s go get let’s go to website ipsum.com let’s get ourselves some paragraph content and let’s drop that in here Perfect, and then you see we have a problem right even though the paragraph is centered It’s still text aligned to the left. It looks like it’s left aligned really it’s centered But it looks like it’s left aligned and that’s because Box alignment is different from text alignment. Okay, so I’m gonna show you if we go to style Typography and just use simple like left right center text alignment just like in any you know Microsoft Office Google Drive same concept here We’re centering that paragraph of text now the text is actually centered and its block is centered Okay, so two different things there. We’re going to deep dive all that later. Don’t don’t worry about it. Just stay with me.
0:40:49
Okay, the next thing I wanna do is, I don’t want people to read from left to right, like a mile across the screen. This is way too wide, this text. So what I wanna do is actually make that text box. Remember, everything is a box. I wanna make the box narrower. So what I’m gonna do is come in and put a max width on this box and say, you’re not allowed to get any bigger than this.
0:41:10
You can get smaller if you want, but I don’t want you to get any bigger. And so what I’m gonna do is put 640 on that. Actually, that’s not enough. We’ll do 720. There we go. Now this paragraph suddenly is much easier to read because I don’t have to scan a mile across my screen for every line of text. So this is better UX, which is user experience design, okay?
0:41:34
All right, so look, I’ve got my content all grouped nice and neat. Now what I want to do is I want to give this section a background image. So again, I’m going to go into background, background image, grab the image, and we’ll quickly talk about some background image concepts. We’re going to deep dive background images and HTML images versus CSS images in a future lesson, but let’s just cover it a little bit right now.
0:41:59
So I get some controls over here with background images. Number one, I want to set the size of the background image. I want a full width, like full resolution photo. That’s the biggest one I have is 1920 so that my image doesn’t look super pixelated, right? Then I want to set the background attachment by default. It’s going to be set to scroll. If it was fixed, you can’t see on this page because this page isn’t long enough, but it would kind of give you almost like a parallax effect. I want it to continue set to scroll, and then I get to actually align the image of what part of the image am I seeing, because this image is being cropped based on the size of the section.
0:42:40
If I want to see the center of the image, I can do that, and I’m seeing the center. If I want to see the bottom of the image, I can see the bottom of the image. I’m going to go back to, because I like the top center on this particular image. I like just seeing the top of the mountains and the smoke. And when I make the section a little bit bigger in a minute, I’m going to see even more of the photo. Okay. But I do have a problem. Look at how, we’re going to go view this on the front end just to see the problem in full scope here.
0:43:10
The text is dark and it’s kind of like it’s not a hundred percent blending in, but it’s definitely blending in a bit and this is not very readable. So in these cases, what you want to use is an overlay on your background image. You effectively want to darken your background image. And what we do is we put an overlay on top of it with a very dark, transparent color. Some builders just have controls for this out of the box like bricks. So I’m going to go to overlay. I’m going to say apply this to the overlay. And then I’m going to choose a dark color like black.
0:43:43
But the difference is I’m going to lower the transparency and see here I’m doing this in the container. That is wrong. I selected the wrong element. So I’m seeing that this is affecting my container. I’m going to get rid of that. I’m going to grab my actual section. That’s where I should be doing the overlay. Apply the overlay here. And then we’re going to choose that dark color again and now I can bring down the transparency and now I’m darkening the image which is fantastic. Okay now obviously that’s even worse and it’s really due to the fact that our text is dark and now we need light text. We need to go in the opposite direction of our background to create the necessary contrast. So what I’m going to do is I’m going to grab my container this time.
0:44:28
Why am I grabbing my container? I could go to my heading and make it white. I could go to my text and make it white. But there’s something called inheritance in CSS. Remember, this builder is writing CSS for us right now. We are styling elements. That means it is writing CSS. And in CSS, there’s a concept called inheritance where things like text will inherit the color from their parent element. So the parent element is the container, right? If I go to typography and set text color on this box, then the child text will turn white. It will inherit the color of the parent.
0:45:07
So there’s another example of the parent telling the children what to do. So when I just write white as the color here, look at all of that changes to white. Isn’t that more efficient than selecting each individual element and setting it to white? I think so. You told one element that all its children should be white and all of the children got white. I guess that’s as efficient as it can possibly get. That can still be overridden by the way, but this is called inheritance of styles and we’re going to deep dive this later in the course as well. But I want to introduce you to all of these things. Now the last thing I want to do with this section is I want to give it more breathing room, right? We talked about how to do that.
0:45:47
So I have two methods that I can use to give it more breathing room. This is a pop quiz. Right now I want you to answer in your head, what are the two methods we can give it or we can give it, right? Now I’m going to tell you the answer. Hopefully you’ve already got them in your head. Version one, method one, we can give it padding, block padding, top and bottom padding. Method two, we can give it a minimum height and then we can use alignment controls. In this case, padding would probably be the best option to go with because it only requires one step. So if I go to layout and I say padding, I’m going to go three, let’s do our two 40 and let’s do our two 40 here. Let’s save.
0:46:30
Let’s look at this on the front end. There is our nice traditional hero section. This is fantastic. And we have, we’re using padding top and bottom to lock this content into the center of the section. Looks just fine. Works just fine. There are no issues with this whatsoever. Now I go back here. I’m going to remove the padding and we’re going to try to attempt the same thing using the other technique. So I’m going to do a minimum height of let’s say 640. And then I can just use my alignment control. So that was step one. Now there’s a second step. See with padding, there was only one step, but with this method, there’s a second step, which I have to go to content and then I have to align that content to the center.
0:47:16
Let’s save, let’s refresh. Same exact effect. Nobody would know the difference. This is why I said, there’s nothing right. There’s nothing wrong. It’s just pros and cons. What were the pros and cons in this case? The pros of padding was, it was one step. I added the padding. I was done. The cons of the second method was I had to do two things. I had to set a minimum height, then I had to go use alignment controls to align the content. Now, if I had content that needed to be separated apart, if I had a content that needed to be aligned to the bottom, maybe at that point I used the second method instead of the padding method.
0:47:52
But again, this is just you making the decision. You have got to make these decisions. There are a lot of decisions that you have to make as a web designer, which requires you to know what are my options, what are the pros and cons of my options, I need to make the best possible decision in this particular situation. So this was a kind of a deep dive on sections. There is certainly stuff that we have not covered, but I don’t wanna overwhelm you.
0:48:17
You’re already, like I said, kind of drinking from a fire hose. We’re gonna continue to see similar concepts and repeat lessons over and over and over again throughout this course. But for now, what I want you to do is practice. I want you to go build this hero section right here that you see on this screen in the page builder that you currently use, and I wanna see if you can arrive at this outcome properly.
0:48:41
And if you need any help, if you have any questions, if you get stuck, drop your comments down below. I am happy to jump in and help. Cheers.
