Recreating a landing page in the Block Editor

This is what we will be recreating:

As I go through creating the sections, I usually think about it in terms of rows – these red boxes are how I’ve broken the rows down. The blue boxes are the columns (from a column block), and the yellow lines are a point of reference so I know when something is aligned-left or center or wide.

First – you can’t see the edges of the screen with this mockup. So we’ll assume that the brown area on the bottom is the width of the screen, and the yellow line down the left is the edge of the page.

Page edge: something that goes to the edge of the page design. We generally design this way. In the example above, the footer menus are on the page edge; although the background goes to the screen edge.

Screen edge: always align to the far left/right edges, regardless of width of screen. In the header of this example, the logo will always be in the top left-most corner even of a giant 2 meter wide projection screen. It would look odd – thats why we design responsive sites with page widths, usually.

Let’s go through the rows and add some blocks one at a time. We’re not going to cover the fonts and colors in this tutorial. I’m going to let my theme dictate the fonts and colors so that it all matches my theme. 

These are the assets I created for this page before beginning:

• 

• 

• 

• 

• 

• 

• 

• 

And the last thing we needed was three special blocks that aren’t in the default editor yet.

For the three blocks, we loaded Ultimate Addons for Gutenberg:

Then, I highly recommend that you deactivate all the blocks except for the ones you need. We will need the section, testimonial and post grid blocks.

Here’s the entire tutorial from top to bottom.

How to create a landing page in WordPress with the Block Editor

Step by Step:

For those who like to skim the written steps, here they are:

Top cover Image (video)

Add cover block, align width = FULL. Add a column block with 3 equal columns. Add the content to the first column.

3 icon columns (video)

Add paragraph and header blocks, page width = normal. Align=center. Add column block, 3 columns, page width = normal.

Within each column, add image and paragraph all aligned center.

Beneath that, add a button, aligned center.

Post grid & 2 blocks aligned to each other (video)

Add a header block.

And then add a Ultimate Addons for Gutenberg (UAG) post grid block – set columns to 3 and items to 3. Use the toggles to decide on date, author, excerpts, images and more.

Beneath this I wanted to show how to align two blocks to the center – toward each other. We created a column block, 2 even columns. Added an image and text and aligned to the right. This did not work – the blocks were wrapping around the text to produce a newspaper-type column. Which was not the desired effect. To fix this, we added images to one column block. And added another column block beneath it. then added our headers to that block. (5m 30s)

Testimonial block (video)

Add header and testimonial block from UAG.

Footer call to action (video)

Using a cover photo again, added columns to place our text properly. Added text to columns. However the text goes all the way to the width of the screen. Columns grow to the width of their parent block. So we added a (UAG) section block within the cover, gave the section block a width of “wide”. Then added the columns within the section. (6m 58s)

And this is the final Landing Page: