Creating a landing page with the WordPress block editor

Are you overwhelmed by the WordPress block editor? 

When you look at it, try to add some content, and see a gazillion number of blocks and other things and want to give up?

Don’t give up. The WordPress block editor is actually easy to use, once you learn where everything is and try starting with something simple. Today I’m going to show you how to create an Intro section for a landing page.

I’ve been using WordPress for over a decade, and have been using the Block editor since it came out. I want to help you learn how to use it so you can create landing pages, lead generator forms and online stores. If you’re a business coach, speaker, coffee shop owner, pastor, news publisher, etc., I believe WordPress can help you reach more people so you can grow your business or organization.

So let’s get started.

Creating an intro section

Creating a new page

Since our ultimate goal is to create a landing page, we’ll want to create a new page. From the WordPress Dashboard, 

1. Click New > Page from the top menu.
2. Add a title to the page like “My Landing Page”.
3. Then click the Save draft button. 

That was easy! You just created a new page. It hasn’t been been published yet (so nobody else can see it), but we’ll publish it once we’re ready.

Let’s now start to add some content to create an Intro section.

Using Paragraph blocks

Let’s add a paragraph. To add a paragraph,

1. Click where it says “Type / to choose a block”.
2. Start typing your paragraph.
3. Press the Enter or Return key.

Yep, that’s how you add paragraphs: just start typing and hit Enter. In WordPress, the Paragraph block is the default block.

Let’s see what our finished page looks like. To see a preview of the page,

1. Click the Preview button next to the Publish button.
2. Then click Preview in new tab.

This will open a new tab showing a preview of what the page would look like if it was published. We’re not done with this page, but I wanted you to see how to preview your page. 

Using Block Toolbars

When you finished typing, you might have see a toolbar appear above the paragraph with some buttons. This is the block Toolbar, which provides tools for whichever block you’re working with. For a Paragraph block, it will show buttons for changing text alignment, making text bold, etc.

At the far right of the Toolbar is an Options button with three dots. If you click that you’ll see more tools and controls. 

Using Block Settings

Besides the Toolbar, there’s another place for accessing settings for this paragraph block. To access the settings panel,

1. Click the Options (three dots) button on the far right of the block Toolbar.
2. Select Show more settings. 

This will open a panel on the right where you’ll be able to change the settings for the block, like change colors or text size. You can close it by clicking the X button in the upper right of the panel.

We just covered how to access tools and settings for a Paragraph block. Let’s learn how to use other blocks in the WordPress editor.

Using Heading blocks

If we’re going to build a landing page, we probably want to start with a heading. Thankfully, WordPress comes with a Heading block. To add a heading block,

1. Click the Add block button (usually a black or blue plus sign).
2. Type Heading in the Search field.
3. Click the Heading with an icon (not the one with a thumbnail image).

At first glance, the Heading block should look similar to the Paragraph, except you’ll likely see different buttons in the toolbar and options in the Settings panel.

Keyboard shortcuts for quickly adding blocks

Going through three steps to add a Heading block seems like a lot of work. There’s an easier way.

Remember where the page said “Type / to choose a block”? That’s a shortcut. To add a Heading block using this shortcut,

1. Type / to bring up a select menu.
2. Continue typing /head until you see Heading in the menu.
3. Press Enter to add the Heading block.

That’s much easier. As you use the Block editor, you’ll become more familiar with the different blocks available and likely use this shortcut.

There’s an even easier way for adding Heading blocks, by entering the # symbol before your text. To do this,

1. Enter ## and then a  space.

Boom! Three keystrokes create a Heading block. Notice how the Toolbar shows an “H2” button? That’s because you used two # symbols before your text. See what happens if you use four # symbols.

Transforming one block to another

So you learned how to create a Paragraph block and a Heading block. But what if you wrote your heading inside a Paragraph block? It’s easy to transform one block into another. To transform a Paragraph block into a Heading block,

1. Select the Paragraph block you want to transform.
2. Click the paragraph icon on the left side of the Toolbar.
3. Then click Heading to transform the block.

Now your paragraph is a Heading block. You can also transform it back using the same steps.

Using the Details popover 

Since we’re dealing with headings, there’s another feature in the Block editor I want to show you. At the top of the screen, you should see a Details (info icon) button. Click it to see details about the structure of your page.

When you’re creating content, it’s important to structure your headings correctly, and the Details popover can quickly show any problems, highlighting any headings that are empty or out of logical order. Since we’re only dealing with one section, we don’t need to worry about this for now, but it’s important you know where it is.

Using Button blocks

The last thing we want for our intro section is a call to action, where we can use a Buttons block. To add a Buttons block,

1. Type /butt until you see Buttons in the menu.
2. Press Enter to add the Buttons block.

When you first add a button, you’ll want to type what you want the button to say, and then edit the link. To do this,

1. Type the text you want for the button (e.g. “Shop now”).
2. Select the Link button in the toolbar.
3. Search for an existing page or post, or enter a URL.
4. Be sure to press Enter to set the link.

You might have noticed that toolbar looks a little different from those for the Paragraph and Heading: there’s a separate button to the left of the toolbar that says Select Buttons.

When you add a Buttons block, WordPress adds a Buttons (plural) block and a Button (singular) block together. You can have multiple Button blocks within a Buttons block. But when blocks are nested within each other, how do you know which block you have selected? Thankfully, there’s another panel to help us navigate nested blocks.  

Using the List View

The List View helps you visually see the structure of the various blocks on your block. To open the List View,

1. Click the List View button at the top.

A List View panel will open on the left, showing you the different blocks you have on the page. Notice how the Button block is nested inside the Buttons block. If you ever find yourself wanting to see where your different blocks are, the List View is usually the best place to go.

So far you should know how to create an intro section for your landing page. Here’s what you need to do:

1. Create a Heading block with a tag line or one-liner that summarizes your offer.
2. Create a Paragraph block that reinforces your offer.
3. Create a Buttons block with a button that points to whatever action you want your audience to take (if you don’t have a link yet, you can leave that blank for now).
4. Finally, save the draft. We won’t want to publish until we’ve completed more sections.

Are you interested in learning how to create an Action Plan section for your landing page? Subscribe to my newsletter.