Mastering Bricks Builder: Sections, Containers, Blocks & Divs Explained

[@Jim.Hummel]

Nicely done...this is not only a great resource for beginners but also super useful as a refresher of the fundamentals for those that are more experienced.

[@rechercheur2011ny]

Hi Paul, thanks so much for this video and the tons of other stuff you offer freely, so much appreciated! One question regarding the block/div-elements (around 7:12 in the video): after the font size of the heading got smaller, this also affects the size of the surrounding block. That's not what I at least would want/expect, but rather that the block size remains untouched?

[@R72Investments]

Yes, pls more abut Flex and Grid

[@edywerder]

Thank you for this refresh video about the layout option and how they work together.

[@patrickkilian]

Awesome video, a whole series of Bricks Builder from basic to expert would be an ultimate series. There is not much content for bricks out there especially not explained as well as you do it.

[@WPTuts]

That's the plan buddy - more foundational content on Bricks to help get you up to speed and if you want/need more there will be the Masterclasses. :)

[@marszu-com]

In the latest version of the Core Framework, we introduced variables to container scopes.

[@pablorey9203]

nice!!!

[@KaiBuskirk]

Very nice thank you 🙏!

[@MusicJunkieVideos]

Css grid vid would be ace!

[@CoreyStup]

Whats the specific difference between a Bricks block element and a div element? I missed that if it was explained. Thanks for the video!

[@WPTuts]

@@CoreyStup it was explained, but the tldr is that a block takes up 100% of its parent container and a div takes up the space required by what’s inside it (unless you set a value for width or max width).

[@CoreyStup]

@@WPTuts Thank you! A summary (for my own brain) would be: section = 100% width, container = page width, block = 100% of its parent, div = constrained by its content.

[@WPTuts]

@@CoreyStup yup! Spot on :)

[@electronicasilva]

Excellent video, I want a complete bricks builder course

[@bob-p7x6j]

He is making one soon and Dave Foy also has one...

[@rondion9141]

If you continue to teach Bricks in this same way, I can learn it, and I would very much like to. Please? Pretty Please?

[@WPTuts]

@@rondion9141 more Foundation Bricks vids coming soon. 😉

[@joineri8806]

how do you display the green badge on the structure window? like section, div.

[@WPTuts]

It's part of Advanced Themer for Bricks.

[@joineri8806]

@@WPTuts thanks, looks great

[@WPTuts]

@@joineri8806 it's a solid plugin and part of my main stack when using Bricks. :)

[@raidislam3452]

Is bricks better then elementor?

[@WPTuts]

@@raidislam3452 in my opinion, yes. But you’d have to make up your own mind based upon your needs. 👍

[@lunaccodesign]

Hey, so I was an avid pro user of elementor since 2017ish and I just hopped to Bricks. It is an opinion thing to a degree and your use case. Elementor is still a bit easier for client hand-offs if that's something you do. The key reasons I switched: Class first is faster in every way, the code output of Bricks is clean which is what makes it faster (even with elementor's recent optimizations their code is still not as clean and is not semantic), accessibility - because of the cleaner code you can setup your page for semantic which means the right logical order that screen readers use and screen reader shortcuts actually work in Bricks pages (Often elementor doesn't work with screen readers), basic SEO included- even without something like rank math you can set SEO titles and meta easily including the images that show for social sharing! That's why I'm switching moving forward depending on the project needs.

[@AshiC90]

Just add the Meta Widget, don't put it in a block, it behaves like a block anyway :D .... good evening !!! ... I see the same mistake in some tutorials when the Image Widget is added to a Block Widget [ Card with Image on the left ] .... when you can simply add just the Image Widget .....

[@pesiiin]

Own block = more freedom to build. Parent block for image more possibilities (including pseudo elements) 😉

[@mareklewandowski9727]

Bricks use section html tag into section block by default. This tag shouldn't be use to create view layout of the page. Section html tag should be use to semantics. Use html tag as default, may occurs to build wrong document structure.

[@JacobBall75]

Bricks automatically sets up the html page structure for you. When you add a section element, it’s being added/inserted into the correct place, so you don’t need to add all the surrounding tags like html, head, etc. Yes, you should use the section element semantically when building out the content of each page.

[@mareklewandowski9727]

​@@JacobBall75And it's occurs, the most pages are not semantic. Section into bricks is layout element, not semantic element. This is section main role.

[@JacobBall75]

@@mareklewandowski9727 I don't really follow. Bricks inserts a tag into the DOM whenever you add a Section element. Using sections on your page is the correct way to differentiate your content areas, which is what the tag is designed to do. Yes, you can style it and use it to lay out your page, but Bricks is one of the very few that uses the section element in the correct way it's meant to be used. They don't insert a element with a section class - it's literally a tag.

[@mareklewandowski9727]

​@@JacobBall75Learn about semantics.