Gutenberg Landing Page – Planning Out a Layout


I’m the SEO specialist at Webcodebuilder and ZEMEZ, companies that create templates powered by Gutenberg WordPress editor and Elementor page builder . We also have ZeGuten multipurpose plugin, which expands Gutenberg's possibilities.

The Gutenberg Blocks Collection Overview
Prew post
  • Feb 06, 2020
  • 4 min read
  • 1,188

Gutenberg Landing Page – Planning Out a Layout

Today it’s our third lesson and we are going to learn how to build a Gutenberg landing page. However, before starting to build a website, you need to decide on its concept.

Do you want a minimalistic landing page only equipped with the basic blocks without tonnes of tiresome text? Or maybe you are dreaming to create a well-crafted Gutenberg landing page with an essential piece of information. 

Let’s come up with the idea of the landing page structure. From our Gutenberg course, you will learn how to create a stylish and minimalistic landing page layout, which will perfectly suit any purpose, whether you want to showcase your services, create a portfolio, collect data or make a charity platform. However, sometimes it may be quite difficult to create a design yourself. For that reason, there are a lot of resources to find inspiration and build a modern and beautiful WordPress website.

Planning a Landing Page Layout

It doesn’t matter how stylish and creative your blocks are if they don’t serve for satisfying visitor’s interest. The landing page layout usually contains a few basic sections, that take a visitor through a short journey, where he learns more about your company, checks the prices and makes a buying decision. You can roughly divide this journey into several blocks of your landing. Let’s take a look at them:

Furthermore, we will also create a navigation menu with the anchors which will direct you to a certain part of the Gutenberg landing page.

Building a Draft of the Page

When you’ve decided on the topic of your website, let’s move on to our next step. We will create a draft of the page with all the blocks, put them in the right places and design the page’s interface in our following tutorials. Let’s start with a Welcome block, also known as the Hero section.

In this tutorial, we are going to create a website for a preschool startup. So let’s call the page “Startupper”.

Name of the Gutenberg landing page

Create a heading for the Welcome section and add a few paragraphs if you want to. Don’t forget to make all the elements of section nested. We will also add a spacer after each block to make the content separated from other elements.

Welcome section of the Gutenberg landing page

As a next step, let’s add About Us block, which will be introduced by the section with two columns. They will contain a picture with a text over it.

About section of the Gutenberg landing page

Let’s move on to the Services block! Now add a group with a heading, three columns, which will contain an image and three paragraphs.

Services block of the Gutenberg landing page

To add a Testimonials block, you need to find the “Pullquote” block among the ones, that the Gutenberg editor provides. Then put the client’s review directly in the block. We’ll do a customization a little later.

Testimonials block

We’ve almost done! Now let’s make a draft of the Get in Touch block. The minimalistic combination of heading, an engaging paragraph, and social links will conquer the hearts of your clients.

Get in touch block

As the last step, we will add a CTA block. We will link the button to the chat.

CTA block

Open Up to 40+ Advanced Blocks For Your Landing Page!

If you think these are the only Gutenberg blocks you can use to build a landing page, you just haven’t heard of Getwid. This FREE collection of 40+ multipurpose Gutenberg Blocks will be a perfect addition to the existing opportunities of core blocks.

Getwid Gutenberg Blocks

So in order to build a stylish landing page, you may take advantage of the following Getwid elements:

  • Testimonial Block
  • Advanced Heading Block
  • Banner Block
  • Section Block

For a detailed visual overview of Getwid blocks, visit the demo page.

Are you inspired? Stay with us and let’s dive into the developing world. Subscribe to our newsletter and stay in touch for more useful tutorials and instructions!

WordPress Landing Page Tutorial - Quick SEO Optimization Tips
Next post
The Gutenberg Blocks Collection Overview
Prew post
WordPress Landing Page Tutorial - Quick SEO Optimization Tips
Next post

Get Gutenix Subscription

Create unlimited Gutenberg, Brizy and Elementor websites with dozens of templates, premium blocks and a lightweight theme — all in one toolkit!

Meet Gutenix, the devoted team of developers that stands behind many projects created with Elementor & Gutenberg. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2021 Gutenix. All Rights Reserved.