Bricks Page Builder - Exploring Containers

hey guys um this is michael here this is uh going to be another tutorial on exploring the depth of containers and um yeah i'll dive straight in so basically off the start usually what i do is now is coming to my theme settings make sure i have my um theme settings turned on to which one i'm working with set the conditions so it's to the page that you're using you can set it to your full site but because i've got multiple different themes going on here i've preset it and then under general i've set my background to a very light um kind of like white here so it's just off white and you'll see why and then i've set my container to 100 so i'm going to dive in i'm going to insert a container so we've got our main container here and we don't really need to do anything we're going to set another one in so we've got our blue container now we're going to jump over to our blue container style tab here we're going to set this to 1200 we're going to come over to content and we're going to set this to center so now we've got it on the center axis so now i'm going to go back over to my elements tab here i'm going to put in header and text and then what i'm going to do is i'm going to click the plus sign inside the blue box and insert a new column i mean a container below the text that's in here so now we've got a new container in here i'm actually going to create more containers so inside this container i'm going to call it the i don't know holding container just so i know which one it is i'm going to click on the uh edit arrow well pencil icon up here i'm going to set it to horizontal and i'm going to leave everything else and i'm not that's pretty much it at the moment and then i'm going to come back over to the plus and i'm going to add in three new containers inside here and then i'm gonna come over to my first one and i'm gonna label it first we're gonna label this one we're just gonna leave those last two actually so now we've got our first container i'm gonna dive into the first container and i'm going to go back over to my elements i'm going to drop in a picture and then i'm going to drop in a container so now that i've got another container inside the container this one's going to be the content so we're going to call it content just so you know where you're kind of like heading down the um structure because it can get pretty uh full on so now that we've done that we're going to come back over to the elements and we're going to drop in another text box and then we're going to actually click the plus sign again so we're going to add a new container so we'll hit that we're going to click on the container that we've just added we're going to set it to horizontal actually we're going to make sure we're on the right container here so the container that we've added we're going to set horizontal and we're going to add another two containers so we're going to call this one um container because it's getting pretty deep now with containers you've got lots of containers going on so in this first container we're going to click elements again i'm going to put two headers in in the second container so if you have trouble selecting it you can come over here we're going to click elements again and we're going to drop in a picture so now i've kind of got like my arc texture i suppose going on i i've got a goal that i'm going to create from this so what i'll do is i'll start at the top and i'll work my way down and i'll jump through each container styling it up and yeah just giving everything a bit of a facelift so first things first we'll jump up to the top here i'm going to call this reviews and i'm going to jump over the style tab i'm going to set this to 65. and then i'm probably just for the demo purposes on the outer container i'm just going to give myself some margins here just so it centers it up a little bit better just so i can um see what i'm doing you don't actually have to do this not actually needed okay so first things i'm going to close these up so i'm not overly confused so we've put in our first header now i'm just going to grab some laramis them from the other page drop it into where this is here this text go to content drop it in now i'm going to come down to the first holding container where it's holding our content i'm going to go over to the style tab layout and we're going to put this at 50 margin from the top so we want it to push down we want all containers to come down now we're going to open that up just close all these up so we're looking at the first container so now we're inside our first container we're going to put a 15 margin on it we're going to link that so now it's pushed everything in it's got a 15. but we're going to unlink that now and we're going to delete out the left hand side so it's kind of like aligned and you'll see why in a minute now the first thing we'll jump in we'll get this image done so we'll go to content again we're going to use unsplash so we'll click on unsplash i'm going to type in face just to bring up people's faces let's find one that looks cool i don't think it really matters but she's not bad looking so we'll go with her oops you gotta enter a name so we'll put in photo03 now it's downloading the image now if it ever gets stuck in the constant load okay it didn't just um click off it like i did there it'll bring it up into your media library now when you click on this image you'll see how it's like 560 kilobytes that's a lot so what we're going to do is we're going to insert that now we particularly don't want that image because it's it's way too big in size so we're going to bring this down to thumbnail so now it'll resize it back down the thumbnail and then we're going to come across to the style tab and we're going to come down to let's go with the width here first let's go at a hundred so the width of the image it's going to bring it down even more and we want to probably about 100 is probably good maybe 120 actually let's go a little bit bigger on this one we can change it at the end anyway so now we're going to come down to the borders and we're going to put in a border area here so we're going to put like five on the border we're going to link that up so it's across and we're going to come over and put a solid we're going to link that up again i mean not link it up we're going to jump into the color we're going to set that to white so before when i set the gray background you'll now see that i've set this to white so you can just see it it's very subtle next i'm going to come over to here and i'm going to set i'm going to link this all up i'm going to put in 100 so it's all pretty much pxed around it but usually i'll set it to percent just to be safe righty-o now our image is basically done we will be coming back to that because we've got to do a few margins but we're going to jump down to our first container here so what we're going to do is we're going to come up to layout and i'm going to set the top margin to about i'd say about 85 so it's come to actually no we won't set that to 85 we've got to drop the padding in it sorry so the padding needs to be 85 and then we're going to put a 25 left to right and 25 on the bottom as well so we're on our next container so we'll come down to the background for that container and we're going to set that container to white so it should look different to the background you should be able to see it yeah you can just see it's very subtle and that's what we're going for here now because i'm using a bit of a round corner here sometimes i like to go in and just probably go into the border and put up the radius to about 15 just to give it a cut off those sharp edges so we'll link that up you can actually it helps when you're on the right container so we're just going to delete that off it comes down to this container where we're holding the content and we're going to put the border on that one so i'm going to put i mean not the board or the radius so we're just going to put a 15 radius you can barely see it but it's there now we're going to come back up to the photo we're going to go to layout we're going to go to the margin so i'm going to put 25 then i'm going to do minus probably 55 on this and then i'm going to come all the way down here to the z index and put that to one so now we've brought the image forward so it's in front of that container that's actually below it okay so now we've got that styled the top part the next part is kind of kind of going to be like the if you haven't gathered this is kind of like a testimonial reviews and what we're going to do is we're just going to put some more laramis spin text in here just to give it a bit more yep cool so it looks a bit better and then the next thing we're going to do now we've put that in should probably open this up i'm going to close that so we've been working on this one here we're going to come down to the next container so the one below the text so this is going to be like the let's say the bottom content and we're going to go over to style and we're going to go to layout and we're going to put a margin on the top of it of 25 so there's roughly we'll probably fix this up here a little bit to bring it up to about 25 and we just want to keep the consistency of 25 throughout it now we're going to click on the text i'm just going to quickly style this up because i don't think you need to be taught how to do the type of graph on text so i'm going to bring this down to 16 now i'm going to set my default color to black and i'm probably just going to leave the fonts as they are i am going to come into the transform and capitalize that then i'm going to actually put my name in here and then i'm going to come down to the container below it and i'm going to put in um designer like my role and then i'm going to put in my business name oops so now we've put that in i'll come back over to style or we come in the typograph and i'm going to put this one a little bit lower and then i'll probably set it to black but then i'll bring it back so it's not not as potent you could probably go down to 12 on that actually okay bring it down to 12 and set the weight to about three too little 400 would do now we're going to come over to the image one so we're now on to the next container where the image is so we just i might call this like the now we'll just leave it as container now we're gonna select image if you don't have one already just grab yourself some quotations off the internet mine's pretty large in size so i'm just going to drop that in and bring that down to thumbnail let's see what it looks like a thumbnail no it's going to cut it off and you would so we're going to have to leave that at full actually i wonder what a hundred by a hundred nights it's a work on this one okay so we'll leave it at full we'll come over to the style tab go to layout we want it to float all the way to the arm end so the alignment end so we'll be on this side the right hand side sorry and then we want to put this to about a hundred i'd say no we'll go down to about 80 actually 80 and then i'm going to come down to the capacity and i'm going to put this at 0.5 so it grades it out a little bit you could probably go down a little bit more or bring it up and i'm going to actually bring this down more to about 60 actually okay so just created pretty much my first uh testimonial card so you've got a lot going on in here but what we're going to do is we're just going to fix up this margin here so you can bring it up through here so i know that's 55 half of 55 is what 26 i don't know if it was going to be good enough at 26. yeah i can't be bothered working this all out so that looks about right to be honest you could work it all out if you wanted to and then the next step what i do is i'm going to cascade everything back to holding i'm going to reopen holding and go back to first sorry and then i'm going to delete out the other two containers i'm going to copy and we're going to close that again we're going to label this one a second and then we're going to clone has to be this will be words i can't put and then we'll come down to this one here i'll close that up again and we're gonna put like a third okay so now the image is there so don't worry it's just for some reason a little bit glitchy so i'm just gonna save that and i'm just gonna refresh it there we go so it's got the images i might actually just come in here and change these images into the other two people i've got here now this is the notorious testimonial chick i swear you see her on every testimonial demo you'll ever see so now we've created kind of like a stagnant um static like testimonial if anything i'd probably in design purposes bring this all the way back to about here and just put your dots in there so it's a little bit more fluent looks a little bit better and you want to do this for all testimonials keep them the same length don't make one that's really long and one's really short it just looks really bad you might yeah so now that's pretty much the breakdown of containers so you've i'll just save it again and i'll open it up on the preview mode so you can actually see it as you can see you can break down the containers pretty in depth you can go down pretty fast so we've got an outer container then we've got another inner container then we've got another inning container then another one and then another two inside that container it goes down pretty deep and it's you don't have to worry about too much in terms of like the settings on it so for this something like this one here i wouldn't even bother setting it unless you really really wanted to so if anything i might on the bottom container here is set the center i think it's switch access yep this one here the align cross axis will pull this down a little bit so we'll center it up with the image a little bit better that's probably the only thing i'd do and maybe just align things to the start whereas this one doesn't have to worry about it because of the image we got it to the other side so that's basically it if you have any questions or anything like that feel free to ask in the uh bricks community and um yeah i'll try and get back to you thanks very much for watching and have a good day

Channel: MKSCreatives

Views: 750

Keywords: #buildwithbricks, #creatives, #design, #bricks, #awesomedesigns, #mkscreatives, #wordpress, #pagebuilder, #webdesign

Id: g2w20X9QkbQ

Length: 15min 8sec (908 seconds)

Published: Sun Jun 27 2021