Це відео не доступне.
Перепрошуємо.
PB101: L04 - How Sections & Containers Work
Вставка
- Опубліковано 16 сер 2024
- Sections & containers are some of the most important boxes in web design. They organize & group your content topically, they're responsible for establishing the content width of your website, and they're responsible for creating an inline gutter on smaller devices.
In this tutorial, we're going to take a closer look at some important details related to sections and containers:
◉ The main semantic purpose of sections.
◉ Why almost all sections should have an inner container
◉ When should content be in a container vs not in a container
◉ How to manipulate the width of a container
◉ How different page builders handle the concept of a section element
◉ How to set default section padding
◉ Where the inline padding for your site's "gutter" should be set
◉ Two methods for adding vertical white space to a section
◉ How to set background colors and background images on sections
◉ Why you should never use a fixed height on sections
◉ Why you should avoid using margins on sections
To close out this training, I show you an example hero section build featuring a full-width background image, dark overlay, and a very traditional content layout with dual buttons as the call to action.
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner...
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
00:00 Intro
00:43 Section & Container Overview
04:01 How Page Builders Handle Sections Differently
10:00 The Semantic Value of Sections
12:06 Establishing a "Gutter" For Your Website Properly
17:46 Overriding Container Width
20:06 Setting Default Section Padding
23:54 Background Colors & Images
26:36 Vertical White Space in Sections (Method #1)
29:28 Vertical White Space in Sections (Method #2)
32:40 Min-Height vs Fixed Height
34:20 Avoiding Margins on Sections
37:19 Example Hero Section Build
48:10 Outtro
Another disadvantage of the min-height white space method (Method #2) that I forgot to mention is that if you need to add more content to the section, you need to continually adjust the min-height value if you want to keep the same amount of white space. The padding method (Method #1) does not have this issue.
But wouldn't there also be an issue with method #1 (with the 240px on the top) when you're on mobile... for example if you set the top padding to 400px+, wouldn't that be too much when viewing on the phone?
clamp = fluid responsive padding. Also, it's easier to adjust padding at a breakpoint once than to constantly adjust spacing based on how much content there is or isn't inside a section@@James_m7
In a world of over-summarised, thin, TLDR content, Kevin once again delivers above and beyond against the trend. To drive the point even further, the fact that I've paid for courses that deliver similar detailed content that I have not consumed nearly as hungrily as any of Kevin's content gives me pause. It's not just his knowledge, but also his delivery that keeps me coming back to "drink from the firehose" as he puts it! Thank you, Kevin. I can only wish this was available when I started years ago..
Thank you!
Your content for building websites with page builders is BY FAR the best I've come across. So so so good. I came across a random Reddit comment that suggested your tutorials and I am so happy I did. Simply fantastic. Thank you so much.
Welcome aboard!
“The one exclusive sign of thorough knowledge is the power of teaching” Aristotle. I feel lucky to be learning from the best. Thanks, Kevin!
🙏
After watching your videos, I can't help but question what I was doing before. You have truly altered my perspective and approach to web development.
The best teacher by far. I don't do this full time, but if I have an issue he is the maestro. He even organizes the lessons logically. When I can get the time to break free, I am going to do every single lesson from beginning to end.
Kevin, I really have to say that you are doing a great and incredibly valuable job here with such an extremely good quality of knowledge transfer. I'm looking forward to the next part!
Wonderful, wonderful, wonderful!!! Thanks Kev. You know, I have already built my website following other 'instructors' and yes, it was get to get it up and running quickly. The problem being they all teach you the front end only, all the important back end stuff - seo, scalability, classes etc don't get touched. Now I have to effectively have to start again but at least I have a chance to get it right. I am so happy to have found you!
One of the most responsible things to do as a Web Designer is to Watch and learn your videos and content. 😍 Thanks!
Top tier content that everyone claiming they are web developers, must see. Thank you for Kevin for all these lessons!
I really appreciate the way you've moved away from the Builder specific tips of your previous oxygen builder videos and are now teaching the underlying structure of web development. What a great course! Thank you.
this is better then many paid courses It really gave me the concepts and made my base I am just loving it and also making notes while doing it Thank Kevin Geary.
Thank you for this course, I'm a beginner web designer and this feels like I'm getting all the secret cheat codes
Thanks a ton, Kevin. I'm an amateur who does websites for family and fun. Today's video solved a few problems that I had. Look forward to the next vid.
This is very helpful...you're a great teacher!! 🙏
Glad it was helpful!
Just watched this class for the third time and rebuilt every example, just to improve learning. Thanks so much for this tutorial!
😊 I completed this video now. 😍 It's very good to know that how Kevin tries to provide every information we'll need in building a website. Like the comment he added for min height and padding, and the image no repeat thing.
I used an FSE plugin called stackable; it put the gutter in the (inner column), aka container inside the section; it always made inconsistencies even between their own blocks, and it was painful to fix. Sometimes it wouldn't go away with CSS, and I delivered websites with this kind of issue.
Thanks for highlighting this!
Yep!
Thank you. I learnt some valuable concepts here.
It's so important to learn these basics. Thank you so much! I look forward to the next lessons.
Thank you Kevin - your teaching style and gracious sharing of knowledge is priceless!
Stupendous
Thank you for taking the time to create all of these incredible resources...and for free too! I honestly look forward to watching your videos when I have a chance. Please keep it up.
You are so welcome!
Like always, that was fantastic Kevin. I cannot tell you how much I appreciate your work and look forward to the next one in this series.
It would also be great to see the magic at work as you arrange and manipulate Sections, Divs, Containers, and blocks, as you build different FRAMES for Brick with AUTO-CSS.
Thanks Again!
Thank you very much!
Kevin Geary is the GOAT.
Another killer tutorial, to "PB101". Thx Kevin... Looking forward to the next.
As someone new to Bricks, but somewhat familar with design - your videos are incredible, man!
Just finished my first Bricks website for a client, and I'm happy to see I only did a couple of chump moves. 😆
Nice 🔥🔥
Great Lesson, Keven. I think I should refer to you as Sensei Geary. I thank you for all you are doing!
Is it possible to give more than one like on a video? man, you are gold
Great course! I am using Greenshift, which now has as many as two section blocks. I think they might have been inspired by your videos.
I have been in touch with their dev team. Will be taking a much closer look over the coming months.
Great video. Learned loads about the importance of sections and containers for good design. Thanks 👍
Back to the basics but very interesting, thank you Kevin !
While I have a pretty good grasp on these concepts, I learned a few important things. Thanks for being methodical and thorough with your teachings.
Glad it was helpful!
Good stuff 👍🏻
Please, cry for the ones who haven't found this course yet!
Just found it, now I'm changing divs into sections...
Learning is really fun here! Excellent tutorial, many food for thought and best practices. Tank you!
Glad you enjoyed it!
Perfect video! The only hiccup that I've noticed is that Container inheritance doesn't ever work on Bricks. If I apply a color to a Container, the elements inside of it do not inherit that color like they do in Webflow for example.
They do, you probably have a global style rule in place somewhere that’s overriding the attempt. If you share a link i can help.
I broke one bad habit. I quit wasting my time watching any other web design videos. You should have called them, "Foundations for Bricks." LOL Keep up the good work. ;)
Another excellent tutorial... Thank you
another great job Kevin, thanks
30:00 Ah ha! Controls don't work because they're locked with no room to breathe. I taught css in 2001 through 2003 and im now learning css again. I switched to SEO in 2004 and never kept up my skills.
Another great Tutorial, Kevin 👌🏻😊!
These PB101 lessons are gold. You should consider and I wish you could take a swing at Elementor at every one of these lessons, and embarrass the hell out of Elementor, that they choose to course correct, or else start bleeding customers to Bricks, Webflow and the like.
As much as I dislike Elementor, I don't want to pick on one specific builder too much. There are others that are equally as bad. And at some point, we have to focus on using/celebrating the builders that do things right.
I do have a video planned that deep dives into the shit show that is Elementor, though. It's not for this course, but it'll be on the channel.
@@Gearyco What I meant was that in your PB101 comparison, Elementor must always be included as a player by default in all PB101 lessons, just like Webflow and Bricks, so Elementor users, which there are a lot of them, get to know how their page builder fares in comparison to these professional page builders.
In some areas, Elementor might do well, and not so much in others, and in a platform-neutral lesson like PB101, all major players get a spotlight.
Major players are Webflow, Elementor and a new contender, Bricks, and occasionally some builders get a spotlight if they do things better or worse, like Oxygen, Generate Blocks, Cwicly, Divi, and the like, but major players always get a spotlight.
To further illustrate the point, I, as an Elementor user felt left out in this video, as I didn't know how my page builder fared in this important lesson and comparison.
Food for thought. Cheers.
👌I got another skills to learn. Thank you!
Great content! Congrats and thank you!
Bringing a solide foundation to a website should be a strong suit. A lot of Wordpress solutions tinker that for "fast" eye candy with maybe a nightmare coming later when the site should grow or change.
Thanks Kevin! These lessons are valuable.
Just glad I don't apply any jailable practices 😂
Thank you for this course ❤❤❤
It's my pleasure
can't wait to join the session...
I appreciate you! This is the energy we need!
Loved that you covered min height, how about using max height so that on mobile Images don't make your sections absolutely ginormous?
We will, but that shouldn’t be too much of a problem in any case. But yes max height will get covered.
Wonderful.....👏
Another great lesson from guru;) BTW alreaty bought ACSS and Frames and started learning:)
Enjoy!
Hi Kevin,
if we are not adding margins or using overlap on sections. How can we achieve all those shape dividers which are very common in web design?
Thank you so much for these videos. I am really grateful to learn from you.
Still can achieve all kinds of overlaps. Many different ways. Search my channel for overlap.
14:00 Hey Kevin, why it is better to apply margin in the section for gutter instead of just usind the max-width to the container?
I mean, the container already has a max-width of 1366px for desktop, it couldnt have like max-width: 85% for mobile?
Because there are times you want elements outside of a container but still not touching the edge of the screen.
Oxygen Builder does not include a Margins option in their sections. I really like how Bricks stays on the same panel I am on when I switch elements.
Yes, very helpful.
Nice tutorial. Looking forward to seeing your best practices on background images (html vs. css).
Can I assume that the prebuilt Frames are using css?
Frames use HTML background images for most images because it has more advantages and fewer disadvantages.
Thanks for the great content! One question: Are me meant to set the section padding within "Element - Sektion" as you, in IC always talked about setting only the "Element - Container" - unless i missed something :) (oh and it makes total sense to set it here i guess)
In the hero example at the end of this session, since the block containing the two buttons is a child of the container, why don't the button text labels turn white? Or if you go to the block level and you change the text color to white text it does not change the button children's text colors to white?
Elements won’t inherit styling from their parent if they’re already getting styling from somewhere else. The buttons have default styling already, so they won’t inherit the font color.
@@Gearyco I think I get it. When I look at the "default" button class .bricks-button the style is set to "primary" which sets the color to var(--bricks-text-dark) . Is that correct? I have a lot more to learn. Thanks😀
Around @39:05 you also give the buttons a row gab, why is that? There is only one row with 2 columns.. Is that just best practice? I've seen you do it in the video before this one as well.
I'm not really sure what you're referring to. The buttons have to be in a row to be side by side. Since it's flexbox, there aren't actually any columns. Columns don't exist in Flexbox.
Quick question for clarification - are you adding the additional hero padding (240px top and bottom) to the section or the container?
Section
Hi Kevin, GREAT lesson! So...since negative margins on sections are not good, what would be the best way to have the Hero BG up under a transparent Header (With logo and NAV)?
Transparent headers should be position absolute. Positioning will be covered in a future lesson.
what do you do with sections when you have a main column with content and a second one with suggestions or menu? 1 section containing 2 sections?
No, you wrap the secondary column in a tag like “aside” or similar.
Best source for improvering accesabilty skills in webdevelopment ? 🙂
We're going to talk about accessibility in this course. But there are many good resources. I don't know of one cohesive resource, though.
I know you probably don't like this, but instead of making an image full-width, can I do the same with a video that plays on scroll?
Yes but it’s typically not great for UX.
Perhaps premature, but for YOUR best practices for page hero backgrounds... min-height - rem or vh? AND/OR Frames and ACSS?
Are you using a real image or css background-image?
@@Gearyco real image for now.
I would position the image absolute with 100% width and height so that it's always the same height as the container it's in, but then again that's not the best method for every scenario. Context matters a bit as well.
@@Gearyco I apologize I didn't do a good job of wording my question. I was more interested in what units you prefer for the min-height on a hero section which contains a background image... whether rem or vh or perhaps even some css calcs?
@@basilbabaa1628 I rarely use min-height for sections. Normally I use extra top and bottom padding to control the white space. The height is whatever it ends up being.
That's not in all cases, but most cases.
Hi Kevin, I came to the question if it's possible to center a container within a section because when I tried to align the axes of the container, nothing changed. Is this an issue of positioning or is this simply not possible?
Yes it’s definitely possible
@@Gearyco alright, so it's an issue of positioning?
Is there a clean way to implement a figma design into bricks, or should I build it from scratch in bricks?
You have to build it
@@Gearyco Thanks, for your advice an great videos!
Do you have a video that explains how to make a Hero with a full-width nestable slider?
Sliders aren’t great for UX. I tend to avoid them. But I can do a tutorial on it at some point.
Thank you! I'll be on the look out. How can a hero section with a transparent header be created without using margins, even though margins cannot be used with sections? Despite the fact that tutorials on UA-cam suggest doing so, is there an alternative method that can be used to achieve this effect?
@@filmgenius2 By targeting the container of the first section on the page and adding margin to that container.
How does Brakedance handle this?
Same as oxygen
When you play monopoly with Kevin, you know who's gonna end up in jail.
29:40 Next time, spelling mistakes won't be allowed no matter it's free 👮🏻♂️. E.G. Seconds instead of Sections 😜.
I did 100 pushups as punishment.
"You get what you pay for since it's free". That's not true. We're getting a TON of value, for free. Thanks so much for that.
Actually, I've just joined your inner circle. Of course, I expect to learn a lot from that and get a lot of value there, but it's also my way to thank you (and pay you) for creating this kind of great content.
@@bobweb That's 💯% true 😊!
@@Gearyco next Tuesday, you will have much more bigger biceps 💪🏻.
🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐🐐
Great Video, Kevin. @ua-cam.com/video/s5zmRePNN0A/v-deo.html you mentioned there are better ways to create a "stripe effect". It appears to me I see in your builder there are faint grey borders at the top and bottom of your sections. Can you tell me how you achieved that, was it done in your theme styles? I would like to "stripe" my sections with 1px of a faint color as you appear to have. Please advise how you would recommend doing that, if you could. I think the question is relatable to this fantastic tutorial. Hope you have the time, thank you in advance. 👍
Yes i just targeted the section elements (except the last one) with css to add a border to the bottom of them. It's just for the purposes of these tutorials, but if it's something you want to do on a normal website it's pretty easy ... section:not(:last-of-type) {border-bottom: 1px solid #eee;}
@@Gearyco Thank you, Kevin. This did the trick 👍. I figured since you're adding this amazing content for free, I would ask the question here instead of the inner circle... so that the UA-cam algorithm gets fed and your channel gets the content shown to more people. Thank you for what you are doing. Continued success, Kevin!
As always, fantastic useful information that we should all be grateful for. Learning about the CSS columns alone justified watching this video, though I appreciate all the other learning too! Loving this series of videos. Thanks you, Kevin. 🫡
Strange thing is, I tried to place this comment on the previous video (L03)! Not sure how it ended up on this video. 🤦♂️ Sure this one is mega too. 🤣
Glad you now realize and have said oxygens quality of life of handling of sections and containers is flawed and not convenient. It was a pain to build sections in oxygen the same way as webflow, extra things. But felt better about it.