How to Create a Landing Page With the Gutenberg Block Editor

If you’ve read about creating a website before, you’ve probably come across the term ‘landing page’. But what exactly is a landing page? Why should you have one? And how do you build a landing page with WordPress?

In this post, we’ll show you how to make a landing page in WordPress and the Gutenberg editor. We’ll also talk about landing page layouts and what makes a good one.

Creating landing pages is super easy, especially if you use a theme like Astra.

Astra comes with tons of premade landing page templates that make the process extremely intuitive and straightforward.

Let’s get started!

What Is WordPress?

If you’re new to web development, you might be unfamiliar with WordPress. In short, it’s the most popular way to create a website today. There are over 64 millions websites that use WordPress!

WordPress is super popular, and for good reason. It’s very easy to use and can be modified to fit just about any type of website project.

Learning how to use WordPress is easy and can be done in a matter of hours. Once you know how the system works, you can then create a WordPress website in an hour or less.

It’s really easy!

What Is the Gutenberg Block Editor?

Gutenberg is the new block editor included in the newest edition of WordPress. It is different from previous versions in many ways, but mostly because of the change from a standard text editor to a block-based editor.

Gutenberg is integrated right into WordPress and it’s the future roadmap, so it is definitely important to learn how to use it.

Thankfully, learning Gutenberg is easy even for beginners.

What Is a Landing Page and Why Should You Build One?

A landing page is a page designed for a specific audience. They can “land” on it from a Facebook post, a tweet on Twitter, an email link, a Google search result, or pretty much anywhere else.

A landing page isn’t the same thing as a homepage, as a homepage is usually designed to welcome any type of visitor.

A landing page, on the other hand, is targeted at a particular audience.

Landing pages are super important because they allow you to customize your message to a particular audience. Rather than having the same page for everyone, you can have a fine-tuned page that speaks directly to a particular user.

For instance, let’s say you have created an ad campaign for Facebook that targets a certain hobby. The best strategy is not to just send Facebook users to any page, but to one specifically designed for Facebook users that match your targeting choices.

By creating a landing page that targets these particular users, you will maximize your conversions, increase revenue, get more subscribers, and be more successful overall. And who doesn’t want that?!

How Blocks Make Web Design Easy

Blocks make the entire web design process much easier than was previously possible. This is especially true when it comes to building landing pages. Why? Because they remove the need to customize or insert code like HTML, CSS, or JavaScript.

In older versions of WordPress, you often needed to add shortcodes or manually insert HTML in order to design a particular element on your page.

With blocks, you only need to insert the block, then click to move it around the page. It’s super easy!

There are also collections of blocks that accomplish specific tasks. These are called block patterns and they speed up the web design process even more.

What Types of Blocks Are Available?

There are tons of different blocks available. The default WordPress blocks cover nearly everything you’ll need, ranging from paragraphs to headings to images and everything in between.

If you use an addon package like Spectra, you’ll get even more blocks to use!

All in all, it’s safe to say that there is a block for just about everything.

Where to Find Blocks in the Gutenberg Editor

In the Gutenberg editor, you can easily add a block by pressing the black ‘+’ box. Once you click that, you’ll see a panel that displays all of the available blocks.

To add the block to your page, just click on the item.

How to Customize Blocks in the Gutenberg Block Editor

Once you’ve added the block, you can customize it by clicking the three dots above the block.

After you click on it, you’ll see a list of settings appear.

How to Build a Landing Page Using the Gutenberg Block Editor

Now let’s walk through creating the landing page. There are ten easy steps, with a couple optional ones too.

Create the Page and Give It a Title

First, create a new page by going to Pages > Add New on your WordPress sidebar. Give your page a title.

Plan Your Layout

First you’ll want to plan the layout of your page. You can do this by hand on paper or by wireframing using wireframe blocks. It depends on what your preferences are.

Have your layout idea ready? Let’s go on to the next step.

Add and Style the Header

We’ll start at the top: the header. The header usually includes the logo, navigation, and other elements. However, it’s often recommended that a landing page has no extraneous elements, therefore the menu is sometimes left out.

First, let’s add a logo. Click the black ‘+’ box to add a new block, then search for logo.

We want Site logo. Add it to the page and then select your logo as the image.

