ZeGuten — a collection of blocks for Gutenberg Get for $15.00

Planning out a layout of a landing page. Creating a draft of the structure in Gutenberg

ABOUT THE AUTHOR
Default Gutenberg blocks overview. Extra blocks for Gutenberg overview
Prew post
  • Feb 06, 2020
  • 3 min read
  • 54

Planning out a layout of a landing page. Creating a draft of the structure in Gutenberg

Today it’s our third lesson and we are going to decide about the landing page layout. 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 tones 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 with the idea of the landing page structure. In our Gutenberg course, we will 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.

Planning a Gutenberg landing page layout

No 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 and blocks. Let’s take a look at them:

  • Welcome hero section;
  • About block;
  • Services block;
  • Reviews and testimonials block;
  • Get in touch block;
  • CTA block.

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 Gutenberg landing page

When you 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 its interface in our following tutorials. Let’s start with a Welcome hero section.

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

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 the section nested. We will also add a spacer after each block to make the content more neat and clear.

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

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

To build 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.

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 e-mail address will conquer the hearts of your clients.

As the last step, we will create a CTA block. We will keep it simple and add an e-mail address over the image.

We hope you liked our simple and quick tutorial on planning out the structure of the Gutenberg landing page. Subscribe to our newsletter and stay in touch for more useful tutorials and instructions!

0
Appreciate
Paragraph block overview
Next post
Default Gutenberg blocks overview. Extra blocks for Gutenberg overview
Prew post
Paragraph block overview
Next post