Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:9Length:39 minutes
Gutenberg plugins for wordpress 400x277
  • Overview
  • Transcript

2.4 Advanced Gutenberg: Tabs and Testimonials

In this lesson, we will continue to explore the “Advanced Gutenberg” plugin as we take a look at building tabbed content and a testimonials section.

Useful Links

2.4 Advanced Gutenberg: Tabs and Testimonials

Hello and welcome back. In this lesson I wanna take a look at couple of more blocks that are available to us in the advance Gutenberg plugin. So let's get started by creating a new one and in your comment or I'm sorry and your formatting section, you'll find one called tabs. So this allows us to very easily create tab content when you click on each tab and see the text associated with it. So under tab 1 we could change the text here if we wanted. And then down here we can change the text and the body of that section, and then we can click between the tabs and see that different content. We can also add new tabs using this plus button over here on the right, and remove tabs by clicking on the x in the upper right-hand corner of the associated tab. So that's another really cool item that we have available to us, and we could always view the post to see what it looks like on the page. And when the page loads, it's exactly what you'd expect. We have a few items and we can tab between those items, easy enough. Okay, so another item I wanna look at, I'm gonna click on the plus icon here and then I think it's under Formatting the other images' slider. So you can add some images here, and this is a really nice slider that allows you to very quickly just throw in some images. And have a nice little gallery. So we can give it a title. And we can even throw in some text here if we want, and there we go. So we can delete any of these items just by clicking the x or we can add more items to it if we want. Over here on the right we have a few options, you'll see that full width by default is turned on. We can turn that off if we want. I'm gonna go ahead and leave that on. We have action on click, so we can either open a custom link when they click on it or open the image in a lightbox. And then we have some color settings as well. So let's take a look at what this is gonna look like, once we save our page and view the post. And when that loads we'll scroll down and here we go. So we have this really nice little image gallery, and you can easily cycle between those. You can click on these icons down here at the bottom to navigate between the images. Very easy to do and it looks really nice. So let's go back into our editor. And let's add another advance Gutenberg item here. And this one, I can't remember exactly where it is. Again this advance Gutenberg once have the purple icon, so it's really easy to find them as you're looking through. And. Here we go, it's under he Common Block section it's this Testimonial item. So we can click on that, and we have a few options here. So we have this image, we can click on the image and then just insert an image of someone there. There we go, and it puts it in that little circle. And then we can edit the text here as well. And the text below it. So notice you can actually add multiple columns here as well. If we come over here to the right we have our columns section and we can adjust that. Let's bring that up to two columns. And we can add another person here on the right. And there we go. So it's a really easy way to set up some testimonials. And you can even use this, you don't have to use it as testimonials. You can use it as kind of a who we are type of page. Where you're showing maybe different people who work for the organization, or different authors of your blog, or whatever you wanna do there. So those are just a couple more options that you have available to you in the advanced Gutenberg plugin. Thank you for watching, and I'll see in the next lesson.

Back to the top