Building a Cafe Page with Exhale

In the previous tutorial, I walked you through how to create a business landing page with the Exhale WordPress theme. I wanted to step that up a notch and dive into something more niche and tackle designing a nice cafe menu for customers to browse before stopping into the shop for a coffee.

In this tutorial, I’ll walk you through how I built each part of the page using the WordPress block editor (Gutenberg). These same techniques can be applied to something like a full restaurant page. Or, you can use them for all sorts of other things.

View a demo of this tutorial →

Selecting the Page Template

Like in the previous tutorial, we’re going to start off by selecting my favorite page template offered with Exhale.

Look for the “Page Attributes” box under the “Document” tab in the editor. Then select the “No Post Header/Footer” template. What this template does is give us a blank content area to build out everything on the page however we want.

Cover Block: Intro Area

I find myself using the cover block for a lot of things. It’s a great way to push a message to your visitors right off the bat and catch their attention.

For the cover block settings, I used:

• Wide Width
• Heading Block
  • Level: H1
  • Text Alignment: Center
• Paragraph Block
  • Italic
  • Text Alignment: Center
  • Font Size: Gargantuan

Media & Text Block: Menu Items

All of the cafe’s menu items are handled with the core media & text block. This is a highly-versatile block that allows you to create a variety of layouts with media and text.

For each block, I used the following settings:

• Full Width
• Media on left/right (alternated between each block)
• Background Color: Custom

For the text content area of the block, I used the following inner blocks:

• Paragraph Block
  • Background Color: Custom (creates the “striped” header).
  • Text Color: Custom
  • Font Size: Huge
• Paragraph Block
  • Text Color: Custom

And, that’s all there is to it. Just rinse and repeat for each menu item you want to add.

Note: Ideally, the first paragraph would be a heading. However, the block editor doesn’t currently allow custom colors for headings, so we’re kind of faking it for the time being. There is an open ticket to address this issue.

More Page Designs

If you’re interested in seeing more Exhale + Gutenberg page design tutorials, just let me know. I’ll be happy to build them out and do a writeup on the process.