[MUST WATCH] How To Make Any Page Layout Using The WordPress Block Builder Gutenberg

in this tutorial video we're going to go over building complete pages using the gutenberg block builder that comes with wordpress it's a little different than using the block builder to build out blog posts because there's a certain structure that needs to be in place and you have to use gutenberg in a certain way it's super easy and everything's going to be crystal clear for you after this video but i want to let you know i want to kind of dispel a quick myth and it's going to totally make sense and i want you to know that all page builders work exactly the same way they might do a little thing here different or a little thing they're different but they work exactly the same way so if you have any experience using elementor or beaver builder or divi i'm going to show you how to take those same concepts and apply them to building full pages using gutenberg so i have this thing called the three c's of building pages in fact this is how all page builders work including the block builder and i'm going to demonstrate this all in this video so you have three c's the first to see is a container and a container could be called a section like how it's referred to in elementor a row like how it's referred to in divi and beaver builder it has different names but all it is is a container and in the block builder it's going to be called a row and so you have this this uh main container and it has a background image or a color or a video you might have what's called a space divider or shape divider on the top or the bottom you also set spacing this would be your margin and your padding and you can also set your width inside these containers so every page building tool the first layer is a container and a page is just a series of containers next inside of that container you have a column or columns meaning you can have one you can have six columns depending on how you want to split up the spacing inside of the container or the row and inside columns you also have dedicated properties to it such as background spacing etc and so so far we have two of our c's the container the column and the third c is your content and your contents gonna simply be text images video buttons special modules like that that build a style testimonial whatever it is it's pretty much all just content every single page building tool works exactly the same way and i'm going to show you how you can use this same three c's concept and apply it towards the wordpress block builder to further demonstrate this i have in front of me a page built in elementor and so some of the properties right off the bat are it's full with edge to edge there's nothing like a page title up here there's no spacing on the left or the right it's full edge to edge so that's one of the properties when you are building a page in a page building tool now elementor has something called the navigator i can click right here and pull it up and there it is you can also move it so what we see in the navigator is a list of these containers so the first container is the hero section and that's what we see right here inside of this container we have the second c which is a column and that's right here you can see it's now selected and inside of the column is what an image which is essentially just content in the main section right here you can see it shares everything in it shares the same background image so this is the three c's in action the same goes to the second section which is right here so we have a second container that has a little bit different of a layout it has a different background color and that's what we see right here so we have our container and this container happens to have two columns in it we have this column on the left and this column here on the right and it's essentially the same thing there's content inside so in the column here on the left we have a heading a divider and text and on the column here on the right we have a basic gallery all it is is the three c's a container columns and content that's all that it is and we continue on and it's the same we have a heading we have some text and image and we have some more text that's all this is and what makes one container different than the other container is simple the background image or color is what's separating them okay so we go on and on and on and all it is is the three c's everything you see here is the three c's and you could take these three c's and you can apply it to any page building tool including the block builder now there's one thing though that elementor and all the other page builders do a little different so i'm going to click the dial pad here and i have my list of content these are content right heading is content and images content so if i scroll here to the bottom if i want to just say drag this heading right here watch what happens when i let go it adds the heading but it does more than just add the heading let me pull up my navigator and scroll to the bottom okay so what it did is it automatically created the first c which was the section right here the container then it automatically added a column and then it dropped my heading in it this automation you don't get that inside of the block builder you have to start backwards you have to manually add a section and then choose your column structure and then add your content to it not the other way around like you just saw happen so your page builder will automatically create the underlying structure the other two c's right the container and the column and then it'll place the content in it that doesn't work that way when you're using gutenberg so here i am on a page that i created and i simply named it block builder so in the top right we have these three icons right here the first one is the gear icon and these will be settings and it will change based upon what you're editing if it's a row or a column or content it's going to change then the second icon right here is when you're using the cadence theme and these are to set up your page settings so we saw in the elementor page it's not showing the page title it's full width it's edge to edge and all these things are happening we need to set that for this page that we're going to build and it's very simple we say no we don't want a page title for the page layout we choose full width content style we choose unboxed vertical content padding we disable show featured image we disable so this is now set up exactly like you would set up a page you're going to use or build with a page builder now these settings can all be set globally and have them apply to all your pages and i'll link to a video down below where i walk through all of those settings so this is the very first thing that we want to do and then we'll click on update so that is set and now you can see the title and the area to put my first block is now all the way on the edge so it's edge to edge now now here's the thing gutenberg by itself doesn't have these structural elements so it doesn't have a container that is where cadence blocks comes in so what i'm going to do is go here and i'm going to click on plugins add new and i'm going to do a search for cadence blocks here's cadence blocks i'm going to click on install now and now i'm going to activate it cadence blocks comes with the structural elements that you need and the other essential elements you need to build out full pages using the block builder now here i am back in that page and we see a new icon up here that has the logo for cadence blocks and this will pull up the specific cadence blocks settings so i want to click on it and make you aware of the block defaults right here so it says block defaults i'm going to expand this right here and there's one that is very important to making full page layouts well you can set defaults for all of these but i want to check the default for the row layout so i'm going to click right here and so these will be the default settings that will be applied every time you add a row to your layout and i want you to just be aware of these but there's one underneath structure setting right here and it says content max with inherent from theme so what this means is when you set up your website you have a setting in the customizer that says how wide is the website it's typically 1200 or 1250 pixels wide so when we toggle this on right here what it's going to do is every time you add a new row it's going to make sure that width is set exactly to what the theme has it set to this is going to save you so much time now there's other settings here that you want to be aware of for example the padding and margin by default when you add a new row using the cadence block row it's going to add 25 pixels of padding to the top and the bottom now you can change these on an individual basis these are the defaults i know for me i tend to like more padding than that i usually like to have 80 have it set to 80 and if you're not familiar with what padding and margin is padding is space inside margin is space outside so if you had two sections or two containers that one on top of the other the padding is the spacing inside of that container and then the margin is the space outside so it would push the other container down so i'll try to demonstrate that a little bit more but you also can set it for different devices here for the defaults for other devices so you might want to get used to how you like this set up and these are the defaults if you already have a site built using cadence blocks and then you come and try to adjust these defaults it doesn't affect all of those once you put the row out the row is out there and you have to adjust the settings individually but this will save you time setting everything up so now that i have that set up i'll click on save and close and we have other defaults here as well that you might want to make yourself familiar with now i have one other tip if you liked that navigation that we saw that inside of elementor there's a free plug-in that will add it here to the block builder only if you want it there's two other ways to have the same thing so if i go back here and i click on the plug-ins the name of the plug-in is block navigation so it's a free plug-in and you might want to use this if you build out complex pages i'll click on activate and i'll use it for a little bit in this video so you can see it and you can decide if you want it but there's other ways of having sort of a navigation like that so i'll go ahead and click on refresh and now you see it added a new icon right here and when i click on it this is the navigation so as i build out the structure you're gonna see it all added here and you can quickly jump around exactly how we just saw it inside of elementor it can be very useful when you're first starting out okay so now let's get started using this concept of the three c's i'll click on the plus right here and i'm going to enter in r o and choose the row layout and then that is our first container and right now it's asking me the second c right and this is columns so if i wanted this to be my column layout there i have it see we can see in the navigator i have my row and i have my column now the other way of seeing exactly what you're editing is down here on the bottom left it says document row column another way is the three slashes right here and it says row and then column and so this will keep expanding all three of these will keep expanding the more that i put content in so i can go ahead and now click on plus and say add a heading and i'll use the advanced heading because it's advanced and it's great so now let me put some content in here okay so i put my little bit of content and this is where some of the unease might be you don't know what you're editing you don't really see any defined lines and you don't know what you're what you're actually in so if i see over here on the right i can see i'm in the advanced heading right now and when i go here you can see the structure as well and right here you can see i'm actually in the advanced heading so while the navigator's up you don't get access to the settings for the block you might be working in that would be right here when i click on settings so i can see right here that i'm editing the advanced heading so for this i might want to setter center it just do a little bit of alignment right there i might want to make it an h1 tag and we have all the various settings to style this heading exactly how i want one of the beauties of using cadence blocks is if you're going to use this module a lot right here you can copy and paste the style to other parts of your website now here's the where the confusion gets in how do i edit my column i'm clicking here and i'm still in my advanced heading how do i get into the column settings that's the layer underneath the heading well there's three ways of doing it i can go here and click on column and you can see now these settings changed and now i'm in the column settings and i can ha adjust those properties of spacing and the background color or image i can do it right here now you're probably thinking okay now i know how to get into the layer underneath it but then how do i go to that that initial see the container in this case it's the row well i can click right here where it says row or i can click the navigation here and click on row layout and now i'm editing the row and you can see my settings changed right here for the row so i might want to change the background or some mobile setting right here mobile responsive setting i have all of these options here so let's go to background settings now if you're using the cadence theme good for you because there's direct integration with the global length color palette so i can click right here and these are the colors that i have sent in the customizer let me choose this one it's slightly off white and you see it has a globe now that means it's linked everywhere i link it to i can change it site wide inside to the customizer but that's not the point of this video so you see i have my section my three c's right here right in front of me my container my column and my content and now i know exactly how to get to each of those layers there was the three ways there's the block navigator here there is when i'm at a topmost layer let me click on the heading right there then i can click back to my column or my row layout and if you're using the free block navigation plugin right here i can easily jump around just like this what's also nice though about this is i can easily rearrange things too so i can drag and drop it someplace else on my layout i really like this free plug-in so now i'm going to go ahead and i actually don't like this i want to delete this the whole thing i just created how do i do that well i just need to go to my row i'm going to go down here where it says row layout and click click the three dots and i'm just going to remove the whole thing okay so now let's start over i'll click on the plus i'll type in row i'll click where it says row layout right here and this time i'm going to use the pre-built library and why don't i go ahead and choose this right here okay so now you can see this is a fully designed container with a column and this happens to have two columns right here and you can visually adjust the size of each of those columns and then we have a heading some text two buttons and an image that is all that's in here now you see this really creative background that is using the background gradient feature in the initial container the row in this case so i can click on row layout i can click on the settings gear icon here it is and we can see exactly how it's done i'll click on background overlay settings right here it's set to gradient and there's two ver different shades of this yellow and then we have the location right here see if i can change this dial you can see it moving just like that so when these two numbers are exactly the same location for the first color and location for the second color that's how you get that really sharp line just like that and then you can adjust your angle like this that's a real nice little trick but you can see that this is the same thing you could do in any page building tool now you also have these different dividers available here and you have this in elementor so i can do a bottom divider and i can choose an arrow here and i can choose any of these different shapes whichever one that i want and i can adjust them just like that and there you have it now when i do this i might want to adjust the spacing a little bit on this row so let me get back into the row i accidentally clicked out and i got out of it so i just clicked in here but you can see i'm in the advanced button but i want to get back into my row layout like that and what's nice about cadence blocks you can see you see how it says 80 pixels i can go ahead and i can pull this down and this is essentially adjusting the margin to give it more space because i'm using that really fancy bottom divider that you saw there now let me go ahead and click on updates and i'll click right here to view the page and look at this it's already looking exactly how you do it with any page builder and it's just applying the three c's that every page builder does let's go back now remember i was explaining how your page builder does some things automatically kind of creates the three c's for you right if you just want to add a heading well it will automatically add the container layer underneath that and and the column it'll create it all for you that is not how the block builder works so if i wanted to add a block i can either click this plus or this plus so let me click here and we have this nice list of blocks here's the heading i'm going to click on it and i'm like right here is my heading and this is great i've got my heading here but you know what when i look down here i see it's not in a container it's not in a column so i don't have the same control over it because it's just on its own where when i did the same exact thing in elementor it automatically created the the container and the column and put it inside you don't have that with gutenberg so the difference is you have to start by adding your row so let me click on the plus i'll add a row and i'll add a two column this time and then what i need to do is drag and drop this into the structure the proper structure for page building so i'm going to click here and then i can click right here and i can just drag and drop so why don't i put it here and how do we know that now we have the proper 3c structure i look down here it says advanced heading column row layout so now i can manipulate this any way that i want i can change my alignment we can go ahead and center it right there and it's now in this column right here and so if i wanted to start changing some of the properties behind it which is that column layer i can go here i can click on column and then here's my settings i can go here and i can choose a color let's link it right there and you can see very faintly it has a different color this is exactly the same way that you build pages in any single page building tool they all work exactly the same way so i hope you found this video lesson helpful i think when you understand the 3c concept you'll realize wow i can actually build anything i want inside of the block builder and then be able to take advantage of all of the speed benefits and the code optimization benefits that are in there you just initially have to accept the fact that it's a little different the way that you work inside of the block builder than what you're used to in any of the top page building tools that you've used before however if you follow the three street the 3c structure that i covered in this video you literally can build anything that you can see on the internet because they all follow the same exact structure you can do it all in the block builder and after a short period of time you will become a pro so if you found value in this video please give it a thumbs up and make sure that you share it around so that people realize you have all the tools available to you if you want to learn more about the cadence theme and cadence blocks make sure you subscribe and turn the notifications on because this is the spot where you're going to learn how to use these tools together to effortlessly build lightning fast websites thank you for watching

Channel: Kadence WP

Views: 45,882

Keywords: kadence theme tutorial

Id: 46P3kMrpFkQ

Length: 23min 8sec (1388 seconds)

Published: Tue Oct 06 2020