In this article, you will build a homepage layout with a focus on offerings from your online store using WordPress, WooCommerce and the Matthew theme.

All elements of the current 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 speed up a build process.

This layout of homepage is very similar to the one presented in the initial version of theme. The only difference is that the Hero section now displays more information, including a grid of available offerings from your store.

Example of the layout.

Above, you can preview a part of the homepage layout you are going to build today using the Block editor. This homepage layout was presented in version 1.5.0.

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 information about your business along with a grid of best selling offerings provided by your company.
  • 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.

  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: WooCommerce 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”.
  5. Click on the pattern and it will be automatically added to the page.
  6. Modify text, buttons, and configure the products block settings in this section to fit your needs.

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.