How To Use The Container Element

hey there thomas from briggs here in today's video we are going to take a deep dive into the container element and the container element is available since bricks 1.2 and it replaces our old section row and column layout and the problem with this old layout approach was twofold the first reason being it was very inflexible you could not create more complex layout if you want something more than just a section with some rows and columns inside of it you're basically out of luck you could not simply add a column within a column that was just not possible and the second reason being it's html bloat so because we relied on this really rigid concept of sections rows and columns oftentimes all you needed was just a simple container where you put in your heading but yeah working with this fixed layout of having a section and then a row inside of it and then a column inside of it when you actually don't need any columns and rows in that case created a lot of bloat which means your page size increased and also possibly this have hurt your search rankings slightly with the new container element it's very easy to align a container itself but also the elements inside of your container you can nest containers within containers as deep as you want if you want to go five levels deep because you have a really complex structure that's very easy and possible with this new container element also you don't create any additional bloat there might be one or two more clicks that you might perform in the beginning when you for example want to create a column but this ensures that you only create the structure that's really necessary for the certain section for a certain element for this one container and nothing else that's not necessary all right without further ado i think we just start off by adding our first container also new in bricks 1.2 is the ability to just click on an element to add it to the canvas so i can just click on my container here and you can now see it's right on my canvas my structure updated as well later on once you have a few containers on your canvas you might want to position it between two containers then you can just take your container you drag it you drop it and you position it just like that but in order to get started in the simplest way possible we're just going to start with this one container i'm also new in bricks 1.2 stability to just click on the container itself so previously you always need to find this little pencil icon now you can just click on your container and start editing it and [Music] we start i think just at the very top with the first setting that we see here which is the html tag so you can see by default we use diff elements so this container is nothing more than a diff okay but if you want to change this up for example if you wanna for semantic reasons wanna have this as a section you would just select section if the tag is not available in this list you can just select custom and then just put in your custom html tag just like that i'm gonna stick with my section here next up we have our display settings so you can see by default we use the css flexbox and this also allows us to use all of those controls here those visual controls to really easily align our container itself and also the elements inside of our container also an opportunity here to set the gap between our elements inside of here very easily we can change the order of this container if there are more containers down here very easy just by setting this number gonna do this later on as well but yeah we use this as flexbox here and if you're new to it um you can just click around and play around with it um how it works i don't think really that you need to read this article but if you're just curious and just want to get a really good and proper understanding how this flexbox layout works i would recommend you to go over this complete guide to flexbox from css tricks so if you go to google just put in css flexbox this one should definitely show up on the first page and it's not just a bunch of text you can see here there's a lot of a lot of illustrations here explaining the directions which we have as a setting in bricks the wrapping it explains here as well justify content how you align items all written down here okay so yeah flexbox that's what we use by default um if you see this list and you're wondering where is um css grid it's not part of bricks 1.2 but we definitely plan on adding this at a later point but we get started with flexbox you have already so many possibilities just by using css flexbox if you want to hide a container and all of the elements inside of your container you can select this plane none previously also those elements are still visible in bricks now they are really hidden and they're only hidden to the human eye they are still part of your html structure you can see inside our structure we still have our container element here and we also have this little eye icon indicator telling us that this container element is hidden if i want to bring it back up i can just click this eye icon to toggle the visibility and the display and now we are back to our flexbox layout okay so the first flex property that we have is the direction and by default all of the elements inside of this container are aligned vertical which means from top to bottom and i think we should illustrate this just by adding maybe a heading and a button and the way to do this is first to select your container which we already did we're already working with it and then we head to our elements panel and then you can just click on the elements that you want to add inside of your container so in our case we're going to add a heading and a button and you can also drag and drop elements inside of this container so if i want to add this icon i can just take it here i drop it and now you see here it's in between my heading and my button you can also move it inside of your structure so if i want to move my icon down below i can just take it like this drop it and now you see i adjusted it this way as well sometimes working with the drag and drop on the cameras can be a bit finicky especially if you have like smaller icons sorry excuse me elements so you always have the structure to arrange your elements via drag and drop as well okay let's remove our icon here i don't want to have this one and edit head back to our container settings and let's just change our direction here so vertical top to bottom if i want to show this in a horizontal fashion i just select horizontal and now they show up in a horizontal line the wrapping by default it's set to no wrap i can illustrate this just by adding a bit more text here you can see now everything is trying to fit onto the same line okay well usually i would not probably have one such long words would have a space here somewhere because my direction is set to horizontal and i don't want any rep as soon as this heading takes up all of the available space the line break basically occurs here in that case okay if i would set this to wrap you can now see once it takes up the space and the button doesn't have enough space next to it it will wrap onto the next line and this is basically how the wrap setting works let's undo those two to have a look at the alignment of the container itself you can use this first here first setting a line itself and you can see this also really visual controls giving a quick and easy way to also like preview and see to know what you're going to edit so in this case i know okay if i click this setting here i'm going to align my container on the left hand side or centered or at the end in that case on the right hand side if you want to have a full width section for example you would use this stretch here okay you can see now my container takes up the entire horizontal width if i would hide my structure you can see now it still takes up all the available space let me undo this and let me show you the alignments options here so align items and justify contents allow us to align our flex items so in that case like our container is our flex container and our elements inside of this container are the flex items okay if i want to align my elements centered so what i need to do here i just need to select center and if my container would have would be a bit higher so let me just quickly increase the height of my container by clicking on it and maybe switching our unit to viewport height i'm going to resize my container now you can see i have this new height here which also shows up here i can now also change the alignment of along my main axis so because you can see our direction is set to a vertical if i set this justify quantum to centered it's going to be centered along this vertical main axis this align items is the alignment along the cross axis which is the x the horizontal axis in this case if you flip this and you change this to horizontal then if i change direction to horizontal you will see that the icons will also update as well see that this way also giving you a much easier indication of what you're going to edit okay we're going to stick with vertical and we are down here at our gap so this is a really easy way to create a gap between your elements between each and every element so if i want to have a gap here between my heading and my button what i can of course do i can just change the margin of my heading or i can just use this gap here so if i want to set this for example to 20 pixel i would just type 20 and now i have a gap between those two of 20 pixel problem being although this is really easy and especially when you create a column layout really easy way to adjust this gap the browser support currently is only sitting at seventy percent we can click this little link here to have a look um so now we have our road gap here and you can see the global browser support is at 70 currently obviously internet explorer is not supported um which is not too much of a problem considering the global usage right now of a total of around one percent so that one we can ignore most likely anyway there's support in microsoft edge firefox safari sorry firefox chrome safari oprah and yeah that's the biggie here right now um safari sorry safari in chrome for ios this not supported in version 14.4 but the latest version which has just been released uh end of april i think it's gonna definitely gain percentages over time this value should increase as well as people start updating to the latest browser version here for safari and chrome on ios back to our container so this is how we can set our gap we can also use this order property in order to just change this number without actually having to reorder our elements here so this also works between different breakpoints i'm going to show you this right now let's just maybe add another container so i click on my container and if i would so basically the lower the number the lowest number shows up first let's just put it like this so by default the order of every container is zero so if i would set this to -1 this container should show up above my main container here okay so i'm going to set this to minus 1 and now you can see this container shows up above this container here which has an order of zero if i would set this to minus one or minus two it would show up above this container so this is a really easy way to adjust the order just by using this setting here so we may remove this container and let's go back to our main container this is basically everything in terms of setting there isn't much more to it what i can show you also in terms of alignment options is the alignment of elements that are not containers so for example if i want to align all of my elements in here centered which we've already done but then maybe i decide as one element that i want to line um independent from the rest of the elements i can just edit my heading in this case this works with any other non-container element as well then i go to layout and then i have this alignment option here so if i want to have everything centered except for this heading i could say i want to have the heading on the left at the end centered or stretched i can also change the order so again like the container itself we can also use this integer number here to quickly change our orders like if i would um increase this to one it would now show below my button to the visitor the structure itself hasn't changed this is just we are pure css okay that's the getting started example basically what i definitely want to show you next is how we can create a multi-column layout because that's something you probably need in almost all of your projects so we're gonna quickly let's just remove our button and our element oh no actually i'm going to remove everything i want to show you really i want to show you like different ways how you can accomplish this so how do we create a multi-column layout well it's actually very similar to the layout we just created we start off with our container and instead of adding a heading and a button we simply add three containers inside of this container and each container will be one of our colors i can just click on the container element three times this will be my first column second column third column of course by default our containers are aligned vertically so all we need to do is just to go to our main container here and change our direction to horizontal and i now have my three column layout what you can also do if it helps you can also rename those labels here so you can just call this column one column two and column three you can also now see the name is updated here so this is my column second column and my third column if this helps you and then we can continue with the next step you normally you would like to add a gap between your columns so let's just do that next but in order to illustrate this better i'm gonna set the background color for each column here so go to background select my color a light gray it's my first one i can right click here copy my style right click here paste it same for our last column just like that i have three columns with a background color now we can go to our container and we can set our column gap so i can just put in 20 here and now you can see i have a gap between my columns not outside but it's just inside this gap of 20 pixels the problem with this solution is like i said before the browser support here is at 70 so personally i would instead of using this column gap you can also just go to this column here in the center and just adjust the margin of it so i'm going to set this to 30 pixel you know that we can do this visually here so i'm gonna set it to 30 just like that using the margin setting you can see here margin right is at 30 margin left is at 30. you can adjust this to your liking of course and just like that i have my three column layout now i also want to show you how we can work with those columns independently um i think it's best um if i would just add an element inside of each column to show you this so you can see by default the height of my column depends on the height that the elements inside of each column take up so you can see because my icon has is um yeah the largest element here it takes up more space than my heading and more more space as my button as well we can stretch this of course so if i go to my container you know we can align our items inside of it so which means our column one column two and column three so if i stretch them you can now see they take up all of the available space here if i change the height of my container this also adjusts automatically the height that each column takes up but like i said we can also align those columns independent from each other so for example the first column i can say i want to stretch this entire column and all of the elements inside of my column i can align as well so i can center them like this and like this maybe my second column i wanna not have i could stretch it as well but i can also just say i wanna have this one centered if i increase the height it looks like this if i align the items inside of it it looks like this i can stretch it as well so many different options last column i can maybe say i want to align this one at the very end so i align itself i would set to end i can do it centered at the top and stretch it and you can see just be a few clicks how easy it is to adjust my layout just like that okay but again i'm just going to give a few simple examples here there are so many different ways and so much more complex layouts that you can create here but i think this hopefully serves as a good foundation on how to create different layouts using your containers nesting your containers and you can go even more down like many more levels um if you want to but yeah i'm just not going to cover this in this tutorial one thing i want to quickly show you is the ability to work with the container layout builder so previously we always clicked on this container element here then sometimes we added some containers using this plus icon here or we use the drag and drop right now um i want to show you another option which is the content layout builder so if we click on this little icon here layout okay it brings up this pop-up and if you already have a good idea on the layout that you want to build maybe your entire page layout is already in your head you could just wipe up probably the entire layout just by using this um pop up here so if you already know you want to have a full width section i would set this to stretch i know i want to have a column layout so we just set the direction to horizontal and i know i want to have four containers inside of it and each of this inner containers should have a padding of 20px like inside it here i can click insert and you can now see i have my full width container and my four columns inside of it and each column has a padding of 20 pixels this padding and this margin setting also did not set individually on each column now because that way if you want to adjust the padding you would have to adjust it one by one that they all end up with the same amount of padding this inner padding and inner margin is a setting that is available here on our main container so if i go to styles and layout you can see i have this control group here called inner container so which means this padding of 20 pixels is applied to those four containers if i change this value you can see if i increase it it just obviously changes the size here of each and every container inside of this main container i can also remove it just like that and yeah this is basically how you can get started with containers

Channel: Bricks - Visual Site Builder for WordPress

Views: 2,629

Keywords:

Id: _dhKJdNNxLI

Length: 22min 31sec (1351 seconds)

Published: Wed May 19 2021