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.
4 Comments
One of my friends used this for his ice cream shop website. It was amazing
I’d love to see a tutorial for a photo-heavy layout, such as a portfolio.
Good idea! That’s actually on my list. I’ve been thinking about an idea for a photographic journey/essay layout. Not sure if I’ll get to it this week, but I’ll see if I can finalize something next week.
Awesome, looking forward to it!
Comments are closed.