Menu block

In addition to Products and Pricing blocks, you can use the Menu block to showcase your offerings on the website in an organized and engaging manner. 

Whether you want to display product categories, restaurant menus, or service offerings, Menu block provides a seamless way to present information to your visitors. The customizable layouts and designs ensure that your menus are both visually attractive and user-friendly, making it easy for your audience to find what they're looking for. 

Adding the Menu block 

Here’s how to add this block to your page:

  1. Choose a location where you want to add your Menu block and click the Add a block (+) Plus button.
  2. In the Block library, choose Menu from the list to see the pre-designed layout for this block type.  
  3. Click the layout to add it to your page.

    WL - Menu - 1.png

Customizing the Menu block

You can customize the Menu block with the help of its control pane. To activate it, click the block and then click the Block settings icon. 

WL - Menu - 2.png

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.

WL - Menu - 3.png

In the Appearance tab, you can make the following changes:

  • Block style: Choose the color theme of the block
  • Block spacing: Adjust the whitespaces of this block at the top and the bottom
  • 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 content settings: Add a black & white filter to the images within this block
  • Divider: Customize the appearance of the divider at the bottom of the block

Note: Depending on the block layout you choose, you may have fewer controls in the Appearance tab. 

Once you are done customizing block settings, click Save to confirm the changes.

Read about block customization options in detail in our Block settings article.  

Editing images

You can replace demo images in the Menu block with your own product-related pictures. These tutorials can help you: 

Editing descriptions

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

Was this article helpful?
0 out of 0 found this helpful