2.3 Advanced Gutenberg: Images and Lists
In this lesson, we will take our first look at the “Advanced Gutenberg” plugin. Here, we will look at “Advanced Images” and “Advanced Lists”, both of which offer more options than their built-in Gutenberg counterparts.
1.Introduction1 lesson, 00:38
2.Gutenberg Plugins7 lessons, 38:09
3.Conclusion1 lesson, 00:36
2.3 Advanced Gutenberg: Images and Lists
Hello and welcome back. In this lesson we're gonna take a look at another plug in called Advanced Gutenberg by Joom United. And as you can see, I've already got this plugin installed and activated. And once you have installed this plugin, one of the first things you will notice is that you've got a new menu item on the left called Advanced Gutenberg. And if we click on that menu item, we can see some configuration settings. If we go up here to Profiles, you'll see you can create a number of profiles that allow you to customize the experience for your logged in users. So I've got this default profile and if I go into that default profile, you'll see that I can turn on and off different blocks. So if there's a block that I know I'm never gonna use when I'm logged in as this user, I can just turn that block off and it will never show up in my list. And so that's a great way to kind of streamline your process whenever you're working in Gutenberg. Now you'll notice it's not only giving you the ability to turn on and off the advanced Gutenberg blocks. But it's also giving you the ability to turn off the regular blocks, such as images and galleries. So it's a very, very handy tool. And with that said, let's jump over to our posts, and let's take a look at some of the blocks that are available to us. So we're gonna go back in to our hello world post here, and I'll just go down to the bottom. Let's start by creating a new block. So as we saw before with the cadence blocks plugin, the cadence blocks all show up as these blue items. And if we scroll down a little bit further, open up our common blocks, you can see some purple items here. These purple items are the ones that ship with the Advanced Gutenberg plugin. So again, these are very easy to find. And you can find them in some of the different areas here. But let's take a look at some of these. One fo the items we have that we're not gonna get into really is this Map block. And this allows you to insert a Google map very, very easily. The reason we're not gonna get into it here is because you need to set up your Google API key and things like that in order to get it to work. And you can go through the documentation to see how to set that up, but it's very easy to do. And can be very helpful if you need to add a map to your site. One of the items I do wanna look at is the Advanced Image, so let's click on that, and then we'll insert an image here. And you'll notice that it gives us an option for a title and a subtitle. The regular image block just gives you the option for a title, so that subtitle option there is a little bit extra that we don't have with the regular image. Let's click on Choose image and let's just grab one of these images from our library And it inserts it there for us, and we can change the image title and our subtitle. And so you'll notice whenever we hover over it by default, it gives us this blue color over the image and we can change that in our options over here on the right. So there's a number of different things we can change. First of all, we can create an action on click to open the image in a lightbox, or to open a custom URL that we could enter in. So let's just click on the Open image in lightbox option. For the Image Size, we can turn on Full width so that it goes to the full width of its container. And we can adjust the size as well, and if we adjust the size, you'll see it kind of crops the image accordingly. We can go into our Color Settings, excuse me, to see some of the different options there. So we have our Title Color, which is our title text, our subtitle text color. So we could can either on of those, in case it doesn't contrast with the background enough. And then we have our overlay color. So if we don't want it to be blue when we hover over it, if we want it to be red instead, we could just choose a different color there. And when we hover over it now it's red. So then we have some text alignment options, vertical and horizontal alignment. I'm gonna leave that centered but you can for the vertical alignment set it to top or bottom. And for the horizontal, you can set it to left of center or right. So that's the Advanced Image option. Under Common Blocks let's also take a look at the Advanced List before we move on to the next lesson. So the Advanced List option at first doesn't seem whole lot different than the regular list options in Gutenberg, but let's put a few items in here first. And we will take a look at what it can do. All right so we've got our three items here. And notice there are some options here in the bar to change the text. We can make some of the text bold if we want. So no surprises there. We can change the list to an ordered list if we prefer, or we could just leave it as an unordered list. And then we have some alignment options there. But if we go over to the right, here's where we're gonna see the real meat of our options. So first we have Text Settings, we can change the size of our text very easily. And then we have these cool icons that we can use. So we can click on these icons and that'll change the bullet points for our list. So that's pretty handy. And another thing we can do with these icons is we can change the color of those icons right here. So we have a lot of control over what these icons look like. We can change the size of the icons. We can change their height, which is the height of the entire item, not just the icons. We have some margin and padding as well. So those are the list items again. It gives you a lot more options than just with the built in list items blocks. And in the next lesson, we'll take a look at a few more of the block options that we have with this advanced Gutenberg plugin. So thank you for watching, and I'll see you then.