Sections vs Containers vs Divs in Bricks Builder (Detailed Tutorial + Example Build)

  Рет қаралды 16,151

Kevin Geary

Kevin Geary

Күн бұрын

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

Пікірлер: 278
@SingaporeMathsAcademyUK
@SingaporeMathsAcademyUK 12 күн бұрын
Your approach to teaching is briliant! Well done.
@julio7410
@julio7410 Жыл бұрын
Bricks community here. Bring it more Bricks, please!
@stripedgoat8470
@stripedgoat8470 Жыл бұрын
Whoever comes from Oxygen…The properly working drag n drop in the structure panel is so satisfying to watch, haha. Great tutorial! 🙌🏼
@Gearyco
@Gearyco Жыл бұрын
omg, I know!
@techgal2010
@techgal2010 Жыл бұрын
More Bricks tutorials, please! I am enjoying the new Bricks iterations very much.
@RobCooper
@RobCooper 2 ай бұрын
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
@crazy4uonly21
@crazy4uonly21 4 ай бұрын
Thank you so much for so much value in so little time. Much much love . God Bless you
@bluefuzecom
@bluefuzecom Жыл бұрын
I’m with Bricks!
@andykillman
@andykillman Жыл бұрын
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...
@daveb8795
@daveb8795 Жыл бұрын
More Bricks please! Just got my Bricks LTD and trying to learn it. From the Oxygen, Bricks and Inner Circle communities :)
@AvalancheDesignIE
@AvalancheDesignIE Жыл бұрын
Great viewing - keep them coming!
@RMSAnalyst
@RMSAnalyst Жыл бұрын
As always, I am so grateful to you, Kevin, for your awesome tutorials & Automatic CSS. Thank you so much.
@Pimp_Shrimp
@Pimp_Shrimp 5 ай бұрын
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
@Gearyco
@Gearyco 5 ай бұрын
Glad to hear it!
@ryanbrown1181
@ryanbrown1181 Жыл бұрын
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!
@rebelinc
@rebelinc Жыл бұрын
I mainly move from Elementor. Been waiting for Flex and grid for a decade. Gonna rebuild some sites using Bricks and Cwicly.
@nielstieman9594
@nielstieman9594 Жыл бұрын
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.
@docetes
@docetes Жыл бұрын
Great stuff as always. I'm really looking forward to your expansive inner circle video
@ElementoryMyDearWatson
@ElementoryMyDearWatson Жыл бұрын
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.
@VijayKumarIM
@VijayKumarIM Жыл бұрын
So happy that you are covering Bricks...
@GreggWatson1
@GreggWatson1 Жыл бұрын
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!
@JaysonRivest
@JaysonRivest Жыл бұрын
Thanks, Kevin. I’ve been using Bricks and recently got ACSS, so love the tutorials on using them together!
@JohnnyAnthonWichmann
@JohnnyAnthonWichmann Жыл бұрын
Very helpful and as a Bricks user I really have missed this. Hoping more to come.
@HarigopalDasa
@HarigopalDasa Жыл бұрын
Many thanks Kevin. Super useful and value. Part of the Bricks Community .
@djhaystack
@djhaystack Жыл бұрын
Keep up the Bricks love. Not a full-time web dude but moving from Oxy to Bricks moving forward for sure!
@frankenjeda
@frankenjeda Жыл бұрын
Am for Bricks, Thanks you so much for this video. can't wait to sing-up for Bricks Inner Circle.
@koqpe13
@koqpe13 Жыл бұрын
I'm from Bricks! Great stuff, thanks Kevin!
@Repko01
@Repko01 11 ай бұрын
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. 😃
@OlegYarkayev
@OlegYarkayev Жыл бұрын
Thank you very much Kevin for giving so much value to the community! Every time I watch this video I find more gold nuggets.
@francois-pierrethibault2651
@francois-pierrethibault2651 Жыл бұрын
Im for bricks! You readed my mind, i was looking for that tutorial 3 days ago! Thx Kevin!
@AmandaLucaseu
@AmandaLucaseu Жыл бұрын
Super video as always - all for bricks for the win 👍🏻
@matthiasbaudrexl943
@matthiasbaudrexl943 Жыл бұрын
Great stuff! Thanks! I'm moved from oxy to bricks and happy to see more bricks stuff!
@abundancemadeeasy2878
@abundancemadeeasy2878 Жыл бұрын
Yes bricks is my way to go! Thanks for your energy 👊🏽
@Gearyco
@Gearyco Жыл бұрын
You bet!
@joansey56
@joansey56 Жыл бұрын
Migrated to Bricks and automatic CSS. Also signed up for your inner circle. Thanks, Kevin 👏
@DimitryChamy
@DimitryChamy Жыл бұрын
Bricks here too, thanks for your tutorials and passion about adopting practical standards and conventions.
@geraldlopez6801
@geraldlopez6801 Жыл бұрын
Solid solid value Kevin! Thank you! Ignore the complainers!
@rebelinc
@rebelinc Жыл бұрын
Great stuff and great eye opener. Thanks. Now I get how Automatic.css and Bricks work together.
@Gearyco
@Gearyco Жыл бұрын
Yep, more to come on that specifically!
@MoeZainal
@MoeZainal Жыл бұрын
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.
@gibrangarcia38
@gibrangarcia38 Жыл бұрын
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 👍🏽
@bobsshopping
@bobsshopping Жыл бұрын
Great Job Kevin, I have been looking at Bricks since 1.5. You always do a fantastic job with all you video trainings.
@Gearyco
@Gearyco Жыл бұрын
🙏
@9999chippy
@9999chippy Жыл бұрын
Yes please, more Bricks tutorials
@adamwasiluk
@adamwasiluk Жыл бұрын
Very valuable knowledge! Thank you!
@dahunsi
@dahunsi Жыл бұрын
Absolutely great video. This should get me going on bricks. Still watching, but could not resist commenting.
@BeneathTheBark
@BeneathTheBark Жыл бұрын
Total beginner who wants to learn all about building a website using bricks, so thank you for your explanations and tutorials 👍
@alexejlitvinec4411
@alexejlitvinec4411 Жыл бұрын
I'm using brick for my projects. Thank you for great tutorial! I'm going to look at your automatic CSS tutorial!
@webcare_live
@webcare_live Жыл бұрын
Great video, thank you! I missed LTD of Automatic.css but still looking for it :)
@danieldickson2
@danieldickson2 Жыл бұрын
This was an amazing intro into Bricks & Automatic CSS - Thank you!
@Gearyco
@Gearyco Жыл бұрын
Glad you liked it!
@derekshort
@derekshort Жыл бұрын
Another great lesson! Thanks!
@digwillhachi
@digwillhachi Жыл бұрын
Hands down the best info about web design out there ! (Bricks user 😉)
@Gearyco
@Gearyco Жыл бұрын
Thank you!!
@michailgiannopoulos5274
@michailgiannopoulos5274 Жыл бұрын
I'll jump right into bricks and acss definitely. Your video was mind opening.
@vpsa111
@vpsa111 Жыл бұрын
You are God sent Kevin. Thanks a ton for the information. Please make tutorials on design system and listing websites aswell.
@GavinDavidson
@GavinDavidson Жыл бұрын
Awesome and thanks for another super tutorial. Learnt a ton about HTML structure and layout.
@kwsim539
@kwsim539 Жыл бұрын
I am a Bricks convert from Elementor and learning both Bricks and ACSS and would love to see a refresh of your ACSS playlist.
@tjveach
@tjveach Жыл бұрын
Nice job Kevin, thanks for all your efforts
@tjveach
@tjveach Жыл бұрын
Bricks community
@winwinis3483
@winwinis3483 Жыл бұрын
Great tutorial as always
@quickend01
@quickend01 Жыл бұрын
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!
@Gearyco
@Gearyco Жыл бұрын
Awesome, thank you!
@jimroberts1248
@jimroberts1248 Жыл бұрын
Nice one for Bricks. Keep up the good work.
@EduwareIzekor
@EduwareIzekor Жыл бұрын
Nice break down of the elements :)
@Tallbloke1976
@Tallbloke1976 Жыл бұрын
Here from Bricks :) Interesting tutorial, thanks!
@ChrisMooreOfficial
@ChrisMooreOfficial Жыл бұрын
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. 🙌
@ChrisMooreOfficial
@ChrisMooreOfficial Жыл бұрын
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! 🙌
@satanishangover
@satanishangover Жыл бұрын
@@ChrisMooreOfficial Transcription is available for this video, not sure if that's what you mean.
@michaelkato8999
@michaelkato8999 Жыл бұрын
Thank you for the course sir
@iqbalmauludy
@iqbalmauludy Жыл бұрын
Awesome video. I laugh many times but a lot gold there. Happy can watch it, keep awesome, Kevin!
@Gearyco
@Gearyco Жыл бұрын
Glad you enjoyed it
@brianrougeau9120
@brianrougeau9120 Жыл бұрын
Using Elementor now moving towards Bricks. Thanks for this, this is amazing.
@Gearyco
@Gearyco Жыл бұрын
Welcome!
@brucetunkel
@brucetunkel Жыл бұрын
Excellent thanks!
@mackymccormack8446
@mackymccormack8446 Жыл бұрын
Getting some great lols with the gold Kevin, thanks mate
@Gearyco
@Gearyco Жыл бұрын
Glad you enjoyed it
@ChrisAkinstlh
@ChrisAkinstlh Жыл бұрын
Thank you, Kevin! I'm still in Oxygen but have bought Bricks and looking at developing in that.
@renpub
@renpub Жыл бұрын
So happy to finally have Bricks 1.5 running with ACSS which together make an awesome WordPress working environment.
@victorrenevaldiviasoto9728
@victorrenevaldiviasoto9728 Жыл бұрын
Dude, that tutorial was incredible: instant subscribe!
@Gearyco
@Gearyco Жыл бұрын
🙏
@aaqilayden373
@aaqilayden373 Жыл бұрын
Im from Bricks. Great video. I really hope you make more videos. There are not alotnof bricks tutorials out there.
@yasmeenkaram9780
@yasmeenkaram9780 Жыл бұрын
Gold!! God Bless!!
@crazy4uonly21
@crazy4uonly21 4 ай бұрын
Bricks All Day
@amitjangra6454
@amitjangra6454 Жыл бұрын
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.
@NOALNOM
@NOALNOM Жыл бұрын
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 👏👏👏
@ernieruiz3966
@ernieruiz3966 4 ай бұрын
More Bricks tutorials, please! New to bricks
@Valeras
@Valeras Жыл бұрын
Dude you made my day! 👍
@rockeygamer5163
@rockeygamer5163 Жыл бұрын
Great Video ❤️. You will make me to move to Bricks soon 😊.
@Gearyco
@Gearyco Жыл бұрын
You should!
@skjelstad777
@skjelstad777 Жыл бұрын
From Bricks all the way 😊
@AdoDzeko10
@AdoDzeko10 Жыл бұрын
Thank you very much sir !
@jangerhards1253
@jangerhards1253 Жыл бұрын
Sooooo good! 😀
@richardc1925
@richardc1925 Жыл бұрын
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!
@Gearyco
@Gearyco Жыл бұрын
Have fun!
@abrahamcanales.marketing
@abrahamcanales.marketing Жыл бұрын
grate!!! more bricks!!!! 🤩
@chr_aikicom
@chr_aikicom Жыл бұрын
I am starting with bricks so these kind of tutorials are precious .. even if got it for free ;-) get
@ocbroadband
@ocbroadband Жыл бұрын
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!
@YorgoKastri
@YorgoKastri Жыл бұрын
keep it coming!🙂 was oxygen, now bricks...
@chantscreen
@chantscreen Жыл бұрын
I am Spartacus! Sorry, I'm from Bricks! Nice video. Thanks.
@aik64g
@aik64g Жыл бұрын
Wanting this... thanks you. You definitely owned my sub
@Gearyco
@Gearyco Жыл бұрын
More to come!
@aik64g
@aik64g Жыл бұрын
@@Gearyco Thanks Kevin. Can't wait to learn new things from you
@matthewescobedo5985
@matthewescobedo5985 Жыл бұрын
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.
@illu.pencil
@illu.pencil Жыл бұрын
More Bricks please.
@jenniferward6821
@jenniferward6821 6 ай бұрын
Great tut as always. Bricks and maps with markers please. Trying to show events by location
@AndrySalim
@AndrySalim Жыл бұрын
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.
@Gearyco
@Gearyco Жыл бұрын
Doing a full bricks website build in the inner circle
@mikt
@mikt Жыл бұрын
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!
@Gearyco
@Gearyco Жыл бұрын
The block wasn't available when I recorded this, unfortunately. They released it later.
@KomentarSaya
@KomentarSaya Жыл бұрын
​@@Gearyco please make video update
@jaimematos6457
@jaimematos6457 Жыл бұрын
FFaaackkk yeeeaaahhh!!!!!!!!!!!!!!!! MORE Bricks + ACSS :D :D :D
@BGdev305
@BGdev305 Жыл бұрын
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.
@Gearyco
@Gearyco Жыл бұрын
Good point!
@DivaldoCarlos06
@DivaldoCarlos06 Жыл бұрын
Awesome Kevin, thank you for the tutorial. I am from oxygen changing for bricks. Peace
@GlenInnesarticulate
@GlenInnesarticulate Жыл бұрын
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)
@Hightechdad
@Hightechdad Жыл бұрын
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.
@Gearyco
@Gearyco Жыл бұрын
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.
@Hightechdad
@Hightechdad Жыл бұрын
@@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.
@dallaslogic
@dallaslogic Жыл бұрын
ACSS sped up my Oxygen dev time incredibly! Assuming it's gonna do the same as I start looking at Bricks.
@dallaslogic
@dallaslogic Жыл бұрын
26:32 is worth the entire video! 😁🤣
@NOALNOM
@NOALNOM Жыл бұрын
30:51 Best #2 funny cut moment of the video haha.
@techfairyrina
@techfairyrina Жыл бұрын
I am in process of moving to Bricks. A little bit learning curve :)
@ernestoserrathmontecino8914
@ernestoserrathmontecino8914 Жыл бұрын
#Bricks - Hey Mate this was great thing...!!! thanks
@BKang91
@BKang91 Жыл бұрын
Oxygen user here. I don't even own bricks and i watched this video lol. Your videos are always A+++++ 🔥
@penatechnologies492
@penatechnologies492 Жыл бұрын
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!!!!
@Gearyco
@Gearyco Жыл бұрын
More on the way!
@timwolstencroft9705
@timwolstencroft9705 Жыл бұрын
Thanks Kevin, great tutorial. I'm new to Bricks and ACSS (from Elementor) - blown away at the possibilities. Do you have any tutorials on Bricks, Jet Engine, and ACSS.
@Gearyco
@Gearyco Жыл бұрын
I’ve never used jet engine unfortunately.
How to Avoid a Huge Issue With Shape Dividers in Bricks Builder
34:23
How to Create a Dynamic Centered Logo Menu in Bricks (w/ SCSS)
56:45
Luck Decides My Future Again 🍀🍀🍀 #katebrush #shorts
00:19
Kate Brush
Рет қаралды 8 МЛН
THE POLICE TAKES ME! feat @PANDAGIRLOFFICIAL #shorts
00:31
PANDA BOI
Рет қаралды 12 МЛН
I wish I could change THIS fast! 🤣
00:33
America's Got Talent
Рет қаралды 91 МЛН
DO YOU HAVE FRIENDS LIKE THIS?
00:17
dednahype
Рет қаралды 39 МЛН
PB101: L04 - How Sections & Containers Work
48:50
Kevin Geary
Рет қаралды 15 М.
Bricks: Build-Your-Own Fluid Typography Framework
41:27
Dave Foy
Рет қаралды 12 М.
BEM 101: How to Make Web Design Organized & Scalable
1:01:37
Kevin Geary
Рет қаралды 20 М.
PB101: L09 - Creating Common Page Layouts With CSS Grid
1:10:37
Kevin Geary
Рет қаралды 16 М.
WDD LIVE 052: Will Scope Kill BEM? + Q&A/AMA
2:04:01
Kevin Geary
Рет қаралды 3,3 М.
Bricks Builder Nav Menu: 5 Reasons The OLD Way Is better
11:36
Luck Decides My Future Again 🍀🍀🍀 #katebrush #shorts
00:19
Kate Brush
Рет қаралды 8 МЛН