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!
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.
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!
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.
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.
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.
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.
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?
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
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.
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.
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.
Great, I learn something... thanks for keeping it clear and simple!
Glad it was helpful!
Excellent video. Thank you
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!
Thanks for the kinds words!
This is a great tutorial. Much appreciated.
Awesome breakdowns and explanations, Cracka!
Great explanation. Thanks!
Sooooo good! I loved the tutorial!!!! ❤🧱🧱🧱
Thanks so much 😊
Awesome like always.
Thank you so much.🥰
Love the videos Cracka, thanks for the help ❤
Great content......keep up...👍👍
Just purchased Bricks, comming from Divi it’s challenging but I’ll take the risk
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.
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!
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.
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.
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.
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.
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?
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
On Bricks is it necessary to change my section global padding if I set my containers default with to 70rem?
Yes, you sections should always have default global paddings
Why do we need 4 columns for the images? Can't we use 4 image elements inside the block direclty ?
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.
Nice work, but you're Lookin a little STIFF, Mr. Cracka! 😊
😂
Ironic that a div gets css display:block
😂
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.
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.
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.