Sections vs Containers vs Divs in Bricks Builder (Detailed Tutorial + Example Build)
HTML-код
- Опубликовано: 31 май 2024
- Sections, Containers, and Divs serve very different purposes in Bricks Builder. In this video I'm going to walk you through exactly what those differences are, why they exist, and why they're extremely important to understand.
At the end I build a quick simple section with alternating content containers so you can see all three elements in real-world practice.
If you're a beginner or intermediate designer/dev then this is a perfect tutorial for you. I take it pretty slow and go into great detail and context.
New here from the Bricks community! Drop a comment below and let me know you're a Bricks peep! And don't forget to subscribe and hit the notification bell so you can get new Bricks tutorials in your feed.
Join the Inner Circle: digitalambition.co/inner-circle/
Get a copy of Automatic.css: automaticcss.com
0:00 Intro
01:43 Sections
20:39 Containers
30:52 Divs
34:46 Real-World Example
52:10 Wrap-Up
![KFF Singapore Badminton Open 2024 | Alfian/Ardianto (INA) [7] vs. Liang/Wang (CHN) | QF](http://i.ytimg.com/vi/g0QGafkoT2o/mqdefault.jpg)
Whoever comes from Oxygen…The properly working drag n drop in the structure panel is so satisfying to watch, haha. Great tutorial! 🙌🏼
omg, I know!
Just rewatching this again during a lunch break. This video cracks me up. Ive noticed twice in it where you start to go off on a tangent but then just jump cut to the next thought. Im hoping you did that by design. It's funny
Bricks community here. Bring it more Bricks, please!
Always gold! I just moved to Bricks for all of my personal sites; waiting for 1.5 stable before I start the rebuilds. Seeing you start to drop Bricks tuts is the last bit of validation that I needed to know moving away from Oxygen was the right move (for me). Excited for the next one!
I mainly move from Elementor. Been waiting for Flex and grid for a decade. Gonna rebuild some sites using Bricks and Cwicly.
More Bricks tutorials, please! I am enjoying the new Bricks iterations very much.
Thank you so much for so much value in so little time. Much much love . God Bless you
More Bricks please! Just got my Bricks LTD and trying to learn it. From the Oxygen, Bricks and Inner Circle communities :)
I am new to the Bricks community. I came from Ultimatum (Now a DEAD Product) with Visual Composer. I recently took a few years off, due to illness. I just purchased Bricks a few weeks ago and haven't built anything yet because I have been trying to get my arms around it. This video was a gold find and I now feel ready to build. Please keep them coming...
Great viewing - keep them coming!
Kevin I have to say that i am rather blown away by your generosity in the amount of detail you impart for people in your videos. An absolute goldmine of information. Cant vthank you enough. I am in the process of migrating to Bricks from 'Shhh, you know what' and your videos are proving t to be invaluable.
Kevin, my brain just exploded! I thought I knew something, but it was all wrong. Thanks for enlightening me on essential fundamentals. In my mind, it was 8 minutes tutorial; that is how time flew. I bought bricks two days ago and still trying to find my way around. This is the very first video I watched from you, and I am going to absorb all the others now. 😃
So happy that you are covering Bricks...
I’m with Bricks!
I am a Bricks convert from Elementor and learning both Bricks and ACSS and would love to see a refresh of your ACSS playlist.
Thank you very much Kevin for giving so much value to the community! Every time I watch this video I find more gold nuggets.
36:17 The best #3 tabby moment of the video, haha, you should upload the extended director's uncut video, great tutorial by the way 👏👏👏
Really helpful, and I'm excited to get into your PB101 series! Great teacher!
Laughed at the "you get what you pay for" and other cuts when you're about to ramble, lmao
Glad to hear it!
I'm from Bricks! Great stuff, thanks Kevin!
Gold!! God Bless!!
Bricks All Day
Total beginner who wants to learn all about building a website using bricks, so thank you for your explanations and tutorials 👍
Getting some great lols with the gold Kevin, thanks mate
Glad you enjoyed it
30:51 Best #2 funny cut moment of the video haha.
Great video, thank you!
I missed LTD of Automatic.css but still looking for it :)
Am for Bricks, Thanks you so much for this video. can't wait to sing-up for Bricks Inner Circle.
26:32 is worth the entire video! 😁🤣
More Bricks please.
Great stuff as always. I'm really looking forward to your expansive inner circle video
As always, I am so grateful to you, Kevin, for your awesome tutorials & Automatic CSS. Thank you so much.
Bricks here too, thanks for your tutorials and passion about adopting practical standards and conventions.
So happy to finally have Bricks 1.5 running with ACSS which together make an awesome WordPress working environment.
I'm from bricks. Haha partially I regret coming across your videos because now went down a rabbit hole of CSS 😂. But so much to learn and trying to build along side of you.
Great tut as always. Bricks and maps with markers please. Trying to show events by location
Excellent thanks!
Great stuff! Thanks! I'm moved from oxy to bricks and happy to see more bricks stuff!
Great Job Kevin, I have been looking at Bricks since 1.5. You always do a fantastic job with all you video trainings.
🙏
Super video as always - all for bricks for the win 👍🏻
Another great lesson! Thanks!
Many thanks Kevin. Super useful and value. Part of the Bricks Community .
Very valuable knowledge! Thank you!
Great tutorial as always
Thanks, Kevin. I’ve been using Bricks and recently got ACSS, so love the tutorials on using them together!
Here from the Bricks community - thanks Kevin for a very informative video that really helps with Bricks 1.5 and the new sections etc. Looking forward 1.5 stable release and looking forward to more ACSS for Bricks tutorials!
I'm genuinely happy with your training and information about web design, Oxygen and now Bricks! I made the switch and re-learning some stuff with automatic CSS.
Thank you for the course sir
I'll jump right into bricks and acss definitely. Your video was mind opening.
Awesome and thanks for another super tutorial. Learnt a ton about HTML structure and layout.
Solid solid value Kevin! Thank you! Ignore the complainers!
Very helpful and as a Bricks user I really have missed this. Hoping more to come.
Im for bricks! You readed my mind, i was looking for that tutorial 3 days ago!
Thx Kevin!
Thank you very much sir !
This video is absolute GOLD! Would love to see more content about structure and the principles of good (elegant) design using Bricks. Great job man! Thank you. 🙌
Can you provide the text / principles from this video in written format please? Maybe add it to the YT description or share a public Google Doc link? Thanks again for this amazing content! 🙌
@@ChrisMooreOfficial Transcription is available for this video, not sure if that's what you mean.
Hands down the best info about web design out there ! (Bricks user 😉)
Thank you!!
Nice job Kevin, thanks for all your efforts
Bricks community
I'm using brick for my projects. Thank you for great tutorial! I'm going to look at your automatic CSS tutorial!
This was an amazing intro into Bricks & Automatic CSS - Thank you!
Glad you liked it!
Nice one for Bricks. Keep up the good work.
Keep up the Bricks love. Not a full-time web dude but moving from Oxy to Bricks moving forward for sure!
Yes please, more Bricks tutorials
You are God sent Kevin. Thanks a ton for the information. Please make tutorials on design system and listing websites aswell.
Absolutely great video. This should get me going on bricks. Still watching, but could not resist commenting.
Nice break down of the elements :)
From Bricks all the way 😊
Great stuff and great eye opener. Thanks. Now I get how Automatic.css and Bricks work together.
Yep, more to come on that specifically!
Yes bricks is my way to go! Thanks for your energy 👊🏽
You bet!
Dude, that tutorial was incredible: instant subscribe!
🙏
Migrated to Bricks and automatic CSS. Also signed up for your inner circle. Thanks, Kevin 👏
Great Video ❤️. You will make me to move to Bricks soon 😊.
You should!
I came out of my visual composer bubble and discovered many other builders, including bricks. This video contains valuable information, true gold! thank you for sharing.
Very helpful Kevin, thanks! I’m using Bricks and have been trying to combine it with automatic CSS. Still in the process of learning how to work with ACSS so these types of examples and tips on its use are very helpful 👍🏽
You forgot the Block :) Thank you very much for this video - much clearer now to me. I think there should be a "you use this when.." Cheatsheet with Bricks by default. Great content!
The block wasn't available when I recorded this, unfortunately. They released it later.
@@Gearyco please make video update
Great vid Kevin as always. Although, i am using Oxygen, but i knew that there would be something for me to learn, even if the vid is about Bricks. I learned about aria-label attribute for accessibility. Thank you so much.
Using Elementor now moving towards Bricks. Thanks for this, this is amazing.
Welcome!
More Bricks tutorials, please! New to bricks
Thank you, Kevin! I'm still in Oxygen but have bought Bricks and looking at developing in that.
Here from Bricks :) Interesting tutorial, thanks!
Awesome video. I laugh many times but a lot gold there. Happy can watch it, keep awesome, Kevin!
Glad you enjoyed it
Dude you made my day! 👍
I'm from the Bricks community and a member of your inner circle, but find myself backtracking through YT as I travel the learning path.
Your lessons are beyond value and I look forward to seeing more Brick on both sides of the Digital Ambition wall.
Thanks for all!
Awesome, thank you!
Im from Bricks. Great video. I really hope you make more videos. There are not alotnof bricks tutorials out there.
Great video Kevin! I just switched to Bricks and it is much better than my other builder. I feel once I learn it I will be building better sites!
Have fun!
Sooooo good! 😀
Wanting this... thanks you. You definitely owned my sub
More to come!
@@Gearyco Thanks Kevin. Can't wait to learn new things from you
Great stuff as always Kevin. A great tool that could have been used for this to visually show the boundaries of all the boxes that I use is Hoverify. Not advocating for it, but would be a great tool to really give a visual to your tutorials. I've learned a sh*t ton of stuff from you and continue to do so after watching these. I'm very much in the near future, due in part to your channels(all of them), going to start pursuing business ventures to start building more sites outside of the handful that I do now. Many thanks and will continue to enjoy your content!
keep it coming!🙂 was oxygen, now bricks...
grate!!! more bricks!!!! 🤩
I am starting with bricks so these kind of tutorials are precious .. even if got it for free ;-) get
Oxygen user here. I don't even own bricks and i watched this video lol. Your videos are always A+++++ 🔥
I am Spartacus! Sorry, I'm from Bricks! Nice video. Thanks.
This is Exceptionally informative.. you have a gift of taking something complicated.. and making it practical and bite-sized. You said to check you on things that are 'punkish'.. in this video and others that I've watched, you say "side by side" often. Like, "these buttons get added side by side". For those learning, "in-line" is a major major term! One that they should understand, especially when discussing elements and placement.. just my opinion.
Good point!
Oh :) Yeah I came over from O2 to Bricks. Most of us know why we are doing this :)
Moving from Divi (no sniggering) and am about to convert all of my sites to Bricks with ACSS and Metabox - bought the Plaster plugin too as it seems to make life easier (though I love the style guide page)
This is gold! It would be very interesting to see how a real live case study video of developing a full website / blog / ecommerce with bricks and automatic.css.
Doing a full bricks website build in the inner circle
From Oxygen but looking to test out Bricks. 🤙
You should!
I am in process of moving to Bricks. A little bit learning curve :)
Awesome Kevin, thank you for the tutorial. I am from oxygen changing for bricks. Peace
Brickster here! Thanks for the detailed explanation. Love how quickly stuff can be done with ACSS! Thank God I bought the LTD :D
Looking forward to more Bricks tutorials!!!!
More on the way!
Great stuff! Thanks for the clear tutorial on the Section/Container/Div hierarchy. And loved the soft-sell on ACSS (which I'm on the fence on right now but closer to climbing it - haha). I'm a #BricksNewbie too.
Can't help but soft sell it all the time because I actually use it on every site! Only took a little extra time to explain some things because this was the first tutorial the Bricks community is seeing. Once I do more Bricks tutorials I'll just be using ACSS and not taking extra time to explain how its working.
@@Gearyco I would totally do the same thing! Definitely shows the utility of ACSS (I would need a nice cheatsheet which I know you have on the various namings like "owl"). My site is currently on Elementor, but I bought the LTD for Oxygen as my thought was to convert. But then Breakdance happened, and I discovered Bricks and bought the LTD for that. All in with Bricks (especially having played with 1.5b and waiting for 1.5RC). Now, wondering if you guys might have some sort of a Bricks nudge in your pricing so I can go all in with that. Totally see the value in your utility.
ACSS sped up my Oxygen dev time incredibly! Assuming it's gonna do the same as I start looking at Bricks.
FFaaackkk yeeeaaahhh!!!!!!!!!!!!!!!! MORE Bricks + ACSS :D :D :D
Always good stuff! @kevin, would you put a heading in a container even if the only child element in the container was the heading?
If it's the only container in a section, then the heading still goes inside the container. I wouldn't add *another* container or a div just for a heading, though.