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:
- Hero section, also called welcome block;
- 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 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”.
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.
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.
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.
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.
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.
As the last step, we will add a CTA block. We will link the button to the chat.
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.
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!