Bricks Builder vs Zion Builder

[Music] hello everybody so uh today i wanted to do a video comparison about bricks i think i created a video about bricks previously and the new coming well still new and certain in a certain way zion builder um it's on absolute currently by the way and it has been released before bricks so more than a year ago but hasn't gained too much uh momentum let's say like that so far but uh maybe it will start to gain some with this absolute deal i want to compare them uh not the feature side by side maybe i'll do that later uh all the comparison feature but right now i want to do more uh like i always do a video about uh sorry a landing page that i'm gonna build this landing page the one that i'm always building with all the if you've seen uh video previously from me i'm always using that landing page to show you how each page builder work and compare them speed and so on and i'm going to rebuild that using both zion and bricks side by side so it's not going to be a short video i'm going to tell you that and i'm not completely used to them they have a lot of updates also often so might be stuck some places from time to time so please forgive me about that but if you want to follow then this is what you can do and of course you can always speed the video up if you want to be faster so first bricks there was an update just a few hours ago uh just before i started recording it was updated to 131 so it's really constantly maintained so uh so that's a good thing i've corrected a lot of bugs it's 149 by the way for a lifetime unlimited lifetime deal right now so if you want to jump on that that's pretty cool uh first thing bricks is a theme not a plug-in so you don't have to have a separate theme with it uh as most page builder do so it's a theme that includes a page builder so that can be a huge difference for some people for me it's not that big of an issue because right now that's one of the reason they did it that way they don't want to have to answer the question which theme should i use with my builder they provide a builder that the builder is the the theme sorry is the builder so that's how they want to go it does support guttenberg by the way so if you want to switch to blocks or from blocks it supports that so i have a child team installed i have my brx 131 which is the latest version latest stable version as of today and i only have one other plugin installed which is reset wp reset pro that i use to reset my site but it's not activated anyway so only have that on the zion side i also have that plugin that is disabled so uh zion builder is a plugin so i will need to have of course a theme that goes with it and you require to have the free version even if you want to install the pro version just like elementor and other builders zion builder pro is on appsumo right now by the way in the marketplace not in the regular one regular uh store that's it like that and it's they they decrease the price to 99 for unlimited lifetime license so still worth the look i i've seen many bugs to be quite honest working with it but they are improving it and when i started it was 2.4 a couple of weeks ago now it's 2.6.1 and they also have 2.7.0 better version so i didn't install the beta but looks like since the absolute deal they have improved it a lot they are working on it a lot which is was not really the case honestly from what i saw previously but now they are correcting bugs so that's a good thing so we'll see them both side by side and of course you can decide which one you want in your case so i have on my media whoops i have resetted this one here so i will have to upload my media on that one this one is all right that one has an issue so let me just upload my image and come back all right so my images are are uploaded so let's start first of all with the brixty so like i said it's a theme so i don't have any other team install uh so let's start right away with that one uh we have a getting started place here we can build templates and we can do that with both uh both uh builder let's say like that i'm gonna call them builder whether one is a team uh but uh we won't need one for decimal one because that's gonna be just one landing page i'm gonna use the overall page template so uh settings here leave it just for pages uh as you can see here like i said you can uh save the data as gutenberg data so that way if you ever remove or change the theme then you can still get the content not the layout but the content will still be there as gutenberg blocks so that's a good thing but you don't have to enable that right from the start by the way as long as you reopen and save the page before switching the theme you can do that later if you want to and the opposite is also true if you already have some content that was made in gutenberg you can keep it and load that into bricks uh builder access if you want to restrict access to some people some uh some row user roles uh template i don't have any in my case builder nothing special here uh i'm using the dart mode so i think it was not by default but that's about it uh language you can change the language as well i'm using english in my case uh performance i have activated everything to disable emojis embeds g current migrate and lazy loading to simply speed up the loading of the site these are things that usually you don't need so that's a good thing that it'll provide that by the way uh my api key nothing there and if you need some special code you can put it there as well i don't need any of those in my case uh you have the custom fonts so all the regular fonts all the google fonts also will be loaded no problem with google fonts but if you want to have more than these fonts personal fonts or adobe type kit fonts or other then you can load them here which is a good thing by the way because of course doesn't load everything you have sidebar here if you want to register a new sidebar which we won't need system information right there and of course your license so nothing special here and i won't build a template i'm going to go directly to the pages and i'm going to create a new page that will be my landing page and i'm going to save that or publish it and i'm going to switch to edit with bricks so this is the new bricks structure uh i think the structure is always open by default with newer version but maybe not i've played with it of course before doing that video so maybe you need to open that manually as well and you have a little bit like elementor the widgets panel on the left side now what's special here is the over styles are there not in the panel itself when you want to do something with the over for button for example or link things like that you have the help here you have all the pages so you don't have to go back to the wordpress dashboard to be able to create new pages you can do that right from here and like as you see here i'm editing the landing page but you can create other pages as well here and you can switch from page to post for example if you need to or any other custom post type right from there and you can create a new one uh revision here so you have kind of a history of everything you've done you can go revert back to previous version with the reversion tab or history tab here and these are the settings so uh i'm going to come back to that a little bit later on and if you want to go back to the elements so let's go to my settings i have my team styles here i'm gonna get rid of that one i'm gonna get rid of all of them sorry okay it doesn't delete them just ask me which one that i want to use by default i'm going to use my lending one but i want to get rid of some of them yeah here we go this is how i'm going to get rid so i'm going to delete them and resume the video after all right so sorry that was because i played with it before so usually when you start you have a demo uh custom styles and you have other the default one and some others what i suggest you do is simply create a new one or you can of course modify the the demo one if you want to but i'm gonna create a new one in my case click create and these are all the styles these are global styles not for just that page but for the overall site so that's cool this is where you're gonna style your things so let me come here and modify a few things first of all the conditions i don't need any in this particular case but if you want to create a template and set some conditions for it this is where you would do that uh let's go with general the site layout is going to be wide we have box or wide so i'm gonna use the white one uh container width i'm gonna go with 1200 pixels uh you can have the margin if you want to the element margin and the root container margin i'm going to leave it like that for now colors i'm going to set all my colors so my primary colors here will be 32 32 33. um i'm going to set that in the color palette so again i'm going to change my color palettes here so from memory when you start you have the default and you have the demo one and i again i suggest that you create your own uh the problem with that is that it seems to always go back to the default or the previous one uh from time to time so you will have probably to switch to the one that you want but anyway let's create a new one with i'm going to call that lending created and that will be available for all my pages throughout my site so i need simply to add a color to it so i've created my color here and i can just save that to my palette so that makes it a global color and then of course later on if i want to change that color it's gonna simply change it everywhere i've used that color so my secondary color i'm gonna do the same thing here again i'm gonna switch to my lending panel and i'm gonna put that it's to be e4 ad 22 and i'm going to add that to my color palette i'm going to do that for light and dark color so you have predefined colors here you can add your own color if you want to so i'm not going to change the other ones but i'm still going to use that just to add them to my panel i don't know what's that panel here strange panel name i don't know why this this that's the first time that i see that but anyway let's switch to my landing panel and i'm gonna add the other adjust for the uh so my text ac here 50 b3 and i'm gonna add that to my panel as well by clicking save and i'm going to put my accent is the same color as the one that i previously used uh this was my accent color sorry what are the other colors a and this one i have it okay f6 f6 f6 really light gray i have c cc so a little darker medium gray and i have a dark gray 2 a 2 a 2 b which is a dark gray and i'm gonna add that as well and since we're often using black and white i'm gonna add white and black as well to my panel sorry looks like my mouse is playing tricks on me so here we go all right so in this particular case i can say clear because i don't want to have any color and all my colors are set now uh let's change the other section which is the content nothing special here i have already set that uh typography on links so i'm gonna change those here so my text color is gonna be my 32 32 33 color the font size let me set default font will be right rail away looks like i forgot to set a font size here try to do that later but anyway let's go with the family right away which is a railway the font weight will be normal for the regular text let's see most of the text is going to be 18 pixel but not always so but i'm going to still put that thinking pixels for now since most of the text will be like that uh all editing so if you want something for all the editing then you have the editing headings wanted from six and you have some extra as well heroin lead that you can customize if you wanted to so in my case all the headings i think were gonna be are gonna be uh sorry oops you must not click on more than one at once okay so let's forget the text color but all of them will have the text transform to the upper case i'm going to put that there the editing one and we have just one so let's put it white so it's going to be done um it's going to be 36 pixel already uppercase of course and that's okay and in two they're going to be different from time to time so i'm going to leave it like that for the color but let's put 18 as the size and of course it's already up case and i'm going to leave the rest like that for now links and so on and every element you can style them right from there as well for example if i wanted to style my button i only have one so i won't do it but you could do it here if you wanted to so that's my global styling global colors and so on so i'll leave it like that for now and i'm going to go back to my well i could set the global color from the background but i won't do that so let's go back to my panel here i'm going to save my page right there just to go to dzion builder to do the same thing now xeon builder being based on the theme one of the options here so for the settings we have the allow post type that's okay maintenance mode is disabled we have font options but this one doesn't load google fonts by default so in our case we are using a google font which is railway we need to do that from here so let's do that right away if you don't do that click on plus if you don't do that it's not going to appear in your drop down when you select a font you can have more fonts if you download it from somewhere and you always also have the other b fonts here custom icons same thing so you can download different awesome icons and you can add other icons as well if you download them from a website preset for the colors you have local and global so global i guess will be uh oops upgrade to pro so i think i forgot to enter my license let me do that sorry not there so i need to enter my license and i think i skipped it it was probably here here we go so i'm going to post that and enter my license key okay so sorry about that that's because when i reset it my site and i did that with a wp reset i don't know why when i deactivated wp reset it crashed aside and it's not because of it i guess that zion installed some custom tables that i had deleted so that's probably why i had to reset back everything and then reinstall xeon builder so that's why those things are not set so global as you saw it requires a pro version so that means that it's probably global to all your sites while local in my mind is local to just that site not a page but a site so i'm going to stick to local for now and i'm going to add all my colors that i have already defined so let's go with this one um enter i guess no okay add another color looks like we need to click on add color e4 ad22 ac50 b3 f6 f6 f6 ccc and 2 a 2 a 2 b oops okay add it twice anyway so that's about it for the colors you also have gradients there that i won't need permissions is for the roll management templates and blocks you can create both of them from there in the tools you can regenerate files if you use to elementor you'll know what it does sync library as well and you can replace url so do two two that we also have in elementor system information and of course the license so team builder here if you want to build the theme this is where you will want to go for editor and footer and so on now let me go back to this here so i don't have any theme right now because i have reset everything so let's add the default 2021 and that's probably the one that i hate the most to be quite honest uh but this donation folder already exists okay it's still present but it was not activated anyway i'm gonna add another one because i just thought that zion builder doesn't have a lot of options as you can see we do have the colors and so on but what about the width of the page what about different things what about the fonts the custom fonts for for example the h1 and the buddy and so on we don't have any options for that neither here or in the builder itself of course in the builder we can set it for a specific heading but not overall editing just like we did for example for the zion builder so it really of the uh sorry brix builder so what it really does it it takes what your team offers so since uh it's based on your team it's better to choose a theme that has all the options that you need so i'm gonna add a different one so let's add a new one and go with maybe i don't know um okay now it works maybe uh if i go to popular i usually use astra cadence is a pretty popular one as well yellow is pretty basic one uh it's made for elementor usually so let's go since it's the first one let's go with astra so i'm going to install that one and of course i'm used to astra pro so pardon me if sometimes i expect to see some features and i don't see them so if i go into the customizer um global typography here so i hope that all the typography is there so if i set that to be railway that's working uh size was 18 for most of the text and then we add the headings i hope i have all the headings so family will be the same weight of course will be usually let's say bold and we have uppercase for all the uh well if that is bold that's not really bold so let's use extra bold it doesn't change a lot of things here but anyway let's stick with bold in um i'll go with 36 for the h1 we don't have the colors right here so it was 18 for the h2 and we didn't set the others let me go back with the colors here so the text color i don't have as much functionality here so the text was pretty close to that 32 32 33. uh the theme color i guess is the general one also that that's my primary color which was also the same one so let me put that like that just to make sure i don't have any surprises links color um didn't set them from memory uh but since we're there let's put them my secondary color which is a e4 ad20 2022 might be a little bit strange here though but anyway adding color not always the same so if you have the pro version we have way more options here for each of them but let's leave it like that for now and i should have switched maybe cadence i think by default even the free version has more options than that so uh let me uh let me just go with cadence i think like i said i'm news with the pro version of astra and astra as almost the same thing as cadence but the free version i think that cadence still has way more options so let me go to do that let's activate that one to see if i customize so the layout here 1200 i didn't see that in the astra but i think i was just not there yet um sidebar we don't have any sidebar so sidebar width okay we don't specify any should be fine if i don't specify colors so i always found strings the palette color in astra this is the accent color well well well i think i'll have to e480 2022 and that is the other accent out let me put that other color ac50 b3 and the text color strong text strongest text medium subtle subtle background wow i have never understood the way that it thinks about that to be honest let's go with the medium text and of course the background white off-white light background will be white so i might have to create another palette color somewhere honestly but let's go with that for now and uh typography that's where i want so let's go with railway um well regular for micro text and i think it was 18 for the size family will be the same um we just have family here so h1 it's going to be uh yeah at least 700 it's gonna be 36 this one will be white but let's put that to all caps and let's do the same thing here it's going to be 18 from memory and all caps all right let's go with that and of course we'll make some changes along the way on specific pages all right so hopefully i didn't miss anything so let's go back to my uh brix builder so i have created a new page called it lending now i'm going to set my content so i'm going to start with that page here so that hero section with some text here the logo button and a background image so let's go with that so bricks has changed from the first version when it was released now you have container and not section with columns but if you do want to have and continue simply div by the way but if you do want to have columns and sections and so on you can click on the layout right there on the container button and that allows you to have inner container so for example if i say two it's like a section with two columns a row with two columns and you can already have margin or padding so let me put some padding on each side let's say because if you don't it will not put any so in smaller screen it's going to be a bit strange so let's put some padding here and the direction is going to be the default one which is the horizontal one so let's not put anything and let's insert the container so you see i have a container with two inside container so that is in fact your row and those would be your two columns so instead of that though i'm going to rename it arrow and these are my two columns and you see they're one on top of the each other so sometimes i still have to uh to familiarize myself with that with the flex that's is the flex framework so let's go with horizontal here to have my two columns i'm going to go into styles here and i'm going to add my background image so select image that's the background image i should use some alt text and so on for accessibility purpose but i won't take the time to do it for now all right so here's my background image so let me see with okay i'm not gonna do that right there all right so let me just add my first element to that which is the logo so i'm gonna switch to elements here i'm gonna add an image so it's a drag and drop builder by the way so we click on the element that we want to change so that's my logo here let's click on insert i'm going to have a padding tap well i'm gonna switch back to my arrow here and i'm gonna have a padding tab on that one so let's go to uh was it layout yeah i can switch it there so 120 pixels at the top and my change but 104 at the bottom let's say for now you see that doesn't it doesn't take the full width by the way as you can see and if i do preview mode so it's kind of boxed so i'm going to change that i want to have the full width so there was a couple of ways to do that so let me just go back to that quickly um if i do stretch here we go a line container stretch that works and i think that was more than one way there was a full width somewhere and i'm not thinking about the 100 percent here doesn't do the same thing but anyway might have changed our mix with another one but let's keep it like that the uh align container stretch will work exactly as intended hopefully so we'll see when my logo is there so select my logo i thought i had done it but anyway all right so okay this takes the entire witch with which i do not want so my content must not to be that that wide so let's go with the width of 860. um and of course if i do my uh my automatic margin here i can do it like that by the way it's going to be centered but it's not exactly what i want so mix with what i've done previously sorry about that uh usually like i said the first time that i used brick it was using the traditional uh row with columns with a section so looks like here the uh the container doesn't behave exactly the same way if i stretch it for the image it's gonna work but that's not what i want so um i just want the background to go all the way not everything else so inner counter here but i don't have a width let me just find that i'm going to post a video so that you don't watch me do searching for that so sorry about that but i had to redo it a little bit differently i changed my arrow to be like a section as you can see it has a orange border by the way so it still recognized that as a section even though uh it's just a container right now and they created the container to be more like the concept of oxygen builder so i think they wanted to please or to appeal oxygen users but it made that a little bit more confusing for people coming from other background fortunately i had a little background with oxygen so that helped me with the flex box and so on uh but still so my second container is now called a row and i have my container inside of that which is my column in fact and that one well since i won't have two different uh i don't really need two different columns because the second column in fact is empty so i really need only two columns when we are using two columns in our uh builder like elementor things like that because if i can restrict the size here i don't really need two columns and uh i think i'm going to simply uh get rid of one of those so this one as the width so let me put my image there and get rid of this one don't need that one so that's my row the other one will be my column but since i have only one don't really need it and i'm going to put my image there and even here my width that i have here is in fact uh based on maybe i'm going to put another container later on let's see uh because that's based on a two column layout so and if i reduce that it's going to be centered and i don't want that to be centered that's why i'm hesitating to say whether i'm going to change it or not because i will have to change my uh margins and so on if i do that so anyway i'm going to continue with that and see what i'll do later on all right so uh my logo here will have a bottom margin so let's go with the uh i'm with the image right now okay here we have my margin sorry listed 50 pixels of margins on the bottom then i have my title so let's go with heading here and here's my heading let's go to content be fit be strong this is an h1 not an h23 so it goes automatically white uh it's not bold enough though so i'm gonna go here and set that to be bolder so let's set the phone away to be i don't know 900 let's say okay closer to what i want um a margin bottom of 10 in this case but it depends of course these are numbers based on elementary by the way so they all have different default padding and margin so i might change those numbers later on then i'm gonna add some text below that let me just copy and paste the text from the other side so here's the content i just want to make sure that it doesn't copy any formatting here we go okay and i'm going to change the typography here again of course the color will be white in this particular case and this is where i want to have a specific width so i can do that just for the text yeah i think i'm going to do that just for the text instead of putting another container this is where i was hesitating so let's go with the layout here and let's say i want to have something like if i want to be close to what we add on the other one it's gonna be probably something close to 360 or 380 maybe yep that's about that okay here we go so no need for second column because of that just need to change that here so let me now add another uh do i have specific modern yeah margin bottom here of 50 and now let me add my other text i think it was heading again though it's really not the same size i'm going to leave that to it's probably adding two right now well adding three by default let's put a heading two i'm gonna say plan starting at 39 dollars and starting at 39 we'll switch that to be of course white and uh lens it's an h2 white 18 pixels i think was the default one so should be the same size if i specify it or not that's about it and it's going to be i forgot to specify the width but i think it's probably like that um okay so let me go back i don't know why but i thought that i had set all my headings to be uh 900 but it's not the case so let me put that there so i won't have to do this each and every time all right so now if i get rid of that it stays bold all right that one should be as well so you can click on the exit there or simply remove that css that you added like that sometimes you can do that for an entire section at the same time great so let me put my button so sign up now my little button here so just below that and since i didn't set my button globally i'm gonna have to do it here so sign up now uh style it's taking the primary secondary well this is not where i set the color so let's remove that well let's keep that primary but i'm going to change the colors anyway so background color whoops not an image sorry trying to go fast background color will be my kind of a purple or dark rose here so typography my text will be white it's going to be let me see i think it's still 18 pixels yes 700 so weight 700 all caps so uppercase and i add the padding on each side so let me go with the padding here so it was 15 80 15 80 but looks like it makes no sense with the way that it works right now so to be something closer to to what i have there i would say probably something like five maybe still 80 though yeah that's more like it and i need some space at the top so maybe i forgot to put one after the other one but let's say like that this is pretty close to what i have and i need to have my over color so this is where i need to have the over style here and i'm going to change the background color here for my golden color and this way i have an oval color like that all right so this is how i do that you can preview by the way right there and if you really want to be in its own window then you can view on the front end and that's the real one so as you can see here now we have some troubles looks like it's not the same thing so let me see what's going on here is it taking my landing here usually it works fine i don't know what's going on here the typography that i've changed here all my headings are uppercase 900 this one is 36 white this one is 18 and we don't specify any color because we change it and the body text is right away let me see should i put fun family as right away as well maybe well that's way darker here it's perfectly fine and if i do that on the front end it has some trouble it's really strange it usually don't do that and i don't know what to say here to be quite honest it's the first time that it does that so i don't know what's the issue here of course i can set everything probably directly here so it would do that but that's a shame and that's strange let me put it like that for example and now wow okay looks like i really need to put everything back that's really strange i don't know what's going on here so looks like i need to put the style on each and every element but that's not how it usually works so that's really really really strange uh let's say font size will be 8 15. what's missing wow i really don't know what's going on here honestly usually it doesn't do that so i really don't know what's going on here then i have to do it twice so it's pretty much that here i think it's not exactly the same size yeah it's not at all the same size so i think it was 18. so don't know what's going on here that's really strange looks like the uh the team well not the teamwork rights because the team is bricks so we'll have to double check that later on usually it doesn't do that and hopefully it will not do that for the rest of the exercise that's really strange honestly but anyway let's do that now with the zion builder so let's create a page add new page blending page publish that and edit with scion builder all right so here as you can see we have the default design so what i'm gonna do is switch that to in the page option here i'm gonna use instead of the default layout the full width i think i'm going to need to use here no still have the menu there so blank canvas a little bit like elementor again all right now i'm really starting from scratch so this is the only page options that we have by the way that's just the title and the page layout and we have some custom css in javascript but that's about it so we don't have as much control as some other builders all right so now let's add our first element so click on that we have different columns um let's go with a two columns layout because it's going to add the different element and now it points to the first one which is going to be for now and still an image which is my logo so in zion builder you need to double click on an element or click and then select the edit element you also if you want to have the structure by the way you also have the structure that is uh sorry these are the templates the other one just above it so this is the three final so you have the three view the section view and the wireframe like a little bit like dv builder still has so if you want to work with that and you can move that to the right side by the way by clicking and dragging the panel i'm going to leave it like that for now and honestly sometimes it's pretty hard just like an elementor to select things so i might keep that open all right so let's change my image from the media library let's open that let's add that so let me move to the section here and again even double clicking or anything like that i really need to click on is it this is what is annoying with zion builder the first thing i cannot set the global width by the way so i need to set it here so i'm going to set that to be one thousand two hundred so that's the overall width but then i'm going to uh when i go to styling you see you can style the wrapper so the overall div or the inner content so i'm gonna go with the wrapper for the background i'm gonna set an image which is that one again all right you can position that by moving the little dots so that's great um but for now let's keep it like that and by the way we're gonna use the uh uh but not sizing the cover forgot to do that for the other one but i think it's the default anyway so for the background here seems to be the default default is set to cover all right so now i need to have my padding here and the wrapper the padding tap was size and spacing here so padding tuck was 120 and bottom 104 from memory okay position center center the overall width of the box should be and i don't know if that will work eight 16 like that okay that works fine okay now my logo again i can select it like you see here by clicking on element and it does select that in the panel here but still doesn't show the options for that element here and i can always that's that's something that i forget i can always go there and select the right thing here um used to use the button here and edit or here but it's true it might be a little bit faster to go from there as well all right so let's put on the image or the wrapper one or the other you see that we always have and that tells me by the way that even though they say it's really light that tells me that if i have a wrapper around my image that means that i have at least one div which is not necessarily a good thing in the uh for people that really are looking for the least amount of code possible it does add a div for nothing in a certain way so anyway let's go with that and i'm going to set the bottom margin to 50. all right now advance is where you put the id and so on now let me add another element so i need to go there and click under it to add a new element this time it's going to be a heading so editing is not showing here that's strange or still need to go with my element like that i can always click here and change here things here honestly i found out that when we change the color here for example it's going to put inline code which is bad really bad it's really hard to change after that sometimes we try to change the color it doesn't want to do that hopefully they have fixed that with over time i might try to see if it has been fixed but and here the double colors that we have set by the way don't appear in that panel and that's really sorry but that's one thing that i really don't understand let me check let me let me let me uh if i can undo that you see here my text i select it i change the color let's say here and i start typing you see my text that is there and when i type it does just the first one and if i continue on typing it it's my text wow that's strange so if i want to type a color i need to do it like that well go back to x please and i need to type my zero then click again zero then click again zero that's completely stupid and by the way in this particular case it was f for white and i need to change all of that like that makes absolutely no sense and doesn't seem now that it takes it really a pain as you can see working and now okay select it my bar just disappears what's going on so it's really really really a pain to work in the text here i really like the styling panel usually but for something like that i don't understand how it works at all and now i don't know why i have something here let's remove that i had a heading all right so let's go and try just try to change the text here so be fit be strong first of all and let's try to change the color but it really changed the wrapper so again if it has taken that color instead it will not work now i have my global color my local and global colors and as you can see i'm supposed to have marker under that so i need to click on those three little dots and hopefully still missing some colors that's strange that's strange another strange thing so let it add it no we're back to that one and i don't even know how to delete a color by the way from that panel i think i don't have any choice then to go back to so you can see wow some big big bugs here yes i don't know what happened with the briggs boulder for the real uh preview don't know what happened there but at worst you know that if you set the styles directly in the element it's going to take it anyway so uh we'll need to investigate what happened from the global to do the other one but zion is really also as many bugs so let me go back here and it's not there so why is it on the other place but i did forget to have the white and black so let me do that here and add the white and i'll edit without adding another color that's strange anyway let's refresh that page and cross our fingers okay and this is many clicks by the way to do something here we go now it's at the beginning instead but anyway it's there phew okay um margin button 10. and now let's go with the other text sorry didn't want to close that but anyway text text just simple text let's go with text here that i still had in my baseboard again we're changing the the container which i don't really like but anyway that's how we do that uh 18 pixel is probably the right size yeah and hopefully this time it does it the right way you can remove it like that uh line height of 24 maybe this is optional but anyway let's see yeah okay and we have the margin bottom of 50 again for the next step after that we had plans starting at 39 so that was a that's true that was a heading h2 let's turn that into white again and that's about it for now hoping that it's going to be all right um didn't set any anything but depending on i'm gonna see well it doesn't seem to have any more space at the bottom as opposed to elementor so that's why i didn't put any margin below but let's do a 20 i think that i did on the other one and let's add our button so sign up now ah button type knowledge shape normal small that's okay um button styles let's go directly with the button style background color that would be the background color typography what's already white so let's keep it like that let's put it uppercase let's change the font weight to 900 and i'm gonna see if the padding is the right one this time so let's put 15 and i think it was 180 on each side that's a lot wow it's not what i want right now that's pretty clear and it was 80 by the way not 180. sure make a difference yes it does okay that's okay now for my over color this is where we choose the mode so default then hover and i'm going to change the background color simply here for that one so now when we mouse over we're gonna have that color all right so it's done we can always drag by the way for spacing and so on as well as in the uh brix builder as well so let me show a little preview view post and this is what it looks like so at least this one visually is the same so don't know what happened with the other one and let's go with the next section so the next section and the others will be pretty straightforward we have a start training today a title with three columns image text and the title here so this is the one that we're gonna build right now we're gonna go section by section so this is my section i'm gonna add another one below it uh but as you can see it seems to still be inside so looks like i'm gonna have to move that to the outside of it here we go now we are outside and that will be let's say actually start training today we don't have to rename those but it's always a good idea to do so same thing in zion by the way i could do that as well okay and same problem here if i put a background color on that one uh whoops background color sorry you see takes the will of that so let me just go back here just to make sure that i set everything the right way um [Music] layout is wide it's not box so that's pretty strange if i set it to wide that i have maximum container width is 1200 and i don't really have the choice here that's really how i should do that because of course if i i need to have a maximum width for the container so the other one add the inner box and the other box this one doesn't have so though we say white it's really box in fact that's a little bit strange that's it like that i think that's what we need to do and maybe not set any width here oh no if i don't do if i do that it's going to be another one by default let's say if i say 100 then nope it's going to take that box with by default that is pretty strange view height no so it's really really really strange it's working this way now but let's keep it like that and let's say wide though i need to extend that for it to work correctly um so let me go back to that one here layout it's going to be 100 okay so i'll need to have a container inside of it because of that surely and i can do it that way that container has a different width but i need to set that to be auto on each side if i want it to be centered here we go all right so start training today let's add the heading start training today that will be nh2 and of course it's going to be centered and it's going to be in white so let's go with the typography here text color white of course we need to have some space at the top and bottom so 60 and 40 that will be on my since it's betting it's going to be on my container here so 60 top 40 oops 47 on the bottom all right and i could drag like i said i could have dragged here and if we hold the ctrl key or remember which one we can do that on the doesn't seem to work here we need to lock it in this case okay it's like an unlock in this builder mix with another one all right so titles are bigger than 18 so 18 was the regular one so let me change that overall so i don't have to change that every time hopefully it's going to take it this time uh h2 then will be 24 because i don't want to change that if and every time so that's the real size and it's too bold honestly so i think that 900 is too much [Music] it's gonna be more 700 yeah all right so changes everywhere at the same time and hopefully it's going to work this one has that set on it so even if it's in h2 all right so let's add three columns now so just below that one i'm going to add that like that and it's going to add a container again let me try to do that differently if i drag and drop insert a container i guess it's going to insert it after so let me see but let's go like that direction it's going to be like that yeah that's what i thought but let's move it inside here we go it doesn't work if we did that like that just one more step um this one let's put some space below it let's go with i don't know 20. more than that say 40. all right now in each of those we're gonna add a new element if i click on the plus it's gonna be always a container so that's not what i want and i think we do have let me just check to make sure we have an icon box do we have an image box um no just image alone if i say icon box what does it look like can we change the icon to be an image no okay so there's no image box and we cannot use an image instead of the icon for nikon box so i'm gonna have to do that manually not container but the detail itself so i will have need to add image text and well image adding and text so let's do it like that then [Music] stretch won't take the entire space which is not what i want so my image will be centered i'm gonna have well let's say didn't count it but let's say 20 pixels at the bottom maybe more thirty then i'm gonna add a heading it's going to be an h2 this one's going to be centered as well i think it's better than better not bigger sorry unless in some of these two that's true it's an h3 and we didn't set the h3 so let me go back and do that h3 are 18 pixels and let's keep it like that that's okay and let's go back and set that to be an h3 here we go and then we have some larynx some text some placeholder text so this text will be centered line okay so the container doesn't take it this time we need to do that probably right there directly here we go uh typography color white color of the editing is white as well maybe add a little bit of margin to the bottom let's say 10 all right now we can resize as you can see percentage we can drag for the height and the width there's no easy way to duplicate this entire editing uh not editing but container here sorry from this interface here let's see if we can do that from here and we can so i think the easiest way will be to duplicate that a couple of times and get rid of those two extra columns oops looks like we only have twice okay now the image seems to be a bug here the image is not at the right place though it is right here so let me just refresh the page here we go okay oh guess what when i refresh the page it doesn't take the uh formatting the global formatting so like i said i've reset everything so maybe that's some there's something that doesn't just work as expected because of that so all right guys i made a mistake um i needed to change all the things here and even then uh i think you saw it when i refreshed here the title was not all right and i realized that i've made a mistake first of all uh honestly scrapped everything started from scratch reinstalled bricks because i assumed that maybe when i reseted the site something went wrong and it was not that my big surprise it was still doing the same problems and i found out went a little bit too fast and it's my mistake when you create a team style here where you set all the elements that you want to be applied everywhere it does work but i had forgotten to in the conditions i have passed quickly on that and you have set conditions to apply your themes to your entire site or certain areas and i forgot to read that and i went fast so that means that as you can see it doesn't apply those tiles so the only thing that it applies is what you do on a specific element now if i go back there and i applied that to my entire site it could be just the front page because it's a landing page in this case but let's put it on the entire site now suddenly it applies that everywhere and this was my problem this is why bricks was not working the right way so if you have listened to this video so far my apologies no problem on bricks no issue on bricks didn't know like i said it was the first time when i did my preview here was working fine but when i did that like that it was not it's absolutely my mistake that i forgot to set the conditions all right now that is set and my conditions for the lending this is the one that i created is applied everywhere now everything is fine automatically all right now i need to still insert my container here so i'm going to do that like that insert my three columns and i already did that part so i'm gonna post a video where i have my three columns and everything so uh i'm gonna post that and do it and come back with the rest after that all right so i think this is where i left so let's change the images here and by the way the text i could we can change it here training whoops ebooks and videos there we go that image here it for the dumbbells resistance training here we go done that's how it looks like on the left let it save it i think it didn't refresh the page here we go okay now let's do the same thing with the zion builder all right so a new section after that section and inside of it we're gonna have first of all heading so now let's adjust that one we have 60 pixels on top and 40 at the bottom we have a background color so that's i'd like to write element we have a background color of oh by the way i see that it's always 11 20 here so i will always have probably to change that for 1200 because by default it's not the same and there's no way to change that because even if i said it would inherit from the main theme this is something that is not an irritant so you saw that i had to uh if you remember i did change it here in my cadence general layout here it's 1200 but it didn't use it so uh this is one of the things that looks like oops sorry it didn't take into consideration so i will have probably to change that every time it's a little bug here again all right let's change background color to be that color here and the text here should be start start training today it's an h2 center seems to be the right thing the red size let's just change the color sorry all right let's put some spacing below it from memory it was 30 pixels for the other one but it might be different here from what i can see um all right so after that we're gonna answer the three column layout and the first column do we have an image box or something like that we do have an image box so it could be hopefully easier let's see what other settings image on the left on the top bingo so looks like it's going to be easier using an image box in this case let's just add the image align everything to center let's change the text here train at your own time uh the sample text here is going to be our lorem ipsum text all right so what do we need to do html tag for that that's h3 that's perfect so the wrapper is everything is all right there let's say let's try if i change the text to white here we do that for everything inside of it or not nope just the text so i won't put it on the text then since i have to do it in two places anyway so let's put that on the title itself and this title is not for any reason all caps let's put it that way and then the text description is the element let's set that to white and here we go now the only thing not sure it's the right size though here let's see supposed to be 18 for the typography and not the right place i think fun size let me go back to the title style here we go yeah there we go i guess it was a little bit too big now made a mistake here i think so let's save that and uh and the customizer i think i didn't change the headings some general typography i made the same mistake as i did for the other one this should be 24. this is my mistake nothing to do with design builder this should be 18 here we go so now it will take the right size if i don't change it of course so let me just change that [Music] wrapper whoops oh man what did i change my mistake um and that's really strange if i make a mistake here i cannot even go back start training today you see uh undid and it scrapped everything this is an h2 the only thing that i should have to change is the color and i have to redo everything that's a shame font size let's save that and refresh because i think it doesn't take the customizer settings here we go now what's better and i'm gonna put some spacing here let's see 30 all right okay now let's go with the image box and duplicate that twice and let's move that each in their own column here we go let's it don't want to change the image and text so turning ebooks and videos and then for that one and that's what is annoying we must we must not forget to always click on the edit element or we will change the other one if we think that just by clicking it's enough and it might seem a lot faster but that's simply because i don't have to repeat everything that i've done the first time so it's not necessarily faster in this particular case a little bit maybe because of course i was able to use an image box so it's faster to duplicate but beside that all the rest is not necessarily faster than what i do in bricks just to make things clear all right section is done if i refresh here we go that's what it looks like now let's go with the other section which is the feature classes this one is a lot harder to do because we have kind of two column layout here with a border and some text inside of it so we'll have to work with nested containers and things like that so let's work with that and by the way yes the brix builder takes a little bit more to grasp with the container thing they change that uh it could be a good way a good idea or a bad idea like i said people that are more used with things like a breezy maybe an elementary and so on will have a hard time figuring out the container thing uh people coming from oxygen will really like that but again it's just a matter of getting used to it in a certain way and it can be a lot better because there's less code less nesting we have way more control over just one container this is one thing that i like about drive architect they have a container element and we can resize this as we want like i did here for example you can resize that i could resize that as well by the way the container here like i said it's just that i don't want that to be centered but let's say if i leave it if i say center like that i don't play with that but i diminish the width so that it's about the same width as what we need which is about that let's say uh we had i think it was 380 but now 80 would not be enough yeah it would but still prefer maybe to put 40 400 sorry just to make sure the problem is now it's center and we must have two columns it must be more to the right so positioning here might have to go away to the left so let's say um i could change that here relative left and i would say i don't know minus three but two hundred now and here we go this is one thing that we can do and of course we will have to change that based on the device here so for example here it could be instead i don't know minus 100 maybe and like that and sometimes up to some point probably zero if we want that to be centered or i could simply say uh [Music] well not absolute but get rid of something else like the width here could be for example the entire width maybe sorry so i didn't want to didn't want to go into the uh let me put that back to zero here that's why or maybe add a little bit more to indented that's why i didn't want to go inside the mobile thing but as you can see this is still pretty easy to change maybe here for the image background i would have to move it a little so um looks like we need to add an image for that too in order to be able to move it strange because it's the same image and we don't have the power of zion on that regard to move that little dot here so i would have to do that manually instead of cover it would be uh let's say well there's no default that's strange let's say custom and what i really need is that to change here from tough left to let's say center and by the way let's forget about that this is what i wanted for the uh for the main one as well i wanted that to be centered i just left what was there but i want that to be center centered so when we go on a smaller screen it's still centered like that this is what i wanted so nothing to play here and like that still good i could remove the image entirely for example or can add a lever lay maybe uh let's see if it's easy to put anotherly on that uh gradient overlay applied to let's say overlay add a color and that was not that easy from memory obviously okay so i did add an overlay here but i need to specify where do i need to put that as you can see here and it's not exactly what i want so i think i need to really specify overlay here and i need to specify the class which is not necessarily that easy to do but let's try so this is the main this is just this div so breaks element i could use that id here i guess oh no we need to have a class selector so no the same name so let's try that doesn't seem to work from here if i apply that to background doesn't seem to work either but not sure that it does work in the background here so let's still try that need to be in mobile view doesn't apply it and i think it's one or the other not sure not sure but it might be one or the other and this is where that's tricky we need to find the right class here there we go the wrapper is that one okay that might be what i needed still well where's my color my color's gone okay so if i say overlay or background to that wrapper now it seems to have applied it but i think i forgot to change the opacity of that so it does work not in the preview though so i will have to do a couple of try and error here we go i think that i would change that to be a dark color though instead so it's not that obvious because it's really light but i think it does work let's put that darker so we can really see the difference you see now so if i put that to 0.3 as it was it's a lot more subtle but we still see it way way way really good and only on mobile so anyway let's go back there and create the other section so based on what i see right now it's going to probably be a three hour video a two hour video sorry more than two hour video but anyway let's add another one and i think that yeah it did it but it always added inside my mistake let's get rid of those again the first time that i did this exercise it was with bricks 1 or 1.1 and the container was not there yet so uh not used to that container yet exactly so let me i add it like that well though since i only want one row container can i really add it after looks like it's going to add it it's too hard to add it after man so if i just click there we go it is now on the right spot i'm going to add one inside of it this one is going to be my featured class picture classes this is my row i'm going to leave it as container uh in this particular case though i don't really need that to be quite honest because i don't have any background color yes i do i like gray okay let's keep it like that down so this one is going to be 100 percent so deform it and it's gonna have a light gray background so i think it was that one so the difference is pretty subtle but it's there all right probably again the same 60 and 40 pixels i guess so let's go with that 60 on the top and 40 at the bottom whoa 40 all right and this one needs to be content align center here we go inside of it we're gonna add our editing and i could duplicate the editing by the way that we already have but anyway that's okay so this heading is gonna be uh whoops no container come on sometimes it's easier that way all right so search setting means i am a feature class come on says it's an h2 not an h3 we want that to be centered so i could whoops sorry i could simply center that content i guess this is in turn but align and content as well centered i could have done that by going into editing and centering the text but i'm trying to get use of the flex box model all right so this one is going to have maybe a 30 pixel again and underneath that i'm going to add another uh layout container like that it's going to be oops it's going to be with three columns so i'm going to delete the yellow one after all right i need that to be inside the other one so let's move it here we go exactly as i wanted it uh and that's a two column layout by the way i don't know when i said that to three it's a two column layout so this one i'm gonna change the percentage to be something like i think it was 28 point something like that 28.28 or something like that featured class supposedly it's only 30 pixels here don't know why but anyway another big issue here because of the text i guess [Music] maximum width of all of that then set that but looks like we have a maximum width here of 928 pixels didn't i put something here it's like i put it on the wrong one so that's why there we go so let's put a 30 pixel here so we do need to specify the gap here for that container kind of gap maybe just to make sure set that to zero vertical align middle that should not be all right maybe like that just to make sure and margin 15 top and bottom for the entire box here yeah so that's what an xbox coming after so let's do it like that here we go okay left column 28.448 so that's pretty much what i have here [Music] um 28448 i'm not sure i need to be that precise but anyway these are the numbers from elementor then we do that for those two exercises inside of that it's going to be our little image so let's do it like a little bit hard to put the image in it obviously but anyway from the first image is going to be that one and then we have the other column with a heading inside of it that heading is gonna be um yoga it's an h3 that's perfect and i'm gonna add the other text before trying to change the uh spacing and so on so that's another lorem ipsum text maybe the same one as previously but let's do a copy of page just to make sure here we go all right so now what i want i want that container to have a border around it but not on the left side here so let's go with border let's go with i'm gonna link them it's gonna be faster a little one pixel solid and it was the light gray even lighter than that well no this one because of course we already have a library here so all i need to do now is to unlink that and remove it from the left no border there all right so what does that look like pretty much what i want now of course i just need to put some spacing around everything so in my container right there i want to have some spacing here so adding 0 30 on each side but it's not 0 30 in this particular case because let's say that year round that's way too much let's say top 15 and bottom 15 and that's pretty much it a little bit too much so if i want that to be aligned let's do that on both sides what does that look like pretty much it maybe just one pixel too much and i think that one preview it's not exactly the same thing so let's save and make sure yeah okay let's zoom okay there's a little bit of space here from what i see but anyway i could just put that margin to zero or something like that just to make sure and if it doesn't work simply uh put the margin to minus one can do that don't want to wait some time to do this on this though so let's move on that's pretty much what i want so what i'm gonna simply do is take this container your little container here and duplicate that twice so once and often as you have seen maybe when we did that for those the you're going to lose the image not the case here but if it's the case the image still they're just not previewing maybe i don't know why exactly maybe some memory or something like that so just save and refresh when it does that all right so change my image here change my text here hit max same thing here change my image to be the runners and that text here strength restraint boot camp here we go that section is done so pretty much if we compare this with what we have here pretty much the same okay now let's do the same section with zion builder so again let's add a section after that one let's start with a one column one and inside of it we're going to simply put a heading first just as usual now that heading um not editing but that section sorry we'll have again a 60 and it was 30 at the bottom strangely so there we go the color of that little box here is well the width was 928 while i'm there um background color that's a line just like that background color inner content background color here is for the overall width so this is the right color and now let's change the text itself featured class future classes let's make sure we did that one because it's not an h1 it's an h2 let's center that let's add some spacing here maybe another 30. here we go then let's add another a two column layout this time but probably something around this and the first one will have an image all right so before moving ahead let's we have the column by the way the box bootstrap type of columns here where we say the overall width will be 12 columns so how many of those columns we can set it like that or we can set it with percentage and everything in the styling so we have the choice of one or the other so let's say for example if i set that to auto then i can come here instead and uh change i don't really have to set it together but if i don't want things to be one on top of the other and i can say for example that this one is going to be 28 point remember i think it was 448 or something like that and i'm not even sure it's going to take it or leave it like that but anyway you see i have got a lot of spacing here also so let's try to get rid of that so what's going on here wrapper let's put padding everything to zero it doesn't seem to be that i don't think it's the margin no so that means it's simply not on the right place so link style image style maybe we have some spacing there instead not exactly column i've already said that i think no okay so let's save it whoa okay here we go we have one we have one of the levels done by doing it here it's like the other things doesn't change anything so let's go back to our image some requirements okay come on it doesn't want to take the image so that's one of the examples where we better maybe here yeah can change it so let's also line the image maybe come on if i line it left okay we still have some space we'll see so column we have three columns here so a little bit too much this is the first one a section column let's see the three we have way too many columns here so this one this is in fact the row or the inner column and then we have the column here so this is the one this is that one so that one has too many space too much space sorry um let's go with that i don't know if it's marginal padding but i expect that here we go got rid of that space here which is not required but i prefer that all right my column here let's go and set the width of that to be 24 it's already like that okay so let's try to change the image uh the first one is i think that one not that one here all right so full blah blah and side column no this is not what i want it's really inside okay not necessarily color heading there and it's a little bit big so let's edit that be cram yoga that is going to be an h3 so a lot smaller than that uh we didn't set the h2 and h3 to be all caps h2 is h3 isn't let's change that here if i don't want to change that everywhere well it seems that i forgot to do that typography so i'm not even sure that i did it for the other fun family only so here it would set that to be all caps yes yes and no so here we go this is all caps now gotta refresh to make sure that we have the right thing and here we go my bikram yoga is like i wanted to so let's insert a text after that again i could paste my text here but this one creates some problems to say the least so let's do it that way instead i'm going to select the overall let's add some border to it so there we can set which one we set but again since it's for most of it anyway um let's do the ccc and then i'm gonna go back here and say zero to remove the border on that side here we go now what i need to do is put that closer so seems to be that the text here as a top margin by default so let's remove that um if i just say zero would that be enough no looks like we'll need to go to the negative and something like that 11. if it's exactly the same thing of course when i view my post and yeah seems to be pretty good i could of course put it closer and put some more space under instead that would probably be closer to what we have in the overall but it seems to automatically do it anyway so that's good okay now if i select that column here that's the column that i want i think let's duplicate that oh i forgot to put my 15 pixel of margin top and bottom i think i'm gonna do it here instead of 15 not 50. okay oops looks like i didn't do that on the right one this is the one that i want not necessarily an easy task and i know it's a long video with past the two hour mark two hours mark but let's now duplicate that and duplicate again here we go change that image to the dumbbells that text or that heading should i take a chance here hard to select sometimes i can double click sometimes it's a lot harder so that's why sometimes you don't see me select things like this strings that's simply because i can simply double click on it alright so here we go now we should have the same thing as the other page so that section is done next section a little bit more complicated meet the owner we have an image here with the text on the side we have a border with some spacing so this one is a little bit more tricky so let's go first with the brix builder again so i'm gonna add a new container let's close that and i'm gonna add a new container oh sorry forgot when i just click on it it just adds at the end always mix between the two when we work with different tools like that sometimes can be a little bit confusing all right so all right so let's uh yeah sometimes it has it at the wrong place that's strange maybe i'm just not used to it if i click on it sometimes it seems to have it after sometimes inside looks like when it's closed it is inside and when it's open it adds it after is that possible strange anyway we'll have to check that more meet the owner anyway so that one has a white background and so because of the color of the background i don't necessarily need to have another container nested like in the other cases uh so i think i'm gonna put everything directly inside of this one here this time so padding 6060 so 60 here i could lock it so this way it's going to do that since it's the same amount it's going to do that top and bottom at the same time all right so now content align center i want to add my editing inside of it so this is the meat the owner owner it's an h2 i don't know what's in h3 by default i would prefer an h2 since that's what we use most just like in elementor but anyway let's go with the flow so let's enter um the title color will be title style color anyway the text color will be that golden color and just after that we uh no specificity for that but let's say again at 30 pixel so that we can have our elements so let's go with the three column layout though they won't have the same width everywhere i think i'm gonna simply add it like that still so three column let's go with or something like that and insert my container uh okay so looks like there's plenty of space don't need to have don't need to have that like that you might need to go i guess i've put that on voluntarily here we go all right so that is outside that's why i need to put that inside okay sorry i should have kept it like that didn't realize it was outside okay now first one as an image so the image of the owner so let's go like that and this one is already aligned to the left no spacing so don't have to do what i will have to do with zion for sure this one overall is 960 by the way so let's go into the style layout and set that to 960 pixels max width all right so now after that column gap extended i've set the column gap to be extended which is again um let's say something around that i guess but might change it anyway uh margin top of that it's for these and that's to make a space between those so i'm just going to add more space here simply come on one why do you want to play with i me want to change that here here we go so anyway all right no batting on each column but that should be already be the case in um bricks builder so the width of that column should be let's go in percentage as we usually go 28 so that puts a little space here so that's why i might remove that gap um the second column is supposed to be 34 so let's do that with the percent again 34 point according to that and the last one and again might change that later because those numbers are based on elementor four previous exercise that i did a couple of years ago so third column 37.4 percent so all right so now the second column we have a title here so let's add an editing in the second column that heading is simply the owner's name which is cecilia sorry cecilia newville that's an age 3 i suppose but it's formatted on h2 so i think i'm gonna put it like that but it should be an h3 honestly because it's a subtitle of the owner so let's put it as an h3 and if you want it to be bigger simply increase the size here so in this particular case if i wanted that to be the same size it was 24. so after that we have some text okay maybe it's a little bit big though but let's see margin bottom here for this one let's put some margin bottom of 10 pixels for that text here adding right 10 pixels so padding right not sure padding right 10 pixels not sure i'm going to keep it though okay so didn't put anything here but i'm pretty sure that the text is smaller than that the overall text is pretty big so probably radar should have changed the overall text here i think it's too big everywhere and that's one easy thing to fix if we want to change it everywhere as opposed to other i just need to come here and lower that to something like i don't know if it was probably 15 pixels of course changes like some problem here so let's just make sure that we select the right one let's put some let's say padding here so 15 seems to be a good number since they all have the same text that makes it easier for us here we go and now this is where things get more complicated because we have here two elements side by side some will insert an inner section error columns and it's not necessarily the best thing to do so with the flex layout in bricks and zoom builder should have something similar we should be able to do that differently so let's first insert the image it could be an icon but i want to have my own image so let's keep it as an image don't think that the icon we can select which one we want so the image will be that little image here which is 30 by 37 by the way let's keep that in mind i'm gonna put a little bit of padding or margin to the top i think it was five um i was probably padding bottom i didn't put any padding here so let's put one uh let's say 10 maybe oops number right please text here we go better that way after that we're going to add another text and for now they're side by side one under the other but we'll change that i'm gonna copy the text from the other page and paste it here okay now i want those two elements to be side by side so one easy way to do that is to insert a container and set the container to have a horizontal layout instead of vertical one on top of the other so that's probably what i'm going to do let's just insert another container here let's move that on top of those two elements and move those two elements okay i cannot select both but anyway let's move those two elements inside of that container all right now if i select my container and i've put the things the direction horizontal like that now you can see that they're one beside each other of course kind of squish my image here so let's change that to make sure that it takes the right space that it deserves let's say well it's more than 30 actually because we want to have some spacing but the image should be 30. it takes something else in two counts so let's say 40 and i'm gonna put some padding or margin on the right side to push the text a little bit something like that maybe a little bit more here 45 is about the right size here and that's cool all right so for the third column well first of all we have to add a border so we can either add it to the right of that column or to the left of the third column so one or the other should do the trick let's say if i select that one and add it to that one um i'm gonna need to have some spacing though but anyway let's start first with that maybe add some padding to its right something like that maybe and that way i will be able to add some spacing between the border and the content so let's have a border to the right of that one a solid one and let's give it the that gray the same as the other one and that gives me my border all right now for the third column we have two elements in it we have the kind of quote here and we have a text this all text can be the same one and again we could try to have two columns and things like that but let's try to go the same way that we did it that way here which is simply sorry which is simply to to have elements align on the other on the other way so let's add one text here which will be my quotes so that will be a regular text and of course inside of that i'm going to make sure that there's no formatting whatsoever so this is my text and of course that will be pretty big so it's going to be in the typography it's 72 pixels and then i'm going to change the color of it to be that golden color so let's leave it that let's leave it like that for now and add the other text after that i'm going to copy and paste the text from the other page so i have some italic text here oops some some things that i don't want though uh i want to keep that italic text but not all the div that surrounds it so let's do it like that and of course i want to have a different paragraph and here we go okay now for the style um i want those two elements to be side by side so let's whoop sorry i don't want to add another one but let's select this container here and again if i do like previously i put my elements one beside each other that's the new look so that's pretty close to what i want and i don't want to play with just pixel alignment and so on so i think that's going to be okay for me i just want to make sure that there's a little bit more space here first of all and also that this one goes higher so i just wanted to make sure that this is exactly what we see so let's go with that this text here let's add some spacing on the right side and remove some margin on the top so let's say i don't know maybe 15 15 pixels like that and i think it's not exactly like that so that's why i'm gonna have to try an error a little bit um let's try it like that let's see how it looks like so that's not bad here but let's add more let's say minus 20 and 20. so that's pretty close maybe a little bit more on the top so maybe minus 25 but that's about it yeah that seems good not exactly as the other one in terms of space and you see by the way that and this is what i will try to avoid uh this container here goes beyond the space of the container here so uh so it doesn't respect my 960 pixel that i have set here so let me try to see if i can change that first of all the the gap here i'm not sure that i really need that so that will surely help as you can see now it has exactly what i want except the space here that is not big enough so let me see all right so that's about what i want just need to push that in that column here so that container i'm gonna add some left spacing here so let's say padding i'm gonna add i don't know if 50 is too much that's about it could put a little bit less maybe because of this one has probably 30 instead but i'm going to leave it like that satisfied and let's do the same thing for the zeon builder so again after this box here i'm gonna add another one this section another section and previously by the way when we were at the bottom it was pretty hard to add another one so they seem to have corrected that bug so that's great um okay so let's add our editor first and again in that section i'm going to add well this section is going to be 960 so 960 pixels this text will be made the owner and it's going to be um so clear it's not the right thing that i have here so it's going to be an h2 it's going to be a line to center and it's going to be different color as well so the kind of golden color i don't like having to always click on those little three dots to see all my colors that's pretty strange without that we only see the first row but anyway that is a little bit painful to be honest but oops looks like i didn't change the right one if i open that let's go directly because i think i made some mistake here so let's go again moving from one to the other sometimes a little bit confusing um usually i'm using padding here so let's go with 60 padding top and bottom all right so now let's add a three column layout so let's first of all add some spacing here so 30 pixel i said from memory and let's create a three column layout though i know that i'm going to resize them and the first one it's going to be an image so double click choose that image might have to align it no okay and again i want all the levels above it to have zero padding so i might have to do that a couple of times if i look here i still have some spacing there so let's put that to zero and then we are all right so okay now that column is um so that one that one will be from memory 28 or 30 yeah 28 percent so let's go with that here we want that in percent so 28 here we go second one should be four percent 34.6 to be more precise but anyway and the third one here should be something like that is 7.4 let's see if it fits all right good now we have the image and second column we have our h3 which is our heading and that would be the title or the name sorry cecilia new this would be an age 3 but we wanted it to be a little bit bigger so let's change the typography to be 24 pixels uh look 18 sorry but 24. it was already 18. then let's add the lauren ipsum text there's surely some spacing here but let's see first whoops i should have already some level maps in here there we go and finally i think it's a little bit big but i would have to change that globally probably but let's change it here so that it doesn't take too much space here we go 15.00 then underneath that i'm gonna add should i have two containers i'm gonna try to just add the elements like i did with the other one to see if it's possible the image that's the one i want is the image the image being pretty small let's maybe had some padding to the bottom of that well let's do it manually like that and then some text after that certified trainer and again if i put them side by side the entire box will be side by side so i will probably have to wrap that into uh a wrapper or column in this case so let's add a container let's say though it seems to be the same thing i'm sure that it won't have any uh other subcolon or something like that okay i need to open that to be able to move it inside of it here we go so now that container i'm gonna set that to be inline block could work maybe but it's gonna be flex so i'm gonna set that to be horizontal um do i have the right container just need to make sure yeah i do looks like it influences everything around it but maybe just because it moved up and down all right so let me select that all right so it's too small again just like previously image style size let's say if i set that to 30 it's not enough so i'm gonna have to do like previously and set it manually something like that that's a little bit strange but maybe it's me that doesn't understand everything yet and here when i add some emergence to it it kind of uh okay did that on the text instead so let's remove that then still too small here we go something like that let's see styling for that okay we don't have any space so i don't know where's that padding maybe it was not in the right place here we go okay 14 pixel bedding looks like i need to remove some top margin that's pretty much it did i did i change the width of the columns don't remember suppose so but just want to be sure yeah okay so we have maybe a little bit too much padding here styling it's nice at that too well at least on the right side anyway if it's not overall there we go okay still on three lines though probably a little bit too big so my overall text here is also too big probably but anyway let's do that manually here so if i can okay i thought that there were some places here but i don't remember what it is can we yeah gonna make the image a little bit smaller then that's probably closer to the real size anyway and finally let's add some let's add back some uh left side spacing i'm still not on the text here we go [Music] margin okay that's great um the spacing here is not exactly the same so i'm wondering yeah i think the container here has some uh probably because of this one though some padding automatically automatically applied to it so now still have some bedding here default padding and then what makes it a little bit difficult to fit all right that second column here sorry this one so did i set the width to this one 24.6 yes i did okay so i'm going to put some padding to the right because i want to push it so that we can have our border like we did previously so maybe have a little bit more space here so anyway don't want to lose too much time let's simply go ahead and put a border on the right side this time one pixel and come on the ccc here we go so we have our border and the third column let's have our text our first text which is just the quotes well looks like for strange vision doesn't keep the codes that's strange let me go get the quotes so we'll go on those though typography from size 72 color golden and i surely need some spacing here as well well this one is alone so i can well let's add the other text first cecilia is usage separation and that part here would be metal size here we go so now we need to set that column here to be displayed alignment horizontal alignment here we go so let's put some margin on the right let's say 20 maybe 20 under undecided as well push it a little bit from that border it's not equal on each side so let's say 10. right that's pretty close to what i want let's take a look to see if the uh alignment is okay maybe you could put it a little bit higher but the entire box should be higher by the way it looks like if there was some uh some top margin or something like that top padding and i don't think it's the case but anyway that's probably the paragraph that does that so probably i'll have to set that minus 20 or something like that 20 25 well that's pretty good let's leave it like that okay usually the next section about uh with pricing table i usually skip it so i'm gonna do the same thing here i'm gonna skip it but i did try and we have we have pricing tables on both builder that allows us to uh to work with that as well but it's almost three hours long so i'm gonna skip that part and go directly with the footer so again here in the builder cyan build and the sorry bricks builder this time let me just try to add that way and this one really only needs one container so i should have there was no reason for me to actually do that that way but anyway can i put it outside of that or it's going to be hard looks like sometimes the easiest way is to put it between two and then putting it back there so copyright all right so that one again we'll need to set it to be the full width if we want to have the color take the entire width i want to have a background color uh dark gray so let's put it that that it was darker than that probably this one let's add some kicks inside of it fold it copyright oops what's going on there we go all right so now my text there goes my text so the copyright 2021 and of course i need to have the copyright sign here i'm going to switch to the text mode which is in fact the html mode and i'm going to add the html code here for that so at copy semicolon we'll have the copyright sign not that sorry 10 percent long day um okay so i'm gonna set that to be center line strangely it didn't take it this time but that's okay i'm gonna do it that way there we go now let's set the text to be white so typography text color white and add some spacing above and below so let's add i'm on the tech circuit could be margin or padding one or the other so let's say uh 10 above and below and a little bit more let's say let's move up to 15. here we go so now that should do that that should do it okay cool let's do the same thing here finish our project so another one here i'm gonna need some text that text will be the copyright 221 i'm going to edit that just to make sure that i can make the i can put the copyright sign and copy semicolon there we go that text will be centered doesn't change anything here as well so let's go in styling typography center text is going to be white but i forgot to switch the section so let's change the section first the wrapper will have a background color that is the dark gray and the text itself then will be white should be a little bit smaller but anyway again same thing should change that everywhere and let's put some margin or padding at the top so if we do the same thing it should be around 15 as well and there we go refresh and everything's done so i hope this video was helpful to you and comparing both builder at the same time brix builder and xeon builder so as a recap brix builder is for now for unlimited license lifetime unlimited license at 149 directly on their website so bricks dot io bricks builder sorry that io and you have the launch special is still available this is for limited time it was there for a couple of months now but at some point it said that once all the bugs are ironed out he will stop the lifetime license and by the way he offers also a 30 day money back guarantee that will start once the uh all the bugs are ironed out so i don't know if it's going to be 1.5 or 2 or something like that but you also have the ability to uh to have the oh by the way if it's just from one side it's 40 59 but for a thousand sites sorry i said unlimited i think four thousand sites it's 149. as for the uh zion builder right now on appsumo you can have that in the marketplace like i said so zeon builder for ninety nine dollars and for ninety nine dollars what you have is the unlimited lifetime license thank you for listening and have a good day just another note before you go away by the way i know that a lot of people want to compare the speed of the website and that's one of the reason why i'm looking at builders like bricks and zion builder by the way i'm an elementor fan personally and i really like how it's built i really like how easy it is to build websites with that but there's one drawback that i do admit it puts a lot of code so the pages are a lot heavier and with good optimization we can have really good scoring but out of the box it's really heavy so let's see how those two builders have performed so before the first one which is bricks i have a 98 out of the box the only thing we have for a little optimization that i showed at the start uh included in bricks but as you can see 98.4 bricks builder on a computer so it's in french and on mobile i have 86 and that's pretty surprising because the first time that i did it maybe i did something differently this time i had at least 10 points more 96 or something like that so it was really the best so i don't know if one of the few uh updates that have been since then because i think it was version one or one point one now it's 1.3.1 something like that so i don't know if the developer has introduced something that has weight in that a little bit or i didn't uh i didn't optimize it and from memory i didn't optimize it the first time for the mobile either by the way so if i took the time to optimize my page for mobile devices of course i should have a better score than that so let's be honest with that for example if i go here and change the image for smaller one things like that probably i would have a better design and by the way as you can see the design is horrible on mobile so i would have to go and fix that maybe in another video this one is already pretty long but anyway so 86 is not satisfying for me it should be 10 points more let's go with xeon builder and that's the opposite we have 97 here and we have 91 for mobiles and i think it was pretty much like that the first time so no real improvements here but the first time that i did some tests uh computer was about the same just like that 98.97 but mobile was way higher for uh brix builder than for xeon builders so again i don't know if i did something differently or if they added something that has weight in the uh because the problem is the largest contentful paint here so i don't know if something happened that has increased that a lot or dated something i don't know but it used to be higher than xeon and now it's lower so bottom line they're pretty close one to each other and way better than something like elementor probably as good as oxygen and even probably gutenberg so bottom line good builder for that still have some bugs but they are working really hard on that so that's comforting uh some ui improvements here and there maybe but overall these are not so bad builders they're good builders and they have high performance so if you want the heat of something like elementor with the performance of something like oxygen or gutenberg these two builders might be a solution for you remember brix is a theme while xeon builder is a plugin thank you you

Channel: Nelmedia

Views: 1,560

Keywords: Bricks builder, WordPress, Zion builder, comparison, page builders, walkthrough

Id: s3i_p_A0EjM

Length: 174min 50sec (10490 seconds)

Published: Sun Jul 04 2021