4 building blocks for designing landing pages in WordPress

Designing landing pages using the Block Editor

So your business needs a landing page? It’s super easy to design a landing page using WordPress and the new Block Editor (nicknamed Gutenberg).

Over the the next several weeks, I’m going to show you how you can design landing pages in WordPress, using nothing but the default Twenty Twenty theme and the Block Editor.

You can either watch the video below or read along.

Video showing these 4 building blocks for designing landing pages in WordPress.

The building blocks for designing landing pages in WordPress

Designing landing pages in WordPress using the Block Editor is easy once you understand how to use these core blocks:

Cover block

This block allows you to create a large image with content covering it, like a heading or button. 99% of the websites you see have something like this. Here’s an example of what the Cover block looks like:

The Cover Block

The Cover block is useful in designing landing pages when you need a background image with a heading, paragraph and button combined into one section.

Heading block

This block creates a headline. These are important not just for looks and legibility, but SEO as well. Here’s a example:

Heading example

Content Structure

It’s important to organize headings by order of importance, starting with H1 and then working down, similar to how you likely organized outlines in school.

The Content Structure dialog in the Block Editor can help you see if your headings are organized correctly.

Paragraph block

This block contains your basic paragraph text. This is where a bulk of your content will be.

Paragraph blocks don’t need to be “boring” by any means. In the Block Editor, you’re able to adjust the size, set a Drop Cap and change the colors.

Button Block 

This block is a button, your call-to-action. The Twenty Twenty theme comes with 5 different button styles, each of which can be customized.

Primary Call-to-Action button

Secondary Call-to-Action button

How to put these blocks together

Hopefully that gave you a better idea of the building blocks for designing a landing page in WordPress.

Next week, we’ll actually put the blocks together to form a landing page for a fictitious business.

Discover more from AaronTweeton.com

Subscribe to get the latest posts to your email.