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
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.