Hey you D.I.Y Affiliate, today we’re gonna be adding the Gutenberg blocks ultimate add-ons for Gutenberg so if you watch this for the entire tutorial you will find out all of the the different functions and the different blocks that you can use so let’s get started first place you go is to your left hand corner to your plugins you click on the plugins and it will go install plugins add new you want to add new so you click on the add new this will then come up here so then you type in here in the keyword gutenberg blocks you will then see your gutenberg block ultimate add-ons for gutenberg and then you would click the Install Now after it is installed you would then activate it now you can either go to a pick a new page or you could do a new post I’m just going to do a new post so I’m goning go click add new so I’m adding a new post now now one thing you will notice is that Gutenberg is different than the actual Classic WordPress Editor okay but this is the new Editor that will be used starting in WordPress 5.0 so everything is now changing over to Gutenberg so let’s get started you click on this plus sign right here and you go to the bottom until you find the ultimate addons block click on this arrow and let’s do the first block the first block will be the advanced heading so I’m going to click on that now it says here add title which is normal because this will you will see this on all of your posts is the first block which is the add title okay I’m now it says write a description now you can choose to stick to the front page you can also choose which category so I’m gonna look for my Guttenberg that I am doing there we go it’s gonna click that and also if you wanted to add a new category you could click this one to put your new category in and then your tags what I did was I opened up a windows assessories and I got my I got my tags and I copied them in here so that I be able to use them so usually if you are working with WordPress it’s a good idea to open up your notebook through your windows accessories so that you could put your information in I’m going back into the document I want to add my tags just took me into there you could also add a featured image for your your post and I’m just gonna choose one from here from my media library without uploading our library seems to be taking some time here I just set my media library for February 2019 okay well while I’m waiting for that to actually come up there we go back into that there we go so I’m just gonna take one of my images I think I’m gonna just take that one select it this will then be my featured image and the featured image usually shows up on the top okay so this is the document now now we’re in the heading you’ll see these arrows here this means it can move this down this means this is the tool box here so now the tool box will come up here now I’ve got this enlarged so it’s actually a lot bigger than what you would see it so you can click on these three dots here and this will tell you what you can do you can duplicate you can insert something before you can insert something after you can edit as HTML and you can also add your description or whatever that you want to add to a reusable block so you could make one block that you could just use over and over again okay so now getting back into my description in here you can change the font you can make it bigger or smaller and I’m just gonna write a little description in here just to show you as you could say my I am typing faster than what my computer is picking it up so what you can do is you can now change the size of your font see how I can make it bigger or I can make it smaller and you could also look at what it will look like in a tablet or for a mobile so I’m doing this for the computer so I’m putting it there we can also change the color of the text here is also a separator that you can use for instance let’s see this style is solid let’s go double and you can choose the thickness of the separator here’s the separator right here I’ve got it double and now I’m gonna have it dashed or dot it and this is the width you can make it bigger longer or shorter depending on what you like and you can also change the color as well so say we want to make it into a red oops I might mean wrong place make that into a red and you see that the separator that I put the dots in there has now changed color the next block that I am showing you is going to be again you go into you have to go right into your plugin which is right here down here at the bottom the third one up I believe well actually I have Yoast so okay so let’s say you wanted to do a post grid so I’m just gonna click on that so now this is going to bring me up all my posts and I am going to decide on what kind of grid I’m going to use like for instance if there there’s an image the image size image position number of items I have six say I wanted no say I wanted eight make it happy and say I just wanted two columns so and this would it was it would look like but the only thing is is what you see here on the screen is not what you’ll actually see when it’s online and I will show you if I just go to the preview I’m just gonna click in that so that I you can see the difference so this is what it will actually look like on my website and this is using the unique blog so this is what it would will look like on my website and as you can see this is way too big so getting back into here I want to of course change this and this is the looks like I’m using a heading tag too when I try anything okay so the font size I need this to be smaller okay this is actually the heading the subheading this is the subheading right here this is actually the heading so we want to take this up heading down there we go just a little bit it’s probably like that and then look on the preview again actually I’m just gonna go into the the website and refresh the page so that you can see so when you’re actually doing your your post it’s a good idea to see what it’s going to look like on the actual website okay that’s still too big or it hasn’t changed it’s not too big twelve let’s see what it looks like for twelve I think that that should be better and well that’s doing that I’m gonna go back into here and the other thing is the spacing you could have the heading the bottom spacing you can change that so you have more or less between the separator bottom and the bottom spacing you could make more space and also you can also go into I want to make sure I mean you have to make sure you’re in the right block okay this is one block this is another block you’ll see these buttons right here that’s a tool bar there’s a tool bar there now there is a way to move these around but it’s not working for me right now okay so let’s go back here and now see if that’s in okay so there’s the heading in there and it could be a little bit bigger but that’s okay okay so there is the second block that was the post grid now this is called post masonry and the difference it is that it does it in the what they call a masonry block and as you can see this is different but then this one here you can then choose the order you want the newest to the oldest the oldest to the newest and you can change that you can also change the category and I’m just going to look for my Gutenberg this will be down here right there so say I just want this category so it’s only gonna post that one item right there instead of and more this is my post right here let’s say I changed the category and I wanted it to be affiliate marketers so that is now going to give me a couple more posts but you can see the power of Gutenberg here and how easy it is to be able to use the blocks just waiting for that to come in you can also put an image in.
Such as show featured image so this is an image that you choose which is your featured image and the size of the image whether you want thumbnail full medium medium large or large and I’m just gonna look at the medium for now just to see the image position whether you want to have it at the top or in the background you’re a read more link and as you click in here you will see the different options show the read more link opened links in a new tab so I usually do choose that one and also you can change your font size this is having a problem coming in so you need to find out what’s going on with this just going to refresh this page so getting back into the where we need to go for the plug-in which is right here the ultimate add-on plug-in and the post masonry and I’ve got it newest to the oldest but you can change that and you can also choose your category and your image you can decide whether you want it large and where you want it whether you want it at the top or in the background the black background overlay color now let’s see is like a lighter color and then your content can show the author show the date show comments can change this you can show bigger or more or less and then the typography again this is your title tag which is your your title tag 3 which is a different size and you can also make it bigger or smaller that I just made it very big and I’m also they’re now gonna make it smaller of course it’s today so I’m making it smaller and then the excerpt which is you can also make that bigger or smaller your colors your title color so let’s say we wanted to do a title color of red so then this is the title and then it will then come up red the meta tag color say we wanted to do that blue so these would come up blue right there and your excerpt color so say we wanted to do that orange I’m actually not seeing that right now then you have your spacing and here is where you can change things see where it has a gap you can change that you can make it more of a gap between your posts or less sorry less of a gap between your posts and you can also use the content padding so this will now bring it down so it looks like it’s bigger but it’s actually just longer and also this is for your mobile phone you can also see what it’s gonna look like on your mobile phone as well and you have the title bottom spacing see how that’s no changed and then you have the meta bottom spacing now getting back into my title today I wanted it to be pink you can change the color you could change the color of everything here now let’s have a look let’s update this and then let’s see what it actually looks like I’m on mine you’re just gonna say that okay so this is where I’ve made it bigger this is where I changed the color okay now we’re gonna go to the next block just you can also use this where you can add a block and then that will still go into the actual ultimate add-on blocks and say you want a post carousel so I’m just gonna click on that it’s now going to take all of my posts and put it in the form of a carousel so you could just click here and you will see you can also order it from the oldest to the newest a to Z or Z a you can determine on the number of columns that you want to have so I have six here I don’t invest all this category see how when it go like this but now adds the columns of course I don’t have that that I don’t have that many columns but and of course image show featured image and the size the image position where you want it now you’re going to find the featured image in your document so this is the featured image right here that I have and you can replace that image getting back into my carousel when you click in them into the block it comes on up on the right hand side number of columns and there’s my image the content if you click in here then you could show the author show a date on it or show excerpt okay and there’s the excerpt length again and then your read more link can open the links in a new tab and I usually do like that and your button text would be read more you can also make this bigger or smaller see I just made it too big but can make this bigger or smaller whatever the size is that you’re looking at you can also change your button border say I want a double and the width is going to be bigger and also have a rounded corner on your button and then you can also get into your button padding which it shows you right there whether your button is going to be coming out more or being more in the background so that they’re okay and also you can have button colors so say I wanted red so then it would turn this red here on my button in my background color say I wanted it in blue so then I’d have blue from my background and then the border color you can also change say I wanted that let’s just say green just some bright colors so those are the things that you can change in there and then get them down to the next one there should be another and block that shows up like I said I’ve enlarged mine so it’s just click on that and then go down to your actual ultimate add-ons block now we’re going to go with the multi buttons now here you can choose the number of buttons that you want like for instance I’ve got two but you can now change them to three or four and all your settings and we’re just gonna go through the first button you would then put a link in where you want your button to open to and whether you want it in the same window or if you want it in a new window the font size that you want you see how you can make it bigger and smaller and also what it’s for that you could see this would be tablet and this would be cell phone now we are working with the button number one one thing you do have to remember is when you’re working with the buttons you have to see what button you’re working with so this one is button number one and it will actually show you right here you have this closed C button number one a button number two button number three button number four and depending on the different number of buttons that you have now I have done another post where I’ve got a couple of different buttons that are already done that I was going to show you I’m just pulling up that post right now just waiting for this to come in so while this is coming in we’re gonna go back sometimes when you have more than one editor opened at the same time your computer goes very small so while that’s coming in and I’ll show you the different settings just going through the first one you have your link whether you want it to open in a new window or not you then have your border your thickness and you can also change that as well and you can also change the type of border say you wanted a dotted one but that would then give oh sorry it’s a solid I wanted a dotted okay and also you can change the color of the border and also you can change the color of the text so say I made that color rounded corners see how it rounds the corners here and it’s no longer square you could also have a background color that’s a pretty ugly looking button so I don’t like the dotted solid it’s actually better and like I said you could change the text you could also change the padding see how you can make it longer and you can also make it lighter and you can continue doing this with all these buttons here and you can have as many buttons as you want the next one is going back into the plugin social share now social share I’ve done actually on in another post so it makes it easier for you to see social sure this is social share right here just click into there you can see it comes up social share and this is where you put your settings in like for instance if you want what is the type but the is it an image or an icon and then the icon color and also the icon background so let’s click on this one this is tumblr this is actually one two three four five number six so then we go down to this button down here and then you can see I’ve got tumblr the icon and also there’s a place to be able to put your link in where you want the URL to go to there’s many different options that you can use like first there is the font the background color the size okay this is part one of a two-part tutorial so I hope this has been helpful to you just to talk about these first blocks the next tutorial will go into the the other blocks so if you like this video click the like button and subscribe please and remember sharing knowledge is free and this is the DIY affiliate saying have yourself a wonderful night
As found on Youtube
