How to use Kadence Blocks to create your posts and pages

in today's video i'm going to walk you through the process of using the cadence blocks to extend the blocks editor or the gutenberg editor in wordpress so i absolutely love the cadence blocks they do have a free and a pro version of their plugin for the purpose of this tutorial guide i'm just going to walk you through the free version of the plugin but basically this plugin extends the functionality of the blocks editor or gutenberg it's as simple as installing the plugin to make it work on your wordpress website for this tutorial guide i am going to be showing you how to recreate a similar layout like this on your wordpress website so this is a template that i found on pinterest it has been created by pixen hue and i do love her wordpress themes it's always good to give her a check out i absolutely love them but i'm going to be trying to recreate this using the cadence blocks and the gutenberg or the blocks editor okay so for the purpose of this tutorial guide we are going to be using a fresh new installation of wordpress and we are going to be using the 2021 theme now to note this theme does not give you the option to remove the header or the footer or create full width templates so to get around this and you might need to get around this if you are using a different theme then what i recommend is coming to plugins and installing a the a plugin that is called full width templates so once you're in your plugins you're just going to click on add new and you're going to type in here full width template and this is the plugin that we are specifically looking for so we are going to click install now and then we are going to activate this plugin so this plugin is just going to allow us to create this full width kind of layout that we have on this template so the next step is basically to add in the cadence blocks plugin so again we're in our plugins we're going to click on add new we're then going to search for our cadence blocks plugin and this is the one that we are looking for and we're going to click install now and we are going to activate this plugin once you install and activate the cadence blocks you'll then be brought to this page which is just shows you a list of the cadence blocks that are available to you and in the section you'll be able to deactivate any of the cadence blocks that you won't be using on your wordpress website now if for example you ever want to come back to this section you can do so by coming to settings here on the left hand side and coming to cadence blocks so let's get started so the first thing we're going to do is come to our pages and we're going to add a new page once we're here we are going to pop in the title of our page so i'm going to call that template page and i'm just going to hide this yoast seo for now so before we start looking at the cadence blocks and exactly what it gives us i just want to recap on what i explained last week about the gutenberg editor and exactly how you can get the most of it and how you can become really confident in building dynamic posts and pages on your wordpress website so the three places you need to be familiar with the first is your settings icon here and your block tab and this is where you'll style each individual block so this is really important to know the next thing is the plus icons here so these are to add new blocks to your page so you can either add a block by clicking on this button or adding a block here by clicking on that one at the top and then the last is the hierarchy navigation which you will see down at the bottom here once you start to add blocks to your page so i'm just for example going to add um a row layout here quickly and you will see the hierarchy down here at the bottom and this is really important to be familiar with because then you can really pinpoint the row or the block that you want to style so now let's look at the additions that the cadence blocks plugin has added to your page so the first is the cadence blocks control tab which you'll find here on the top right and you'll see this nice cadence icon so if we click on it we can then see our color palette here and our blocks default and you've also got your editor width as well so i really love this color palette section this is really awesome because you can then input the specific web or hex color codes that you are going to use on your wordpress website and on your pages and that just keeps you on brand so for example you can erase them here generally it's set up with the theme colors so if i want to i can just refresh this page and those colors there are the color palette they come from the 2021 theme now if for example i don't want to use those colors i can just toggle this button here and i can add a color i have a notes document here and i've got all my colors that i'm going to be using so i'm going to copy those over and paste them in there and let's do the next one okay so now we have all the colors we're going to be using on our wordpress website installed into our cadence blocks control so the next thing we're going to look at is the block defaults so in this section you'll be able to define parameters for a specific block on a global capacity so for example you'll be able to divide define the padding or margins for a block and each block you add to your page will then have those defined parameters again this is great for keeping on brand and keeping uniformity okay so for example if we are looking at something for example like the row layout we can make sure they're all center wide or full width we can also change the gutters and we can change any kind of padding or margin settings or structure settings as well and then just click save and close and then that will change the global settings one other thing before we carry on to show you is the font family options which i think is another great thing to keep you on brand so you can toggle this and then you can select only the specific fonts that you are going to use on your wordpress website so for this i'm going to use the just font and i'm going to use the joseph and sans font and i'm going to click save there now when i add a heading or some text or anything like like that those are the only two fonts i'll be able to select to style that kind of or that block now let's look at the blocks that the cadence blocks plugin has added to our gutenberg editor so if we come to the top left here we can click on this plus icon and we will see the cadence blocks here and we'll see that cadence blocks plugin has added 15 new blocks that we can use now you might notice that a few of them are quite similar to the standard wordpress blocks um but the difference is that some of these give the cadence blocks gives you more styling options especially when it comes to your advanced heading and some other post your row settings etc i've seen the cadence blocks editions i want to teach you a simple way of thinking about your layouts so if you keep this in mind while you create your layouts it will be super easy for you to create the dynamic layout that you want to create so for example everything in cadence is a row and then or a container and with in that container you have columns so you can columns can be anything from one to six columns and then within your columns you will have content which is your blocks so that might be an image a paragraph a heading an icon list etc so when you keep that in mind you'll always know okay the first thing i need to do is to add a row and then add columns and then add your modules within your columns so let's look at our layout and how that's going to work so for example we have a row here with one column and in that we have a heading text we scroll down and we've got another row within that we have three columns within that we've got heading text and a button scrolling down again we've got another row with two columns some images some heading text some paragraph text and a button okay so that when you think of it in terms of that it makes it really easy for you to create the dynamic page that you want to create so before we get started there's one last thing i want to show you that the cadence blocks ads and that is their design library so to see their design library you can see it either here or if you click on this plus icon and you click row layout you'll see design library here so let's have a look so this is really awesome another great thing about the cadence blocks it comes with sections that are already built out it also comes with starter pack kind of theme pages and it comes with free wireframe pages as well which is a new thing that they've recently added to the cadence blocks so let's look at sections to start with you've got kind of a heading section three columns here testimonials contact and basically what you can do is you can click on any of the sections so let's do this contact us you click on it it pays the content and then it automatically checks it onto your page and you can start editing it you can edit the text you can edit whatever we've got here simply by going to your settings and your blog and you can change whatever on the right hand side here okay so let's dive in and start building out the page using the template as a kind of inspiration so it's not going to look exactly like this but i'm just going to get as far as i can and do as much as i can in this tutorial video so the first thing we can see is this is a row with a heading so we're going to start off by choosing a block and that block is going to be a row so let's choose that row layout and it is a single column layout that's a single column layout and it has a background so we'll come here to our settings then our block and what we're going to look for is our background settings and we are going to select an image and i've already uploaded my image so i will select that image so to make things easier in gutenberg there is also this change alignment so you can make that full width and then that shows you exactly what you're working with on your page the next thing we're going to be doing is just looking at and you can look at all the settings here you've got padding and margins as well so that's inside and that's outside and then we've got our overlay settings so if for example you'd like to add a color over your image you can do so you've got border settings and dividers is a really cool one i'll show you that in a moment um text color settings so you can set the standard color in one setting and if you've got columns and content in there then all of the columns and content in there will have specific colors and you've got your structure settings which is what we're going to go for here and i'm just going to make that a height of 600 pixels and i want to make sure that everything is aligned in the center here so i'm just going to click on align middle so that's going to align the content in the middle and then what i want to show you is this really cool dividers here so you can have a divide at the top or the bottom so let's choose one for the bottom and we'll go for something like that or like this um i like that that's quite nice okay and then you've got your divider color as well so you can make that any color you want if that's flowing into something else it's probably quite nice otherwise you can do it on the top as well and you've got all different settings of how high you want that and you can toggle to your ipad device or your mobile device to change that on your different devices i'm going to cancel that because i don't want it and then what i'm going to do is add in an advanced heading so we're going to add a block and we're using the cadence advanced headings here and i'm just going to copy this content here and i'm going to paste that in now we know that content should be center aligned so i'm going to come here and center align the text and then know that the heading color should be this color and the heading background should be white so i'm just going to put in white there we go okay and we need to go to advanced typography settings and this is where you can choose your fun family but remember i'm just going to choose that font because we only have the two options because i defined them earlier so now i can see it's quite wide here so i'm going to come back to my row layout i'm going to come to my structure settings and i'm going to change my content max wood so that's the content within the row how much space it takes up so i can do something a bit like that okay so let's have a preview in a new tab and we can see that is starting to take shape so let's move on to this next section which is three columns in the three columns we've got a heading some text and we have a button so what we're going to do is we are going to add a block and we're going to add a row layout block within that we're going to do three columns we're then going to make that full width and what we're going to do is we are going to change the background color of our row so let's come to our background settings and we can select a background color here we can choose a color from our predetermined um predefined colors or i'm just going to choose this color again and i'm going to paste that in so now we have our colors and we want to make sure everything is aligned in the middle and we want to come to our structure settings and again we want to change the content max width because when we look on our template we can see that the content doesn't span from the left to the right hand side okay so now we're going to pop in the content into our columns so what we've got is we're going to add a block and we're going to add an advanced heading and that advanced heading says 0 1 and that is center aligned and obviously we can come here and we can change the heading color and the background colors etc then we are going to add some paragraph text and i'm just going to copy that from here paste that in there and we are going to center align that and then we are going to add in a button now if for example you're clicking all over and you can't find the plus icon you can just come to the end here press enter and then you can press the plus icon so what we're looking for is the cadence button so it's an advanced button and then we're just going to put in learn more and of course we can style that here on the right hand side the one other thing we want to look at is within this column we want to graph give it some padding and we also want to give it a border on the right hand side so the first thing is the border so we're going to put in one pixel border we're going to make that a black border and then we are going to put some padding on the right and on the left hand side okay so now that column is done and let's say for example i'm happy with all the settings there what i can do is i can simply click on those three dots and i can duplicate that and then i can drag and drop it in to the other column and i can change this to number two and do the same with this now what we want to look at is our rollout and just some padding above and below this so we will come here to our row in our hierarchy we'll then look at the padding and margin and i'm going to make that about 100 and 100 here as well of course i have the experience of knowing pixel sizing but you might have to play around with this pixel sizing to get it right so let's have a preview now of what our theme is starting to look like so or our page is looking like so this is our heading um and our background and then we have this here so again this needs a bit more styling to get it right and the spacing here needs to be reduced i want this to be a crazy long video i just want to keep it short and sweet for you so i'm not going to build out each section on the page but i do want to show you how to create this section which has two columns and some an icon list here so let's go back to our page and what we're going to do is we're going to add in a row here and in that row we're going to have two columns and this column here is going to be the background color is going to be yellow so let's paste in that hex code here and in this column we are going to put an icon list so if you don't find it here you can always click browse all and then you can find the icon list here and what i'm going to do is just copy this text and what you can do is you can choose the number of items you have in your list by going here so i have three and then i can paste in the content and paste in the content there and so i've pasted in the content remember if you want to delete any of your list items you can do so here and if you want to move them around you can do so by clicking on these little arrows so there's quite a lot of spacing in this yellow box so let's look at that so we go to the section and what we're going to be looking at is the padding so let's make the padding at the top 100 the right maybe about 60 bottom 100 and then the left 60 might even want to increase this to about 160 and that one to 160. okay so we've got your list here and if we click on the icon list we can go to the left and we can start to change the settings here so it's the vertical spacing that you might want to change you want to change the icon alignment to the top and then you can go into your list styling as well and edit your icons so you might want to choose a different icon and the cadence blocks comes with 81 different icons for you to choose from and you can change sizing as well so there we go so let's look at adding a block which is an image so so we are going to select this image from our media library okay and we can see this image is really big so we might want to reduce the sizing of that image so we click on it we can come down here and we can change the sizing so we can specify the width and the height here in pixels alternatively we can select a percentage here so i'm going to go with 75 and then i am going to change the alignment and center align this image so let's have a preview of what our page is looking like now and we can see that column in action we might want to make this a white background and increase padding and increase add in a heading but you can see what i mean by how easy it is to create these pages with the cadence blocks plugin and i hope that this tutorial guide and last week's tutorial guide has given you the confidence to dive into using the blocks editor and getting comfortable with creating dynamic pages on your wordpress website

Channel: Nicola Tweed

Views: 1,485

Keywords: Kadence, Wordpress, WordPress tutorials, Kadence blocks, creatings pages in wordpress, creating posts in wordpress, website tutorials, website design, kadence wp, wordpress guides

Id: mYdtLw7_EQ4

Length: 22min 15sec (1335 seconds)

Published: Mon Aug 23 2021