Designing landing pages using 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:
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.
This block creates a headline. These are important not just for looks and legibility, but SEO as well. Here’s a example:
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.
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.
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.