Bricks Builder Tutorial - One-Pager Website Build Walkthrough

hi this is vance in this video we'll reveal a one pager with header and photo templates with brix builder and make it mobile looks responsive this will be a complete walkthrough and tutorial of how to build this unlocking homepage with bricks so as you can see this is the finish result that's built in bricks okay no extra plugins used right bricks is a new wordpress page builder in the market that is quickly gaining traction and for good reason they're currently running a lifetime deal us 149 for a thousand websites to use it for a lifetime so if you're looking for wordpress page builder you can consider getting bricks and in the latest one point version 1.2.1 release um and the 1.2 release right they added a container element so they can do any layout so uh you can choose whether you want you need to be a div a section or anything which we'll use very much later on when rebuilding this page okay i'm going to show you how to rebuild this page from scratch other things such as custom css where is it say any css unit so custom css properties so in the past you can only use pixels and percentage i believe and i think after that you can use vh and vw but right now you can use anything so you can reduce clamp which i have this open which we're going to use it later as well to make sure that the font size and stuff margins and stuff right are all responsive right out of the box without having to take too much on the on each breakpoint okay and some amazing improvements to the editor so before we start use the timestamps in the description below to quickly jump to the section of the video use the links in the description below to support me and future video creation and please leave a comment below if you have any questions and i'll try my best to answer them so we're going to go ahead and build this right now so this is already this is the this is the done the done one so we wouldn't touch this we're gonna create a new one i'm just gonna name it tutorial page i'm gonna publish and i'm going to edit with bricks okay so uh before we go and create go ahead and create a header and folder templates right we we're going to set up some settings just for this page first so under team settings right i'm going to select the team style that i've already configured so this condition will apply to not just the done one but also this new one you just apply this to your page so that this uh this style that i've configured right will apply to both this page and this new page that we're going to build okay and then we're going to take a look at some of the things that i've configured and things that you can usually look up for when starting out afresh so container width by default i believe is 100 but i set it to 1140 because uh i write somewhere that this is the sweet spot for um content with so basically this point here and this point right before it adds padding or like uh space and at the sides right this is 100 this is 1 140 pixels then that's pretty much it for general for colors i set uh a primary color which you see this dark blue here and yellow this uh gold yellow color here okay all the other colors i i leave it as the standard colors but you can add in additional colors if you want to and as a as a good practice right it would be good to ensure that these colors right are not just as the default ones but according to your brand guidelines content i leave it links i will leave it typography is where it gets a little bit interesting since they've implemented custom css units so for body font size right i'm using clamp so what this means right uh is the smallest at the smallest breakpoint right have it 1.4 rem and at the highest break point have it at 1.8 rem and of course i'm able to set uh the viewport size or so right okay uh and i should change this to one one four yes this should be one one four instead yeah okay so just let me just change it 1.4 and 1.8 then this is the code that you want to copy so just from clamp right copy paste it in here and we're done so at any break point right uh which you'll see later the the font size right will adjust accordingly so on mobile it will be 1.4 rem on desktop and the largest no matter how how much the the screen size is right the maximum level is 1.8 rpm and then since we're talking about ram right we should look at this other setting that we should set so under custom css okay this is a constitutional element here so what this does is it was set because the default font size is 16 pixels so by setting this to 62.5 percent right it sets the font size the default font size to be 10 pixels so then right whenever we use the ram uh the rem css unit right it for example if we were to type 1.6 rem that would become 16 pixels and then if we use let's say 4rem that will become 40 pixels so it becomes very easy right to adjust accordingly and obviously using remy gets cleaner than using pixels because using definite pixels right is not exactly responsive by default and of course using pixels right wouldn't allow you to use something like clam it it's still possible but um i read somewhere that rem using rem units right is is just the the the best practice right for responsiveness in web design especially in today's in today's context okay so now this is done i'm going to go back to team settings and the typography all headings i set it to a font a font type that i want mine height i set it to none and then the line height right uh for each heading right should be different so that's this is this is why i found all headings and settings none but then for individual like h1 h2 h3 and h4 right i set it accordingly here so for h1 right i set the minimum to be 3.2 maximum to be 6. h2 is 2.8 and the maximum is 4.8 so this numbers right uh this dependent is is entirely dependent on whichever whichever size that you want so it doesn't you don't you don't have to follow this there's no like and that's obviously a sweet spot and best practices in terms of like the best sizes to use for websites but uh it's entirely up to you so i wouldn't go through that too much but basically i use clam to take care of that so that i don't need to adjust the break points i already adjust the font size for each breakpoint saves time and then for button right i set up some settings also so typography this i should this shouldn't be 16 pixels but rather it should be 1.64 yen yep background color is the blue it's the dark blue unless specified border and set it to be 50 pixels so that it's rounded and then transition if if we would add any transition right it's all 0.2 which is 200 milliseconds is in and out then you can set all the other things as well if you want to but uh these are the these are the settings that i set which i should also change it to oem so as you can see right uh you have some default stuff here there are some default css units that you can use but you can also adjust by just typing in a clam code like this okay i'm going to leave the link to this in the description below so that's easy for you all to use and since the settings are done we can go into building the header and footer okay so we're gonna go back i already have the headers and footers done but we're just gonna recreate them okay they'll meet the main header i mean footer add new then set it to header template type and then edit with bricks okay the first thing that we should do every time right when we come into the header uh when creating a header the header template right is to add a container of course and then because here right there are three columns right so we're just gonna go ahead and add in three columns so just click this three times and then you'll see that it's stacked on top of each other right so then now is the configuration stage so instead of having by default it's vertical i'm gonna change it to horizontal so now you can see that it's horizontal then this one a very important step is to set it to stretch but let's see if i don't set it to stretch what will happen right so the background color i'm going to select the primary color as you can see right it there's this white space here that is not there is not like blue right so that's why right it's important right just stretch it out but then when you stretch it all right you realize that the other the other containers right also take out of the full space so this is where you might you will need to add in another container to hold this three containers so let me show you how by me and obvious and and one very important improvement right is the is this this is the panel as you can see right there are like slots i'm not sure they can see clearly but there are like slots where you can put in uh you can drag an element into it right and then it will be nested under this main element previously right there's no such thing there wasn't there wasn't such a thing to there wasn't like such visual representation of how how it works so definitely this is a huge improvement and then now that i've done that right you realize that you're stacked on top with each other again so because you have to select the parent container which is this and then set it to be horizontal and then the main container you can just remove this it doesn't remove this it does not allow you to move remove that but okay that's fine doesn't really matter okay that's right selecting twice then it will disappear but then you would have to select this other container right that holds these three containers here because you wanted to be centered in the middle right to align container center and there you have it right now it's a line in the center as you can see from the from the structure in the editor itself next is adding uh an icon and some text right so let me just copy this text first here add in icon i could use the icon box or iphone list but uh it's not the best way to do it so i'm just going to go ahead with uh icon and there are some slight differences but i prefer to use um the primitive elements right because then it gives you a bit more control okay so i'm going to add in text also and then i'm going to select this container make sure that it's horizontal so that there you have it right it's like this type sorry style i'm going to select light so it's white i'm going to select the icon change it to a location pin yep here it is and then for the color run the typography change this to this yellow right okay looks good now and then for the font size you can bring it down to 1.6 yeah if you're not wrong it's 1.6 and then for this it's smaller than usual so i'm just gonna bring it down to yeah probably gonna just use the clam function i i think no i don't think this is is this uh what's the size of this yeah it's using clam so i'm just going to copy this over here and i'm going to paste it in here now you can see that it's changed you can just just make sure that it's yeah make sure the theme styles is using the one that i've configured okay let's save this first and then now you see all it's all right at the top right so how how do we make it central uh center align center just need to code is it state to select align cross axis center and then on the parent container make sure that it's centered as well but of course you don't need to be too big right so i'm going to select this container and then maybe set the layout the height to be [Music] just five probably and also for this container for the height to be five and then for all these containers right you you realize that the the size of the of this main container didn't didn't change mainly because all this are of the same all this uh doesn't don't have any elements inside that's why so what i'm going to do is actually delete this containers first and then you can see that it's it's uh it's obeying the five rem css unit and then i'm gonna just duplicate this two times and there you have it oh wait before i do that let me set some padding first okay around this so that yeah so that when we go down to mobile right there's some there's some space in between each element okay so i'm just going to set it as i'm going to go to the container the current container and then under here the inner container i'm going to select i'm going to click on this so that it's all linked i'm going to set it to be one rem okay this is a slight work or i'm not sure that whether is it intended but when i set one here right it changes all to one but then it doesn't change all to rem so i think this is something that i guess will be fixed in later versions but for now it's a bit manual in the sense okay so by just like doing this right i don't have to set in i don't have to set padding right on the container level so right now i don't have to look at them the padding uh the padding is automatically applied by the parent container so as you can see the tile container didn't have any padding but you still see this padding here rounded so it's a very neat feature of course and then just to make sure oh okay before i do that i should add in some margin between the icon and the text probably okay this is one thing that uh that i guess if the developer knows that when we select rem right only or any other units right it doesn't take in decimal points so 0.5 is equivalent to zero now you see one right times 1.5 it doesn't change only if we only change this for full numbers not decimal not integers with decimal points right so this is why this is why over here i'll use i'll just use four pixels i think i just go through one ram just keep it simple right i'll stick to rem as the css unit and then i'm just going to change this text to the correct text here change this and then i'm going to duplicate this container twice then of course gonna change this accordingly change this as well okay the icon this will be phone it's another it's another library probably one awesome okay here it is right then this one is just a male icon yep here it is okay looks uh okay so far right but it looks a bit different right because uh all this should ideally be in the center in the center it's also in the center so it looks yeah so that when we come down it's in the center yep and without much work right it's already responsive by default so this this bar is done now for this menu bar so all we need to do is create a new container and there's a neat there's a neat way to do this just click here right you can select how many inner containers you need so we will need one we need we'll need one actually oops this is not exactly the best yet right oops this is the one that we should take out okay so because this is the main container this has to stretch this container has to align it to the center right and then we will need this with this will be this will be one container by itself because that's the logo and then the menu and then another cta button right so we need to add in two columns here uh two containers here oops this one will be a sibling okay then select this parent container change the alignment to horizontal right and then probably need more space for this oh wait actually i don't even need a container let me just delete this container but instead add a button then this button will be a sibling of the container yeah this is probably another this is another way that you can do this and i'm not sure whether i did this i did it this way i think i i selected i just i put another container here but let's try using this way so that we cut down on the number of containers and then this container over here we're going to add an image select the logo okay then i'm going to add in a navigation menu so this would be a sibling of of the logo and then select this container make sure the direction is horizontal just so it stacks horizontally and then the line on the items in the middle and it seems like this is a bit taller right so this is more like 100 so just let's just select this main container change the height to be let's say 10 rem only be about 12 rem yeah maybe maybe i shouldn't do this here i should do this and uh this container that wraps all the elements together change this to 12 yeah okay it looks a little bit better right looks a bit closer as well for this menu let's check let's select the correct menu all right looks good change this to catch consultant oh uh okay i i should also uh give some credit right to this other put it to the reference right it's not an exact replica of this right because that's this english thing which we kind of we can't really do it in brics at least not without custom code this is this is some some random html uh template that i found on theme forest so just let me just just credit them so this is where i get all the logo and stuff i just want to put it out there okay so so the text is a little bit weird sometimes right don't don't mind the text okay hang on let me just okay and then add in an icon all i think it's fun awesome this is something i don't really like to get searching for this this icons would be good if you can have it all in one let me just find out what which one is this okay and let's find out which library is so that i can just grab the icon okay it's from 4000 regular comment right regular comment yeah here it is then you can select it to be left so that it looks closer to what it what it should be typography you can change it yep so it's yellow right okay quite happy with that now now just to make sure that it's responsive so over here probably i want to add some padding at the sides so come down to let me just have padding here we just want rem so it looks good on tablet mobile okay here probably would have to be yeah this should be the layout right so probably over here is where i still want it to be okay i want this just to be in the center it's not aligning to the center yes we try auto someone's not aligning to the center huh okay this is weird what if i set it to be like this this could be the reason why i i had a container previously okay it might be a quirk i don't think it's supposed to work like that but either way let's put it in the container now then on on the container i'm gonna set it to end and i'm gonna set the width the auto okay then now when we pull it down we align it to the center no it doesn't like allow it to lane unless we put this as hundred percent and then we align yeah it's probably a quirk and or maybe some of bug but either way i guess not something you cannot just there's no workaround for it so that's fine then it's more like space between right then it comes down to mobile yeah that looks about right but probably would have to increase the size of the header should be a bit more padding okay if that's the case maybe let me just remove remove the height for this and then increase the padding from the top and bottom push this and ring this one one so then we come down to mobile it's a bit a little more space yeah okay i think this is pretty close yeah so now now we're done with the heating let's go on next to the filter the same thing add new between your photo so that the templates are organized properly so you can publish edit with bricks then make sure that the conditions template settings conditions is set to the correct one which is this one should be tutorial save i think i didn't set the temp the template yeah template condition should be only for the individual one so let me just go ahead and set it make sure that this is correct individual tutorial page container make sure that it's stretched this other this child container second level one line to the center then because because we have quite a lot of stuff happening over here we need to need two containers let's add in another container and drag this one out okay this will be the this would be where we put all the terms of use privacy policy and the copyright stuff in my container this is stretched this one align it to the center and then we will just need two text elements so two text elements container direction will be horizontal change this accordingly and then as well as this change this to terms of use slash privacy policy right then container space between so that it looks decent because it looks good right okay and then i want to add some padding to the top and bottom as well as the sides so just let me link this first and i unlink the top and bottom will need a bit more uh okay maybe like two the sides can be just one yeah okay looks good this part is done now for this for this footer menu right so there are four columns obviously right so i will just add in four containers it's like this make sure that it's horizontal then you have four equal columns and then obviously this column is bigger than the rest right so i just need to set the width for this bigger column to be let's say about 40 and you will and you will realize that all the other columns right are automatically equally sized so this is uh i guess it's a billion feature for for containers it makes it easier for you to build layouts that are equal so you won't have to calculate or if this is 40 and this should be 20 20 20. then obviously if you set absolute values right then um became responsive it will be that bit more tougher so i think it's if i set it to 35 let's say 35 35 looks more accurate let me just see oh i started 40 percent yeah okay 40 and then of course we want that padding right so go to the parent container in the container settings link them all set it through this one here and this is heading around it automatically okay now i need to add this it's just text here so there are a few ways i can do it i can just add in one text come to the content this is one way to do it right and so it's just this just one element the other way to do is add a header element and uh a text element so that will give you a bit more control right over the the space between so this is one way to do it but for the interest of time i'm just going to leave it as such this i'm going to change this to h2 oops and changes to h2 please nope there's the lamination change to there i'm going to go to the code to change it okay it's changed too but the size is not changing okay i'm just going to leave it as this because it's not it's not supposed to be an exact replica anyway all right then next will be [Music] social icons all right so for social icons it's a bit different where let me just show you so that you know what i mean so if i were to remove all the labels there's no option right to set the padding on the margin in between each item at least not without using custom code so a workaround and what a workaround is do this delete the others and then duplicate this so that you can set the the margin in between each item but then of course if we do that then we would have to add in another container we drag this up here and that's all the all the social icons under this container and then send this to horizontal right then let's add a little bit of padding or margin rather button except one area i need two yeah this looks a bit better and then individual social icons this is where i will need to set in one rem for example so that it looks more like this okay one ren then you go ahead and change the icons accordingly so the background i'm using this i'm using that yeah using that as the background okay so this can be twitter this can be facebook actually change the background color so that it fits it's going to go through it this quickly also next one instagram and there's pinterest okay on the last one and just change it to pinterest all right looks pretty neat now right except for this is it looks a bit different because i use the hideout over here then for this for the interest of time or also i'm not gonna i'm not gonna create like menus but instead i'm just gonna use text element and then i'm gonna put it here like that then of course for typography uh sorry for layout make sure that it's full width so it picks up the full width or rather there's another way to do it which is to stretch it so that it stretches out and then duplicate this bring this to the other container to look at going to the other container and then change accordingly this always for this and there you have it your footer i think i'm adding some more padding here so i believe there's a bit more padding so let me just set it to two rem but i think pop and bottom has to have a bit more so let me unlink this and set this to maybe like four millions four four this looks a bit better so it's a bit more white space right and safe and there you have it the photo is done also right and now it's the actual building of the page which will take a bit longer but no worries um that's why i did it the first time right so that i'm a bit more familiar with it right now because uh honestly i didn't take a very short time to review this i took some time to figure out some things because uh i was it was my first time playing with the container element so building even adding this kind of hardware effects so that it looks a bit more realistic as a home page right okay so as you can see the header is here the photo is here right so you can contain one container and then since there's going to be a lot of elements on this page i'm going to name this as i'm going to name i'm going to start needing my elements in the structure panel okay so same thing for any other sections within the home within the website right you're going to need the main container right so this one probably just named this container and then this would be nice all right so the main container will always be stretched the hero container will always align in the center right and because we need two columns one column for this this guy over here and column four here so we need to add in two more columns then in this hero left column and then this one will be horizontal and you see this this this uh this is a background image so we're going to set this uh inside the background image on the main container background select image which is this insert okay and with all our containers we're going to add in we're just going to make sure that there is this i think yeah i think i should add it here i should add it in the main container itself yeah so i want to add in uh six rams of padding at the top and bottom whoops and then in the right hand side i'll make this first i believe it's 2 rem left and right would be two hour young let me just double confirm to make sure all right um click on this let's see oh it's just it's just six i think it i think i did it here over here yeah minus two so that's going to leave it as that okay i'm going to i'm going to leave this open so that i can refer back because the padding and stuff actually matters in terms of getting this look that we want okay so that's done oh yeah i shouldn't set because i want this guy to be right on the bottom yeah so i cannot send i cannot set the padding over here yeah okay anyway since this guy is going to be a bit tougher to achieve right not really but uh i just want to get this guy out of the way first so the image this guy would be this man over here okay it's a bit too big i'm gonna bring it down too large what size do you accept for this guy let's see 75 percent with okay let's do that represent with i believe yes in the center yep that's good okay i think that's this is the more that's done yep correct then now for the header text button and this all this elements over here so as you can see there's another container over here let's go ahead and add in the header first and the padding let me add in here as well to rem and for here for this column there's no need for any for any uh padding but let's just make sure that it looks good yep as you can see this is how it should look like right then this i think this column has this main container has the background is there yes there is the background let me just change the background color as well i think it's this yes yep that's pretty close now then go ahead add in a heading some text and a button right okay a bit rough right now but it's going to slowly take shape so let's copy it with this over heading it should be here we'll hit h1 right now it looks good and then you're going to add some padding at the bottom two rams text as well add two rams of padding i think it should be a bit more let's copy the text over first this is around four ramps then the button let's get started and this button is supposed to be large yep add in an arrow change the color that is looking starting to look starting to take some shape then now is where we need to add in a container right to hold this this icon lists so go ahead and icon list first icon this under the container how's it not showing up uh phone wizard is not showing up okay it's showing up now all right okay let's just copy the content over first delete this duplicate this and then slowly remove okay so this is audient texas and this is business planning all right then change the icon to i believe check which icon it took me some time to figure this out okay so uh yeah probably have to just copy the setting not sure whether this works let's try oh it works great so i just i just figured out something that i guess would be an excellent time saver especially if you are working within the same site or using bricks for the same side let me see what i can duplicate this and it will look yeah i think i have to set this as auto width where is that so this is the auto yep and this to auto as well and then select this container change it to horizontal but of course it's supposed to be okay i think a better way to do this right is to set the layout to be 3 percent likewise for this fifty percent yeah this looks better okay and then same thing contents copy this then delete and duplicate so that it's faster oops okay made a mistake there this one should delete all your international markets and finally stocks and trades okay now the hero the herobrine is done right they okay let's do we can leave it yeah this is the hero which let's just save it first and then let's move on to the next section over here right add in container there you go add in another container so this is the main container this would be ratings as usual stretch it here align to the center and then we'll have three different columns and three and i guess this one by itself it's a bit longer right it's a bit shorter sorry so we're going to add in three columns horizontal and then change this what was the width here 20 percent change the width to 20 all right and these other two are the same okay so this is the tricky part right 4.8 and then the five stars and then some ratings here so we'll definitely need another container inside here so this will be this would be the ratings column and then this would be the star container all right start container you'll add in icons five of those icons to be exact so i'm going to change this to i think it was yeah suppose with this star then typography will change it to change the color to this yellow right and then i believe the font size is one ram or something i can't remember let's take a look 24 pixels specifically so this will give me four rounds and then you look at this four times so that there will be five all together make sure that this column direction is uh horizontal and then you can line everything else to the center there you go okay now to add in enter and text rearrange them a bit so the header should be at the top it should be 4.8 right and this can be h3 but then for the typography you will need to change it up a bit and for that we will take the clam code for h1 right just need to select this back here and put it here because we don't want this ph one definitely not but the size can be similar to h1 and then we also take flight height of course or we just remove this move this all together no i can't okay let me take the line height from h1 as well so it doesn't look all weird back here change this yep so that it looks better right now i forgot to add in some padding over here so to the main container i'm just going to add in some padding so top and bottom will be six and then the sides will be just two and just get all the rams in yep looks better and then of course here i want to make sure that the inner containers have at least one gram ran off from each other or was there more remember let's just check it out oh it seems like i added in to the container itself so obviously i shouldn't have done that it's better to do it at the container at the parent container level so that it automatically applies to everything here unless of course you want a specific headings for each container then that's probably not a good idea either way this should be applied to the center and then just make sure that the typography is also center line this one as well this would be 2 321 ratings align to the center and typography uh text align center okay that looks pretty good now for the other two columns here okay let me just copy this first it should be a text element let me hold on maybe i should change we actually have two separate ones just so that i have more control over the point looks like right okay we do see this should be secondary okay it has to be both so i'm going to change the typography a bit which is the font weight to be 900 and that looks better less spacing so that is facing so that i think i also added spacing over there i remember yeah i think it probably did yes okay just i'm not sure why there is some some space at all okay yeah probably just need to do this okay all right it looks better now okay now i have to make sure that it's all stretched uh sorry i think it's more like this is stretched yeah and then oh more like that line there should be a line to the center that's right okay and then for this add in this portion and then add in this border over there so we're gonna end in a text element or is it not okay probably a buck either way i'm going to add in step there's probably a better way to do this but uh what how i did it was hey wait why is there this ah okay yeah this is how this is how i did it so i added the border onto the text element so for the width on the left was probably like four pixels or something and then style solid everything else is [Music] zero right and then i added some padding on the left two ranks yeah that's how i achieved this all right let me one run two runs what's better then now to make it responsive right so here is fine but once if we just did here it looks a bit messed up so we just have to make sure that everything is aligned to the center okay this one as well and the line to the center all right yep false length to center and then maybe maybe this will have to increase the font weight a little bit at 600 so it looks better now it looks a bit rough i think it's because of this okay so just once it collapses once it's uh aligned vertically then probably this container you must make sure to specify that it's this is still 200 right now let's make it 100 so that it doesn't squish but it's come down looks all good i'm quite happy with this right let's move on to the next section greetings column this would be oops there's something there's some slight technical difficulties just now but seems like it's better right now okay we can go back to the next we can go on to the next oh wait this one is still not fixed some of the settings were not saved i guess just now so send this supposed to be right in the center oops but not sister yep okay it's working right now looks all good change this change the font weight of this to be 600 yeah okay quite happy with this save again make sure that it's all good okay and then rename this a bit this is okay add in another container make sure this container is by itself this would be the next one services likewise stretch it out over here most likely it has to be yeah this one has to be vertical align the center and then this is where it gets a little bit complicated right because this by itself should be in a container by itself with all the individual columns here and here because everything everything else has to be stacked vertically so this would be the services and then uh yeah let's go in your container first but over here i'm going to change the background to be dark blue right okay i'll do it fix the layout a little bit six rams right bottom and then left and right maybe two ramps okay all good then now to add in the view at the top else two headers or rather one text one text element the top this will be what we do in fact i can just copy from here right i think that's why i did okay i'm just going to delete this first negative copy from the previous one copy this place it over here yep okay and then this i would have to make sure that it's aligned to the center for the heading we'll change it to this and then to make sure that present its center line going to change this take the line to center and then content style would have to be light okay then you can change the width just going to copy hitting styles and paste it over here so yeah there's three rams at the bottom with 750 so that because it comes down so this sets a max width of 750 oops so that it doesn't doesn't look like it was so long over here and it's so short just great shape over here so if it's not 750 it's gonna look like this it's gonna look very weird which i set it as 750 width and then and in a divider smaller divider little bit that put it here well master mess the thing up a little bit i'm just going to refresh it first that's probably one of the few quirks of the builder right now but nothing a refresh or something can fix the good thing is it's auto safe for every time so you don't have to worry too much about your stuff getting getting gone right i'm just gonna do this first so that i can copy this into the style of this copy the writer styles and then paste it over here there you go okay so the finder i think i should have ah i think i think it's i think i set the margin over here is it i can remember what is this margin over here so either way i'm going to add in containers over here okay let's take a look at the structure a bit so there's one mean let me see this is why i should definitely name your your your elements okay there's one main container over here right then uh all these are just the columns so there's one here one there's multiple columns because the the layout is a bit special right i think i'll have to have to rebuild it a little bit on smaller or smaller breakpoints okay by either way it's supposed to be you're supposed to create one by one uh one cell first and then you duplicate the rest in this case okay so it's gonna be a bit tough but and there's a slight learning curve of course but either way let's go ahead and do this i'm just going to copy this container this container style over to save time and then we will look from there okay so this container this is the let's just name this services and then this would be individual column already this is the card it's a resource card okay then there will be a wrapper so the card the wrapper then the content so let's let's go ahead and do that so it says card so i'll be services all right and then one more this one would be the content then i'm going to go ahead and add in the icon box so this is icon box okay please i can block styles i'm gonna remove the reason why i use icon boxes so that i can get this this this background thing here right it's dollar yeah this is the one yeah it's just the one i think not i am very well here it is okay it looks better now and i'm gonna remove all the content so what's left is only the icon by itself right okay and then i hit that this header this heading would be it would be light style light h3 yes okay sorry h3h4 financial services then some text content just paste all the content in first and then we do the layout my style should be light oh is it yeah okay that's like okay is this this is h3 sorry just change this to h3 first hmm that's a bit too big right now hmm that's a bit weird change the h4 first when it was h3 but then i changed the typography if i'm not wrong take a look yes i did change the did you change the size i guess yeah i did change the size of it so that it's it's not too big okay now you have the first card right but let's break it down a little bit so the reason why we have we have this card wrapper is so that there's this there's this padding between each card okay so that's that's the first point right so that's why right you see this when you see the main wrapper uh i think you will have i think we will have to add in some padding as well in this main one let's just copy container styles paste it over yeah so there's this in a this is in a pending i need 16 pixels right because uh it doesn't it doesn't take decimal points for for padding a margin for some reason if when we use ram units so in this case we just use pixels so that it it has a bit more even look so anyway this this mean this uh services card right so that there's this padding around and then this wrapper is so that we can add in the border okay so let's me just copy this container style paste this over so now you can see right there's this uh there's this border over there right around the around the container because that's that's what the design wants us to do okay and then there's also some hover animation so hover styles uh let me just select this so you can see the other styles so this is how we edit cover styles right uh i think there was some transform i think i would have to i'm not sure what why it's not why it's not showing up here but uh the other styles is let me just take a look here transform -1 ram on the y-axis that's one run the y-axis so that it goes up and it also adds shadow box shadow 20 20 pixels blur and four pixel spread so that's just that [Music] and then this is a this is box shadow okay then to make sure that it's it's uh it's smooth we're gonna need to add in this uh transition property over here so let's move so now when we save it let me view it on the front end this is move transition but i think that's there's a mistake on like this part here so we're gonna have to remove that okay and anyway it's this it shouldn't be here but it should be here yeah i think i pasted on the wrong side so okay just to make sure that okay let's just save and take a look okay that's correct i might have added the yeah i've added the css transition in the hover styles instead of the main one let me just check make sure that's the case save this and refresh yep now it's smooth right so basically the main container which is going to be the the container to hold all the different uh all the different cells right the service wrapper is for the water as well as the hover animation and all this extra padding on the side right so that the content within uh looks good and of course this this final wrapper is so that everything keeps in place and then you can align them vertically so next all we have to do is just duplicate them right and it all looks good of course one one more important thing that i forgot to mention right is that i had to change make sure that the width of each cell right is 50 on the smaller one on this tablet tablet breakpoint and then on mobile landscape it's still 50 but then on mobile portrait it has to be 100 right so there we scale it down it looks good just like this just like this this this example over here oops somehow [Music] it's not okay good and this is nice hover effect here or so okay then on mobile it just looks good all right anyways it starts getting out you're still responsive you can you realize that the text is the text skills as the the screen skills it doesn't just suddenly snap to a new size but it slowly scales nicely which is the intended uh behavior that we want anyway okay we have to fix this a lot uh later later on but it's not something that is too hard to fix anyway but let's just fix it right now okay probably would have to reduce the preparing over here this is this is hundred percent already it's just depending on the size causing this a little bit wonky let me see maybe on the container level yes so i should set it i should set it at this container level instead which is what i did in my original build let's remove this when it comes down it looks better no it's do not hmm let's do 20 all right which is yeah okay oops now it's a bit weird i think it's uh this is why okay especially heading over here yeah yeah i messed up just now so sorry about that she look good on mobile right now or not it looks a bit weird let's see typography what was it here photo with my context typography it looks the same size but for some reason oh okay i remember now instead of side by side it was stacking on top of each other if that makes sense okay so for the container instead of currently as horizontal i'm going to set it to vertical so now it looks better yep a lot better in fact and then for the layout this is where 50 wouldn't matter shouldn't be fifty percent actually auto with this the content is this item correct this item to live that will come down it's correct okay now it's behaving correctly there's let's save this and then maybe add some pending at this breakpoint or rather looks a bit rough here okay this one should line container end yeah okay that looks better so now for the next section this is quite quite a simple section it shouldn't take too long so i'll just name this as cpa so as usual this will be stretch this one we align to the center this would be ct then we'll have two columns okay so in two columns here this would be the math column uh okay before i do that i'll just delete this first change this to horizontal and then for this i'll just create i'll just let's just create this and then duplicate over so an icon header and some text icon okay so this will be stocks this will be the text over there and then the icon it's going to leave it as such stop and tweets okay then just make sure that all this align to the center right then some padding some margin at the bottom and just one p one one one ram there's one ram okay duplicate this i think this is the right column and then in the main column of course we want to add in uh as usual six six ramps at the top and bottom and two ramps left and right two okay working quite good now and then add in another button and then the button i think i'll just copy the button from here so this clone button right let's take the button from there click it down here let's collapse this and then right this is supposed to be here then this main container obviously will center align everything this wrapper container and in some margin at the bottom you like four rounds right oh you can go up to six rounds yeah looks a bit more spaced out like that in fact looks like i should add in even more rams here like maybe like it or something here at the bottom okay see it gave me container done let's move on to this contact form which is which looks a bit interesting right because there's this looks like a floating container of sorts so here's where we'll add a container let's unpin this plot this container this will be a contact container likewise set it up first stretch it out this would be aligned to the center and then horizontal since this will be one container by itself and this will be our container by itself add in two containers okay and then this would be the contact us for contact us is just header and text all right this is confirmed and then change this to h2 add some more to the bottom just two ramps there goes the text then now this this container by itself but add some padding around all right so maybe four ramps then we'll have to add in the background image background color blue change this to light that is fine right uh i think this should be i think style muted looks good okay yeah then now here is where you probably would add in some inner padding as well i'll go with two ramps okay that's good and then now for the contact form okay so the contact form itself the background would have to be white then it has to have pending let's say about four ramps that's not right and then it's name email message just that we will make sure that submit supposed to be this is correct medium this is supposed to be some message um there should be an icon to get this this one and then it should be left okay maybe it should be large it's not yet as much then i believe fields show labels okay so required as the risk then there shouldn't be any placeholders since there are labels really and there we have it the form um more importantly you have to make sure that the borders are rounded slightly so [Music] small like four yeah four looks correct as well for this the borders i think it's eight okay yeah looks good oh no she must be a little bit more founder this one let's bring it up to sixteen make it hard looks like it's more twenty yeah 20 looks about right okay then uh select this main container make sure it's aligned to the center yeah now it looks a lot closer okay now is the challenge just to make it responsive so first this this main container over here maybe you should bring down the padding uh on the right and left side oh this looks good okay and then come down to mobile landscape and stack the stack right so this is fine but then a mobile portrait this is where probably this part looks a bit rough so i'm going to reduce this right to effect zero yeah zero rams then on the form itself that's when the padding actually lasts or so so maybe two reds two rams looks about right and then on this main container you probably want some padding at the right and left too yeah so i think it should be done over here at this level so six probably six padding six grams of padding in the top and bottom and then on the right hand side six first change this to one ram on the left and right sides so that when it comes down right or maybe it should be two and then only now when it's down to bubble pen portrait then it's one red so this is this spacing just like that yeah that looks a little bit better perhaps can even bring down top and bottom padding too it's not so big yep smells good yeah quite happy with this now so there you have it this is a contact form that is responsive okay save then move on to probably the last section right now second to last section so this is this is similar to this section so i'm just going to copy this copy that section down and duplicate this and shift the section down okay this is the first time i'm experiencing some lag in the builder okay but anyway here is where we change this to testimonials and then what i find say and then change this to primary which is the same color now and then change this of course to white i'm going to remove i'm going to remove a lot of this cards if i'm going to remove all the cards except for one so the best best the the quickest way to do this is always to uh create one card and then duplicate them right so this would be testimonials and then testimonials wrapper container text heading divider divider will be blue in color yep then i'm going to remove this is the yeah to remove the styles of this all the styles will move so there's no more how i know how to hover styles and there shouldn't be any borders as well okay but i don't need so many i don't need so many uh containers anymore so that's one container for this three stars it's going to duplicate this one so clone container then i'm going to bring down the container star container i'm going to bring it down all the way down over here right then make sure that it's at the start so it's the line to the left and delete this change this change the text for this which is h4 change this to primary most likely i only need one level down okay so what's going to bring this up here right that's going to delete this column for this container there's a bit too much padding also uh we're going to change it over the main container since it's set here remove the padding there and then since there's already enough in the container padding here right let me move this as well i think i'm gonna set it so this is called content in fact it can do with even one level less oh no wait hold on hmm yeah it's a bit rough so i'm going in okay it's a bit weird to be struggling with this but let me just try to click it there so that it's easier for me to test it under it's almost funny okay i mean this is fine this is correct yeah supposed to be like that okay then probably here is where i should set the padding two ramps maybe okay looks good and then this text let us change this to that then change the style to muted yep then one container container here as well this container is important because this it has to be uh this this uh avatar icon religious avatar picture and then the the client's name and the client's company but in fact even within this one i'll have to add in one more container because this is where we will have the clients name and company so listen if i can put it yeah it's always a challenge like that let's push this up so that i can test it under under as well okay now that's better and then now i can pull it whoa suddenly that's not so many duplicates okay the image supposed to be side icon okay this looks correct already out image there it is okay now this looks good okay horizontal right and then this is vertical correct and this is where i was collecting this allen fresco and the other one is okay and now for this image just like this guy and the style border radius 250 so it's rounded okay save it first okay all good then this i'll bring it down to i believe it's 100 pixels 100 pixels i can remember yeah it's about 100 pixels then this main wrapper container i'm going to set it to line center add some padding margin the right so this okay that's good now add some margins the bottom and that's pretty much it all right looks pretty close ready save this and now it's the location part this list content star container adding text text okay then just duplicate the testimonial card so the testimonial card is really responsive by default since we copied it from here so we come down to tablet that's 5050 come down to mobile landscape it's also 5050 and then we come down to mobile portrait right it's 100 so it looks good okay let's save it let's see hopefully it's yes okay luckily now for the very last section right which is this part which is not a hard part to to build also so you know the drill create a container and the container might always might be a bit off let's put it out here and then just name this as uh and then the container this would be then obviously this would be a line to the center the main one will stretch and this will have to stack horizontally so this this is one column by this one container by itself this is one container okay so add in two more containers right um so it's just one text and container set text and header then change the text best way to save your money and over here you need to grow a business right and of course add a little bit of padding let's go with yes that's the usual six grams i think just oops it's two runs left and right then later you come down to mobile right it will be one uh when it comes down to mobile portrait if you want just get this out of the way first okay and then this container this wrapper container you will need to add in same thing as this four ramps of padding all right then add in background color then border let's go with 12 pixels then over here actually looks a bit more than four right it's more like six grams of penning yeah that's why six rams depending and the border seems to be bigger as well so i'll just go with sixteen right looks good and then over here let me just make sure that this is aligned to the center the cross axis and then here is where we'll add two buttons so we're just going to clone this button take it from the cta one put this under this container yeah run in great and then over here it will be aligned to the end line center green axis oh okay i don't know why because this has some margin at the bottom okay now it looks good so now this button will be more medium and somehow they decide that the position of the icon is on the left instead vocal consultation and the icon has a render icon and now i'm going to duplicate this add some margin on the right just change this the style of the secondary or doesn't work okay let's go for background change it to yellow then the icon it will change it to the dark blue then typography text color change it to blue as well right and the content would be contact us and the icon is mail icon now that's done okay now to make sure it's responsive it looks i guess a bit rough here but i think i'm okay with this yeah i probably have to change the pending down to four four rams instead probably yeah it looks a lot better right now maybe left and right okay that's fine and now it stacks at the top and top and bottom add in some margin at the bottom [Music] then instead of lying to the to the end align it to the center okay and then now and probably want to make sure that all this aligned the center okay it's better right now make sure that these and it comes down here that's the line in the center so that if we do go to we do have to go to two lines you'll be centered then [Music] for the container on the mobile portrait view this is where i guess the padding should just be two rams on all sides yeah this looks a little bit better and the buttons probably should stretch this out instead of having margin so i'm going to vary margin for this button so yeah uh i guess we are more less done quite happy with this pressing so myself let's look at the final product that's just empty cache and how to load make sure that everything is according to the latest version and it takes a very long time to load again and as you can see this is the finished result of our effects because this is the this this is the one the previous one the first one that i made there's there will be some slight differences but it's pretty much the same let's check make sure that it's responsive yep it's responsive as you can see it's all good contact form is good testimonials look good and yeah so if you stick around um until now thank you so much for going through this two hour plus complete walkthrough and tutorial on how to build one pager website including using the header and footer templating feature of brics builder hope this has been helpful for you and you understand the new container element a bit better and why it's a lot better than the previous section row column kind of structure so if you enjoyed this video please leave a comment below and let me know hit the like button and everything and of course if you uh think that brix builder is good enough for you of course there were quite a lot of problems that i faced and also it didn't help that cloud waste had some issues with the servers or something and not as unsure but it seems to be a server issue because other websites hosted on that cloudways uh server that we were using were also affected uh maybe i don't know the way the way the brix builder handles the the requests and stuff maybe that overloaded the clockwise server i haven't taken a look in that yet but uh as you can see it's quite powerful it's flexible and honestly building a full one pager website with a header and a footer of course i didn't add like like links and everything but even if people if you were to add those in right it shouldn't take you more than a few hours just to launch a decent looking site right so uh yeah you can consider getting the ultimate license which costs 129 us dollars 4 000 websites for lifetime yeah so hopefully i'll be back with another tutorial video and thank you bye

Channel: Vance Wong

Views: 2,491

Keywords: bricks builder, bricks builder tutorial, bricks builder website builder, bricks page builder, wordpress page builder

Id: bCTqJEKTg5w

Length: 118min 33sec (7113 seconds)

Published: Sun Jun 13 2021