Connect with us

Guides and Tutorials

How to Create a Landing Page With the Gutenberg Block Editor

Published

on

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?

WordPress logo

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 editor default view

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.

Blocks in gutenberg

If you use an addon package like Ultimate Addons for Gutenberg, 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.

Add block in the post

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.

Gutenberg block settings

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.

Logo block

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

Adding logo using block

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.

Button block

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.

Edit Button styles Gutenberg

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

Button designed using gutenberg

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.

Text block options
  • 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.

Quotes block

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.

Social Icons block

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.

Landing Page FAQs

What is a landing page?

A landing page is a page on your website that is optimized for converting visitors. This can be selling them a product, getting them to subscribe to a newsletter, or any other action. The page is designed specifically to convert visitors and not just as a general content or information page.

What are landing page design principles?

A few reliable landing page design principles are: get to the point, use headings effectively, keep the layout simple, use testimonials and reviews, and go mobile-first for your site. Overall, you should try to keep your landing page as simple and straightforward as possible in order to maximize conversions.

How do I create a landing page in WordPress?

Simply follow our guide above to continue building landing pages. You’ll need to add things like a heading, conversion buttons, calls to action, and more. Remember, when building landing pages, always remember what your ultimate goal is, whether that is increasing revenue or getting more subscribers.

Is Block Editor the same as Gutenberg?

Gutenberg is the entire “system” of WordPress, while the Block Editor is simply the designer page where you can create pages and posts. The Block Editor is “inside” of Gutenberg itself and is how you actually build landing pages and create landing page layouts.

Do I need a website for a landing page?

Yes, you’ll need to have a website in order to create a landing page. This involves getting a web host and installing WordPress on it. Thankfully, the process is very simple, especially if you use a theme like Astra that comes with many Gutenberg landing page templates. Overall, the entire time invested shouldn’t be more than a few hours.

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!





Source link

Continue Reading
Click to comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.