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.
By default, WordPress comes with a way of grouping multiple blocks together. The Group block is a block that allows to group other blocks together inside one container.
Grouping multiple blocks into one container also allows to modify space between blocks in the group, using default options of the Block editor.
In this guide, I’ll show you how to group all blocks on the page into a single group, and modify space between blocks.
To group blocks into a singular container:
- Enable List View, by clicking on the List View icon, located in the top toolbar of the editor (left hand side).
- Select the latest block in the list, by clicking on it.
- Hold Shift key on your keyboard, and keep clicking on the Up Arrow key on your keyboard until you reach the first block in the list.
- Click on the Transform Icon.
- Transform selected blocks to Group.
To modify space between blocks:
- In the List View, select the first block, which should be Group.
- In the Block settings, locate Dimensions.
- Under Block spacing, set your value. For example, 4rem.
Once you are ready, make sure to Publish (Update) your changes.
The Matthew theme comes with custom templates, designed to provide you some flexibility for how your pages look and where certain page elements are located.
To select a custom template for the page:
- On the right hand side of the Editor, locate two tabs at the top: Page and Block.
- Click on Page to view the page settings.
- Scroll down until you see the Template pane.
- In the pane, select desirable template from a dropdown menu.
Our team always strives to provide a theme with a best support to native WordPress functionality.
Due to changes made in version 2.0 to provide better support for the Block editor, some websites might need to restore default colors after updating from version 1.0.
To restore default colors using Customizer:
- In dashboard, go to Appearance → Customize to open Customizer.
- In Customizer, go to Colors.
- Select color.
- Click Default.
- Publish changes when you are ready.