Wait! Are you leaving?

Try Gutenix subscription for Free !

  • +6 Free templates for Elementor and Brizy
  • Free Gutenix theme
  • Warm hugs from Gutenix team!

Gutenberg Landing Page – Planning Out a Layout

ABOUT THE AUTHOR

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
  • 3 min read
  • 520

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

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!

4
Appreciate
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 websites with dozens of templates, premium Gutenberg blocks and lightweight theme — all in one toolkit.

Meet Gutenix, the devoted team of developers that stands behind ZeGuten plugin and Gutenix free theme. 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 © 2020 Gutenix. All Rights Reserved.