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.

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
• Heading block
• Paragraph block
• Button block

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:

---

Heading block

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

---

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.

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.