Layout: “Store homepage e.g.3”

Taras DashkevychWritten by
Published onUpdated on

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. It is consisted of four (4) sections:

  • Hero — display a brief information about your company.
  • Offerings — display categories of services or products your company offers.
  • Testimonials — display most valuable feedback from your customers.
  • Products — display featured products and services.

The main goal of this layout is to briefly present the visitor your company: who you are, what you do, what others say about working with you, and what products would you recommend at the moment.

Layout creation guide

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

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 when the sidebar widget area contains widgets. 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 of the page 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.

  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 named “Classic with background color”.
  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. Also, make sure to set a link for the call to action button.

3. Creating the Offerings section

Before creating the Offerings section, add a title for this section to make it more intuitive and accessible for your site visitors:

  1. Click the “Add block” button on the upper left of the editor (a large button with “+” icon) to view blocks.
  2. Select the Heading block from the Text section or search for the block using the search bar.
  3. Change block alignment to Wide width.
  4. Enter text for the title of the section. For example, “Offerings”.

Now, time to create a layout with multiple columns to showcase available offering categories. The theme already comes with a predefined layout for such case, so there is no need to create it from a scratch.

  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 with a three columns layout, where each column is consisted of image and text link.
  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. Also, make sure to set a link in each column.

4. Creating the Testimonials section

First, add a title for this section, using the same steps as for the previous section. After that, you can use a predefined layout to showcase top testimonials from your customers:

  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: Testimonials from a dropdown menu to preview predefined layouts from the Matthew theme.
  4. Scroll down until you see the pattern with a three columns layout, where each column is consisted of quote, image and text next to the image.
  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.

5. Creating the Products section

This is the last section of this homepage layout, and it is consisted of three (3) sub-sections:

  • Featured product or service: showcase your best or newly created product or service.
  • Products from a specific category: showcase several products or services from a specific category of your web store.
  • Store information: provide information such as a short notice about refund policy, or shipping rates.

The theme already comes with a predefined layout for creating a section to highlight your product or service:

  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: General from a dropdown menu to preview predefined layouts from the Matthew theme.
  4. Scroll down until you see the pattern that displays an image on one side while text with a call to action button on the other side.
  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. Also, make sure to set a link for the call to action button.

Once this section is created, add the Separator block to create a visual separation between sections:

  1. 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.
  2. Select the Separator block from the Design section or search for it using the search bar.
  3. Select Wide Line from the Styles options in the block’s settings.
  4. Change block alignment to Wide width.

Now, create a section with two (2) columns layout, where one column showcases products, while the other column displays text information:

  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: WooCommerce from a dropdown menu to preview predefined layouts from the Matthew theme.
  4. Scroll down until you see the pattern named “Category products with info”.
  5. Click on the pattern and it will be automatically added to the page.
  6. Select category you want to showcase in this section.
  7. Modify text in this section to fit your needs.

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 2.5rem.