Bricks Reconstructed | 01: Container Basics - Bricks Best WordPress Builders 2021

hi and welcome to websites for beginners with jp and this is bricks reconstructed if you hear some noise in the background it's raining very hard but i'll try to edit it out in post but you never know it's really raining very hard on the side what we're going to do today is we are going to reconstruct this euro section that has been made in the brix builder and i'll tell you soon a little bit more about bricks we're going to look how you work with the container within bricks and then how you do all the responsive editing after we've done this which are the basics we're going to move over and change it up a little bit it's what i like to do you know just make it a little bit different and from there on we'll bring in a background as well so that you can see how you work with background images within the container and even apply an overlay this is truly for beginners or if you've never worked with bricks this will give you a good understanding of how brix builder works right so question probably you have is what is bricks if you are an avid page builder or site builder rather fanatic you definitely already know who and what bricks are and if you don't let me show you now i really thought about two or three years ago that we would be done with the amount of builders on the market but two new ones that have come to light in the last year design builder as well as bricks have really impressed me and the reason i'm so impressed by it it's a full package it's well developed and few bugs for such a new product so that's why i can highly recommend it follow the link in the description below go over to the bricks website and you will find a lot of goodies here on what you can expect when you work with bricks and of course the one thing i would point out at this moment is that they have this one-time payment lifetime license for 149 usd for a thousand i think or so uh licenses and then after that it's kaput if you want to know more about it go up here to the launch post that came out on march 16 when bricks 1.0 was released this will give you a very good summary of what you can expect with bricks but if you're not a reader then you can just follow along with the video and see how we work with it i'm really impressed with this builder and one of the things i really picked up quickly was the speed of this builder a lot of page builders come out bragging about speed and i know for a lot of people it matters a lot for most people it matters a lot but not only on the front end and where visitor speed comes in but even just with the builder itself i found it to be super fast it made it so easy to work and i was working in local by flywheel or just local at this moment great so follow the link in the description below go check out bricks and then let's jump into the builder and see what we can do here i'm gonna close that we've looked at what we're going to do and i've also got it ready for responsive modes if you want to know how it will display on a galaxy s or an iphone 12 and ipad all of these are responsive so we'll build them out very nicely within the brix builder for your information i will refer to this responsive browser app a few times because even though most builders have a way to display responsiveness i still find that having something like this that's really dedicated towards it makes it very easy for me to understand how i want to do my development if you're curious about this app that i'm using it's called is is it why i'll also put a link in the description below for you it's not free there are some subscription models i think i got this one as a limited lifetime license deal really try it out if you do a lot it will really greatly help you to understand how your website will display on different devices it's really well supported regular updates actually the updates can be a little bit annoying but check it out if you are interested hunky dory i'm gonna close here let's go to my local and where is reconstructed start my site and what i'm doing here is running it on my local server that means i don't have to pay for hosting because it's just a practice and if you're very interested in what i'm running here also follow the link in the description below go check out local it will help you to practice if you just want to practice along and we go into our wordpress good here my dashboard i've got bricks installed already we're going to go to pages and then we'll add a new page and i'm going to call this demo1 it's your first page close out demo one publish and let's just uncheck this don't need to publish publish and once it's published all we need to do is click up here on this yellow block button edit with bricks and we go into the bricks builder there is so much that we can talk about it but in each of these episodes we'll extend a little bit on what we've learned but during the reconstruction bricks we focus purely basically on the building not so much on the features but how do we create those blocks this will be your entree into bricks the first thing you will see when you create a page the first thing you will see when you open bricks and you're going to have basically four areas of importance the first one is going to be your canvas area your page and this is here in the middle this white big space we all know this very well the other three let's start here at the top this area here this is your toolbar a lot of goodies up here that you will take care of then on the left this will be a context panel if you click here on these buttons up here this will change according to what you have selected currently it shows us the elements that we use for building up very important on the right it opens the structure which is like a folder system of a framework system of all the elements and containers that you have on your page and as we begin to work on that you will see how this works so where do we start well in elementor we start with a section in divi we start with a row in brazil we start with a block so it can be a blocker section it used to be different until the 1.2 update for bricks and what i mean by used to be different they had very similar approach to what dv had like a row column etc all of that has been taken out replaced with one element called the container you'll see it over here everything that you do happens within a container a container is a section a container is also a row and a container also serves as columns it is just a very broad concept and i know some will get confused but where is my row where are my columns how do i do that you do that all with the container the other thing is that this is a work in progress it works perfectly but we do know that as feedback comes back from the community this will have some new features even as i'm showing you this this button up here which we'll talk about later already has changed a little bit in a few updates so that's great lots of development going on always getting feedback from the community and bringing in those features to make it easy for you to work with now that we have an idea of what is where let's go back to the page and let's start with the container we've got these three buttons here insert container template that's layouts and then also understanding the layout we're going to start here with insert the container click on it and a container hops onto the page two things to observe first of all we have this orange box here which is the color of the container second thing is here under structure we have this label that says container this is going to be the framework that shows us what fits in where currently it's a container as i hover over it you will see it highlights to show that we are selecting it it's not selected we're just hovering over it to select it again there's been some changes it's very easy now simply click on it again observe what happens here on the left when i click on it it goes into the container settings and you can also see that here in the structure this label for the container is now highlighted if you don't believe me just click out here and you will see it unselects that one deselects on selects click back on it and let's see what happened to the container we have here that little pencil that is our edit it used to be the edit function it doesn't really serve that now it's now just a move handle and over here we have a container within a container function i'll show you soon and then here we have draggable handles that can give us some width changes and height changes i haven't really used these two but they are there and they do serve a very good function so we'll get to them eventually through the tutorials with the container selected go to this little plus here and i told you this will give us a container within the container and this is where the flexibility of bricks really comes in as i click on it it's going to add another container you won't see it now but you will notice here on the right that we have now a container indented here under this one this means that this container is a child to that one if this gets very confusing you can actually just put your cursor there and you can call this like your main container and then you can call this one like a sub whatever numbering system or titling system you're going to use now as i hover over it you're going to see now that i have the orange which is the main container and then the blue is going to be the sub container so this little plus is not a clone or a duplicate it adds another container within that container if i go then to the blue one and i click again on this one it's going to add another one you can see here so we can call this let's call this second level or would this be the third level i'm not sure and you'll see as i've clicked on it i've selected it and we have the pink box up here we go to the pink box there we see the plus and i click again and i can select this so we call this third level and it remains pink after this everything is pink now how many containers can you go within a container quite a number bobby if i go here and i just keep on adding then you will see it will just keep popping up below it this is really powerful you are not restricted to how deep you can go here of course don't go crazy it's unnecessary but you are definitely not restricted by it now that we've created this mess how do we clean it up from the structure panel we have this one here remove all let's see how you can first delete individual ones select this container and it will automatically highlight the container that is selected the first way is to right click and then you will see this context dialog box pops up you can clone it you can copy styles we're going to delete it i'll click delete and it's gone let's do the same for this one click on it right click and delete there's an alternative you can go over here hover on the right side and then you will have a few options here all the way to the left here if you click on it it will delete it and then like i said this one up here removal you can remove them all we need a container to really build out our website so let's bring in the container again this time instead of clicking here on insert container i'm going to go to container here and click on it you can drag or you can just click and it will pop it in and there we go now here is a important thing that i will stress a few times that's going to throw you off if you're not aware of it this is a canvas size and it's set up here by this breakpoint which is 1107 pixels this is however not your display width which is important to understand because the container you're bringing in is coming in with the canvas size what does that mean let's go to the structure over here this panel can be collapsed and you do it by clicking up here on the structure icon click on it and you will see it shifts everything and now we can see the container but we do see white space on the left and the right this panel on the left can also be collapsed for that you hover here on the side and here in the middle you will see the collapse little icon and it goes away now you truly have your full width your viewport width and you can see how it looks and this is important to understand that the container that comes in comes in at your canvas with it's not exceptional we see it in most builders but it's important because you have these two panels on the side open and these two panels are going to fit to the canvas size which is this 1107. let's bring the panels back and i'll show you exactly what i mean click here to bring in the left panel and up here for the structure we bring that back now to select i showed you before very easy just click on it and you select it and let's look what we've got here on the left we've got content and we've got style so the first tab is going to give us everything in terms of how the content is spaced and how it works and then style those are usually things like topography and colors everything that comes to how it looks that's under styling i'm going to add a background color here so under style go to background i'll scroll up a little bit so you can see better and then here background color select and we've got a nice little dialog box here with the number of preset colors and what i'm going to do is bring in my own hex code i'll click here and then i'll just type in in this case i have one that i use a standard gray called 36 36 36 and there we go so this is the gray that i'll be using for this one right i'll just click here i can close it as well and let's go back to the canvas now you will notice those little white borders there on the left and the right and that is your cue that this is not full width to your display width let's close the structure and you'll see what i mean as well as this one collapse and if we wanted this to go full width we need to make a few changes let's bring those two features back where is this one over here click again on the container and now we go to the content and this is where we're going to set it to display full width you'll find that here under align container and the one that we want to select is this one stretch as i click on it you will see those two little white borders disappear because it is now stretched to view it in a much easier way we can use the preview mode i think it's called preview up here so you go to the little i and you can click on it and it's going to pop you into very simple preview mode however we don't see anything because strictly speaking if i click on it and go back to the builder there is nothing this is an empty container we need some content in it before we can see it so let's bring some content in and we'll bring in a heading as we are building out that hero select the container and with it selected you go to elements here click on the plus and then you click on heading and it will drop it in there for you within the container and you see now that we've added that element the container will shrink or expand according to the content that we've brought in now when i go to my preview mode you will see my dark bar up here and my text here and it is stretched all the way full width let's go back and the shortcut key that you have to remember i'm very fond of shortcut keys ctrl p on office and then command p on a mac as such very easy control p use switch and toggle between the preview and the builder next to that is also another important one is the save and that is control s command s very easy and it will even give you this little every time you save it say something else like grind ground very good skillful well what else can i go through here excellent and you can go through that now we have a container and within the container we have an element as i hover over the element you will see it has that teal turquoise border that's always an indication that we have an element on the page and then we have the structure here on the right that is a nice guide for you to see what's going on if things become too crowded you'll find them there very easily container and then we have the heading within that and we can also collapse it here if we don't want that to appear if we need to free up some space let's begin building up click on the container and the first thing we'll need to do here is tell this container that everything that we're going to add to it to put it within center with the container selected under content we go to align items items everything that is inside the container and we're going to pop it here on center and you can see it moves to the center unfortunately at this moment we cannot see it very well because it's dark font against a dark background we'll fix that very soon now comes i have to say one of my favorite features of any builder where you can drag on the page it just makes it so awesome with the container again selected as i hover here at the bottom do you see that little orange overlay there click and hold and drag and this is going to add padding this is to the bottom and i can go to the top hover click and drag and i add padding there you can do the same on the sides very very nifty click and drag and also on the left but bobby there's so much more here and this i think the best i've seen on the market go to the bottom and you will notice this little link icon that we've got here there are three states it starts with unlinked which means if i click and drag it's only going to increase the height of the bottom padding if i click on it it's going to say opposites linked beautiful wonderful masterful thank you thank you thank you now when i click here on the bottom it's going to give the same value to the top and the bottom thank you very much for that so easily done no bugs here i've tested it how many times because a lot of builders out there have this option and it's very hickey this one is beautiful but that's not all if i click on it a second time it's going to give me all sides link now when i drag it you will see it's going to give me the same values for top bottom left and right that is really super cool and just clicking again on it it will unlink it now it's on the individual basis click again opposites and if you want to do it over here on the right if i drag this one opposites are linked this is really smooth i'm really impressed by this really good job here if you want to have manual control over this set it to a very very specific value go to style and then layout and then you will see your padding over here you can link it and unlinked of course you're not going to have opposites here it would be nice if they could give us opposite feature here you know put the right and the left next to each other i think dv does that and then the top and bottom that you can also link it here that would be pretty cool while we are here collapse this let's have a look under style we have layout topography background border gradient and i'm reading things that you can read for yourself what is important to note here though is that you see these little dots next to layout and background they indicate that changes have been made to the default setting super again i love this very easy to work with and as i unfold by clicking on the layout label you're going to see there is a little dot again next to padding so nothing has been changed margins with height etc or any of the other functions we have here it's only padding and what is great about this is i can go here next to that padding where the little dot is and when i hover over it it turns into a reset function if i click on it what do we expect to see click and it goes back to the default settings that we had you also see that the dot has now been removed next to layout because there's no more changes to the default let's collapse this and go to background let's do the same here you see the color and if i click here it's going to take the color away awesome let's bring the color back i'm going to just click here again 36 36 36 this time before i leave i'm going to click here on save and it's going to add it over here and that little green dot is going to show that i have used this color and then let's close here and then let's go again here and drag in some padding i'll put this on around 100 and to the side do i want to put yeah let's put a little bit of padding here also 100 i could have just linked them all great so we've worked with the container enough of the container let's work on this element here and make it shine click on the element and you will see it says here now heading that shows us we're working with a heading element and over on content we're going to get everything for that and then style everything you can do for this element to change the content of the heading you can do that in two ways you can go over here to the content area and type it in here or you can simply select all the text within the element and then type in yourself i'm going to type in here lorem ipsum the first thing i like to do if i have a dark background like this i'm going to change the color of the text and the moment i say color we're talking about styling we click here on style topography and then the color is down here click on that and we see there's already a white as a default color set for us and we're going to click on that one at this point if you've worked with bricks you will know that there are themes and styles and save functions within this builder that are really awesome i'm not going to feature those during this reconstruction but we will get to that in a feature focus in the future so just take note of that there's so much you can do within bricks by setting up themes and easily apply them across your pages and your site i've chosen the white here and then i'll just click on it to select out and now let's build out everything under typography the first thing is i'm going to change my font so if i click on font family gonna look for poppins very easy and select poppins then under font weight i'll choose 500 and then font style will just be your italics not going to use that text align i don't need text transform i'm going to put it on uppercase and then for the font size i'm going to put in 20 a few ways that you can change values within bricks the first one is to select everything and just type in the value like i'm going to do with 20. the next one is to use the up down arrow keys like so and the other one is to click within the value area and drag with your cursor up or down i love this one but naturally if you want that detailed control you will have to select and of course there's a fourth one this one here of course naturally completely forgot about that let's drag it again to 20 see if yep there we go line height now line height is set in m so don't mess around with the values here and i've determined that the line height is by default set at a 1.4 m this is the default setting within bricks the reason i tell you that is often when it comes to headings i prefer no line height at all and rather use padding and margins for spacing linite is very important when you work with paragraphs because it will give you the space between each line this is a personal preference it's completely up to you so i just point out to you that i figured out that the default setting is 1.4 in case that matters to you let's reset it over here by clicking on the x next to line height and then we go to letter spacing we're going to leave that in pixels you'll see the value up here and i'll type in two there we go and now i'm done with this i'm very happy with this first tag line overheading what we have created now we bring in the main heading go up here to elements and the shortcut key on your keyboard is ctrl e command e and this will open up the elements panel let's have a quick look at what's going on here what you can expect from the elements panel one thing i really would like is to have a collapse all function here currently you have these categories and you have to close them manually one by one i do would like to see a collapse or feature for this one similar to what we have here on the structure on the right where it says collapse all of course that's why you get the search elements here if you have an idea of what you're looking for you can search for it but to give you an overall idea i've collapsed them starts here with basic and these are your main building elements container you have the heading which we've used you have text your button icon image and video under this is general so these are the ones that will help you and there's a lot dividers countdown all the good guys the usual suspects that you are expecting media you're gonna get some containers for carousels and image gallery instagram and twitter and then you have also your wordpress and then under this single this will come to your single posts that you're going to be using these for building out any of those dynamic data elements that you will need for your container we are only going to stick to the basics because that's what we want to do in the reconstruction is understand the basics to bring in and what i want you to notice before i do that is that i haven't selected anything i know that because there is no border here as well nothing is highlighted here on the right if i click now on heading to bring in my main heading it's going to drop it here under the container not a good idea not to have it in a container so how do i take it into a container there are two ways i'm going to undo what i've just done and undo you can do up here where it says undo or i recommend you the shortcut key ctrl z command z and undo that the two ways then let's click on the container make sure you click on the container and then you go to elements and click on heading and it's going to drop it under the last element that's already there controls it command z undo the second way is to hold and drag and you will see that thick gray line appears and that shows you everywhere that you can drop it so i'll drop it there and again there's a heading that appeared over here do you remember how to delete it right click and delete hitting so there we have it let's also delete this one right click and delete make sure you didn't select anything click anywhere on the canvas and then click again on heading i just want to show you what happens when it drops outside a container and you want to move it to move it you can go here click on the little pencil and then you just drag it and you look again for those areas where it shows you where you can drop it alternatively you just go here to the structure go to the right until it changes to move handle click on it and now you just drag it within the container and we're going to place it under that heading and there we go let's select it and i want to add some lorem ipsum text here a little bit more text so let's go open another tab lorem ipsum dot io this is a great generator for lorem ipsum if you ever needed one that gives you a little bit more than the standard text so i'm going to select five paragraphs generate it and then let's choose something longer here up to here copy let's go back select all the text i triple click and ctrl v command v to paste the text and now first i will style it out go to style topography change the color choose white again and then i would have preferred this text color to be at the top poppins now you see i'm typing in poppins again again i'll show you later how do we set a theme so that i don't have to go and select poppins every time i'm using a text or a heading element it's already set as the default popens font weight this one i'm going to put at and then we're going to say text transform uppercase uppercase font size i'm going to make this 40 and now i have to do a few things i want to center align this text you can either select all the text on screen and then you will have this toolbar at the top from where i can select this one align center or with the element selected go to style topography and then over here you will see it is now already to center if i reset that it goes to left again select it put it to center and there we go it's in the center now i want to show you a very very important thing that when working with the container within bricks that may catch you a little bit off guard and it's going to be a solution of a few different ways you'll find maybe something that works for you but i just want you to take notice of it with this long long sentence i've got here i actually want to break it into two lines novices will do this they will click here with their cursor and they will hit enter or return on the keyboard and do this don't break lines just never do that because it's very bad for especially for responsive viewing click backspace keep it one line i'll put my space back in there what you need to do is either bring in padding or you change the size of your container so that you can squash it into two lines what i'm going to do here is i'm going to grab my padding on the left and i'll click and drag it in and then i will link it here and i'll drag it until i see it like that see i've got these two lines perfect i mentioned to you also that i'm i want to decrease a little bit the size between these two lines the spacing i'll go to topography and i know that the line height is set to 1.4 but i'm going to reduce it to 1.2 then i want to add a little bit of space between this upper heading and then this main heading click on either of them and then hover outside you see this is inside outside that's your margin setting click and drag and i'm going to add space and you will see again here we have the heads-up display i'm going to put it on 35 pixels click outside good looks good here's the thing though the one thing i want you about it looks all hunky-dory but look what happens when i take my structure area panel away now this container of the element stretches and what's going on here now this is part of the flex model i'm not going to go too deeply into it but this element is stretching according to the size of the container and the container at this moment is set to full width now what you can do if you want to make sure that it doesn't do this that it keeps it here at masa and not when you move it bring it only to this part is that you're going to set a specific width for this container so for example i will reduce i'm going to take away the padding for now or did we lock that we did unlock it link opposites link okay take it away and with the element selected i will go to style layout and then over here where you see width i'm going to give it a specific width in pixels let's try 600 nope that is too small 700 perfect now when i collapse the structure it will honor that because that container is going to remain at 700 pixels but i actually don't recommend this either so what i'll do here is i'll go to the width and i will reset that to the width it was and then let's bring the structure back so to solve this i will bring in a container within a container so my first container is going to be the full width container my second container is going to be my canvas size does it make sense let's see let me show you the solution the first thing i'm going to do is click here anywhere make sure nothing is selected and i'm going to click on container and it's going to give me a second container i'm going to click on this container and then align container stretch it now it's fully stretched let's change the color like we did before background and because we have saved that color i can simply go here to the bottom and select it now these two containers are so close to each other i cannot see the difference so i'll just go to the margin area click and drag to give us a little bit of space between these two i'll bring in a text element again go to plus make sure it is selected and click on heading over here lorem ipsum go to style topography change the color first white and then we quickly go through this as well make it pop-ins find the weight put it at 500 uh text transform upper and we put it at 20. oh that's 200 220 and then for the letter spacing we put it at 2 and then we center it to the container so we click on the container content and over here align items to the center nothing different to the previous one let's save it ctrl command s and then to see the preview control command p everything's still looks the same right ctrl p to go back click on the container until you see the orange line and now go to elements and add a container within that container click on the second container which is blue and now i want you to collapse the structure over here so you can see the difference this container is set to the canvas size the container outside it is set to the display the full width to ensure that when we want to create something like this it responds to the canvas size you put a container within a container there are so many ways you can achieve this this is really just one of those ways but i found that it really works very well for me what we need to do now is bring in all of this content within the container so i'll click here where i see the move handle and i'll drag it in and let it go now i also have to make changes to this container align center and there we go i'll go to this element drag it and drop it under this one and then click on the main container let's link it again put it on 100 like so okay and now instead of putting padding on the outside container i'm going to go to the blue container the inside one or for all intents and purposes we often refer to it as column i'll click on this one and now i will bring in the padding so first thing we'll have to do is just click on this one here make selected and i'll go to all the styling and i'll take away all the layouts so it's back to the default and all i did was click here next to layout to reset it now i'll go to the blue container selected padding drag link them and now as i drag i'm going to get the same effect the difference is doesn't matter if i have less space or more space it's going to remain the same i won't have problems with it breaking into another line or not breaking as i wanted it to break let's delete this one up here i'll go here on the structure to the right and click on delete and then for this one we can remove the margin at the top to do that i'll just go to style layout and here where the margin is go to the left and reset it brilliant let's add some space here i'm going to click on this element and then we bring in again we put it at 35 35 great now that was a long workaround it isn't once you understand how it works you will understand that you have your normal block or your section and then when you bring in content you usually have it within a column that's a good idea so think of this as a section and then think of the second container as a column this will make your styling especially when it comes to responsive design so so much easier love it love it so flexible and you can see over here how it works you can even call this one column if you want to next we'll bring in a button so simply go here to elements and i'll click on the button and drag it and i'll drop it here oh it drops there no problem i just drag it and there we go i'll add some click on it outside bring in some padding i'll think i'm going to put this at 75 75 pixels great and then to change the text i select all and we will say view more and i'm typing in caps this time add padding so in the middle drag and then i'll link it first both sides and i'll put in around 40. come on let me go to this site okay didn't link let's try again opposites linked okay 45 i like that and the top padding i'm happy with that selected click on it and then over here we go to style i'm going to change colors background i'm going to put it on white great that's enough for me and then the topography we have to change that as well same procedure put it on poppins and the font weight we're going to put on 300 and we already have it in caps so no need for that and then the font size i'll put it on 16 and line height not gonna mess with that later spacing i can put it on one give it a little bit more space i think that is good what i want to do with the button at this moment is i want to give it a hover status so that when people hover over it the white will fade out a little bit to do that within bricks you have a complete hover state function up here in the beginning i thought this was like selection tool i switched it on i didn't realize it was hover and i messed up a lot of the work i was doing so note that that little arrow there is for your hover state when you click on it you're going to actually see that bricks will tell you you are currently editing hover styles and if you want to go back to the default display you just click here on edit normal state all the changes we make now while in this state will apply only to hover so we want to do that to our button select the button and the only thing i want to change is the background color i go to background and i select white and i will decrease the transparency a bit and now we can exit it click again here on hover styles now we're in the default view and as i hover over it you will see it changes there's a lot of other stuff we can do here as well like transform may get a little bit bigger etc we'll just stick to this one at this moment let's save our work i'll go here to save and then let's preview it and as i hover over it you can see it changes indicating to the user that hey this is something you can work on let's bring a link in here click on it and you go to link here in the panel under link type you have a few options we're going to choose external and then over here we're going to put in the lorem ipsum generator so i'm just going to select this one copy and then paste it ctrl v command v and then scroll down open a new tab yes save or preview and while in preview you can view it on the front end by clicking on this button view on front end and it opens the front end for you as the visitor will see it sometimes the preview is not going to give you that 100 but when you do it like this it's going to give you a little bit more reality if i click on view more it will open the lorem ipsum generator for us absolutely stunning awesome how convenient how super that's how quickly we had built out this euro block this euro section let's just click here again on back to builder i want to give it a little bit more padding here at the bottom let's make it 120. let's take quick stock of what we've done here we've brought in a container this one which is our main container and then i've added another container inside it to act as a column it makes it much better for your styling and layout especially when we get to something like your responsive design which we'll touch on very soon i brought in elements i have a heading then i have another heading as my main heading and then i have a button over here and we've added a link to it as easy as that let's talk about responsive design which is our tablets and our mobile devices very very very very very very important and that you can see up here you can also use the shortcut keys control or command b the breakpoints are set here so when we go to tablet portrait it's 992 pixels and over here we have the mobile landscape and then we have mobile portrait and you will see it's 478. still a bit big and you'll see soon why i mean by still a bit big but let's go back to our main display which is for our desktops and also for our laptops control b command b takes us to tablet portrait the moment you enter the state anything that you can change will appear in the style and the content and those things you cannot well you cannot we know two things here for this one that there's too much space here and this doesn't look good as we're in tablet well maybe the font size is still big enough we can reduce it a little bit i click on the element go to style and then under typography you see it shows us that we currently or previously put it at 40 pixels i'm going to reduce it let's say 30 this time 30 pixels it's still three lines which i don't like but because we made changes to this blue container all i need to do is grab the blue container click on it and let's link the opposite sides and i will reduce it until i get that effect again beautiful i go back to desktop nothing has changed i go to my tablet and now we have this setting we go to mobile landscape similar procedure here but very important and i'll talk about that very soon let's reduce the topography the font size this time i'm going to put it around 26 and then we click on the blue container and we link it and reduce until we get to that site and then let's do the same for our mobile portrait here we'll have to reduce the topography quite i'm going to put it at 18 and then same thing link a and there we go nice i'm actually going to drag it quite a bit so we have it like that even the button i am inclined to make smaller but good practice is when you are working on a mobile device to make sure that your links your buttons are big because it's very difficult for people to press it with their thumb and actually when google scores you in terms of your rating for your site and they go into your mobileness your mobile responsiveness they look at the size of your buttons and they will tell you hey your button is too small or your buttons are too close to each other remember that when you are working with mobile devices it looks all well here but this is unfortunately where page builders fall a bit short we get the break points from left to right which is our viewport width but when we go to mobile landscape we don't really get the height so for example you would think this will look good but i'm going to show you how it will actually display on a mobile device so i'm going to grab this url here ctrl copy and i'll go to my developer this is the demo so i'm going to bring in the new one control and let's reload that i don't think i saved it i didn't save the work so that's what we get before we made those changes horrendous i say all right let's go back let's just put it on desktop and remember to save it ctrl command s you can even preview it again looks good now we go back to cc sizzle and reload all devices and we should get it looking good now this is a galaxy s9 at 360 pixels resolution for the viewport with it looks good you see it doesn't re it doesn't break that well a few settings we may have to change here why are there two masamasa interesting i didn't even notice that but what i want to show you is if i take this iphone 12 and i rotate it landscape you see now it looks like this and this is the rotate function this breakpoint that we see here when you get here you really have to take away some of the padding at the top and the bottom so let's link them reduce it like so and even click here on the button and we reduce this and we're going to click on this one where's the container and i'm going to just bring in anyways there we go let's link it opposites link there we go two masamasa next to each other right i think this looks better i think we can also reduce some of this margin up here put it to 20. and let's even reduce that font size typography it's a 20 i'm going to put it on 16. okay save your work control command s let's go and view it now on this one reload and it should be much better much better so now you get the idea of what i was telling you where the problem comes in with many of these devices that even though it looks good in the builder it gives you an approximate of how it will display and 99 of the time it's pretty good but just take a few things into consideration that when it goes into landscape you actually have a very wide view panoramic view but you will need to take some of that spacing out at the top and the bottom however when you go to tablet like this one here on the right you will probably bring in some padding again and over here our cell phone looks again a little too cramped this doesn't look good on the cell phone let's go back here and we select a mobile portrait and what i'm going to do here is simply click on our main container let's link it and do this and in this case i will click on the button bring in more space let's click on this one and link it and reduce it like so and save i think that should be fine let's have a look did bricks impress does it sizzle it does sizzle look at that sure i always breathe a big sigh of relief when it works like this because if you've worked a long time especially with gutenberg gutenberg editor can drive you nuts when it comes to responsiveness i'm always quite interested in what other people know that i don't know when they praise the gutenberg editor because when it comes to the responsiveness you just don't get the flexibility like you get here within the brix builder absolutely stunning we've basically gone through everything but before we do that i'll just go back to the break or the desktop one i just want to point out a few things let's start here with our main container as you click on the container you will see you have a position for html tag it's set to div you can put it to section if you want to designate it as such if you click on the text your html tag by default is set to h3 same for this one it's h3 but this one we probably want it to be h1 or h2 i usually go for h2 so i just put it on h2 and the button of course it's just a button a lot of stuff that we're still going to cover in other reconstructed videos this one we've got it so far so let's make a few changes here the next thing i'm going to do is i'm going to duplicate this entire container and we're going to make it a light container or a light block i'll go to the container here on the right and then here you have the clone or duplicate function and it will give us two you can see here if i click on collapse all i only have container and container very difficult to see the difference between the two like before i'll click on this one hover outside until i see the margin handles click and drag and let's give it about 100 pixels space just so we can make a difference and differentiate between these two there we go first thing i'll do is change the color of my elements my heading elements under typography color and i choose this one that we've saved and it's going to disappear and then style topography change this one up and now i will click on the container and change the background to white i also can just reset it and it gives us the white background add a border go to border and box shadow click on border and i'll give it all around 25 pixels border and you have to select style here put it on solid and then the border appears and i'll give it the same color as this one that we've saved change the button a little bit click on the button background and i think this time we're not going to give it a background okay let's let's just clear it if i click on clear no that doesn't work let's put it on white that's not 100 white yes that's f5 f5 i didn't even pay attention to that i'm going to drag it all the way to fff there we go and then let's give it a border background border border i'm going to give it two pixels all around again give it solid and we put the color to the one we had saved that looks pretty nice and that's it in a jiffy we've created the dark version and i've created a light version with a border now let's bring an image and see how that works again i'm going to go to the top one over here i can right click on it and i can select clone container another way to do it this one is now here between these two i want it to be at the bottom so all i do is go to the right once i see the move handle i click and i drag it under this container scroll down let's click again on it container outside and add margin so we can see the difference i love it when things just run so smoothly get all excited 100 pixels there we go and now i'm going to bring in an image so we do that within the container click on it background and we can reset the color select image and media library oh no image let me quickly grab one i open my explorer where i grab this image click and drag and drop insert and voila one thing to note though here is that its layout is set here on the background position to top left i recommend in most cases you're going to have it at center center so i will put it on center center from the beginning if it becomes a problem later in mobile or tablet you still have that responsive power over it now this is pretty awesome everything is great so i can save and we can go to our and update to see how these other two blocks will behave and the great thing is because we already made them responsive previously they're going to also be responsive for these guys so if i just scroll down here we have a desktop at 1920 hd and a macbook air over here and as i scroll through it you can see this is our light version and this is our version with the image beautiful naturally we need a little bit more contrast when it comes to an image like this where we have a dark background like the greens over here but the skin here where the button and the majority of the text are it's just a little bit too light we cannot read it that clearly so we bring in an overlay go back to the builder click on the container and then let's collapse this background and you will see gradient overlay select this and then under apply to or next to apply to you are going to select overlay this is an overlay that you want to apply click on overlay and then click add color and i'm going to add click on the color i'm going to add a black the moment i do that you see it overlays with a black color to give it a transparency you have to reduce the transparency of the color so i click here and drag it and bring it down quite a number to about 0.3 which is 30 and that takes it into rgb the moment you bring in transparency we are on rgb don't get caught up in that though good and we can just click outside here again how do i get out of this one click here okay good and the great thing is you can even bring in gradients here so if you want to bring in a gradient a second color you see we have color one i click here on add color for a second one again select the color i'll add black and now you will see the gradient as such and this is very nice often people think of gradients you bring in a white on the one side and a dark color on the other side but it's also very cool if you have a gradient that's just one color almost like a fade effect so i'm going to also put this on black but i'm going to reduce the transparency to around this 0.6 very nice effect that we have here and you see you can even drag these two around let's save our work and i'm going to go to this one and just click on it layout and add some margin at the bottom so we have some white space at the bottom also to work with 100 let's scroll down save it ctrl command s and click on your preview mode there we go looks good excellent i love this builder and then if we go to sizzy and we refresh you can see that it just works and displays so well very nice and fully responsive there is so much that the brix builder gives and then so much more coming i think next in the pipeline is a woocommerce builder but there is really an amazing amount of features here that you're going to find in the top builders in the market at this moment i kind of feel breaks is a combination of so many good features that we see in other builders if you come from oxygen you're going to be happy with it if you have used elementor there's going to be things that are familiar with that dv you're going to find certain features in that it's really very intuitive to use and i think very well thought out and in my opinion user friendly of course with the container you have to kind of get your head around it and in the next video we're actually going to be looking at how you can create columns with that container or i think the video after that great that is bricks it's an introduction to bricks the first part that we have reconstructed hope that was helpful see you next time from me jp have a nice day

Channel: Websites 4 Beginners

Views: 2,363

Keywords:

Id: 84CUO-tpEMk

Length: 58min 36sec (3516 seconds)

Published: Fri May 28 2021