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.

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.

Note, all blocks, except the All Reviews block, used in homepage sections, have a Wide alignment.

1. Selecting a 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.

The theme provides the Blank content layout template which is perfect choice for the current layout of a homepage. Select this template for your homepage.

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.

2. Creating the Hero section

The theme already provides a predefined layout — block pattern — for the Hero section, 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 Matthew: Hero from a dropdown menu to preview predefined patterns from the Matthew theme.
  4. Scroll down until you see the pattern we created, “Classic”.
  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 Thick Line from the Styles options in the block’s settings.

3. Creating the Latest offerings section

Next, we 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 Matthew: Columns 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.

4. 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 the block using the search bar.
  4. Select a two (2) columns variation to start with.
  5. In each column, add the Media&Text block to display image on one side and content on the other side.

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

5. 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.

6. Customizing space between sections

By default, blocks have a base space between each other. For homepage, we use a custom block spacing, which is set to 4rem.

Besides setting a custom block spacing in the group, make sure also enable Inherit default layout in the Layout pane to avoid long lines on the page.