Why would you want to create a header section?
You see header sections all the time on websites and landing pages. They’re usually a large block with a background color or image, with a large headline, a small paragraph of text and a call-to-action button.
Header sections are useful for quickly telling your visitor what the page is about, what’s in it for them, and what they need to do.
What I’m going to show you is how you can easily create a header section using nothing more than a default WordPress theme and the Block Editor. You can watch the video below or keep reading for instructions.
Aren’t the Header and Page Title the same thing?
It depends. Most WordPress themes will default to displaying the page title with an optional featured image.
However there are some themes that allow you to add call-to-action buttons from the page’s settings. Other themes allow you to hide the page title to give you more of a blank canvas.
In our case, to keep things simple, I’m going to be create a header section using the default Twenty Twenty theme so you can see what WordPress is capable right out of the box.
How to create a Header section using the Block Editor
- Creating a Cover block
- Creating a Paragraph block
- Creating a Heading block
- Creating a Call-to-action button
- Aligning the blocks
So right now I have a blank post in the WordPress editor. I’m using the default Twenty Twenty theme with no additional plugins installed. To create a header section in WordPress, we want to start with a Cover block.
Creating a Cover block
The first thing we want to do is add a Cover block. To add a Cover block:
- Click the Plus icon to add a Block.
- Scroll down to Common Blocks and select Cover.
If you want to just have a solid color, you can select a color. However, I want to have a color overlaying an image, so I’m going to select a licensed image from Envato Elements that I’ve already uploaded.
Now that we’ve inserted an image, you’ll notice some Cover block settings on the right.
- Selecting Fixed Background will fix the image so that it doesn’t scroll, giving a pseudo-parallax effect.
- The Focal Point Picker allows you to adjust the positioning of the photo so that the subject isn’t cropped off.
- If for some reason you want to remove or replace the photo, click the Clear Media button.
- Under Dimensions, you can set a minimum height in pixels. Setting this may have varying effects on mobile devices, so be sure to test if you use this.
- Under Overlay, you can quickly select a theme color, or a custom color, or click the Clear button to restore the default. You can also adjust the background opacity.
Before moving forward, we want to expand the Cover block to fill the entire width of the page. You can do this by going up to the Change Alignment dropdown and selecting Full Width.
Now that we have a Cover block set up, we can start adding blocks inside the Cover block.
Creating a Paragraph block
Creating a Paragraph block inside a Cover block is easy, since it’s already there by default. If you click on Block Navigation, you can see a Paragraph block nested inside the Cover.
For the copy, I’m just going to copy and paste some Latin placeholder text from LoremIpsum.io. Of course, for your real site, I recommend starting with your copywriting first before designing anything.
After copying and pasting, you’ll notice some options appear for the Paragraph block.
- Under Text Settings, you have several options for the Font Size. You can also set a Drop Cap, which gives the paragraph a little flourish.
- Under Color Settings, you can change the background and text color. We’re going to leave these alone for now, but they can be helpful if you need something beside black or white for the text color. Normally, a paragraph will default to black, however when inserted into a Cover block, it will usually default to white since the cover is presumably a darker color.
Creating a Heading block
To insert the headline,
- Select the Paragraph block and click the vertical ellipses for More Options.
- Select Insert Before.
- Then click the Plus Icon to add a new block.
- Instead of scrolling through the blocks, start typing “head” where it says Search for a block. Heading should soon appear to where you can select it.
- Finally put some text in the Heading so it fits on one line.
After you add the Heading block, you should notice a few options.
- Under Heading Settings, you can select the Level to H1, H2, H3 and so forth. In most themes, the page or post Title is H1, so to keep your page ordered correctly, you’ll want to select H2 for the heading block. If I select H1 or H3 and then look at the Content Structure, I’ll see a warning about having an incorrect heading level.
- Under Color Settings, I can adjust the text color like in the Paragraph block. However, I can’t adjust the background color.
Creating the Call to Action button
The last thing we need to do is add the call to action button, or the Button block. To add a Button block:
- Select the Paragraph block and press Enter or Return.
- Then press the forward slash key: “/“. When you press “/“, a menu will appear showing all the different content blocks.
- Start typing “button” and you’ll see the Button block appear. Then select Button to add the block.
- Lastly, type “Call to Action” or “Click Me” in the button so you can see how it looks.
After adding the Button block, here are some options to look at:
- Under Styles, there will usually be different styles of the button, depending on the theme you’re using. For the Twenty Twenty theme, the choice is Fill or Outline. Having these two can be handy in situations where you want to present a primary and secondary call to action together. Also under Styles, if you want to select a default style you can.
- Under Color Settings, you can adjust the background and text colors similar to the Paragraph block. If you select colors that are too similar, you’ll see a warning about the color combination being too hard to read.
- Under Border Settings, you can make the corners of the button more rounded.
Aligning the blocks
After adding the Heading, Paragraph and Button blocks to our Header section, we need to center the content.
- Select the Heading block and click the Change Text Alignment dropdown to set to Align Text Center.
- Select the Button block and click the Change Alignment dropdown to set to Align Center.
Now that we’re done, let’s preview the page by clicking the Preview button. A new page should appear where we’ll see the Header section, all created using the Block editor.