2.2 Kadence Blocks
In this lesson, you will learn how to create advanced column layouts and buttons using the Kadence Blocks plugin for Gutenberg.
1.Introduction1 lesson, 00:38
2.Gutenberg Plugins7 lessons, 38:09
3.Conclusion1 lesson, 00:36
2.2 Kadence Blocks
Hello, and welcome back. In this lesson I wanna talk about a plugin for WordPress called Kadence Blocks. And just like most of the plugins we're gonna talk about in this course, this particular plugin gives us more options when choosing from our blocks when we're using the Gutenberg Editor. So we're gonna go to our Plugins link. We're gonna hover over that and click on Add New. And on the Add New Plugin screen, I'm gonna do a search for kadence, with a k blocks, and hit Enter. And I'm sure that the longer Gutenberg is out, the more of these plugins there will be providing more and more functionality for Gutenberg. But we can see that Kadence Blocks plugins down here at the top left. I'm gonna go ahead and click Install now, and then when that's done we will activate it. And there we go, so it's taking us to the Setting page where we can go through and edit some of these settings. It gives us kind of an idea of the new blocks that we have available to us. But let's go back to our Posts. And I'm just gonna go back to our Hello world post here. And now, when we click on the plus icon, we'll see a few new icons here. So we see a few in the most used section. And if we go through some of the other sections we'll see that all of the Kadence Blocks are in blue instead of black. So they're easy to find, it's easy to tell which ones belong to that particular plugin. Other plugins will actually have a new category here that you can choose from. But our Kadence Blocks plugin, again, they're just in a different color. So let's take a look at some of these and see what the point is of using them. So the first thing I wanna look at is I wanna look at this row layout that we have available for us now. And in order to really appreciate what it does for us, let's take a look at the columns block that comes with WordPress. So I'm gonna click on Columns here, and it's gonna add a new columns block down here. And when our cursor is in it, we can come over here to the right and see our settings. And right now we're inside a paragraph. Now, if we click over here on the left edge of it, we can see the settings for the columns themselves, and we can change the number of columns that are available to us. But that's really the only option that we have. So we can come in here, and I'm just going to paste some text that I've got. Then we'll come in here to the block on the right and paste some more text. And it creates multiple paragraphs for us and when you click down here, you will see it's just creating a new paragraph down below. So that's nice functionality but let's take a look at what the row setup does for us. Now before we get to that let's view this post and a new window. Let's go ahead and make sure we update that first. And then let's view the post in a new window. And there we go. Now we can see the two columns here. Now let's take a look at what those two columns look like if we separate this window out. And let's bring the size down a little bit. Now, you'll see that the columns kind of break down and stack on top of each other. But the way these stack, it doesn't look quite right. You'll see the second column is kind of indented underneath the first one, which really isn't an ideal setup. We want it to look a little bit better whenever we collapse that. Well now that we've seen that, let's go ahead and close that. And let's take a look at the row setup that we have set up with Gutenberg. So I'm gonna add a new block here and I'm gonna choose row layout, the one with this blue icon here. And right away we can see that it has a lot more options for us. We can select from numerous layouts here that give us not only different numbers of columns but different sizes of columns. So we have one layout where we just have one row and one column. In the next one we have two columns of equal size. In our next one we have two columns, one of them is two-thirds of the width, one of them is one-third etc., etc. So we can click on one of these and it will automatically apply that layout and then we can start typing into each of those layouts to see what that looks like. Well, let's change that. I'm gonna click over here and click around the left edge somewhere until we can see the options over here on the right. And that's one issue that I have with Gutenberg so far, is you're never quite sure where to click in order to get the options that you need. Sometimes you can click on the left edge, sometimes you have to click near the top, but maybe they'll fix that in upcoming versions. But let's change our layout here to something simpler. Let's go down to two columns. Now let's just make the left column a little bit wider than the right column. So then we're gonna paste some text in both of these, just like we did the first time. But this time, I'm going to update, and now, we'll view that post in a new tab. And we'll scroll down and we'll see what it looks like at full size, and it looks fine. Now, if we click and grab that and resize it, These are the initial two columns. And remember that second column is kind of nested or indented a little bit under the first one. But in our second setup, if we would go back to full width, we see the two columns side by side, and when we bring that in we see that second column is not indented. So its responsive behavior makes a little more sense than the responsive behavior of the built-in WordPress columns. So again, you have a lot more options when you first create your columns and then it also breaks down a little bit better when we're talking about responsive layouts. So that's one option that comes with Kadence Blocks. We also have a few more. If we add a new one here we can see an Advanced button and again we can compare that with the regular button. So if we go to Common Blocks, and maybe it's not under Common. Let's go to Inline, nope. Layout Elements > Button. So this is the default button that comes with Gutenberg. And let's just say, Click me, and hit Enter. Or we might have to hit this button here. I'm sorry, that's supposed to be the link. That's not the text on the button. So we're just gonna put the link here, .html, whatever it is, and then here, we'll click on the button to add the text. So here, we'll say, Click me. And there we go. So with our button, with our default button, we have some options over here on the right. We have some styles rounded, outlined, squared. We also have some color settings. We can change the background color and the text color if we want. And if we click on this color wheel here, we can select a custom color. So there's some pretty good options there. But let's take a look at the Kadence Blocks plugin. So let's hit the plus button here, and let's do an Advanced Button. We'll click on that one. And initially it looks similar, but over here on the right we have this button count option. So we can choose a number of buttons here that we could setup side by side, and each one of these buttons would have separate settings. So let's just go back to one button for now, and we'll put some text in here. And then we would put our link down here, link.html. And then for our button settings, we could change our link here. We could also choose to open it in a New Window if we wanted. We can change the Button Text Size. We could change the padding of our button. So as you can see, we just have a lot more options here than we do with the regular buttons. So again, we have normal state and hover state where we can set our colors for our hover, our background color and our text color. And then we can even select an icon and put it in the button if we want as well. So we can grab one of these icons, click on it, and it will add it to the text of our button. So again, I want to encourage you to go through all of the blocks that come with Kadence Blocks. Again, it's gonna be any of these that show up in blue, the icons allow us to insert icons into our text that are similar to the icons we saw for our buttons. Advanced headings are just like regular headings in WordPress, they just give you, again, some more advanced options for laying those out. So thank you for watching, and I'll see you in the next lesson.