Page Header Configuration Guide

Our theme allows you to display your page and post titles in a dedicated, stylish banner area above your content, known as the Page Header. This is great for creating a magazine or premium corporate look.


Accessing Page Header Settings

To configure the global Page Header style, navigate to Appearance → Customize in your WordPress dashboard, then go to Header → Page Header.

Toggle the Enable Page Header switch ON to activate this layout globally for pages and posts (that have the title position set to “In Page Header”).


1. Layout & Alignment

Title Alignment

Control where the title text sits within the banner area:

  • Left Align: The title sits flush with the left edge of your content container.
  • Center Align: The title is perfectly centered on the screen.
  • Right Align: The title sits flush with the right edge.

Page Title Spacing

The height of your Page Header banner is determined by its padding.

  • Open the Page Title Spacing section to add padding (in pixels) to the Top and Bottom of the title.
  • To create a tall, dramatic banner, increase these numbers (e.g., 100px top and bottom).
  • You can set different spacing for Desktop, Tablet, and Mobile using the responsive device icons.

2. Design Options

To make your Page Header stand out, you can apply custom backgrounds and colors under the Design Options section.

Background

  • Solid Color: Choose a flat background color for the banner.
  • Gradient: Create a beautiful color transition behind your title.
  • Image: Upload a background image to create a textured or photographic banner.

Font Color

If you set a dark background color or image, you will need to change your text color so it remains readable.

  • Text Color: The color of the main Page/Post Title.
  • Link Color & Hover Color: The color of any links that might appear in the header area (like breadcrumbs, if enabled).

Border

You can add a border to the Top or Bottom of the Page Header area to separate it from the navigation menu above it or the content below it.


3. Typography

If you want the titles inside this specific banner area to be larger or smaller than the default headings on your site, open the Typography section.

  • Use the Page Title Font Size slider to explicitly set the size of the title text in this area. You can adjust this independently for Desktop, Tablet, and Mobile.

Overriding on Specific Pages

The settings here dictate the global default for your Page Headers. However, the Business Interface theme allows you to override these settings on a per-page basis!

When editing any Page or Post in the WordPress editor, look for the theme’s Page Settings meta box. From there, you can upload a unique background image or change the colors just for that specific page.


Saving Your Changes

Once your global Page Header is styled to your liking, click the blue Publish button at the top of the Customizer.

Leave a Reply

Your email address will not be published. Required fields are marked *