Bricks Builder layout elements (Section, Container, Block & Div) explained! | WordPress Tutorial

[@James_m7]

Great, I learn something... thanks for keeping it clear and simple!

[@DesignwithCracka]

Glad it was helpful!

[@ThomasBui359]

I appreciate the time and effort you put into making this video, it shows in the final product. Your energy and enthusiasm are infectious, I can't wait to see more of your videos!

[@DesignwithCracka]

Thanks for the kinds words!

[@t.d9486]

Excellent video. Thank you

[@conan501]

This is a great tutorial. Much appreciated.

[@WPJohnny]

Awesome breakdowns and explanations, Cracka!

[@skjelstad777]

Sooooo good! I loved the tutorial!!!! ❤🧱🧱🧱

[@DesignwithCracka]

Thanks so much 😊

[@VijayKumarIM]

Awesome like always.

[@chrispoole4084]

Great explanation. Thanks!

[@xenoheadshot]

Love the videos Cracka, thanks for the help ❤

[@xhwsdm]

Hope that you can make a systematic and comprehensive Bricks tutorial series like Kevin's Page Builder 101, People will love it and you will get more exposure & subscribers.

[@itspraveensharma]

Great content......keep up...👍👍

[@fuadsyawal7461]

The video is so helpful for newbies like I am. After watching your videos, I'm actually interested when you say "I didn't have to individually change the text color" what features from Bricks that allow you to do that? I also see you type some sort of code on top left field. What is that? I usually use global element, but it only works on 1 element.

[@DesignwithCracka]

Sorry for the confusion, the section class was selected and the the typography color applied to the section instead of applying it to individual text elements. Also, on the top of the left panel is the search icon, so I’m using that to search for the setting I need, it’s like a shortcut. Instead of going into the settings to look for e.g overflow, I just use the search to make it quicker.

[@samaale.warsame]

Thank you so much.🥰

[@antonhasle3495]

Hi @DesignwithCracka I really loved your video. I was hoping you would go into the mobile view as well. Sadly you did not, so please may I ask: Did you notice that only 1:1 containers stack in mobile view? If you place 1:2 space columns (one 33% and the other 67% width) it will stay that way on mobile and you'll have to manually set its width to 100% on mobile. Did you encounter this issue? I wonder why it is that way or if it is a bug. Keep up the good work btw!

[@ganauta]

Just purchased Bricks, comming from Divi it’s challenging but I’ll take the risk

[@toby-green]

In the last elements - the icon and stats divs - am I right in thinking you changed the block to a div to allow the alignment property on the div? So this isn't possible on a block? I recently moved over to Bricks and was using blocks and divs interchangeably but had issues aligning contents in some instances. Nice tutorial.

[@AnrideBeer]

I don't know if Re-code is worth $199 for me. Thank you for the plug. I looked at all their features and out of everything the onlything that I feel I'll use is the Advantor. I'll mull it over. :-) All my dev buddies moved over to Bricks since Louis seemed to have abandoned ship and moved onto greener pastures... It's very sad because I am still so in love with Oxygen. I wonder how long it will still be maintained.

[@phkoon]

Are there cons to using containers as the only layout elements, set with proper semantic html tagging to structure the design, as done in Elementor? If so, what would they be?

[@phkoon]

Just took a look at the trial version of Bricks and checked out each of them. Except for the Div element, all the Section, Container and (ironically) Block elements are display: flex with the proper semantic tag set, so I think it settles the matter. Well, if anyone has anything to add, feel free to do so =D

[@emailjough]

30:00 why wouldn't you use an icon box element instead of image, text, etc?

[@DesignwithCracka]

First, it’s not relevant to the subject. Second, premade icon box is limited in what you can do with it.

[@filmgenius2]

On Bricks is it necessary to change my section global padding if I set my containers default with to 70rem?

[@DesignwithCracka]

Yes, you sections should always have default global paddings

[@premnathd]

Why do we need 4 columns for the images? Can't we use 4 image elements inside the block direclty ?

[@DesignwithCracka]

Good question. We can use 4 image elements inside the block directly, but there's a potential disadvantage in doing that. 1. If you ever need to use ::before and ::after, for the images, you'll not be able to do it. 2. If you ever need to come back and position an absolute element relative to the image, you won't be able. Having an image wrap is a good practice because it allows for scalability. Imagine have tens of such columns, only to need to do the afore mentioned, you'll have to go back to each and wrap them with a div or block. More so, it's always a good idea to have your image width 100% relative to the wrapper, while the wrapper deals with the actual width or max-width, this will go a long way is avoiding potential layout issues. Having image wrap also allows for potential zoom in hover effect that uses scale, since the wrap can be set to overflow hidden.

[@Skratchable]

Nice work, but you're Lookin a little STIFF, Mr. Cracka! 😊

[@DesignwithCracka]

😂

[@htz70]

Ironic that a div gets css display:block

[@DesignwithCracka]

😂

[@mareklewandowski9727]

Section TAG is not for layout building. Bricks do it wrong. Default tag for section container should be DIV not SECTION. You replace Bricks mistakes.

[@DesignwithCracka]

I’m not sure I understand what you’re saying. The section element has a tag of SECTION, that’s the correct thing. Inside each section is a container element with a tag of DIV.

[@bartderuyck]

In theory, there could be some discussion about this. But in practice-the way Bricks does it and how Cracka uses it-it is 100% correct. Section refers to specific parts of a page, like a hero, a testimonial section, a section with services, etc. As such, it's a semantic element: it's useful to distinguish meaningful and grouped units of content with section. You are right that these could also simply be contained within divs. But divs are just general containers to group elements. They don't have a special semantic meaning. And yes, they can be used to group elements (blocks, other divs, etc.) to function as a section. But since the section tag is available and semantically more meaningful, it's better to use the section tag. In my opinion.