• Skip to main content
  • Skip to header right navigation
  • Skip to site footer

Mai Reach Theme

A Genesis User Guide

  • Home
  • Tutorials
  • Videos
  • Images
  • Search
Main hero header image for Mai Reach theme tutorial site.

Mai Reach Page Headers

This smaller text, that you are reading right now is description text. It’s in the page header section of the post.

Site header and page header in Mai Reach theme.

Please note! Mai Reach theme has two similar sounding settings…

  • Site Header (see the screenshot above)
  • Page Header (see the screenshot above)

On this page I’m dealing with the page header. Your web page header is in two sections. The top section contains the logo and right hand navigation bar. The page header is the the bottom part of your web page header. BELOW the logo and navigation bar.

The page header contains the post title. You can also place description text below the post title, but still inside the page header.

You can use page headers site wide or page by page

You can enable and disable page headers on different sections, or even specific posts and pages of your site. So if the post or page you’re writing would benefit from having a plain text heading, without the header background image, toggle off the page header option for that post.

If you do use page headers

There are five divider style shapes to choose from…

You can have a square, or straight bottom divider too. So technically that’s six options to choose from.

Mai Reach theme header with curve divider.

The example below is of a post that does NOT have a page header

To hide the page header on a specific post or page…

  • edit the post or page
  • in the right hand, post editor sidebar, click the document tab
  • scroll down and expand the hide elements tab
  • tick page header

The page header background image will not show on this specific page or post.

The image below is an example of a page header

This page header contains…
  1. the page or post title
  2. description text
  3. for the divider bottom shape, I chose “None”

Where are the page header settings?

You can have different page header settings for posts, pages and archive pages. This means you can find page header settings in several different places.

Most of the settings are in the customizer

Go to…

Dashboard > Appearance > Customize > Theme Settings

You now see thirteen tabs.

First navigate to the theme settings sub tab.

Of these thirteen tabs, we need to use three.

  • Page Header
  • Content Archives
  • Single Content

Page Header tab (most settings are here)

The page header tab contains site wide settings.

First open the page header tab. Take care that you select page header not site header. Site header is the logo navbar area.

Here you can…

  • enable page headers on posts, pages and archive pages
  • set a default page header background image
  • set a background color and opacity
  • align the page header text left, center or right
  • choose light or dark for the page header text color
  • set a divider bottom shape style
  • choose a height setting for your header, S/M/L

Content Archives tab & Single Content tab

The settings you made in the page header tab will be inherited by all posts and pages that display a page header.

But if you wish, you can fine tune your settings for specific content types, such as posts, pages or archive pages. Archive pages include your blog page, category pages etc.

For instance, you could tweak your settings so pages have one page header overlay color and posts have a different page header overlay color.

You could also set different default page header background images for posts, pages and archive pages if you wish.

The document tab settings

As you write a blog post, you see a sidebar of settings to the right of the post editor screen.

Finding the document tab, page header settings

To find these settings make sure you have selected the document tab. And then scrolled down and opened the page header settings tab in the document sidebar.

Here you can…

  • select a specific background image for this specific page or post.
  • type some description text, this will display below your post title inside the page header
Category: Mai Reach Theme Tutorials
Previous Post: « Color settings featured image Colors
Next Post: Full width or boxed site layout Mai Reach theme has full width and boxed page layouts. »

Learn more about Mai Reach theme

(It’s one of the new generation from BizBudding)

Mai Reach Theme

Mai Reach Tutorials

Mai Reach is one of the new generation of themes by BizBudding. They’re the people behind Mai Lifestyle, one of the most popular themes on StudioPress.

Mai Reach Tutorials

Template Parts

Template parts replace many of the widget areas in this block based theme.

Find out more about…

Template Parts

Genesis Framework

Mai Reach is built on the Genesis framework. Genesis is a good solid foundation for your website.

If you’d like to know more about Genesis read this.

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by BizBudding, StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress, WP Engine and BizBudding are registered trademarks of their respective owners.