How to create posts and pages using the Gutenberg blocks editor

in this video i'm going to demonstrate how you can use the new gutenberg editor to create dynamic posts and pages on your wordpress website so in 2018 wordpress made some changes and they brought in this gutenberg editor which you may have heard it being referred to as the blocks editor now this is entirely new experience and you might be quite familiar with the classic editor which looks like this this is kind of like a simple microsoft word document and it's a simple way of you creating posts and pages on your wordpress website but it's not very dynamic and you can't create fancy pages that you sometimes see being built with a page builder so this is what the blocks the new blocks editor looks like now the colors and the fonts may look a bit different on your wordpress website and that is really down to your theme so let's look at gutenberg and why it is so awesome so it's so awesome because it's automatically built into wordpress it's really good for speed you can do so much more with fewer plugins and you don't have to invest in a premium plugin like elementor or beaver builder or divi which are all page builder tools so for the purpose of this tutorial video i've created a very simple wedding mock-up which includes background images text headings buttons and all sorts of things like that and we are going to be using the gutenberg blocks editor to create this page on my wordpress website so diving in to wordpress i have a fresh and clean install of wordpress and i have the 2021 theme installed on my version of wordpress so the first thing we're going to do is we are simply going to create a new page on our website so we're going to come to pages and we're going to click add new for the mock-up i am going to call it wedding and i'm simply going to save this as a draft and as you can see i'm working in the classic editor and that's because i have the classic editor plugin activated so i'm going to actually deactivate that and i'm going to come back to my page and click edit so now you can see i am in the blocks editor now with the blocks editor there are three parts of the editor that i highly recommend you familiarize yourself with once you familiarize yourself with these three parts of the blocks editor your whole process of building out your pages and your posts will become really quick and easy so the first is this little icon in the top right hand side which is your settings icon so if you click on the settings icon you can see we get kind of a focus screen which we can work on without any distractions now to get it back we simply click on it again and once we click on it we can see there are two tabs so firstly we've got the page tab that's where you set the permalink the featured image discussion page attributes and kind of the status and the visibility none of that has really changed from the classic editor and the next tab is the block tab and now that is the most important tab because that is where you are going to style your specific block now a block to explain is something like a paragraph an image a gallery a heading etc so there are many different blocks to choose from the next thing that's really important is where your blocks are and how to add in new blocks so there are two plus icons on the blocks editor you've got one in the top left and then you won't have one on your page here so you can either click here and this will give you a brief summary of the blocks that you can choose from and you can search in there or you can click on browse all alternatively you can click up here and this will bring out all the blocks that are available to you and you can select the one that you want so to show you again there is paragraphs there's headings there are tables they're galleries and images as well to choose a block you simply click on the one that you want so let's say for example it's the image you click on that that will then put the block on your page and you can configure it by coming to this block tab here in the top right now before we dive into customizing the blocks and how exactly each of them work i want to show you the third thing that's really important so that is this hierarchy at the bottom here so you've got document and you have image so this is a really easy way for you to pinpoint the actual block or section that you want to change so if i click on image here then the block will open up but if i click around there nothing happens so if i click on image that goes in there this really comes in handy when you have columns and within the columns you have images or text or anything like that so let me quickly show you how that works so if we add a block and we add a column let's say a 50 50 column and within that column we add a paragraph with some text we can then start to see the hierarchy changes so you have the columns which are those two columns then you have your single column and within that you have your paragraph so i can see that when it shows the paragraph here on the right hand side we've got the block and i'm editing the paragraph if i click on column then that block changes and i am just editing that specific column and if i click on columns here then i am editing both of these columns so those are the three main things that you want to familiarize yourself with so it's your settings your block tab your blocks here and then your hierarchy down at the bottom some other things to note is on any of your blocks you will see kind of this editing panel come up and you will see these three dots here on the right hand side so if you click on that then you can click on remove a block and that will take the block away likewise with this one i can click on the three dots and i can remove the block now let's look at the different blocks available to us with the standard wordpress installation so if we click on this plus icon here in the top left that will bring up all the blocks available to us so we have text blocks we have media blocks and we have design blocks widget blocks theme blocks and embeds now there are many plugins that can extend the functionality of blocks available to you and i will be doing a tutorial guide next week on my favorite plugin and theme that works with the gutenberg blocks editor so let's have a look at some really popular ones and the ones that we will be using today so we'll be using the paragraph one the heading we'll also be using the image one the cover one and one called spacing so there is your spacer so this just adds some white space between your blocks and you can change the height of that spacing i have uploaded all my images to my wordpress website and i can get started but the first thing to note is that on our page if we preview this we can preview it in a new tab here we can see that it's got the heading and it's got the footer and it only goes from this side of the page to this side of the page and what we want is it to go all the way from the left to the right hand side so what i'm going to use is a really nice and easy to install plugin called full width templates and this works with any theme that you have so we're going to click on wordpress here we're going to go to our plugins and we're going to click on add new from here we're going to type in full width template click enter and this is the one that we are going to install okay so i previously had that installed so i'm just activating it now and we are going to go back to our pages now once you install and activate this plugin you won't see much difference but if you come into your blocks editor page again you will see this new tab called template and you get an option to for that to go full width and full width without a header and a footer so let's click that full width no header no footer and let's preview this in another tab so now we're basically working from a blank canvas so let's get started and start with our first block so we are going to come here to the blocks and what we're looking for is the cover block so you can scroll down or you can type in here cover so we're going to click on cover and basically what the cover one is is we're having a background image with some text on top of that if we want to we can put an overlay um on top of our background image so we're going to either upload an image or choose one from a media library and this is kind of the coloring as well so let's go to our media library and we are going to find the image that we are using so it's this one and we are going to select that image then we are going to pop in a title here and let me just copy it from here and we are going to paste that in there then i just want to change something so at the moment it is a paragraph but what i want it to be is a heading and i would like it to be centered and the other thing is now if we go to our blocks here on the right hand side is we can change the sizing of this so let's make it 32 pixels and the line height is fine and i can either choose a custom color for my text or i can just choose this white color we then want to add in another heading that says images that tell your love story let's copy that and we're going to click on this blocks editor here we're adding in a heading paste that in there we are going to change this to a h3 tag so these are heading tags and we're going to center align it we're going to change this to 14 pixels and now as you can see it's below the other heading so what we need to do is we need to click on this button here to move it up and that is exactly where we want it to be so let's have a preview of that first section and we can see that looks fine however it is quite um the height of it is quite low so we're going to increase that height so if we want to get back to this background image then we come here to this hierarchy at the bottom left click on cover and we can come scroll down here and we can change this minimum height to something like 720 and i want to take the overlay off this so let's reduce that to about that and let's have a preview now okay so that is looking a lot better and definitely on our way to looking like our mock-up okay so the next section of our markup looks like this it's got two columns and in each column we've got two an image here and an image there we've got some text here and an image so coming back to our blocks editor we're gonna click on this button here we're gonna find columns and then within our columns we are going to actually choose um this 333 the reason i'm choosing that is because if i only choose 2 then when we preview our website it's going to come from the left to the right and i don't want that to happen so if i choose 4 i can leave this one empty and this one empty and just have the content in the middle so what i'm going to do is come to those columns here and i'm going to increase this to 4 and then i'm going to start putting in the content so let's add a block let's add an image we're going to get it from our media library there's our image and we're going to add another image under that and on the side we are going to add in a heading okay and let's preview this in a new tab okay that is starting to look a lot better but what we don't have is spacing in between there and i want this to have a little bit more spacing so let's have a look and if we come here in between this image and that image there's a little ad block so what we're looking for now is our spacer block and we're going to click on that that gives us a height but we can kind of change that to probably about 40 pixels you can also change it here and you can also type in the figure and let's preview that now there we go that is starting to really take shape so let's add another spacer block in here let's make that about 70 pixels and yeah and we might want to change this around a little bit if we want to okay so let's go on to this next section which i want to make this kind of a parallax section and you might have seen this being done on other websites so it kind of scrolls over so what we are going to be doing here is adding in a cover again we're going to get our image from our media library okay we want to first click on this cover here so in the hierarchy we want to make sure that there's no overlay on this one and the minimum height is maybe around 660. there's no title here we go and what we want to do is we want to click this media setting that says fix background and let's have a preview and there we go we've got a nice parallax image if we want to we can write some text on top of that next section is two columns again so we're going to do like we did before and we're simply going to come here choose columns we're gonna go for the three and remember we go to columns here and we're going to increase it to four and this is where we add in our image and then we're going to add in a heading and then we can add in some paragraph text just try and center align everything here go you don't actually have to highlight everything you just simply need to click on the block in order to align that text now one thing i do want to show you is if you go to columns and you've got this button here so you can change the alignment so you can actually click full width so now we can start to see what it looks like let's make it full width so this is actually what it looks like on the front end of your website there we go so it's much easier to edit now this text is all way too big so i just want to make it 14 maybe 16 pixels so the where your font styling and everything comes from is from your theme so you need to obviously style that in your theme or get a theme that is easy to customize and style and that is something i am going to be teaching in my next video that will be coming out next week so let's have a preview and there we go and the only thing that we need to do is probably work on the spacing and alignment so for this last section we're going to add in a testimonial which has a blue background color an image and some text and i'm going to come into my blocks editor i'm going to click on here and i'm going to add in a column so it's a 100 width column let's just click on the column and there we go just make sure it's a full width remember this hierarchy is really great for narrowing down and getting to the exact section you want to amend so we want to put in a color here um for this i am just going to let's see if my figma's open and grab the color i want and let's paste that in here so custom color you put in your hex code there paste that in there and there is our color as you see and that's our custom color so that's great then what we're going to add in is an image from our media library so this one select that and we do want to align this center so you can click on this and you can click center and then we're going to add in a another bit of paragraph text which has this we're going to paste that in and we just want to make sure it's all in one line and we're going to align that center we can also then change the font size if we want so let's make it 20 pixels maybe even more than that 30 and the last thing we're going to do is just add some more text under this so you simply press enter and then i can put in the name of the couple and we'll center align that too and then i'm just going to make that 14 pixels okay let's have a preview and there we go it is all looking good the only thing that i would change is possibly the spacing and the fonts and everything is really really down to the theme that you are using so let's add in some spacing so i'm going to add enter we're going to choose a block let's do the spacer settings and remember we can move this up as we want and if we want we can also click on the three dots and we can duplicate that and then we can move that down to there and let's preview that and there we go so it's not 100 in alignment with my mock-up because the font is a little bit different but as you can see it's pretty easy to create beautiful dynamic layouts using the new blocks editor there's absolutely nothing to fear and as long as you know those three things and i'm just going to recap them for you so the first is knowing where your settings button is and this block tab the next thing which i think is the most important thing to know is your hierarchy here so knowing how to exactly get down to what you want to edit and then the third thing is your toggle block block inserter and that's where you can find all the blocks to create your posts and your pages so guys if you liked this tutorial guide then please like it share it and drop a comment below and let me know what you thought of it and if you have any questions please also drop them in the comments below and be sure to subscribe to my channel next week i'm going to be doing an awesome video tutorial guide on a plug-in that i always use to extend the blocks so that gives you a little more blocks to work with and actually it makes it even easier and a theme i use whereby it's easy to customize your fonts and to choose all the google fonts so thanks again and i hope you enjoyed this tutorial video

Channel: Nicola Tweed

Views: 440

Keywords: WordPress, Gutenberg, blocks editor, Gutenberg blocks editor, wordpress tutorials, wordpress gutenberg tutorial, using the wordpress gutenberg blocks editor, what is gutenberg wordpress, wordpress blocks, creating posts and pages using the gutenberg blocks editor, nicola tweed

Id: O6jm9kTXG68

Length: 21min 11sec (1271 seconds)

Published: Fri Aug 13 2021