Gutenberg Tutorials | Better Designs with FREE TOOLS

now it's no secret that i'm not the biggest fan of gutenberg the wordpress page and block editor but i've given myself a challenge for the end of this year and moving forward into 2021. what tools can i find out there that make gutenberg a truly useful tool and ones that you could use to build not only pages and posts but also an entire website so what tools make it useful what plugins and themes can you pay with it and what opens up a more useful set of options to help you build your websites in today's video i'll be starting off with a couple of tools that make a great starting point everything i'll cover in today will be 100 free but moving forward i will be also looking into pro tools that come with price tags now if you've used gutenberg yourself i'm sure you will be familiar with the concept of blocks blocks are the foundation tools of building more feature-rich website designs and can be a great way of building a website in a rapid way however they are no replacement for being able to build things from scratch so in this first video we'll be looking at a couple of tools that make building and structuring your pages a much more straightforward affair i'll kick things off with the theme i've installed i'll be using generatepress free as it's a lightweight and easy to use theme that works very well with gutenberg but the theme here isn't the most important part today what's more important are the two plugins you'll be using the first one allows you to easily see the structure of your page duplicate parts move things around and much more now this lets you use gutenberg more like the page builders that you may be more used to using things like elementor and divi so the first tool we're going to take a look at is block navigation now what this does is it opens up the ability to easily see the hierarchy of all of your gutenberg blocks this just makes moving things around seeing how the structure works considerably easier so let's just take a look at how this works and some of the features we have with it now if you're new to gutenberg it's a pretty simple idea but it's not really the most flexible so what we have are basically block elements so you can see we've got blocks and patterns blocks are basically like a widget in elementor they're just individual components that make up part of your page so things like headings paragraphs quotes and so on you also have patterns which are basically just predefined styles so you could think of these as basic templates they can be things like buttons up two different sections and so on so with that being said if we just take a few elements into our page so for example we'll say we put a heading in and there's our heading so we'll just type in this is a heading and we want to put a paragraph in so we'll go underneath we'll just add in another block and we'll say we'll add a paragraph inside there and we can drop some text in and finally let's just do something like add an image in so we'll drop down we'll add another block in and this time we'll look for an image so we'll say we'll choose the image option and we'll just choose the option to upload and we can grab something from a media library or we can just upload a file so we'll just go with this so as you can see it is fairly basic we have a sort of context set of options available to us on each of these different block elements and as you can see they are based upon what type of block it is so different things for a heading for paragraph for images and so on but when it comes to moving things around it's really quite basic or we really have these up and down arrows or we can drag blocks around like so so it's not really the most intuitive and it's okay if you have a very simple layout when you get more comprehensive layouts it does become a little bit awkward and this is where the block navigation plugin comes really handy you'll see we have these little four colored lines in the top right hand corner if we open that up we now get the block navigation section and inside there we have our navigation layout so what that does is it shows us a hierarchical view in other words it shows us from top to bottom all the different widgets that make up our page and then we can do some other things with these you'll see we've got the three dots on the right hand side of each of these different blocks and click and we have a load of different options we can open the block settings move the block and so on we can also just drag and drop things around the page as well so you can see we can reorder these very quickly and easily all done inside this section on the right hand side you can detach this if you want to but for now i'm just going to leave it on the right hand side so really quite simple now where this becomes a lot more useful just using gutenberg is let's just say for example we want to group things together so we'll come into create a group we'll add that group in and you see this is now a group item and this allows us to group various different blocks together and makes them the editing the moving and all those kinds of things a lot easier so you can see now the group sits at the bottom of the structure and everything is sitting above it and outside of the group so this is where things become a lot easier we can move down to the top we can then just indent these into that group and now we've grouped everything inside the group and we can then close that down and we can make just moving things around viewing things editing things a lot easier when we're looking at those groups so it's really simple to use and then like i say we can simply come in and reorder things inside you so now we have a much more logical order the heading the image and the actual content text so that's basically what this does and this is a really simple example the only other option we have is under the settings section we can click inside there and you can see this is just to change the color scheme so if we wanted to change this to something different we can change that nothing really too mind-blowing inside there so that's the first plugin but i say when you just use this in conjunction with some other plugins especially the next one we're going to take a look at it does make working a lot easier especially when you can see the structure of your page just becomes a lot easier to work with now we've seen how to manage the layout structure and how that makes editing your page a lot easier we'll move on to the next plugin we'll be using now generate blocks has some very useful features that help us get more control over the basic building blocks of the page and opens up some additional and very useful settings to control things like fonts being used colors and much more so let's take a look at some of the things we can do with generate blocks now generate blocks the free version gives us some new features that makes working with creating content laying things out and getting more comprehensive more page builder like layouts inside gutenberg a lot easier at the moment it gives us the container the grid the headline and the button so we can use these to just get a little bit more creative and then we can use containers to group things together grids to make more comprehensive layouts and we can use all the various different widgets or the various different blocks that we've got as part of gutenberg and any other sort of extra add-ons you may have included just makes the whole organization laying out of the site a lot easier so i've gone ahead and installed it and you can see it's installed and activated we've got some basic settings inside here where we can choose the css we can choose to have an external file or an inline file if you have any css issues you could regenerate from here and you can also sync responsive previews other than that there's nothing more we've already got inside here now at first glance generate blocks might seem quite basic only giving us four extra sort of blocks that we can work with but there's a lot more power underneath the hood than you may first imagine i've removed everything from our page and we're gonna do is we're gonna come back and you can see there's our four generate block options the container just consider this as being the container for the various different widgets or blocks that you want to use so things like you can put a grid inside the container buttons headings paragraphs and so on it's very similar to the grouping option but it gives us more control so the first thing to do is drop a container into our design so we'll click on that and you see this puts what looks pretty much exactly the same as that grouping option now what we can do is we can come in and we can start adding extra things in we also have different options available you can see we've got the change block type or style we can click on there and we can choose between columns and groups we could transform if we wanted to change the alignment to wide width or full width you can adjust the alignment and then you have extra options inside you with a lot more options so we say show more options you can see now on the right hand side we have a ton of options specific to the container we can control things on desktop tablet and mobile and you can see we can switch between those different devices and we can configure things inside there we can configure the container the inner container the container width and what element we want to use so things like divs sections headers footers and aside and so on we can make it full width and you'll also see we have an absolute boat load of extra options underneath typography spacing colors and so on so you can really get a lot more granular and like i say if you're coming from a background of working with something like elementor or divi or something like that then you're going to be used to dealing with spacings and background gradients and background images and all those kinds of really super useful things so you can use this to get a lot more creative in much the same way you should be using a normal more feature-rich page builder now in this video i want to keep it really simple and just show you these tools in their basic form and show you some of the things that they can do but if you'd like me to create a video showing you how to take the tools i'm showing you in this video and create a full-blown page with it then let me know in the comment section below if enough people are interested then i'll create a video dedicated to doing just that okay so let's come back to those options on the right hand side in a moment let's take a look at what else we can do inside you in there we come back up to our blocks we can add in a grid inside here if we wanted to so we can click to add a grid and then we can choose what kind of layer we want and you can see we've got a range of different layers and again this is very similar to what you have inside a tool like elementor so we could have a full full width we could have two columns we'd have three columns four columns and so on you can have different offsets then with your column widths so you can get creative in how you want to lay things out let's keep this really really simple and do something like set this layout here now you can see this is sitting outside of our container outside of what we want it to be so this is where we can use this in conjunction with our block navigation tool you can see there's our container and our grid sits outside it and inside the container we've got two more containers so we can lift that up we can indent that and now that's placed inside the container so now we've put that in there and we get all those extra levels of controls so we want to now we can easily come into any of these we'll select this first container for example come to our blocks and now we can add extra things in so we can search for what block we want to put inside there and get really creative so let's start off by building something really really simple let's just add in a heading we'll add the heading inside there and we'll just drop some type stay in there and we'll say this is a heading again so now what we can do is we can change the h2 h3 h4 so on make things bold adjust the alignment do all those kinds of things let's just say we want to set this to be heading one for example the alignment we could say we're gonna line this to the center to the right all those kinds of things that you're used to seeing inside there okay so now we put the headline in let's just add another element in this time we're going to add a paragraph in and we'll just drop some text inside this so just paste that in there and then finally we'll just create a button so we're using a combination of the generate blocks new sort of blocks and also the standard gutenberg blocks so you can mix and match to your heart's content there's no problems with that so we're going to do is we're just going to change this now to something else and we'll just say download now and there we go and then on the right hand side we're going to do is we're going to add in a little bit of html code and drop in a lotty animation so we'll click on add block we're going to search for html we'll add a html block inside there and now we can do is we can simply drop in the little bit of code so we'll click inside there and we'll paste our code in and there's our little bit of code and there's our animation so pretty cool but nothing you couldn't really do just by using ordinary gutenberg so what else is this giving us to make it you know something that i think is worthwhile checking out and using if you use gutenberg well this is where generate blocks becomes really useful when we're using any of the generate blocks blocks we have all those extra controls so let's start off with this heading let's select the heading and we're just going to switch back out of the sort of navigation the blog navigation and go back to our normal settings so we'll just disable that come back to our settings and you can see all those options are now available to us so we've got our typography we can change the element whether we want to set this to h one through six set to a paragraph to a div whatever you want to set inside there but nowadays the typography we've got a lot more control over the typography itself to what you'd normally have as part of the inbuilt gutenberg options so now we can choose the weight we can choose the a transform so uppercase lowercase those kinds of things but we can open up even more options by say show advanced typography and now we can start to select things like the font so let's just say we want to use something like montserrat and you can see we want to use google fonts in which case we can load that in we can control the size inside you so we can say let's have this as something like let's go for 48 and you see that updates we can mix and match that now with our transform and say we want that to be uppercase and we can also say we want the weight to be lighter so we could say 300 for example and boom there you go we've now just configured all those options now we're not limited to doing this just with the widget we can also set this with inside the container as well so if we come back and select the container so we'll select that from there come back to our options now we've got the container selected as you can see at the top it tells us that's what the current object that is selected is now we can control things inside here so again you can see we've got control over typography spacing colors gradients and so on so we could easily come in and control all the padding on this so at the moment everything is set to 40 pixels but we could if we wanted to set things based upon pixels m's or percentages so generate blocks is giving us a lot more control over all the different elements using their particular blocks and this is really quite cool because we can get a lot more creative now and have a lot more control over all those different aspects so let's just say we wanted to put in a color you can see now we can choose the background color text link colors hover border and so on let's choose this option and we'll set it to blue and you see boom it now goes blue we can say where we want the text now to change color we want that obviously to be white and blank there you go our text is now white we can adjust link colors all those kinds of things we do the same then with our buttons so let's just select our button and again all those options are available to us choose our color so we don't want our background to be blue we want something that's more complementary let's go for this orange color the text color if you want to change that you can change that inside there your border color if you want to set the border you can set icons inside you so you could upload or use a link to your own svg icon or you can just choose from any of the options that are available as part of generate blocks themselves so really easy to get started with this you can control the position of this so say we point the right or the left you want to remove the text you just have an icon on its own what icon size do you want the padding you know there's tons of options inside you for controlling all these different layout design options so it makes it much easier to work with if you want to set a gradient we can do that so we can say we'll use a gradient on there and you'll see our button now takes on a rather horrible looking gradient but a gradient nonetheless and you can change the color you can set the position all those things so again this is very similar to a lot of the tools you have inside elementor divi and so on so this at least gives you more control over how this all works so once you kind of get used to it this could quite easily replace for many cases on simpler sites a more non-page builder-esque setup which means that then you should end up with a much faster site without having to load in the additional bloke that a page builder generally tends to bring with it now this is literally just scratching the surface of some of the tools that we can use to make gutenberg something that actually becomes a usable platform for building sites pages posts whatever kind of layout you want with it pair that up with a good solid theme and you should have a great foundation but like i said earlier in this video if you'd like me to show you how to take the tools i've shown you in this video and create a full-blown page using them let me know in the comment section below and if enough people are interested then i will take a look at creating some dedicated content using these tools as always all the applicable links are in the description below and if you've made it this far into the video why not give that thumbs up a quick click it really does help you out now while you're at it if you like the content why not also click the subscribe button and slap the bell icon but if you didn't find value though well you can hit the thumbs down button twice as that works pretty well too minus paul c this is wp tets until next time take care

Channel: WPTuts

Views: 24,033

Keywords: WPTuts, gutenberg tutorials, gutenberg blocks tutorial, gutenberg demo, gutenberg editor, gutenberg wordpress, gutenberg wordpress demo, gutenberg wordpress editor, gutenberg wordpress tutorial, wordpress gutenberg blocks, wordpress gutenberg demo, wordpress gutenberg project, wordpress gutenberg review, wordpress gutenberg tutorial, wordpress gutenberg video, wordpress gutenberg youtube, wordpress tutorial, wp editor

Id: OX2zjgOQQ30

Length: 16min 57sec (1017 seconds)

Published: Mon Dec 28 2020