Gutenberg editor has been released as the default one for some time and it can do some interesting things. Some like it and others hate’s it as is different than the classic one. Personally, I enjoy it as it lets you make some interesting designs very easily and has some interesting 3PP plugins that will let you add elements easily. You can see some of the plugins on Best WordPress Gutenberg Blocks Plugins that will help you add some interesting designs.

From my point of view, Gutenberg editor is in direct concurrence with page builder plugins like elementor, Gutenberg is at the beginning so it doesn’t have the functionalities of a page builder but slowly will grow and developers will add more and more elements.

I like using page builders to build complex designs that you can’t do with Gutenberg but for basic designs, Gutenberg is perfect as is faster and lighter, you can check an article here about the performance: Elementor Performance Tests Vs Normal Theme

I have a couple of sites and I really don’t like the default blog style on my home page, I like to have a personalized landing page on which I can choose the elements and post categories. In this article I would like to show you how you can create a nice home page design as the below one for your blog:

I am not saying that this is the best design but you can customize it very easily and choose the posts from the category you want or different elements.

Tools Need to Design A WordPress HomePage/Landing Page With Gutenberg

Let’s see the theme and plugin that you can use to design the perfect landing page for your blog. They are free but also have premium versions that you can use for additional functionalities.

Theme

Astra Theme is the theme I am using, it has a free version also that can be used. I like this theme because it is fast and has a lot of customization elements like choosing the header option or layout for the page. Disable and enable elements on the page.

Gutenberg Plugins

I am using 2 Gutenberg plugins that offer some interesting blocks that you can use on your page. I choose 2 because I like the elements of the post from the 2 of them. Stackable is the first one, it’s is offering more than 20 elements with incredible designs, Ultimate Addons For Gutenberg is the second one. Both are fast and are offering a lot of blocks that you can use to design the perfect landing page.

How To Design A WordPress Home Page With Gutenberg

Now as we have seen the tools we need to have the landing page done let’s see the steps you need to take to have the page ready.

Step 1: Install the Plugins and Theme

If it wasn’t already clear you need first to install the Astra theme and the 2 plugins. You can do this from the Appearance – Themes for the theme and Plugins – Add new for the plugins. As all are free you can use the search as in the below picture.

Step 2: Create the Home Page or Landing Page

Next, after we have installed the theme and plugin we need to have the homepage created. To do this you just go to Pages – Add new. After you need to go to the right in the Astra Settings section and choose the below:

• Sidebars – No Sidebars
• Content Layout – Full Width/Contained
• Disable Sections – Disable Title, Disable Breadcrumbs

If you have any share buttons you would not want to appear on this page to look cleaner. You can disable them from the page end :

You can set also the SEO title and description for the page. For a complete WordPress SEO tutorial, you can check: WordPress SEO Tutorial – How To Optimize WordPress For The Best SEO.

Step 3: Add the Blocks

After the settings, the home page is now ready to have the elements you want. In this tutorial, I will show you how you can create a home page just like mine. If you want you can add other elements also as services, a team, testimonials, etc

a. Add call to action block

The first block is a call to action box with text and a button. You can add your text and colors, to add it just go on the left to + and search for the header as in the below picture:

After you can go to the right side and choose the customization for it. You can change the text, button background, etc. You can even add a video or a picture in the background.

b. Add About Me block

On this site, I have decided to add an about me element. I like to use also an image to be more personal. You can use this type of block to add everything you want. To add this block again you need to go and add a new block by searching for: a feature

Then you go into the right side on options and choose the layout and the customization. After you add the block you have the option to add the image and the URL for the link.

c. Add Social Buttons

I have a Facebook page, a YouTube Chanel and Pinterest account, I want the visitors to see them so I have decided to have a special block for this. I am using pictures to add them and put the link. You need to search on Google for the right social buttons you like save them and then add them. To add them you can add the section and advanced columns from UAG

After you choose the number of the column and add the images with the link to your profile.

d. Add Separator

After them, I have chosen to add a separator. You just search for it and add it. After in right you choose the style Wide Line

e. Latest Post Block

Next, I want to have a block that will show my latest posts. The block will display 4 posts and will have only the feature image and title. You can choose any category or add extra elements like date or excerpt. You can choose the columns and number of posts. You have a lot of flexibility to choose exactly what you want. Before you need to add a title block with what the block has ( my case latest posts). To add the block search for “posts” and choose the block from stackable:

In the right side under block settings, you have all the options to customize the block as you like. Next, add also a separator as in step d.

f. Add a Post Carousel

I have some categories on the site that I like to display on the first page. To display the last posts from the category I want to use a carousel that will slide automatically. Same as before you have the options to choose the category, the elements you want to show, the number of posts and columns. You can even choose the colors for everything. To add the block just search for carousel and add it from UAG:

In the block settings panel, you have the customization options that you can choose. After I add another separator.

g. Post In Category

Next, I want to have another block that is displaying the posts in certain categories. I want the block to have a different design than the latest posts. To add it you need to choose the Post Grid block. You will have the same option to choose the category, a number of posts, and columns as previously. You can choose the title and background colors. You have a lot of flexibility here also.

h. Add a Coupon Section

If your site has coupons you can choose to have a special block for them on your home page.I have Affiliate Coupon Plugin installed on my site where I have some coupons added. To have them added you can add first a container where you add the title and a button with the columns blocks. After you add a short code as in below picture:

i. Activate the Page

Now the page is active and has all the elements you want to have a nice landing page. Next, you need to activate this page and be your default home page. To do this you go under Settings – Reading and choose a static page. In there you choose the new page you created and the blog page ( you also have to create it black with nothing) and hit Save Changes.

Now when you visit your site you have your new landing page.

Build a WordPress Landing Page With Gutenberg Video

Conclusions

This is the tutorial that can help you have a more animated home page with Gutenberg. There are a lot of plugins that you can use for Gutenberg but I prefer these 2 as they are having nice elements and they have a good performance. They are also having other elements like services, pricing tables, testimonials, or team blocks that you can use to future expand your landing page. This tutorial is more for a blogger.