Building a business or agency landing page with Exhale

I’ve heard the term “minimal” applied to my newest Exhale theme. Normally, I’d welcome such a description. In reality, it is minimal. However, I believe we’re at a shift in the wider WordPress community where minimal = normal.

With the block editor being the standard now, it’s beyond time that themes got out of the way and let users build their pages.

That’s exactly what Exhale is all about. If you want open, clean, and minimal pages, you can do that. If you want a lot of elements, such as popular business/agency designs, that’s an option too. That’s what today’s tutorial is all about. I want to show you how you can transform a minimal design by default into a bold page with various elements.

And, this is all done with the core editor blocks. No custom code. No third-party plugins.

Being perfectly honest, I could build some of this out easier with code. I’m not accustomed to working with visual editors, so this has taken a bit of trial and error for me. The current block editor has some bright spots when it comes to page building and loads of potential.

Let’s get into this tutorial though. I’m just going to run you through the steps I took to build out the page from the above screenshot.

View a demo of this tutorial →

Selecting the template

One of my favorite features of Exhale is the “No Post Header/Footer” template. It does exactly what it says. The template doesn’t show the post header or footer.

The template is particularly useful when you want to design the post header/title area. WordPress doesn’t let you do this out of the box. So, the template gives you the freedom to simply disable it on the front end and handle it yourself from the editor.

You may select the page template from the “Page Attributes” box under the “Document” tab. This template is available for both posts and pages.

Caution: I do want to make sure that you at least choose an H1 heading when using this template as the first block for the purposes of SEO. Typically, the post title would be the H1.

Cover Block – Intro Section

The Cover block is my tool of choice when using the “No Post Header/Footer” template. When you use it or another block with the “Full Width” alignment, the page template will pull it up just beneath the header, providing a seamless transition to your page’s content.

As of version 5.3.0 of the Gutenberg plugin, the Cover block allows you to nest a heading, paragraph, and/or button block inside of it, making it a nice intro to your pages.

Here are the sub-blocks and settings I used within the Cover block to achieve the above effect:

• Heading Block:
  • Level: H1
  • Text Alignment: Center
• Paragraph Block:
  • Italic
  • Text Alignment: Center
  • Font Size: Huge
• Button Block:
  • Align Center
  • Background Color: Blue Dark
  • Text Color: White

Gallery Block – Recent Work Section

For the “Recent Work” section, I used three blocks:

• Heading
  • Level: H2
  • Text Alignment: Center
• Paragraph
  • Text Alignment: Center
  • Font Size: Extra Large
• Gallery
  • Columns: 3
  • Alignment: Full Width

Ideally, core would have a “Section” or “Container” block so that you could group all of these together and add something like a background if you wanted. From what I understand, such a block is already in the development version of Gutenberg.

Currently, the Gallery block doesn’t allow you to link individual images to custom URLs either. But, you can add custom links to the captions.

Media & Text

I tend to make liberal use of the core Media & Text block in my designs. They’re extremely flexible and allow you to add a headings, paragraphs, and buttons in the media text area.

This particular block has the following settings.

• Show Media On The Right
• Full Width
• Background Color: Blue Darker
• Text Color (for the Paragraph blocks): White

The one gripe I have with this block is that core sets the “Stack on Mobile” setting off by default. While I see the rare use cases that you wouldn’t want to stack this, I’m hoping they turn this on by default in the future.

Columns – Team Section

I created a “Meet The Team” section using the Heading, Paragraph, and Columns blocks. I set the Columns block to 4 columns and added images for each team member along with a caption that displayed their name and role.

I have no doubt that many users will flock to plugins that have “team” blocks, but this is extremely doable with core.

I do find the Columns block a bit glitchy at times, but it has improved since it first landed. It still needs a bit of polishing.

Gutenberg + Exhale Gets The Job Done

While I still think the Gutenberg user experience needs more iteration and polishing, this is just going to take time and user feedback. You can do a lot with it already.

And, Exhale helps make it look nice.

Go ahead and purchase a copy of Exhale if you haven’t already done so.