You can add other elements if you like, but for our landing page, we only want the logo in the header. Too many distracting elements can negatively affect our conversion rate.

Add a Call to Action

Next we want a call to action. This can take many forms but is usually a clickable button. So, we’ll add a button.

Click the black ‘+’ box to add a block and then search for button. Click on Buttons to add it to your page.

Then click the new black box that just appeared. Once you click it, a button will appear with some space to type text inside it. Type your button text.

You can also customize the button’s style and change font weight, design, and more.

Done!

Add Product or Service Features

Now we want to add some more details about our product. There are many blocks useful for this purpose.

• Paragraph block. This is a standard text block. It’s helpful for writing longer sections of text about the item.
• Media and Text block. This lets you add an image next to some text. If you want to highlight particular elements of your product via an image, definitely use this block.
• List block. This will let you add an ordered or unordered list. It’s useful for long lists of features and benefits, especially of a technical nature.

Add whichever ones make sense for your particular situation. Feel free to add more than one block of product information too! Just don’t add too many, as we don’t want to bog down readers with an excessive amount of information.

Remember, the goal is to convert them, not to write every possible thing about the product you can think of.

Add Another Call to Action

At this point, you probably want to add another call to action. Place it below your product or service features sections.

In general, it’s not a bad idea to have 2, 3, or even 4 different call-to-action buttons on your page. Aas long as they are distributed throughout the page and all have a similar message or intent, you’re fine adding more.

Add Social Proof

This is also a good time to add some social proof. Social proof includes testimonials, reviews, and other comments from real people. These help convince your readers that your product is as good as you say it is.

The best block to use for this purpose is likely the Quote or Pullquote. These will add a nice looking quote to your page.

You can also add social proof using images, the media + text block, or anything else. It depends on how you want to design the page.

Add Social Media

Finally, add links to your social media pages. The Social Icons block is an easy way to do this. You can add links to Facebook, Twitter, and other social networks.

Optional – Add About Us

An additional optional section is an About Us area. Here you can add some details about your company, the products you sell, what your values are, and so on. This is often important in helping customers make their final purchasing decision.

Optional – Add Coupon or Discount Block

If you want to add a coupon or discount to your page, you can easily do so. Just use any text block and add the code in bold letters.

Check and Assess

Now review everything to make sure that it looks good. Are all the elements positioned correctly? Are there any typos? Do the images have ALT text?

Ensure that the page meets all of your requirements before publishing.

Publish the Page

Once you’re sure that the page is finished, press Publish.

Test the Calls to Action and Any Links

Finally, before you push the page out to customers, make sure that all of the links and buttons are working properly.

Do they include tracking codes? Do they go to the right sales page? Double check everything!

Top Tips for Designing Landing Pages

Finally, let’s cover some other useful general tips for creating landing pages. These will be helpful for any kind of project.

• Get to the point. Landing pages should grab the attention of your readers in seconds. Don’t make them wade through paragraphs of text just to figure out what your page is all about.
• Use headings effectively. H1, H2, and H3 headings should be used optimally to draw attention to key points. If you use too many headings, their impact will be lessened. If you use too few, you’ll have a giant wall of text, which is just as bad.
• Keep the layout simple. Landing pages should avoid any complex column layouts, sliders, and other distracting elements. Remember, the objective is to convert your reader into a customer using calls to action.
• Use testimonials and reviews. Customers always want to know if other people have used your product and recommend it. The more testimonials you can get from real people, the better.
• Go mobile-first. Finally, you should always assume that your website will first be visited on a mobile device. As such, be sure to pick a theme that works well on mobile and ensure all images and other elements are compressed to ensure best page loading times.

Landing Page FAQs

Conclusion

Landing pages are a critical part of any online marketing effort. Without them, you will miss out on tons of potential sales, subscribers, and other important actions.

As such, it’s really important to understand what a landing page is and how you can build one on your WordPress website.

In this post, we learned what a landing page is. We also talked about the Gutenberg block editor and how you can use it to easily create a landing page in WordPress.

Then, we walked you through creating a landing page, step by step. It’s actually quite easy!

Finally, we offered some other essential tips for improving your landing pages.

Do you utilize landing pages on your website? How did you make them? What are your special tips and tricks for maximizing your conversion rates? Share your experience in the comments below!