The “Stackable” plugin offers many original blocks for Gutenberg. In this lesson, we’ll take a look at how to create accordion layouts and pricing blocks using this plugin.
1.Introduction1 lesson, 00:38
2.Gutenberg Plugins7 lessons, 38:09
3.Conclusion1 lesson, 00:36
Hello and welcome back, in this lesson I want to introduce you to a plugin called Stackable. And you can find it in your New Plugins section by searching for Stackable Gutenberg Blocks and it's by Gambit Technologies. Once you've got it installed you'll see a Stackable option on your menu, which really doesn't have any options, or settings, or anything like that. It's just kind of a summary of how to use it, but if you know how to use blocks you can figure out how to use these. So let's go to our Posts and let's go and add a new post. And so we'll give this a title and then let's take a look at our Stackable blocks. So if we add a new block you'll notice that there is a separate section for, let's go up to the top and add it from here, we can see everything a little bit better. But we now have an option or a section for Stackable Gutenberg Blocks and we can expand that out to see all of the items that are available to us. So, obviously, we don't have time to go through all of these, but I do wanna highlight a few of these for you. So let's start with the Accordion, the very first item here on the list, and that's exactly what it sounds like, it gives you collapsible content. So let's just call this this Item 1 and then you can put whatever content you want in here. So I'm just gonna paste some content there and let's get rid of this extra white space, there we go. And you'll see there's not an option to add another one here. But if we just click Add Block and then add another Accordion, it'll add it right below it and we can do the same thing here. So let's just click outside of that one and let's see what this looks like if we were to publish it so let's Publish that. And then we'll View the post and when it loads you'll see we have these two items. And if we click on one of them it expands out, if we click on the other one you'll notice the bottom one expands out as well. Now, these are not grouped together so the top ones are not going to collapse whenever the bottom one is expanded, but it's still a pretty solid feature. Also, if we click on one of these items while we're editing it and then let's go to our Options over here on the right, you'll see there are some options for changing the heading. So we could change the background color of our heading and the text color of our heading if we wanted to change the look of that a little bit. We can also choose whether we want that to open up at the start so if we want it to be opened up whenever the window first loads we just turn that on. So that's the Accordion option. I'm gonna get rid of this second one, we don't need two on there for the purposes of our example here so if I can, there we go, Remove Block. Okay, lets add another one, we’re gonna go back into our Stackable section here. And I’m gonna scroll down a little bit and we’re gonna take a look at this Pricing box feature. So you'll see by default it sets up two columns for us. And it gives us a very typical pricing display that you might see on a website where you're selling different options for a product. So we might have the Basic option on the left and then the Premium option on the right and we could change the value of the Premium option. So, obviously, any of this text is editable and you can also update the number of columns you're using. So we could bring that up to three columns and there's another column that shows up over here on the right. If we close our options here, actually I think it sticks it down at the bottom because we're using such a small resolution on our monitor here. But if we were to update the page. And then view the post in a full-width browser and that's still just taking up two columns at a time there and that's probably a limitation of this particular theme. This theme has a maximum width on it, which doesn't allow it to get wide enough to put that third column there. But it is nice to know that it does break down really nicely so that if it goes down to a second row it's gonna take up the full width. So that looks good. So let's close that, and let's click back inside one of these items here, and open up our options again, our settings. I'll just bring that back down to just two columns. And we have the usual color options here, we have the Pricing Title colors so we could change that, that's gonna be the text above the price. The price itself we could customize it if we wanted to. And so on so this is fully customizable as far as the colors are concerned. We have button settings as well, we can change the design of the button, right now the basic button set up is selected. We can change it to Ghost and that will give it a white background with an outline. We can change it to Plain Text or a Link, which is just very similar to the Plain Text. I'm gonna go back to the Ghost setting, I like the way that one looks. We can also update the size of the button so we could do a small, medium, large. We can change the border radius of those buttons to round them off a little bit more, and so on, and so forth. So it's another really nice feature there, obviously, it's a very specific use case for that feature, but it's there if you need it. As always, since we don't have time to cover all of these options, I would encourage you to go through that Stackable section here. And take a look at each one of these options and see what it offers. Because there's some really cool items here that give you a lot of options when you're laying out your content. So thank you for watching and I'll see you in the next lesson.