• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WordPress Barista

Blog Design Services & WordPress Maintenance Packages

  • About
    • Giving Back
    • WPB Team
    • What they say…
  • Learn
    • Blog
    • Free Knowledgebase
    • Free Newsletter
  • Services
    • Small Fixes
    • Design
    • WordPress Maintenance
    • WordPress Hosting
  • Contact Us
  • Portfolio
    • What they say…
  • Client Portal
You are here: Home / Blog / Recreating a landing page in the Block Editor

Recreating a landing page in the Block Editor

March 31, 2020 · Blog, Gutenberg, Live Video Tutorials

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:

  • background 1
  • icon 1
  • icon 2
  • icon 3
  • background 2
  • featured image
  • featured image
  • featured image

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:

Reader Interactions

Comments

  1. Diane says

    April 30, 2020 at 1:59 pm

    Thank you for posting this. The more I read and experiment, the better I understand. I will be watching the video over and over again until I reach that A-ha moment. 🙂

    Reply
    • Cathy Tibbles says

      April 30, 2020 at 2:01 pm

      I hope it helps! Keep the questions coming or I’m at a loss as to what to post! 🙂

      Reply
  2. karen says

    May 17, 2020 at 10:26 am

    Thanks Cathy!

    This is a great help. you went really fast through some of the steps… and I’m going to have to figure out how to slow that down as I am a novice on many of the things you went through so fast. I think it would help me to have those not quite so sped up… Just a thought.

    Thanks for posting this though! It really helps to see it done and realize I can make my landing pages look this great.

    Reply
  3. Lege Nova says

    September 5, 2020 at 8:21 am

    Thank you for all of this valuable information! I keep sharing.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Newsletter

Espresso News

Energize (& secure) your blog with the latest, shortest, strongest news each week.

Categories

announcements
Announcements
Tech Tuesday
Tech Tutorials
Giving Back
Giving Back
Printables
Printables
SEO
SEO
Grow Your Audience
Social Media
Inspiring Bloggers
Inspiring Bloggers
Save Time
Save Time

[instagram-feed num=9 cols=3″showheader=false showbutton=false showfollow=false background=#f5efe9]

Why We Do What We Do

A portion of every purchase goes to under privileged women entrepreneurs through the microloan organization, Kiva and World Vision. Other donations go to Canada Red Cross and annually we have the privilege of selecting two charities to receive free services.

Learn More

Footer

  • Facebook
  • Instagram
  • Pinterest

VIPs/Maintenance: Priority Support submit claim here

Questions? Click here

Service level Agreement | Terms & Conditions | Privacy Policy