Create a Full Website with Bricks Builder | Step by Step Tutorial - Review

in this video we're going to build a whole website using the bricks builder hi my name is stratus and i'm constantly producing video tutorials about wordpress please subscribe to my channel for more videos like this now i know that this basically is not a builder it's a theme that includes a builder but even in their website you can see the url that it's called bricsbuilder.io so they acknowledge that more people will search that as a builder or something and this is how i'm going to call it a builder so i have already created a video with my review and we're going to use bricks to create a full website i'm going to use the same layout that i have used some weeks ago to create a full website using cadence theme and cadence blogs and of course using gutenberg builder and of course we're going to use the same hosting company the same url i'm going to use the cad.stratos and it's hosted in the same web server and we're going to take some speed measurements and compare it to the gutenberg results that we had there so i'm going to see this layout every now and then just a for reminder and i'm going to recreate the same layout basically i'm going to use the same pictures and we're going to start right now so if you haven't seen my video for the brics review i will put the link in description below you can go ahead and see that and also i will put the link of the website of the official website of brix builder it's not an affiliate link so you can just click there and if you like you can buy it there's nothing more for me okay so let's go to our website this is our website this is the themes let's refresh i have only the brx builder the bricks theme and the 2020 and if i click here i can see that this is the version 1.0 let's go to the plugins insta plugins and here we don't have anything okay let's get started by going into first the bricks let's go to settings and here i have already uploaded my images and that's all that i have done except for installing the brix builder and putting the license code so let's go and go into the performance and i'm going to disable emojis embedded and jquery migrate okay let's save changes and next step let's go into pages and i'm going to create some pages to create the menu so let's i'm going to delete the privacy policy now i'm going to leave the privacy policy and i'm going to delete that trust that and let's add some pages so we need the home page we need an about us page we need some services pages okay and let's start home page first and publish that twice okay after that we need to go and create the about us page about us also if you just want to see my review of the two hours video that's going to be you can go ahead and check this out timestamps and go ahead to that point of the video and if you want just to see the results you can do that as well next is the services services okay let's publish that okay next we have service one then we have service two and then we have service three okay that's with the services we have a contact page contact and also i'm going to create inside the post a category that is going to be named news news add that to the categories and we can now go ahead and start the menu but before that let's create another page which is for the cookie policy so let's go and add the cookies cookies which will be the cookies policy okay publish that and let's go now to the menus appear menus and here we're going to create our main menu let's go to the pages view all select all i'm going to exclude the cookies and the privacy which is not here as you can see even though i have selective ul because it's not published okay so let's uh i'm going to leave those home in here and i'm going to delete from here once i know which is the page okay this is the custom link so i'm going to remove that and now let's go and add first the home page then we have the about us then we have the services then we have the service 1 service 2 and service 3 to be under that and then we have the contact page inside here i also want to add the news we which will be before the contact and now my menu is ready let's go into the pages once again and i'm going to publish the policy which is a draft so quick edit and select that to be published okay so let's go to the menu let's go and create a new menu we will call that footer okay and create that and here let's view all we have the privacy policy and we have the cookies okay it doesn't matter which one is the first one so let's go and save that so we have also the footer okay next i'm going to create the header template but i do want to have an image in my home page just to see what i'm doing so first i'm going to add an image uh inside the hero section of the home page and then i'm going to close that and start creating my header so let's go into the home let's edit that with bricks and let's close some pages okay and as you can see i have this picture with the paper that is changing hands so let's go into the home let's add a section and let's inside the section click here to edit that and here we have the background and select image media library and here we have uh the one with the paper which is here okay so this is the logistic hero okay insert that after that i'm going to go to layout and i'm going to select full width so it will be full width and then i can go and select the height to be like a viewport height and maybe 80 something like that i also didn't put that in the center but i think it doesn't matter let's check let's go here and put that to be center and center yeah it changed a little bit so i'm okay with that i'm going to save that and let's go back to the settings let's go here into the settings first reading i'm going to change that to static page and homepage okay this should be 20 this should be 20 this should be summary and also this should be empty blank for you but here this is a test page so i don't want the google or other search engines to index the page please leave this empty for your website okay then let's go to permalinks and let's uh create the pretty permalinks from the post name save that and now we're good to go okay let's start by going into the templates and i'm going to add the new template here i'm going to call that header i'm going to select here the header and let's publish that and after that i can go and edit that with bricks now once i'm inside you can see that i don't see anything inside here so i'm going into the settings i'm going into the template settings populate content and i'm going to select here the single post page and here i'm going to select the home page i'm going to hit apply and this will refresh the page and it will show me the home page okay so now i can start creating my header first and this is what i suppose that you should do is go into the settings and go into the theme styles and start changing the default settings so let's go and here that says none you can select one of those that we have here or you can create the you can create one template one new by clicking the plus and typing something that is more appropriate than stratos okay let's create that and here we have the stratos so conditions first are the condition and this will apply to the entire website okay then we have the general and here you can select if you want the cell say site layout to be white or boxed i'm going to leave it as white the side background if you want to have something else than adjust the white space that's the white color section marking i need a section padding another section marking inside here but i don't have any so i'm going to leave it as it is uh you can see that it has a bottom of three pics 30 pixels sorry it has a row margin of 0 we have a column padding of 15 an element margin of auto as you can see here and bottom 15 packs pixels not pixels okay container max width here it should be for me 1200 pixels okay then we have the light box i'm not going to change anything and then we have the colors okay the colors palette is something that may confuse you a little bit once you start using it so let's go first as you can see we have primary color and let's go here and select what we want we have some colors here but they are the default and i can edit that and i can delete that and that's what i'm going to do and now that i don't have anything else inside here i'm going to create a new palette and i'm going to name it again default or stratos or whatever you want default and let's create that so this will be empty okay now let's change that to a little bit of blue something like that maybe and that should be my main color as you can see here so i'm going to click save and now this is the color that i'm going to use for the default color then i have the secondary color and i'm going to copy the hex code i'm going to put it that here and i'm going to give it a little bit more of dark something like that so this will be the secondary color i'm going to hit save and as you can see now i don't have any palette here and i cannot save it this is a bug so i have to go and save that and refresh the page so it will grab the palette that i have just deleted even though it should have done that automatically and it will reassign that everywhere let's go into the settings let's go into the theme styles again colors and let's go to secondary color and now i can see that i have the default palette which is mine and i can click save and now the color has added so you can do that everywhere light color dark color muted color border info success warning and danger okay then we have the content okay section max width here is 1200 pixels okay content margin if you want some marking and padding marking for the content i don't want to and then we have the block code and then we have the links i'm not going to change the links if you want to do you can do that and i'm going straight to typography here i'm going to select the body and the font family to be ubuntu for me for the text this is also the menu because the menu is part of the body and then we have the text align and if you want to change that obviously you don't want to okay and font size 17. sorry for that okay text color i'm going to use black so i'm going to use here fff which is the white okay 0 0 0 which is the black color and click save here and this will be my color for the text okay for the body next we have the headings let's go to headings i'm going to select roboto robot mono and here the font size i'm going to leave it as it is doesn't have any value to change that because it is applied to all the headings and let's go to the text color and select here also the black okay after that we have the heading one two three four five and six and you can change if you want the size for all of that and then we have the hero section and the lid and as you can see the hero section is available uh for the heading and the text element which you will use in the hero and then we have the lead which also has the heading and the text okay after that we have some features for the elements and you can change if you want how everything is looking and let's go into the heading and here we have the separator for the heading if you want to be left or right if we go to the image you can see that i have an icon the border and some other changings that make point in changing for the specific element so i'm not going to change any of those but i just want you to see where they are okay and that's all with the settings if you want to change the page settings of course i don't want to do that here you can do that by going here so let's go and insert a new section and in this section we're going to use two columns and first let's see the website as you can see we have here some content contact info and here we have some social icons so i'm going to do that we have two columns as you can see here or uh basically since uh those are two elements only these are a text element with some contact uh info and it's a social icon you can go away without using two columns so you can use less less divs so basically you could go and add here the text element and then i'm going into here now this social icon but i'm going not going to do that i'm going to delete the column and i'm going to add the social icon next here so let's add the social icon again where are the social we're going to search for social social icons and i'm going to go here underneath that okay first let's go to the text and we want to add some text let's go and click the green okay and here we have the number which is 2 1 2 1 2 1 and 2 1 then we have maybe an email and maybe an address so we have test at test dot gr or something and then the address which is athens 13th okay now since i want that to be a link i can select that and i can add here a link and here should be tell colon and then the number but adding now the code of your area so zero sorry plus 30 for me with some in greece okay i'm going to hit apply and now i can go into the test and do the same i'm going to select the test and i'm going to hit the insert edit link and as you can see it says automatically mail to test test.jr and i'm going to click enter so we are ready to go with that i have added the links and now i can go back to the edited of the column editing of the column select layout and here that we have the justify content i'm going to select space between okay now that i have space between i want to do those two in the same line and how to do that i'm going to click first the element and i'm going to select for the style and layout and i'm going for the auto width so it will take the width of the element and not the whole row and then i can go and do the same in here i'm just going to select again the social icons layout and select the auto width once i do that thus that two are going to be in the same line but as you can see i they are not aligned as per the height so i'm going to edit the column again into the layout and here i'm going to select the align items to be in the center this will break detect bring the text a little bit down so there will be in the center both of those let's go now to the social icons and here i'm going to click inside the twitter i'm going to delete the text so it will leave only the icon okay then the facebook and then the instagram okay now i'm going to put the uh first to be facebook and then we have the twitter and then the what is this the the instagram yeah instagram okay and then we can go into the style and background and for background i can go for a white since i have a white here okay so let's go for an fff which is the white and since the background is white now you cannot see of course the icons because they are also white if i remove that you will see that they have white inside here so i need the fff here and i'm going to save that as my white color okay let's click outside and let's go into the typography and select for the text color to be black okay so now i have my icons now i think i need a little bit less space and also probably this text should be a little bit smaller let's click here let's go in typography and let's go for a font size of 14 something like that maybe and then let's coach and see what space do we have here we have zero okay for the layout it was zero i put the margin and let's go and edit the column and select here to have a padding of top and let's put here zero they're all linked so this will push to the end of the column and i think we're okay with that we're going to see later how it looks and maybe we can change that after that we need the second row so i'm going here that says row i'm going to add the row now that i have the row i'm going to do the same with the logo and the menu so i'm going to add the logo and when i mean the same i'm going to i mean that i'm going to push those in the two far end of the columns of the column so select the logo and here i'm going to select this one and insert and now i'm going to go for the logo width in pixel to be 120 something like that now i wish i could have something else than pixel like a percentage or something but i don't have so 120 it is okay next we have the menu and let's add the menu as you can see the site address here is the one that it will be linked so whenever someone clicks the logo he will go into the homepage and this is what i want and also the logo text will be displayed whenever the logo is unavailable i'm not changing those things the logo inverse is if you create something like a transparent menu and you want different logo for the transparent menu and different one when you scroll down and the menu is sticky so i'm not going to add anything else inside here and let's add also the menu we have navigation menu underneath the logo and i'm going to select that to be the main okay once i do that you can see now that it populates the menu and now i can click again the column and select layout and here i'm going to select again to have those two space between and the align to be center okay let's save that even though it's automatically saves every 60 seconds and let's see how it looks in the front end by clicking this b icon so this is how it looks at this moment so i need to put a line down here and this is how i have done it here i have a gray line here also i need to go and remove some space i think from the top and the bottom here and also from here so let's go into the header and i know that this column has a little bit of padding and this is why the logo is not to the end of the column so let's go into the layout and select here to be zero okay next let's go to the row let's edit the row and let's go to the border and i need the border here to be i'm going to unlink that from the bottom i need one pixel and style will be solid and the color will be black but it's not going to be black it won't be transparent so let's go for 0.2 something like that okay so let's check that again so we have one pixel it doesn't say pixel but i think that this pixel hopefully and let's say that and see how it looks okay let's refresh and i can see that i have it everywhere even though i have only select here with one let's go and put here zero zero and zero okay and now let's save that and see how it looks so it fixed that but i need to put that to the whole line the whole row okay so let's do that now i know that this section can be full width but the if the line will going to be full width i'm going to have also those contact to be from here to here i have other ways to do that by adding the column and changing the width of that so you there are many ways that you can do that maybe you can put here 1200 but i think this will change too much when you are in the mobile so the way that i'm going to do is by adding another section here and this section will go on top again it's not the only way that you can do that but this is how i'm going to do that let's do that again let's move that on top and i cannot move that on top let's go and put that on the bottom maybe it's easier yeah okay so now that i have done that i can go and select the section and go into layout and select that to be full width section okay now i can put those two elements inside that column or i can grab this column and i can move it can i move it no i cannot move it okay so let's grab the elements and let's put that in that column okay everything is changing and grab that and put that on top again okay and put that here and then i can go ahead and delete that somehow from the row okay so edit row and let's delete the row yeah okay now that i have that and maybe i could move the row another column but i didn't think that again there are many ways that you can do the same thing that i'm creating but i think it will be easier in the mobile view and this is why i'm creating another section here so let's edit the column let's select again the layout and let's put here zero and then let's go for the positioning and here i'm going to select space around and i'm going to put here center okay not center sorry uh yeah center and here it's not space around space between okay and now i'm going for the section and i'm going to put the line in the section so let's go here let's select this section and let's go for the borders and let's select the border and unlink that zero on top zero on right zero left and one on bottom let's select that to be solid and select the color to be this one but with the transparency so let's go for 0.2 something like that okay and this will take the line from the one end to the other let's see how it looks in the front end and it's not looking as i want it for some reason the uh this section is on the bottom and this is on the top but here it's looking okay i don't know why it's looking like that let's save that and refresh now i know i don't know why it's looking like that even though i have done that here let's close that and open that again okay i'm going to save that and refresh the back end so save and refresh and see if it's going to change the way it looks okay so for some reason it did changed and i'm going to again go and grab the section and move it on top okay i cannot do that maybe this section can go and maybe i can grab that and go put that on the bottom okay let's save that and see if that worked and it didn't okay so basically it doesn't want us to do that and maybe i have to go and delete that and redo that again so this is clearly a bug or something is missing here i'm going to delete the section okay i'm going to save that i'm going to see if that worked okay and then i'm going to add a new section and i think this is the easiest way okay and here i'm going to add the logo select it put here 120 120 pixels okay and then let's go and add also the nav underneath i'm going to select that to be the main and now i can select the column layout put here 0 and here go and put justify space between and align center let's save that and see how it looks okay great that worked okay now as i can see this is not full stretched and i don't know why because i thought i have done it to be stretched but it doesn't matter we're going to see it later on yeah now it's stressed those are some bugs that or maybe i didn't save i i don't know maybe i didn't save it even though it should be saved automatically okay so let's refresh that just to be that in width and it doesn't confuse me also i like the speed of the back end as you can see it's very quick this is the view js that it's uh for the speed and now that i have that i can go ahead and continue building i think we're okay with that so let's go into the menu and here i'm going to select and change some things let's go and select as you can see we have 30 pixels for the market left so this is the space that we have between the links and here in the typography i'm going to select the text color to be black and even though it should be black because i have select everything to be black but since this is the menu let's go away with that okay typography i'm going also to go maybe for a little bit of 18 here yeah i think 18 is better okay and then i want uh let's go for when we are in a active typography and here i'm going to select for the active color to be uh this one okay so whenever select home and this is active it will have that color now one when i hover it i want to take a little bit of another color so i'm going to select here that says hover styles and i'm going to select the typography and select here the text color to be this one okay remember to close that or else you will change the typography everywhere else let's save that and see how it looks in the front end okay it's loading and if i hover i can see that blue now remember that this is not the home uh page this is basically the template and this is why this home doesn't light up even though we can see the homepage but this is the template the template header and this is why we don't see that in the active uh color okay let's continue i'm happy with that but uh the thing that i didn't like is when i hover into the services i cannot see the sub menu item so i have to go in here and play that with a little bit and for a little bit of time when i can go and select here i can see the sub menu so it's a little bit difficult to see that because we have too many icons in here so i have to go and see that with from here services okay i don't like the black color here and i want to change also the text color to be black here in the background white of course so let's go to the sub menu and here we have the background and i'm going to go here for enough white so i'm going to select here the white for fff and i'm going to change it a little bit from the lightness and i'm going for something like f7 let's see how it looks how this looks and if it's looking good i'm going to save it let's go into the typography i'm going to click here let's close that okay typography and select that to be black okay and let's save that and see how it looks in the front end and i think it's an okay maybe it's a little bit gray so i can go with a little bit of less gray f7fa maybe an fa no let's go for an f7 okay this one let's save that let's select the color let's select the save and here we have the color five and i haven't seen if i can change that in the palette so let's edit that and in the palette i can not do that let's uh i cannot change the name of the color as i can see and i wish i could and not be named as color and then color number five but something different okay doesn't matter so let's go and continue let's save that and see how it looks in the front end okay news services and i think it's better this way now i think that this is a little bit closer to the services and i let's see if i can change that let's go for the padding and let's go for top and let's select 20 and 20 everywhere okay unlink that and delete from the right and the left okay and save that and see if it's going to change let's refresh first and i put that in the sub menu items so that was not pretty uh smart from me also i press the delete even though i wanted to delete the uh content of that and it delete the whole element so this should be something that you should be careful because i have seen that it does sometimes do that so i have to go and undo that and the undo is not working great so maybe i will see that it's not how i have already created let's see refresh okay it's okay and now i can go into the sub menu and select that and click the backspace i'm used to clicking the delete and delete offense delete the whole element okay let's go to the top menu and select here for the padding let's unlink that and select 20 and 20 for the bottom so this will push the sub menu items to the bottom and let's save that and see how it looks as you can see now the service is looking here now of course these services should have some a little bit of space and i think that i have deleted that the white space that has inside so we're going to fix that as well sub menu and here we had something and i don't remember what let's go for five and link and see it doesn't populate in here let's save that and see here okay it has a little bit of space here maybe it should go a little bit more space so let's unlink that and go here on top zero and again i press the delete because i'm used to do that let's undo okay and let's select the menu select sub menu and here i'm going to put for the sub menu let's unlink that top 0 right 10 bottom 0 left 0. okay let's save that refresh and doesn't have the left have i put a left no left is a zero for me for some reason i put that on the right so backspace remember to use backspace zero here and save that and let's see for the header okay now it's okay i think it's better okay and maybe i could go with some curly corners but i'm not going to change that let's go for the mobile menu now and once i click the mobile menu i can see the mobile menu here i'm going to put that on right because some more visitors will be right handed and the alignment will be in the center and the width is 300 pixels maybe i could go for 200 pixels something like that okay background is black i'm going to leave it as this background filters uh background shadow i'm going to not going to change any of that top level menu we have some padding in the right and we have some padding on the left we have the typography here i'm not going to change that but maybe i can change a little bit the text so i can go for a 15 pixels something like that and the sub menu can go with maybe 14 so it will be a little smaller okay so uh everything else is looking good and i'm not going to change anything else okay let's save that where's the save here's the save so let's see how it looks in the tablet mode so this is how it looks so i need a little bit of space in the columns right here so i'm going into the column and let's go into the layout and select that unlinked the margin and now let's unlink the padding and put here the right to be here is going to be zero okay right should be maybe 10 and left should be 10 also something like that maybe 20 20 and 20. okay and this is also something that i should do again so let's go and unlink that and put here right 20 and left 20. okay it's looking fine let's go to mobile landscape and this is where the menu changed and it went to that to a hammer menu and i think it's okay i'm not going to change that and let's go for the porter mode and also we are okay with that i don't need to change the text size maybe i can go for 12 or something but i'm not going to do anything else around here i think we're okay okay let's save that again and we're good to go with the header template you don't have to change the condition of the template it basically will apply everywhere but if you want it you can go to the template settings condition and this is the condition where the that template applies to okay so let's close that and let's close that and close that again okay so let's go to the templates let's refresh and here we're going also to add the footer let's add the new let's name that a footer okay select footer and select publish okay let's edit with bricks and since we don't have any content let's go into the template settings let's go populate second content populate content single post and select home page apply okay let's wait and here we are okay let's enter the new section okay here we're going for a dark background probably so let's go to edit section let's go to the background select the background select background color dark layout and full width okay then we need uh three columns so basically here i'm going to use the three columns because i can do that with the three columns or you can do that with space uh again around space between something like that maybe we can do that instead the fewer uh elements that you use it's better for your html code that you produce and if you have seen any of my videos i do really care about the code that i'm building with my websites so let's see if we can do that without using any other columns and let's go here and add first the logo again logo and here i can put the logo here okay and so select the image select the logo which doesn't have an alternative text because i forgot it okay logo and here let's select here 100 pixels to be a little bit smaller than the logo on top okay then i'm going to add inside here the footer menu and then i'm going to add also some social icons again so let's go for a menu nav menu let's select that underneath that here and then select that to be the footer i cannot see it no i can see it even though it's black and i'm going to say that i cannot see it because it's a black background and let's go and edit the element and let's put that in vertical and let's go for the top level menu items and select the typography to be white this wide okay then uh we can go and add the third element and then we're going to align those so let's go for the social social icons and put that underneath the menu and i misplace it because i left my click so let's go for socials so cells and i didn't grab it okay my mouse is doing something wrong with me okay so we have that and let's go and see the structure because uh hopefully i haven't done anything wrong i have one column yeah with three icons okay so now that we have those three i can go and edit the column and i can go and select the layout to be let's see if we can do that and let's go for a space uh between something like that no space around okay probably it will be the space between and i have to select here to be uh the width to be auto automatically because the logo will take automatically the width the menu is going to do the same but this will take the width of the whole row so let's edit that element and let's go into the style let's see if it has anything here justify content and select the those to be uh bottom end okay okay and then let's go into style and then select the layout and select auto width okay so this basically worked so again the edit column and select that to be in the center align those in the center so this is how i want it but i don't want this big button so i'm going to edit the element and let's go and delete again the uh texts okay icon one icon two okay maybe i haven't checked it but maybe you can disable the labels inside the element and i wish you can do that instead of just deleting the text and having that to be named icons but since i haven't checked it i cannot start doing it right now obviously i'm not fluent in bricks i'm using it and creating something and i have played with that but i'm not fluent with that already okay and now let's go into the style and let's select the background and select the background to be color black and this is how i want that to be okay let's save that and let's how it looks in the tablet okay tablet it's okay landscape is okay but i just remember that these are not aligned because i have a little bit of a margin inside my column so i need to go and remove that so i have the same alignment in the header so let's put here zero and once i do that then i need to go into the uh portrait mode and select something different so here i need to put i'll link that and i need to put here uh right 20 and left 20 okay and then let's go into the mobile landscape and here i don't have the menu because it went uh in a burger in a hamburger icon so let's go here and let's select the menu and so my so mobile menu toggle and i'm going to put never okay and let's go again here and as i can see now this is displayed correctly and here we can go with something like columns like one column with three rows as maybe i can see here maybe it would be better instead of doing something like that but we are maybe okay with that i'm going to leave it as this and where you're going to see it later on how you can do a stacking for the columns so i'm going to leave it as it is here the one thing that i noticed is i'm going to put a little bit of space uh in the top of the logo and let's see how it looks in the front end before doing that so let's go here and visit this site and the whole the header is okay but as you can see the footer needs a little bit of space inside here okay so the footer let's go for the column and let's go for the layout and put unlink that and put here top of 10 something like that okay save that and here we going to see if it's grabbing the 10 no it doesn't so let's go and put that 10 also here 10 and for some reason that was linked i don't know why okay and i think work okay now tap 10 again it says that it's going to copy the 10 of the uh pc of the desktop but it doesn't and again it's linked even though i have unlinked it okay both are bugs 20 20 10 okay wake up save that we are good to go let's go for the home page and we'll start building the website hour after uh 47 minutes okay let's close the footer let's uh refresh here we can see both templates and let's go to the pages all pages and let's go to homepage and edit that with bricks okay so first thing first we have logistics fast and easy services and contact us here we're going to add a heading which will be logistics okay now i can click here that says edit element and here i can change the the alignment to be in the center but i can also do that let's see where it is so i can go into the style and i can go into the typography and align that from here text align in the center but i can also click the logistic text somehow let's see if i can put that push stat a little bit forward and now i can maybe triple click it no i cannot for some reason i cannot triple click it and select that and i know that it will give me some settings above that but it doesn't and maybe i'm doing something wrong but uh you should check that and let's select here edit heading one and let's go to the styles and typography and select here the uh text line to be center okay let's try again triple click it no it doesn't work for me for some reason yeah now i it i did it so i had to first i don't know click with the right click of my mouse something like that i'm not really sure why i do that now and as you can see now i have the align in the center and if i change that to be in the right i can go into typography and i can see now the text align uh it's not okay it's not anything changed but if i go and see select here the left uh this should go into the left no it doesn't okay so something is wrong with those uh settings probably they should all already work together also but they don't okay let's uh see later on if that will be fixed okay let's click outside and let's click here and edit here let's select first the element and here i have maybe a little bit of space okay we have some padding i'm going to remove that and i press delete again once again because i don't know i'm an idiot okay let's edit that select the style layout okay and backspace and backspace okay now that i have the logistic let's add a text element which will say something like fast and easy services fast and easy services okay and now i can change the style and let's go for the typography and select that to be 20 maybe something like that and the text color should be black okay after that we have a button let's go and add the button okay and the button has some styles that you can select and change we have primary secondary light dark muted and all those are the colors that we have changed so when i select the primary it should go for the blue because my primary color is blue but it doesn't change to that for some reason even though it said here it has the those although the settings that i have select in my style and that style should be applied everywhere so even here and let's select uh the uh default i don't have the stratos template haven't that been saved i don't know it has a lot of bugs for some reason maybe i should refresh the page maybe let's see okay and let's see here now into the settings and page settings and into the not page settings into the theme styles and i don't have the style that i created this straddle style for some reason even though i have done that and this is something that confused me okay stratos create and let's go into the condition and add those into the entire website delete that okay and colors let's see none of those colors are as supposed to be so this is the primary color this is the secondary color okay i haven't changed anything else let's go for the typography and let's go for the body to be the ubuntu okay let's go for the headings and let's grab that to be roboto and i saw that the menu changed even though it shouldn't because it was applied everywhere and i'm sure that i saved it but it doesn't matter so we have those settings and the body should be black and the text colors be black as well i think we are good to go okay i'm going to save that hopefully it will apply everywhere conditions his entire website and i will have it everywhere now maybe because i created this page before creating the plate it didn't take that but it should this is how it's supposed to work okay heading which will say logistics after that text which will say fast and easy services okay and you can go also and align that in the center from here and here i'm going to triple click it and align that in the center okay and after that i need a button okay the button is now blue okay and now i can go and select the button that it says what says read more contact us okay contact us i'm going to change a little bit of the settings of the button so let's first change the style let's go into the typography and i'm going to select the font size now i'm going to select the text color to be black okay and then i need the background to be transparent so let's go for a color and let's select that to be transparent okay after that i need to have outline okay let's say that and now let's go let's really click the button to see if i can align that in the middle with another way except of the one that i know already that i can do i don't see that i can do anything else so i can go and select the style and select layout and select here to be auto width okay once i do that i can go into the column and this is all applied everywhere i don't know why i have maybe to refresh the page and let's go and select the layout and select everywhere in the column to be in the center okay let's save that and see how it looks in the front end and then i'm going to create a little bit of space inside so now i know that i need to go and put white here so let's first add an overlay color to the background so let's go into the section and let's go to the overlay and select here overlay and then add color let's go for the black and let's put a little bit of transparence to 0.5 okay and then select first the h1 and select here that it's an h1 actually and style select typography and text color to be white okay then logistics typography text color again white and then the button typography and then text color to be white okay let's save that and see how it looks and everything is okay expect except the space between so let's go to the logistics and let's add a little bit of space around that layout we are in the button no i click into the heading and let's go to the layout and put a margin of 20 maybe 30 30. yeah let's go here and put layout and then lick and put here 40. now i know that this has also a height element that i have to put one line height and that's why i'm putting here 40. so let's save that and let's see how it looks in the front end okay i think we're okay with that so let's continue let's see what we have next in the video and once i scroll down i will see so we have an about us page and then we have some services okay so let's go for the about us page so let's add next section add the section and here we have two columns the image is on the left and the right which is the about us content so let's add a column here we are going to put 40 for the left okay 40 and here we're going to add the image image okay which image is that this is the one with the calculator so let's select the image and let's select that one and this is the logistics so it's about us something like that okay about us and insert that after that i'm going here and i'm going to add a heading and here i'm going to select about us here it's an h2 and then we have some content beneath that so we have some text okay which are uh some lorem sum and also we have a line underneath so let's grab the lorem ipsum let's grab until here okay and let's put the space maybe in here terpsis their piece okay here and then we need to put the separator so let's add a divider divider here and the divider height is two pixels three pixels okay the color is this one and the width is 100 pixels okay let's say that as i can see the line hasn't changed here but i think this is because of the element as i can see this is the green line of the element and not the actual line that i'm building and let's go and refresh the page here and as you can see this is the about us and the line that i have selected and this is something that should be fixed because i cannot see the line and i cannot style it from here so let's put here 80 and this should be a little bit better and align as you can see you can put top start center bottom or anything else i'm not going to change it i like how it looks okay let's see it again and maybe i need to push a little bit down no i don't want to i don't have to anything else let's save that and now i need to put a little bit i need to put a little bit space on top and bottom of the section so let's go and edit this section and let's edit the layout and select the padding to be 75 and 75 because i like this number from oxygen okay i wish this could be added automatically everywhere but as i saw in this section and in the uh section and in the settings of the section the default settings i cannot put padding i only can put margin okay add the next section which will be the services so here we're going to add another column just to see how it looks and then i'm going to clone that two times and i'm going to delete that okay let's add first an image image okay and the image is one with the i don't know what is this some papers and obviously we have also the services uh that i forgot so let's go back and here i'm going also to add a new row and that row should go on top okay so i have a new row here and i have another row with two elements okay now uh let's go to the section and let's go to the layout and select that to be full width no first let's add a background just to show you how it's going to be full width even though you should know it by that by now and let's select the color this one so it will be a little bit gray and it will separate me from the about us section let's go to layout and select that to be full width so i have that color okay next we're going to add some padding inside here so 75 and 75 and now i can go and add here a heading element which will say services okay and this should be h2 and i can triple click it maybe and put that in the middle now if i right click i think it's easier now to triple click it so align that in center and then close that okay now i don't know why uh those becames those became too little less something is different here from for the columns something is doing that incorrectly as you can see this is how those two columns are looking so i'm going to delete that i'm not going to search what is doing wrong and i'm going to add another row beneath that and i'm going to add a column okay maybe i push something i don't know but i'm not going to change anything and i'm going to do it again from the beginning so let's add here an image okay and let's go here to the services and i need also to put a little bit of space there and i have three images taxi service one service two and buttons okay let's do that image select image and first is this okay which is the taxis taxis taxes okay taxes and insert that and where did it go i don't know let's select the structure and let's see the section row column heading okay row and we don't have anything inside here okay let's do that again let's add the emads and let's select image and select the taxis and insert that and now we have the image here underneath the image let's add first the services and add a little bit of padding or margin better 20 okay and let's add underneath the imads heading which will be taxes taxes and this is an h3 okay it's an h3 and i'm going to put that in the middle i can do that from here at this at this moment okay taxes and then i have a button button okay and let's see how the button looks okay it's just a blue button i don't like the color of the button it's horrible maybe the secondary is better maybe okay i'm going to leave it as it is the secondary color but i hopefully you can know now see how you can do that but i'm not i'm i'm going to change the hover color just to see how we can do that so here as you can see we have something for the hover effect so i'm going to select the cover and i'm going to select the style of the button and i'm going to select background and i'm going to select for the color uh this one okay so now i'm going to save that and as you can see you cannot see here in the back end i'm going to disable that and if i go and refresh here i'm going to probably see that yeah as you can see you can see in that now the next thing that i'm going to use is i want for the buttons to have a transition so i need that to be something that i have here so how we're going to do that we're going to do that by going into the hover style for the button and we're going to into the css and here that it says css transition you can put here all 0.4 or 5 is in this is how it has this moment is 0.2 but i think it's a little bit small for the 0.2 so all 0.5 let's go for 0.5 and this is the transition that i have put i'm going to close that and save that and refresh here and now it's a little bit easier i think and this is something that should be done in the hover okay and you can do that also in the settings and in the whole website okay now that i have done that let's go and edit the element and let's go for the layout and select the auto width and now select this column and select that to be in the center and let's align that no justify in the center okay now that we are okay with that i can duplicate the column clone the column and i can do that again and then i can delete that now as you can see you cannot see the images here and this is a bug and if i select here the column let's go first to the structure third row uh sec third section third second row and second column and here in the image i'm going to edit that and once i click the edit this image is going to be viewable okay let's see what image we have here we have the one that holding the pencil and let's go and edit that this is the one so this is the service to okay and this is uh instead of taxis let's click here and this is service 2 services 2 or service 2 and here it says i am a button but it should say read more probably read more and i'm going to copy that and put that also here read more and hear it more okay now here let's go into this column not the column i'm going to put the structure third section second row third column edit the image and select here and put the one with the hands and the tablet okay which is here and this is the service three and i put service because i didn't have any other thing to add except of taxes because i don't know any other services for logistics so let's add services three service three service three okay now let's uh change the read more links let's go to the tech buttons and here i'm going to select the internal post page and here i'm going to select the service one this should be the service too so select again the internal and service two and here internal and service three so these are okay i'm going to save that and we can go to the next section let's see what it is it's what they say about us okay so let's go and do that let's add another section add section okay this section is also going to take some padding 75 75 okay and here i have a heading and also you can go and copy uh the settings from here if you want by clicking the element and then right clicking the edit element and copy adding styles and then going into the element right clicking and then pasting heading styles and hopefully it will change everything except of course the heading 3 because this is an html and not the css thing so let's add an h2 and here let's change that to what they say about us what they say about us and since i haven't put those in capitals i can go and do that from the style typography and go into the text information and uppercase no capitalize capitalize is the one so what they say about us something like that uh i forgot also to do this uh white space into the column so let's do that and see how we can do that let's go into the column and here we're going for the background and we're going to put here a white color this one so it will change a little bit from the others and then we need to go into the column again and select the layout and here on link that and put the top on zero right and zero left on zero so now i have that as you can see and the button has a little bit of space so it's okay i'm going to copy that copy and let's try to paste that here paste and paste paste and now i know that they don't have any space in between so let's see how we can add the space and let's save that and probably you can do it with more than one or two ways edit the row and see if we have something here from the space between the columns okay so we have columns and we have the width of the columns we have the direction justify and wrap okay so let's uh we're not going to do that from here we're going to edit the column and i'm going for the layout and i'm going to select the width to be 32 percent instead of 33 let's go for percentage and let's go for 32 something like that and then a little bit of marking on left and right unlink that and let's leave five pixels on the right and five pixels on the left okay hopefully this will do let's put that in 32 pixels 32 okay so let's copy again copy styles and let's paste it here and let's paste it here again so now i have the space that i wanted and i can see that in the button i don't have any space so let's edit that and it shouldn't change i have the padding and i have some space in here but for some reason i didn't also it says linked even though i have unlinked it and those are bugs that should be fixed okay 20 let's go for 20 and i think we're okay and i'm going to edit that copy and copy style and paste that here paste and paste okay and probably i also need to put a little bit of round corners so let's go for the border boxado and let's go for the box shadow to be a color of black but with a transparency of around 20 okay and here we are going to put zero 0 blur 5 and spread i don't know 5 something like that maybe a little bit less of blur and less of spread also you can do that as a hover section hover effect and this will change when you hover and then we're going for to put a little bit of round corners and i haven't i don't know how to do that maybe it's in border yeah it's on border and yeah go for 10 maybe something like that okay i think i have put that correctly but it doesn't look very good and maybe it's because i am seeing the blue lines here the blue line of the column let's copy that to everywhere copy paste and paste and save and see how it looks okay and i don't like that the image doesn't have the route corner the round corners so i need to fix that and i'm not going to change anything else from here so just do that select the image let's go to style let's go to border backside let's go to border and select the unlinked those and put the top obviously i need top left right and the four corners even though i have a top right bottom left this probably means top left i don't know let's put here 10 and yeah it means it means top left and probably this should mean top right i don't know yeah probably so this should be also something that should be changed let's save that and see how it looks in the front end and now uh these corners are correctly but as you can see the uh element that i'm was changing is the box shadow and not the uh the column itself for some reason and i don't know why this should happened okay i'm not going to change anything else here i'm going to leave it as this and i'm not going to copy it within the style because i don't like it i'm going to leave it as this because it's clearly a bug and it doesn't suck i cannot do anything to fix that let's go to the next one and let's go here and add here the testimonials so let's go and type that testimonials testimonials okay and testimonials this is one i'm going to put that underneath and i'm going to leave how much space was it here it was i i think 20 pixels so let's add here 20 pixels for the uh element edit element style layout okay 20 it grabbed the as margin when i copy the uh heading great and let's go and edit the element and let's go into the content testimonials and here is the testimonial kim nam natamo okay the one and only and i'm going to clone that clone that close that i'm going to make four testimonials okay so this is the first one and this is the testimonial one test one and then i have the test two no this is the first one i cannot type today okay then i have the test two test two then i have a test three and then i have a test four okay four testimonials let's go into the settings in this initial slide if you want to slide and start from another one items to show i'm going to put two here okay items to scroll one is good spacing in pixels i think it's okay with that align items i'm going to leave it as it is align text effect slide yeah and then i'm going to put auto play and i'm going to put animation speeding in a second it's okay uh let's see if i can change how many time it will take to to change the slide image this is the settings of the image okay uh arrows i don't want any arrows dots maybe i want some dots yeah but they are not in a good place okay let's delete that and let's save that and see how it looks in the front end okay it doesn't have too much space here i think i should put a little bit of space more here but i think this looks okay let's go here and let's put in the style in not the testimonial in the element and let's put here the layout and put here 40 maybe 40. okay and let's save that and let's see what else do we have here we have a form send us message okay send us a message so let's go here and create a new section this section should also have a little bit of color so let's edit the section and let's go to the layout put here padding again 75 and 75 okay full width and select the background background and i'm going to put that and the off-white okay and here i'm going to add the heading okay the heading is sent as a message send us and message okay and i'm going to copy the settings from here copy and paste them here paste heading style okay it didn't take the changing space heading tile now it did take it so let's go here and put that in h2 and let's go and add an element underneath it this was this is the forms element forms element and for some reason there are many people that are designing which builder to use based on the form element i don't know why there are many people that are asking oxygen to create a forms element basically for me my personal opinion it's not something that you should share also is that you shouldn't care about the contact form inside a page builder if it has one okay great if it doesn't i don't really care i can just install a free plug-in edit will do so many more things instead of a pro version of a plug-in with a provision of a builder with a form element basically a free element like forminator freeform can do such many things if you add the puffy.net forms not puffy and not puffy.net forms you can easily create whatever you want and you can adjust it to the tablet and mobile version and it's a perfect example though you can use a free form and create some amazing stuff now there are many people that say that in oxygen they won't form from oxygen team because they want something that it will be light okay the form plugin will add some extra uh things inside your website but when we are talking about a good form like peernet form it will add i think six uh more requests inside the page six requests more form for a form it's not something that's a big deal if you add a map in the contact form you will add about 20 requests if you are the form you will add six it's not something that you compare between those two things so the contact form is not going to slow down your website and i don't think that oxygen will add in a contact form because of this opinion i think that they basically care more about the builder and they don't really care about the contact form because it's basically something that you can use in every other plugin and do your work your job done correctly if they bring us something hopefully it will be awesome because they're creating amazing stuff but even if they don't i don't really care about that okay now that i have set my opinion let's go and create something like that as you can see i have name email message accept and submit so let's see how we can do that name and here we need the label so so the labels and the labels let's go and change the label typography and select that text transform to be none so it will not be capitalized also i think they are bold so let's change the font weight to be 400 something like that or maybe 500 and the font size let's go 416 okay i think we're okay with that and let's go to the uh type which is text let's see the types just for you to know what forms you can create so we have text text area telephone number url email checkbox and select okay so this is a text the label is name your name which could go and let's put here five no 550 pixels 50 sorry required yeah it's required email let's go and put here again 50 not 150 50 and it's required also okay and then we have a message which will be the whole next area and it's required again so and then we have the show required asterix okay do that we have the placeholder typography we want to change the placeholder and you can do that uh filled background so you can change the background of the fields if you want the field border field margin field padding filter alignment okay and let's go to submit button okay this has been modern it says send and this should say submit or something submit okay this size default style let's go for secondary because it has a white text and it's better you can change the background once you hover it i'm not going to do that i'm not going to change anything else and then let's go to the actions so we have some actions after we hit submit and this should be an email and if you click here you can see custom redirect mailchimp send green user login and user registration so you can create also the login page and registration which is great and if you hit custom i don't see anything else that you can add with the custom i don't know why you should also add a secondary email if you want to add that to another person and these are basically features that you can have with the pnet forms for free okay so email i close that for some reason i delete all the settings so subject message from message from contact i don't know something like that then we have the default which will be the admin email or the custom email address or more than one hopefully for from email address from name reply to success message where thanks thanks guys or something thanks for contacting thanks for contacting us as we'll get back to you as soon as possible and error message something else spam protection if you add your google capture api into the settings you can have also this ma this spam protection okay i'm going to save that and this is the page that we have done we're going now to check how it will be displayed in the mobile version and we're good to go and start creating the second one every other page is easier it will be done in less time so this was the hardest one hard one okay let's see how it looks okay this is good this is good the services are good the what they say about us is good and this send us a message is good let's go to the next one which is here uh this is okay this is not okay i think because it has a little bit of text the services could go one on top of the other for me in this point but i'm not going to change those in here and also this i think should change to something else so let's edit the elements and let's go to the testimonials and here i'm going to change the settings and here item to show i'm going to put one okay hopefully it will change in the back end in the front end because in the back end it doesn't change and let's go and see uh here the form is okay maybe you can change that but i'm not going to change that in the landscape mode i think it's okay here but here we have some problems and we're going to fix those so logistics let's say that we want to change that from the for the mobile version so we want a little bit smaller let's go to the style let's go to the typography and select the font size to be 25 something like that so you should also put a little bit less of this one and maybe also the h2 elements as well i'm not going to do that but this is how you can do then you can go into the uh section here and you can put here for the layout to be less padding than uh 75 which is way big for a mobile version so let's bring that to 30 or something and this should be down to every section and we have in the page i'm not going to because i don't have that that much time for every page no i think this can be easy but see if it's easy i can do that fast okay yeah it's not too big of a deal 30 okay and i can put here to link those and this can be 30 uh in both those settings because we have the link so top and bottom 30. okay forgot about the link okay edit section and here link those and put that to be 30 come on 30 okay around 30 around 30 and then send us a message select this one and link it and put here 30. okay save that and then let's go here and select the row from the row you can change the layout so i'm going to put here the layout click it and here let's go to direction and we have side by side row and i need to go for a column and here we have column reversed stacked and then we have row side by side and row reversed side by side this is uh something that they misspelled because i think that they should have put here something like a stacked here so this is the stack that we want from the for the image first and then the text okay then we have the services let's go and edit the row and i need that uh this i can do that from the columns because i have put i think the columns width so i can go into the layout i can go for a width of the columns and here percentage and here i'm going to put 100 and i'm going to do that also here add column layout and here i'm going to put again 100 and here i'm going to put again 100. okay now i need a little bit margin underneath that so first here let's go and see unlinked and put a border margin of 10. okay and as i saw it for some reason let's let's link that and put that in 10 because it will be less than the whole page okay and do the same for this one or copy the settings from here and let's see if it's going to work now copy column settings and paste here paste okay and paste paste okay this should be one since i have changed that to the previous version okay let's see in the settings and see if it says one items to show probably one is good but it doesn't change here and here in this in the form i can go here in the fields and i can put here for the name and email 100 okay let's save the page and we're ready to go to the next one let's see the next one and let's drink something okay i have done already that i have done everything in here and let's go to the about page come on okay about a space we have about a space on top and then lorem ipsum at the bottom let's go and close that and let's go into the pages about us and edit that with bricks i didn't see what image i was using so let's uh take a little bit of of a step back and let's see okay we're using the handshake image so let's check here and let's select the edit section let's select background and the background is the handshake image this one okay insert that i'm going to put that for a full full width and i'm going also to put an overlay color of black black and 40 percent and 50 okay and select also to be overlay overlay okay and then i'm going to select here the heading and i'm going to add an about us about us okay this is an h1 and also for the uh section edit section we need some padding uh let's select that and put here 20 and 20 maybe 30 and 30 30 and 30 something like that okay 40 and 40. yeah it's looking about 40 40 something like 40 and 40. okay i'm not going to change the section anymore so let's go and edit the color of the text to be white typography text color white okay and let's make it a bold so let's go and font style let's font weight and let's go for 700 something like that okay let's say that and let's go to the page and i just remember that in the homepage i forgot to put the contact us to the uh send us message so let's do that also let's edit with bricks you can see that says here delete bricks data and you should be very careful because it will delete all the settings of the page so here we are going to go first into the section send us a message let's go into the section section and let's go into the css and select for the css id here i'm going to put home home hyphen contact okay let's copy that okay and let's go to the button select the button and select the link to be a section and the section id is just that one okay save that and see how it looks in front end refresh and then click here and we're okay okay done with that let's close that ok and continue here we have another section with the layout of the section and we have for some reason 40 40 i haven't added an injection i have just added that okay now i have a new section that will have layout and we have unlinked top 55 bottom 55 and here we have a text element text element with some lorem ipsum text where is my lorem ipsum this is the lorem ipsum and i'm going to grab everything and put that in here okay the easiest page from all for from all of the pages that i'm going to create and maybe i have too much of space on top but i'm not going to change that here doesn't matter you can do that yourself okay cool every time you save you see a different thing here i think it says cool and then i can save and see fantastic and then i can save and see sure thing and then i can save and see something else excellent and they have six or five different messages okay let's do not cl i'm not going to close that because i need to copy this section to be a little bit faster let's go to the next page which is the service probably okay so we have services and we have three images okay let's post that and let's go back 15 seconds okay and let's ah i didn't quite catch that so let's go into the services page services where is it services okay edit that with bricks let's copy the section let's clone the section not clone sorry let's delete that let's edit and let's copy section style also i can go ahead the save section has them played but of course i'm not going to use the same because i have to use another background and as i can see now i need to put the handshake on the on the background so let's go for the background and let's put here center center which i always forgetting so here let's go for center center okay and save that great and now i'm going to copy the section copy and let's go into the services and let's add a new section and so i'm going to paste now this section style i'm going to add the heading element and this is services okay it's an h1 it's a white and probably the phone weight is 700 okay then we have sections with image and text and let's add one section i'm going to add another column and this should be 40. okay and i have first the service one and i have missed the first one which is the taxes okay so we have taxes and we have the name and then the text and also the image is not in the middle as you can see here it's a mistake okay and let's add the image first image and the image is the clipboard so let's go here and let's select the image and select the clipboard this one which is the taxis okay great and here i'm going to add the heading the heading is taxes taxes okay what else do we have here we have also the text let's add the text underneath that and the text is lorem ipsum and let's go and grab here this text and paste it here okay let's put a space here and let's say that this is the text that we want let's go into the taxis let's go into that set say the settings of the column and let's go into the layout and put that in the middle if i had add them more text i would do that in the image but since i hadn't i'm going to put that in the center and this will be in the center the same would go for the image if i was going for a bigger text okay i'm going for the settings of the section and let's go to layout and let's select that margin let's select that padding sorry to be a i would not go i'm not going to do with 75 75 here i'm going to put 50 at 50 because i have text inside and i don't want too much of space everywhere and maybe it should be even less let's go for 30 and 30. i think it will look okay i'm going to clone that twice so let's clone and then clone again and now that i have that uh layout i'm going to change the uh this column so i'm going to grab the column the column the column okay here and i'm going to put that on the right okay so we have that and now i can edit the element of the image and now i can change that and put the next one which was and here's the service one which all those guys that are writing and let's go here and this is why i cannot see the image for some reason maybe i haven't copied that again i don't know so let's insert that and now that i cannot see the image let's go in structure let's go into the section let's go into the row the second column the image and edit the element and i push that twice and select that again and select insert probably it will bring me the element no it didn't okay again structure section row column image edit no it doesn't want to so let's delete that and now i can go and add the image again this is a bug and i can not see the column anywhere okay i'm going to put that in here and i'm going into the structure let's go into the settings row and column and column and here i'm going to delete that i really don't like this structure column and here i'm going to delete that yeah i'm sure and i'm going to grab the emats and i'm going to move that into this column okay and here i'm going to edit and select the image and put here this one and it didn't worked okay let's try another image maybe it's for some reason it has a problem with image no it doesn't want to work i don't know why let's see if this is going to work in structure settings row column image edit that and select i'm going to select the same image insert and it doesn't work okay this is obviously problem with the plugin it's a bug and i cannot do anything about that maybe i can delete this whole thing and i can re create that but i'm not going to do that hopefully they will change that to something so instead of an image i'm going to add maybe an icon let's add an icon and for some reason i cannot see even the column for some reason i cannot even see the column to do that i'm going to delete the column yeah i'm sure and i can clone let's clone the column and let's see now if i can put the image here okay and again i cannot see the the the empty element of the image let's select that insert and it doesn't want to be appeared okay i cannot do anything about that let's save that and see if it works in the front end services not here here this is the front end services yeah this is working for okay so basically i think i have to refresh this and hopefully it will all work okay and now let's go and fix all those things let's go and delete here this and yes i'm sure delete the element here i'm sure and here i have the image and the uh text so i need to go and copy that column and move it here and also put that 60 40. okay so this is what i was trying to do and of course i'm going to change also this image to something else let's grab something like that okay doesn't matter what it says and here is service one obviously it's not taxes it's service one service two two not one and this is service three okay let's save that and now i'm going to fix it how they look in the tablet i'm going to leave those in the tablet and for the landscape i'm going to select the row and let's go to the layout and select here to be direction column reversed no column row reversed okay then we have this one which will be let's hit the row let's select the layout and here we're going to put column stacked column reversed okay this one and here let's select again the row layout and select that to be column row reversed okay so this is how it looks with the image first and then the text and of course you can just go and if you want to remove some of the space i would do that if i were you and be creating this website now i'm not going to do that you have seen how you can do that let's close the services and let's continue with the next page which will be let's see we have the news and we're going to fix it last and then we have the contact which is something like that okay let's create the contact page edit with bricks let's go and grab the about us copy so contact create a new section let's paste section here okay and let's change the background image i don't remember if i have done that in the services but it doesn't matter i'm not going to do that now so let's go for the background to be different which is the contact and the contact has a phone okay this one insert and then we are need to do the heading and here we're going to put contact contact okay contact is an h1 and for the style it's typography white this white and the font weight to be 700 okay next we have what we have next we have two columns one with the form and one with social icons so let's do that let's add another section let's add another section here we're going to put 75 75 75 okay and let's add two columns here we're going to put the form you have already seen how you can edit the form i'm not going to change it again you can do that you're by your own right now i'm just going to i'm not going to do anything okay i was going to change the button but it doesn't matter here we're going to put uh an icon box okay let's go for the icon and let's select the icon the first one is the telephone number so let's select let's see the font awesome solid if it has a phone yeah it has a phone so i'm going to use that phone okay and then we have the icon color to be maybe blue okay something like that and then let's say text align vertical align text align to be left okay vertical line to be uh icon position to be left this is one that i want left okay left then we need to change the contact content content and let's put that content here i'm going to delete everything and here since it's html as you can see here in text so i can select here and put the number that i want 2 0 1 2 2 1 0 2 1 0 something like that now i wish i could add a link everywhere but i cannot do that and this reminds me of mid-love but i cannot do that and let's grab the h2 element so let's go into the text and probably grabbing an h2 h3 maybe h3 is better okay close that okay and then i'm going for the heading upography and i'm going to select the font size to be 20 so it will not be too big okay and the body typography okay i'm not going to change that everything else is fine let's go to the icon and let's see if i can select vertical line to be centered with top can i do that everything else anything else to uh center that i cannot see if i can do that icon size let's go for 25 30 maybe 30 something like that do not go for with it too big icon and maybe into the content you also need to put the link so you can immediately uh from a mobile phone click there and call somewhere okay so this is the one that i'm going to put and i'm going to clone that clone element and clone element and this is the envelope so the icon is the envelope envelope okay this one and of course the content now should be the mail so test at test dot dr and let's copy that and let's put that also here and here i'm going to put male 2 male 2 and colon okay apply that and we're okay and next we have the map okay let's edit that content delete it from the text so it will also remove the link visual okay maybe not delete out from the ctrl z can it do undo no it cannot yeah it it did the undo so content and select the text and delete that here and i'm going to put athens and 13. this is the map and the icon is a map icon map icon okay this one okay everything is okay with that and next we need to put a map underneath that which will be from the one end to the other and since we don't have an api in the map i cannot do that with the map element and let's add a new section so let's put here the map element and you're going to see that this is it says that your need to put an api key but let's see how we can do that without an api key so i'm going to delete the element deleted yeah i'm sure and i'm going to put here an html element html okay and in the html i'm going to delete everything okay and let's open google maps google maps okay google maps and i'm going to put here an address okay i have some settings that i can choose if i want something and i can say that i want here let's say that we want this one so now i can go and okay this is not what i was expecting to see i thought it was something different but it doesn't matter and says let's uh share it so you can hit this which will say share this and then i don't remember what this says but it's to embed them up i think it's embed map and then clone the html i can close that and i can close that again and now i can go and paste the row html so this will bring us uh what i have selected as you can see it has also uh the uh 3.9 with the stars and everything else is here and also you can press the direct so it's an easy way to embed a map without using the api key of course using the api and using the map element will give you more benefits maybe you can change other things like if you want the map to be different or you can do with a different icon here but i'm not going to change those things now if we see the code here let's go a little bit into the middle not the middle but let's use our arrows we're going to see that we have here width 60 which is the width of 60 pixels and i'm going to put 100 100 percent so it will go the full the full row and for the height i'm going to put here uh 600 maybe 600 pixels so it will be a little bit more for the height after that i'm going to go into the section edit the section and i'm going for the layout and i'm going to put full width section and then select the full width content so the map will go across the whole page and then i'm going to edit the column layout and select the padding to be zero so now i'm good to go let's save that and see how it looks in the front end and then let's let's close that we don't need any more contact and i can see now that i have them up here so it's great and let's see how it looks in the mobile version and the tablet okay tablet it's okay and this looks okay i don't like that this is stuck on top so let's change that from edit the column and layout and select that to be in the center okay save that this is okay and here maybe we can go like this it's okay i there's no need for me to change the form and put it on top if you want you can do that and then we have the map which is looking good and everything is looking all right and here we're okay as well maybe we can remove a little bit of space here and put it a little bit less and probably on top and here okay and we're good to go let's save that okay and next we have two more uh templates to create one is the archive template for the blog and the second is the single template for the articles so let's do that let's go into the breaks and templates and first let's go and see how it looks right now so let's go into the news and this is the news it says nothing found because i don't have any content inside here so i need to first go into the post all post and create free posts so let's delete that trust that and add three posts okay we have news one news two and use three news one news one okay then we have news two and then we have news three okay let's grab some content okay news one news two and use three perfect okay news one i need this to be my i'm going to copy that and i'm going to put that as an expert expert even though i know that bricks is not yet supporting that and let's go into the categories and select news and then go into the featured image and select one of those images probably here publish publish again close that okay post let's go for the categories news featured image select and put something else featured image select and put this one or this one okay and expert is this publish and publish let's close that and here again posts categories select the news featured image select the featured image select this one or this one it doesn't have alternate text please add artillery text everywhere okay expert paste that publish and publish the reason i'm adding expert because it's easier to do that for with an seo plugin it will grab the expert automatically and post that everywhere also when you share the articles it will show that and it's better for seo it's better for how it looks and everything else so let's close that and here let's go and refresh the news and this how it looks at the moment this is the default archive page okay let's go and contact close that let's go to the templates let's go and add a new template and here i'm going to put posts archive i'm going to select that to be an archive page and i'm going to select publish and once i select publish i'm going to edit that with breaks now once you hit publish and refresh here you will see now that it says that the post archive is default for the or archives remember that if you want to have different archives for different different categories you have to go and change that if you don't it will go everywhere uh let's open that also to a new page and i'm going to copy that just to have it how it was before and how it's going to end up so let's put that next to each other and you will see of course at this moment that they are the same i didn't put that next to each other okay now i did they are the same because i have to go inside and save once so let's add a new section and now that i have a new section let's save that and see how it looks in let's refresh and hopefully it will change as you can see it's empty now we know that this applies to the all the archive pages and if you want you can just go ahead and select the conditions we're going to do that even though we don't have to just for you to know where it is so edit section let's go for the layout and select a little bit of padding let's go 450 and 50 so it will not start from the beginning and inside here i'm going to add the post element posts element okay the post element is applied but it doesn't know what to grab so i'm going to say first then i'm going into the posts and let's select the post and select here the terms and select the news category and now it knows that it should grab the post category let's save and also let's go into the settings and let's go to a plate settings and condition and here i'm going to click plus select here the archive and here in the archive it says some things it has only three but if i think i save refresh the page or just close the condition check something else and go into the condition and archive again i don't have anything else okay select here terms instead of condition and terms select news and this is how you can select the news category and only that so if i save that now and go into the template sends refresh it will say that only the terms news so the news category will be applied and if i go and refresh here i will see now that okay i'm going to put the title just to know that this is what i'm building category news says here so i can do that as well i can go and put the heading here and it says heading and you can put here category if you want and then add dynamic content the dynamic contains by adding here and here i can select the category or something else different so here category and this is the post terms category so in the front end it will be replaced with the category i'm going to put that h1 and i'm not going to style it anymore let's save that and see how it looks in the front end okay category news maybe put their semicolon a colon okay next let's go to the post element okay so we have the post type it's selected you can say as say that you want to populate the pages or the post order by date or there are settings descending post per page is 20 i'm going to leave it as it is include post or you can exclude post by id if you want and then let's go to the layout and the layout is grid list mastery or metro and this is the metro this is the mastery and because it's the same image it doesn't look too different but if you do it with different images it will change a little bit and i'm going to beat grid and i'm going to change it a little bit so let's go for three columns and spacing in pixels let's go for uh 10 because i like it more let's go for reading mods and let's select that we want the image grid ratio to be 16 by nine because i'm used to working with uh this aspect radio in images then we have the fields in the fields we have a title and then we have the meta and if i select the meta i can see that it has the author which i'm going to disable i'm going to leave the date but i'm going to change it how it looks right now and then we have the expert which i'm going to delete because uh this is what i said before that doesn't support the export that i put if i go and put to hydropixel you will see the whole text it doesn't grab the expert from the posts in the side bar that i checked it does grab the content and add the expert from there so uh hopefully it will be fixed let's go and delete that and then i need to add another field and you can add as you can see this type of things and i'm going to put a read more and i'm going to leave it as a read more and i'm not going to put overlay let's leave it as this okay so we have the title if we want margin or padding in the title if one background color border typography i'm going to leave it as this but i'm going to style those in the middle okay let's go for center and it didn't change maybe it will do that later on so let's uh close that yeah it going to do that later on i keep forgetting where i should put that so let's go for the meta let's go for typography and i'm going to put the text color to be black but the font size i'm going to put here 12 maybe 14. okay maybe 13 something like that okay then i'm going for the expert then i'm going for the taxonomy i don't have a taxonomy i have the read more so i'm going to style the read more and i'm going to unlink it and give it a top margin of 20 and once i do that for some reason goes in the middle i don't know why okay then we have the content okay select the content and here i'm going to select the middle center and everything is going into the middle how i want it and this is how i'm going to leave it okay then we have the overlay if you want to overlay those so when you hover those you can do something else i'm not going to do anything filter you can add some filters for the categories or tags and have those to be selective what you want and then we have the navigation so uh here we have the next and probably after something like that so i'm not going to put that also and we are okay with that i'm going to save that and let's refresh the news and see how it looks okay and this is how it looks this is the before and this is the now okay let's now open uh i think that this should be a little bit different it has a white uh text here but here we have a black so you can go and select the fields and maybe change that so let's go here to the type taxonomy read more and typography and select white even though it is white here but it doesn't in the front end okay let's refresh now it's white okay i am not going to close that i'm going to open the news 3 and i'm going to open here the news 3 as well and this is how it looks right now this is the single uh template and this is how we're going to uh change now this is what we're going to change now so let's close that and let's go to my templates let's add a new template and here i'm going to add a post single okay post single and i'm going to select here to be content okay publish and edit with bricks okay once you do that and refresh the page you will see that i have the single and the single because it's a content it doesn't have any condition so you need to put condition in the single uh absolutely you cannot leave it without so let's go to the template settings and we're going to set conditions and here conditions we're going to select the post type and the post type is post and here you have only the post if you had any custom fields sorry any custom post types you could use that and add something else here i'm going to save that and here is what we have at the moment and we're going to do that a little bit different okay so first let's add a section okay and in the section i'm going to go into the background and i'm going for the background to add the image but i'm not going to select here i'm going to select the dynamic data and i'm going to select featured image okay now that i have that i'm going to hit save and as you can see i cannot see anything else in here this is because i haven't select what i want to see inside the template so i need to go into the settings template settings populate content select here and single post and then select what post i want to see i'm going to select service 3 because i want to see this one because this is what i'm not serious to sorry the a news three not service three we're not going to see anything different here because we don't have anything different inside this template so instead of select three this is the news three news three sorry apply and now we're going to see the background of the section okay and i select the new three because this is the same from here and we're going to see the same one okay let's select the section again background select the background and i'm going to select here to be center center okay and here if you want to be fixed or scroll i'm going to select fixed just to have those effects that we have here and then i'm going to add here some things inside here first let's go into the layout and let's select to be full width and then give it a little bit of height like viewport and maybe 50. something like that i'm going to save that and now if i go to the news and refresh i'm going to see how it looks and this is why i kept that open because i want to compare it with the one that we're having right now okay here we're going to put the title of the post like it was before so i'm going to hit add and here you can add a heading you can do it with two ways you can add a heading and select instead of the heading to show here the post title which will show us here the post title venues or you can do that by going into the plus and going down into the single here and select the post title and put it here this is the exact same thing but since i i can see now the news 3 instead of the post title i'm going to use that so keep in mind that okay delete yeah are you sure so keep in mind that you can do it with two different ways so we have the news three which i'm going to give it a style which is a hero style here okay i'm not going to change anything like that and i'm going for the typography and select the text align to be centered center okay after that i can go with the date that the published and the comments and the these are the meta tags so i'm going to add the meta tags so add metadata ok meta or meta okay and then we have the author we have the day to date last modified and the comments count i'm not going to use the author let's delete that i'm not going to use i'm i'm going to use the date i'm not going to use the date last modified or maybe i should put the last modified i'm going to leave the last modified because it's better and i'm not going to use the comment count okay let's save that and see how it looks in the front end because it doesn't populate in the back okay now i can see that hopefully with the refresh it will fix that so basically whenever you have problems you should refresh the page and now i can go into the style typography and select that to be in the center okay and this is okay i don't going to change that now since i don't know what images i'm going to use you can see now it has a white space a white text here but they don't have i think the background to black but i'm going to do those things i'm going to add an overlay color of black overlay select the overlay and add the color of black and then 0.5 okay and then use style typography and select here the white not texado sorry text color to be white okay then here also these elements typography and select that text color white okay after that we have the content okay so let's add another section inside that section we need to add a little bit of space but we're going to see how it looks first and let's grab the uh expert post content this is the one and i'm going to put it here now it has enough space i'm not going to change that and i'm going to save that and see how it looks in the front end okay now when i scroll you can see that the images stays fixed and i have this effect okay and underneath that i have the information of the author so i'm going to add that just to have it something similar and i'm going to do that in another section and add let's go to single and see what else do we have so we have the author and let's put that here and we have the all author post and let's see the bio and show the bio okay and post and so link to author post okay so it will removed anything with the link it will not have the link of the author and not it will not have the link and the button okay then we have uh relative posts and then we have the comments so we can do that as well and let's go to the plus icon and let's see what else we have here we have related posts so we can put that in here and we can say the query that is three radio post order by random and here is the category so the common taxonomies is the same category and then you can change whatever you want the great thing is that i cannot see the same article so i cannot see the news 3 even though i have selected the max related pause to be 3 and let's go to the fields this is the title this is the meta which i'm going to edit and remove from the meta can i remove anything a title metaexpert it doesn't seem that i can remove here what i want okay expert i'm going to delete the export here i don't like that here and if i could i yeah this is where i can delete the author and the comments okay so leave the date only then we have the content and probably i should put that in the middle but let's see if i can can't do that easy no i have to go into the content and do that i'm not going to change that you can do that yourself and then you have also the comments so comments and you can put that down here also we have the post navigation so it will show the next and previous probably articles post navigation so you can see that it has news and changed how it looks so again for version one this is pretty great great let's go and put on top of the here the uh sharing icons so let's go for sharing social sharing and let's put that in here and these are the sharing icons i'm going to justify those in the center and you can remove whatever you want i'm going to leave everything as it is and just put a little space underneath okay let's save that and see how it looks in the front end great everything is looking great okay so let's go and take some speed measurements i'm thinking work okay without i haven't changed how it looks in these mobile and probably i don't need to do anything else yeah i think we're okay with we don't need to do anything else and probably i should put inside the archive page that i don't want to show three uh posts in the same row but i'm not going to change that now so let's go into the homepage and here i'm going to copy that and remember that i haven't used any uh plugin for casting and in the video that i'm using that have created the same layout with cadence theme i'm using a plugin for casting but here i'm not going to use any so let's go to the end of the video which are the here i can i am installing russian plugin and here i'm going to check the website so let's keep the play and here i have the 0.5 for the home page and i have 10 requests and 312 kilobytes let's see what we have here we have not here here we have 1.2 seconds we have 13 requests and 458 kilobytes okay remember of course we have lazy load but i don't know i don't have any uh caching plugin enabled if i had this will be a little bit less because i wouldn't have the javascript and probably i would have less css okay i'm not going to install any other plugin of course and let's see what we have for the mobile score and the desktop score from google inside and we have 94 for the mobile and 99 for from the desktop here we have 85 for the mobile and 98 from the desktop so i think these are very good uh speed test speed results they're very good even though i don't have any casting plugin enabled so uh let's see uh first before the review just see the elements that we have to play with and then i'm going to make my review let's go into the pages and maybe let's go into the pages where the pages pages pages all pages and let's go into home and edit out with briggs and let's see what i'll whatever we have for the elements what else okay so we have the general divider icon box list i condition tabs forms maps alert and animation text countdown counter pricing tables progress bar pi chart team members testimonials html5 code and logo then we have the media image gallery audio carousel slider and svg we have social icons facebook page instagram feed we have the wordpress posts sidebar magnification menu search shortcode and the wordpress widgets here and then we have the single elements so my review first of all let's say again that this is the version one this is the release the initial release i know that this builder was ready about nine or ten months ago if you go to the official youtube channel you will see videos that are nine months ago they did not release i think thomas is the name of the uh seo and the one that is uh personal about the one that is the head of this project and he didn't release the project until it was ready which is great because it has fewer bugs it still has a bugs but it has fewer now i think it's an amazing builder i'm really happy with the results but i cannot compare it with oxygen many of you asking me how it does compare with oxygen i think it does not i think it can compare with brizzy and elementor it cannot compete with oxygen and it cannot compare with xeon builder and i'm talking about the workflow you can see the results you can compare the results with every other builder but how it works it's basically closer to elementor breezy and of course divi oxygen is using something different with custom classes and you can use classes to the whole website and then go and change something and it will change everywhere here you cannot do that you have to go and right click and paste everywhere i like better the classes from oxygen i wish i could do that here but i cannot i like other things in oxygen probably we will see some of those here they people from oxygen not people from oxygen uh users that are using oxygen have asked here many things for the bridge builder like a repeater element or like other elements that we can see in oxygen if they bring us something like that it will be great but i don't think that they can compare with oxygen in how the workflow is done for me at this moment is better than breezy and again breezy it's about two years now in the market or is it three mark three years three years in the market i think this summer will be three years yeah three years in the market and this just released and for me it's a better thing you can do uh pretty much the same things okay they don't have a they don't have pop-ups they don't have things like that but you can do that with another plug-in and the speed is very it's far better than what you have in breezy they don't have woocommerce but let's face it brizzy doesn't have woocommerce yet they don't have all the elements so they don't they aren't ready yet okay of course brizzy will be better soon but at this moment i think this is better than breezy comparing with xeon xeon builder is also a new plugin but i think this is better as from the results okay the results are not exactly better but it's better as for the bugs and how uh they have uh proceed with the elements it does support uh acf it does support metabox and everything else and zeon we are still waiting they have released version two and we don't have a navigation element yet in xeon builder they have some things that i want to be fixed in xeon they have a lot of bugs this has bugs also but i think it's better created and i think it has fewer bugs than xeon also i think it has a little bit of a faster workflow because in xeon i have to go and do too many clicks to change something they have divided and do it over complicated without i don't know i i don't really like how complicated xeon builder is without the need to be for me personal and maybe they have things they have seen something they have think something that they haven't bring us yet and maybe in the future will be awesome but at this moment i prefer to create something with the bricks than xeon or then breezy for me as for elementor elementor pro uh is not too good uh elementor has power because they have too much of 30 party plugins if you have croco blocks and if you have any other plugin that adds functionality to the pro element then you can do amazing stuff but for the uh elementor pro itself you can do things that you can do already with that with this one of course there are those two are not to be compared at this moment they don't have a too many things for the heading for the footer i think they should bring more stuff they don't have pop-ups that they don't have enough templates that they are way back but it's the initial release they are 20 months old 20 days old sorry so this was my review this is my review guys hopefully you have learned how to use the product again i'm not fluent in this product yet i have created already a website with that but for test fabrics not for a live client i'm sure i'm going to use it a lot and i'm i'm sure i'm going to prefer it to breezy at this moment so thanks for watching guys please give me a thumbs up if you like the video and i will see you all in the next one bye

Channel: Stratos Tutorials

Views: 4,192

Keywords: Bricks builder, bricks review, bricks tutorial, create a full website with bricks, bricks acf, bricks dynamic fileds, bricks templates, bricks vs elementor, bricks vs brizy, bricks vs buiver builder, bricks vs oxygen, how to create a website, bricks step by step tutorial, bricks builder review, acf, metabox, bricks theme

Id: J48adAdZ5VM

Length: 145min 40sec (8740 seconds)

Published: Mon Mar 29 2021