Adding child blocks to the “Cover” block

Here is the progress from the last lesson:

We created a “Cover” block and removed its dark overlay to display the background image as is.

Now, using the “Add Block” button inside the “Cover” block, add the following child blocks to finish the hero section:

You already know how to add and configure all these sections.

So, please take it as a challenge and add them according to the specifications mentioned in the above image.

Here is how I would add achieve the above design:

First, let’s add the headline

To achieve this:

1. Add a heading block and type the headline
2. Next, change its text alignment to the center

The headline we just added is the most important headline on the entire Homepage.

So, we need to change its heading level from “H2” to “H1”.

Finally, according to the design mockup, we must change its font size to 36px.

To do this, keep the “Heading” block selected to access its Settings sidebar.

Next, go to the “Styles” tab and set a custom font size of 36px.

Next, Break the headling into two lines.

Based on the design provided, we need to break the headline into two lines.

Currently, the headline inside the block editor is only occupying one line.

The ideal way to break the headline into multiple lines is by constraining its width to 400px or something close to that.

But currently, the Block Editor doesn’t give us control for constraining the width of any particular block.

Simply put, the Block Editor doesn’t let us enter a custom width for any block.

As a programmer, this is not a problem for me because I write the following CSS code to adjust the width:

.home h1{
  max-width:400px;
  margin:0 auto;
}

But I assume some of you are not programmers who know CSS.

So, what’s the solution here?

How do we break the headline into two lines without reducing its width and not using any CSS?

Unfortunately, without using a plugin like “GenerateBlocks” or some CSS code, there is no standards-friendly solution here.

So, we will solve this problem later by the end of this module using the “GenerateBlocks” plugin.

For now, a quick and reliable hack is to use a line break.

Simply put, we must manually break the headline using the keyboard shortcut. shift + enter (this causes a line break):

0:00

/

1×

But I don’t like it as a permanent solution because the headline now acts as two separate lines on very small screens:

If you observe, there is enough space next to the word “to” and if we haven’t used the manual line break, the words “manage” and “your” would wrap around the word “to”.

So, in an upcoming lesson, we will fix this problem using a plugin.

Ufff…

So much drama just to make the headline look the way we wanted, right?

This is why most people go with Page builders like Elementor, Divi, etc., for building landing page designs.

But those page builders do not produce clean markup like the Block editor.

So, page builders are bad for the performance of the website.

This is why I recommend you learn some basic CSS.

The most standards-friendly and performant solution is using some CSS code and the block editor to build a landing page.

Once you learn CSS, it will save you a lot of money and time.

Anyway, next…

Challenge: I want you to work on the “introduction paragraph” that is underneath the headline

As per the mockup above:

1. Use the “Medium” font size for the paragraph
2. Center align the paragraph
3. Break the paragraph into two lines using the manual line break.

Solution

0:00

/

1×

And here is the final output for this lesson:

In the next lesson, we will continue to work on the Hero section.