In this article, you will learn how to build a simple, yet informative, homepage for an online store using WordPress, WooCommerce and the Matthew theme.

All elements of the layout will be created using the Block editor provided by a WordPress core. The theme also comes with some predefined sections for this homepage layout to help you avoid building them from a scratch.

Above, you can preview a part of the homepage layout that your are going to create today using the Block editor. By the way, this an example of the homepage layout used in the initial version of the Matthew theme.

For a full layout preview, check a demo of the page using this layout.

Layout structure

A layout of this version of homepage is very simple. As you’ve already noticed, it is consisted of four sections:

  • Hero — displays a brief information about your business using text and an image.
  • Latest offerings — displays latest products or services from your shop.
  • Reasons — displays main reasons of choosing your products or services.
  • Reviews — displays testimonials from your customers.

The main goal of this layout is to briefly present the visitor your company: who you are, what you do, why it matters, and what others say about it.

Layout creation guide

You will use WordPress blocks to create this layout for a homepage of your digital store. Thus, navigate to a dashboard of your WordPress site, and create a new page in order to get started.

Selecting page template

This version of the homepage layout displays content in a full width, without a sidebar.

By default, the theme displays a sidebar on pages. Also, a default page template displays a page title above the content. We want to avoid all of these in this version of the layout.

Location of the dropdown menu for selecting custom templates.

The theme provides No title full-width page layout template which is perfect choice for the current layout of a homepage. To select a custom template for the page:

  1. On the right hand side of the Editor, locate two tabs at the top: Page and Block.
  2. Click on Page to view the page settings.
  3. Scroll down until you see the Page Attributes pane.
  4. In this pane, select No title full-width page layout from a dropdown menu. 

Note, even though this template does not display the page title on the actual page, you need to enter a meaningful title for SEO purposes.

Creating the Hero section

The theme already provides a predefined layout — block pattern — for the Hero section which is specially designed for Matthew to match structure and design system of the theme.

Example of the block pattern for creating the Hero section.
  1. To add the block pattern to the page, click the “Add block” button on the upper left of the editor (a large button with “+” icon).
  2. Then, click on the Patterns tab.
  3. Within the Patterns, select Themes Harbor: Matthew from a dropdown menu to preview predefined patterns from the Matthew theme.
  4. Scroll down until you see the pattern we created, “Split-screen: Classic Hero”.
  5. Click on the pattern and it will be automatically added to the page.
  6. Modify text and replace an image in this section to fit your needs.
Location of the Separator block in the Editor.

Once this section is ready, add the Separator block to create a visual separation from the other section which comes after the Hero section.

  1. Click under the Hero section in the Editor to start a new line.
  2. To add a horizontal line, click the button on the upper left of the editor (a large button with “+” icon) to add a new block.
  3. Select the Separator block from the Design section or search for it using the search bar.
  4. Select Large from the Styles options in the block’s settings.

Creating the Latest offerings section

Next, you will use the Newest Products block provided by WooCommerce, and a predefined block pattern for the header layout in the Latest offerings section.

Example of the block pattern for creating a header layout for the section.

To create a section header layout:

  1. To add the block pattern to the page, click the “Add block” button on the upper left of the editor (a large button with “+” icon).
  2. Then, click on the Patterns tab.
  3. Within the Patterns, select Themes Harbor: Matthew from a dropdown menu to preview predefined patterns from the Matthew theme.
  4. Scroll down until you see the pattern we created, “Split-screen: Section header”.
  5. Click on the pattern and it will be automatically added to the page.
  6. Modify text in this section to fit your needs.
Location of the Newest Products block in the Editor.

To display the latest offerings from your store:

  1. Click bellow the previous section in the Editor to start a new line.
  2. Click the button on the upper left of the editor (a large button with “+” icon) to add a new block.
  3. Select the Newest Products block from the WooCommerce section or search for it using the search bar.
  4. Configure the block using its settings located in the sidebar.

Now, you need to create a visual separation the same way as it was done for the Hero section using the Separator block.

Creating the Reasons section

This section will be consisted of the Columns block provided by a WordPress core, and a predefined block pattern for the header layout in the Reasons section. To create a header for the section, use the same technique as it was shown in the previous section.

Example of the Columns block settings.

To create a row with multiple columns:

  1. Click bellow the previous section in the Editor to start a new line.
  2. Click the button on the upper left of the editor (a large button with “+” icon) to add a new block.
  3. Select the Columns block from the Design section or search for it using the search bar.
  4. Skip the process of selecting a variation since it does not provide a four columns layout by default. The layout will be configured in the next steps.
  5. Select your recently added the Columns block to view its settings.
  6. From the blocks settings, set number of columns to 4 to display a four columns layout.
  7. In the columns #1 and #3, add an image using the Image block.
  8. In the columns #2 and #4, add content using the Heading block and the Paragraph block.

Repeat these steps to add additional row in this section. After, use the Separator block to create a visual separation from the next section.

Creating the Reviews section

Location of the All Reviews block in the Editor.

This section is build using the All Reviews block provided by WooCommerce, and a predefined block pattern for the header layout of the section.

To create a header for the section, use the same technique as it was shown in the previous section.

To displays reviews from the customers:

  1. Click bellow the previous section in the Editor to start a new line.
  2. Click the button on the upper left of the editor (a large button with “+” icon) to add a new block.
  3. Select the All Reviews block from the WooCommerce section or search for it using the search bar.
  4. Configure the block using its settings located in the sidebar.