Design a Home Page with Gutenberg Editor

Basically, you are here to learn how to edit your website’s home page with the Gutenberg editor. Right now, your homepage might look simple with the default design. Now after the lesson, you will be able to change it to look better, maybe adding some images or adjusting the text position. It might look easy and simple, but you will get to learn a lot of basic steps and building blocks that are needed for you to customize your whole website.                                         

Let’s get started with the basic customizing!

Go to “Pages” and click “Add New”, and the Gutenberg style editor will appear. You will see a title block on the page and you can add text on it. On the right side, there’s a menu bar with various options and tools to help you with the page’s design and what’s on the page.

You may see an option below the page. It will change depending on what theme you are using at the moment. So, if you change the theme, you might find different options here.

Let’s try to see the title bar. Click the block below the “Add title”, press the spacebar and click “Preview”.

You will be directed to your website’s home page. It will show you how your home page looks like. The title is still blank, the sidebar is still there, alongside with the search widgets and stuff.

Now, how do we turn it into something better and more customized?

Go back to the new page tab and try to add text.

Type your title on the “Add title” and write some subtitles below.

This will be a short introduction to your website.                    

Let’s check it again! Click “Preview”, and the introductions will appear.

The title and subtitle are here already, but it’s kinda bland. Let’s add an image!

To add an image, you need to add a new block. Go back to the new page editor and click the plus button on the upper left side of the new page editor. There are a lot of blocks you can choose. They are easy to use and also, you can move them around!

Click “Image”, and a dialogue box will appear. You can choose either to Upload it or just drag the picture here if you haven’t uploaded it on your media library, browse from your Media Library, or Insert from URL.

Now after you uploaded the image, it will appear on the website. Let’s check it out by clicking “Preview”. Now the image is there already, but you might need to do a couple more things like aligning the title to the center, resizing the image, and get rid of the sidebar menu.

Let’s start with the sidebar menu!                      

To remove it, simply go to the bottom page and click the option on the bottom of the page.

This is the configuration for your layout, and you can choose to reposition your sidebar, or just click “No sidebar” to make it disappear.

After the sidebar is gone, you might see your content is not as big as you want it to be.

Let’s try with “Full Width”.

The content will be in full-width mode, from your website name here to the right side here. You can see that the image is also getting bigger as it is a default setting by the “full width”. Be worry not! You can just click and resize the image or look at the right-side menu and resize the image.

This right-side menu has two options, “Document” and “Block”. The “Documents” is more likely for the page, and the “Block” is for the blocks. Simply click your blocks and you can see the different configurations appear.

Let’s get back to our image. On the right-side menu, you can choose the image default sizes like large, full size, medium, or thumbnail.

For example, if you want medium, just click the “Medium Size”. Another way is, click the “Large Size”, and you can choose the percentage here. If you choose “Large Size” and then click 50%, it will shrink into 50% of the image size.

Let’s preview it again!

The image will appear smaller, but all of this is still aligned on the left.

Go back to the editor and click the image block. You can see there is an options bar up here. You can adjust the position. Click “justify”. Let’s justify the subtitle position too! The options for the text are more than the image. You can click for more options here and explore the features.

So we have adjusted the size of the image and justified the image and the text below the title to the center. It’s starting to look like the design we wanted to, but the header is in different color and is in the center. Also, there is space between the image, the header, and the texts.

Let’s add the space first by adding a new block type. Click on the plus button again and scroll down to the “Layout Elements”. Click it and choose the “Space” block. This block will make a space between the other blocks. You can resize it as you want!

Now we want to add another space between the other side of the blocks. You can go over the primer step by adding a new block, or you can just click the space block you have made and click “Duplicate” or ctrl + shift + D for windows and Command + Shift + D for Mac.

On the right-side menu bar, you can set an exact number of pixel size for your space block size. You can move this block around by clicking the up or down arrow on the left side of the block here. It’s simple!

Now that we’ve got some spaces here, let’s check for the preview. After you have checked the spaces are there perfectly, the last thing you need to do is to change the header color and position!

This is going to be a little tricky because the “Sparkling” theme we are using has a “Title” block. So basically, this is the title of the page itself. The basic theme will always put the title here on the top of the page. But as we are going to design a home page, we need a header on the center and above the image. Now, we need to add a separate option for the header because here in the title block, there are no options for you to adjust it to the center, or anything.

Add a “Header” block from the ‘add block’ plus button, and it will appear below the blocks list. Add the simple header text you want to write here. On the right-side menu bar, we get these options to align the text. Click the “Justify” button to reposition the text to the center. After that, move the block onto the top of the page, above the first space block.

If you check for the preview, the header will appear nicely just like what we want. The color is automatically set to a red color as it is the default settings on our theme. We still have the title page above and we don’t really want the text to be there. Actually, the text is going to be the link for the page, so you might want to change it into something simpler or more convenient.

The text is going to be on the link like your website name dot com slash the text. So, let’s change the permalink of this page! You can do it by clicking the title block and click “Edit” or go to the right-side menu and edit the URL. This might not be very important as people won’t really type the overall permalink to go to the page, but let’s keep it clean and simple!

Source: https://hu.wordpress.org/gutenberg/