The Products block allows you to present your products or services in a clean and attractive way. You can choose various pre-designed layouts with multiple products. Alternatively, you can opt for a single-product layout which may be useful if you are promoting just one product, such as a book, an eBook, or an app.
Adding the Products block
Here’s how to add this block to your page:
- Choose a location where you want to add your Services block and click the Add a block (+) Plus button.
- In the Block library, choose Products from the list to see the pre-designed layout for this block type.
- Click the pre-designed layout you like to add it to your page.
Customizing block settings
You can customize the Products block with the help of its control pane. To activate it, click the block and then click the Block settings icon.
The block settings menu consists of two tabs: the Layout tab and the Appearance tab.
In the Layout tab, you can switch the block layout and choose which elements should be displayed in the block. To hide a specific block element (for example, if you want to remove a button), remove the blue tick next to the element’s name.
In the Appearance tab, you can make the following changes:
- Block style: Change the color scheme of the block by clicking the color you like.
- Block spacing: Change the whitespaces on the top and bottom of the block.
- Horizontal alignment: Choose the horizontal content alignment in the block.
- Content layout: Choose the number of items in a row.
- Content style: Add borders and shadows to some elements.
- Media settings: Add a black & white filter to the block.
Note: Depending on the block layout you choose, you may have more or fewer controls in the Appearance tab.
Read about block customization options in detail in our Block settings article.
Editing images
You can replace demo images in the Products block with your own product-related pictures. These tutorials can help you:
Editing product descriptions
You can add short product descriptions in the block with multiple products in it. To edit the demo content, click the text container and start typing your new text. Or you can copy and paste your existing content from the text editor you are using.
Read our Text editing and formatting tutorial for more information.
Customizing block elements
All of the Products block’s elements are highly customizable. You can add, edit, and remove most elements inside your block.
Read our dedicated article to learn how to customize various block elements.
Other helpful articles:
Note: You can reverse any action by clicking Undo or pressing Ctrl+Z (Command+Z on Mac) on your keyboard.
Once you have completed customizing your block, click Publish to make changes live.