## Page Header

Product: Monogram - Personal Portfolio WordPress Theme
URL: https://hub.jkdevstudio.com/docs/monogram/customization/page-header
Updated: 2026-04-14
Summary: Page Header
The page header is a full-width hero section that appears at the top of individual pages. It supports background images, video, breadcrumbs, and customizable text colors. You configure it

# Page Header

The page header is a full-width hero section that appears at the top of individual pages. It supports background images, video, breadcrumbs, and customizable text colors. You configure it per page using ACF fields in the WordPress editor.

## How It Works

Unlike most theme settings that live in the Customizer, page header settings are configured per page. When editing any page in WordPress, you will see a **Page Header** meta box with tabbed settings.

<figure class="doc-figure" data-width="50%" data-align="left" style="max-width: 50%; width: 100%; margin-left: 0px; margin-right: auto;"><img src="https://hub.jkdevstudio.com/storage/docs/2026/04/98fcafd8-391b-4110-baeb-4092e3df9685.webp" alt="" class="doc-image rounded-xl max-w-full"></figure>

The page header is disabled by default. Enable it on any page where you want a hero section above the content.

## Settings Reference

Settings are organized into four tabs: General, Layout, Background, and Advanced.

### General Tab

<table style="min-width: 100px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Setting</p></th><th colspan="1" rowspan="1"><p>Type</p></th><th colspan="1" rowspan="1"><p>Default</p></th><th colspan="1" rowspan="1"><p>Description</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>Show Page Header</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>Off</p></td><td colspan="1" rowspan="1"><p>Enable a full-width header section above the page content. All other settings become available once this is turned on</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Show Breadcrumbs</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>On</p></td><td colspan="1" rowspan="1"><p>Display a breadcrumb trail inside the page header (e.g., Home &gt; About &gt; Team). Useful for deep pages. Disable for top-level or standalone pages</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Override Breadcrumb Source</strong></p></td><td colspan="1" rowspan="1"><p>Toggle</p></td><td colspan="1" rowspan="1"><p>Off</p></td><td colspan="1" rowspan="1"><p>Use a different breadcrumb plugin on this specific page instead of the global setting</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Breadcrumb Provider</strong></p></td><td colspan="1" rowspan="1"><p>Select</p></td><td colspan="1" rowspan="1"><p>Auto detect</p></td><td colspan="1" rowspan="1"><p>Choose the breadcrumb source: Auto detect (recommended), Yoast SEO, Rank Math, SEOPress, or Theme built-in. Only shown when override is enabled</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Header Subtitle</strong></p></td><td colspan="1" rowspan="1"><p>Textarea</p></td><td colspan="1" rowspan="1"><p>Empty</p></td><td colspan="1" rowspan="1"><p>A short line of text below the page title. Use it to add context or a tagline. Keep it to 1-2 sentences for best visual balance</p></td></tr></tbody></table>

### Layout Tab

<table style="min-width: 125px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Setting</p></th><th colspan="1" rowspan="1"><p>Type</p></th><th colspan="1" rowspan="1"><p>Default</p></th><th colspan="1" rowspan="1"><p>Range</p></th><th colspan="1" rowspan="1"><p>Description</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>Header Height</strong></p></td><td colspan="1" rowspan="1"><p>Number</p></td><td colspan="1" rowspan="1"><p>500px</p></td><td colspan="1" rowspan="1"><p>300-1000px</p></td><td colspan="1" rowspan="1"><p>How tall the header section is. 300-400px works well for utility pages (Privacy Policy). 600-800px suits hero-style pages (Home, Portfolio)</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Text Color</strong></p></td><td colspan="1" rowspan="1"><p>Select</p></td><td colspan="1" rowspan="1"><p>Default</p></td><td colspan="1" rowspan="1"><p>n/a</p></td><td colspan="1" rowspan="1"><p>Controls whether title, subtitle, and breadcrumb text is light or dark. Use <strong>Light</strong> for dark backgrounds, <strong>Dark</strong> for bright backgrounds, or <strong>Default</strong> to follow the theme setting</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Overlay Strength</strong></p></td><td colspan="1" rowspan="1"><p>Number</p></td><td colspan="1" rowspan="1"><p>0.3</p></td><td colspan="1" rowspan="1"><p>0-1</p></td><td colspan="1" rowspan="1"><p>A semi-transparent dark layer over the background image or video. 0 = no overlay (fully visible background). 1 = completely black. 0.25-0.45 works well for most photos</p></td></tr></tbody></table>

### Background Tab

<table style="min-width: 100px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Setting</p></th><th colspan="1" rowspan="1"><p>Type</p></th><th colspan="1" rowspan="1"><p>Default</p></th><th colspan="1" rowspan="1"><p>Description</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>Background Type</strong></p></td><td colspan="1" rowspan="1"><p>Select</p></td><td colspan="1" rowspan="1"><p>Image</p></td><td colspan="1" rowspan="1"><p>Choose what fills the header background: <strong>None</strong> (plain background color), <strong>Image</strong> (static photo), or <strong>Video</strong> (looping video clip)</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Background Image</strong></p></td><td colspan="1" rowspan="1"><p>Image</p></td><td colspan="1" rowspan="1"><p>Empty</p></td><td colspan="1" rowspan="1"><p>Upload a photo for the header background. Recommended minimum width: 1920px. WebP or AVIF formats are ideal for performance</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Background Video File</strong></p></td><td colspan="1" rowspan="1"><p>File</p></td><td colspan="1" rowspan="1"><p>Empty</p></td><td colspan="1" rowspan="1"><p>Upload a short looping video (MP4 or WebM, under 5MB). Plays automatically, silently, and on loop. Only shown when type is Video</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Background Video URL</strong></p></td><td colspan="1" rowspan="1"><p>URL</p></td><td colspan="1" rowspan="1"><p>Empty</p></td><td colspan="1" rowspan="1"><p>If your video is hosted on a CDN, paste the direct file URL here. Takes priority over the uploaded file. Use only direct .mp4 or .webm URLs, not YouTube or Vimeo links</p></td></tr></tbody></table>

### Advanced Tab

<table style="min-width: 100px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Setting</p></th><th colspan="1" rowspan="1"><p>Type</p></th><th colspan="1" rowspan="1"><p>Default</p></th><th colspan="1" rowspan="1"><p>Description</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>Custom CSS Class</strong></p></td><td colspan="1" rowspan="1"><p>Text</p></td><td colspan="1" rowspan="1"><p>Empty</p></td><td colspan="1" rowspan="1"><p>Add one or more custom CSS class names to the header wrapper for page-specific styling. Separate multiple classes with spaces. Example: "dark-header no-parallax"</p></td></tr></tbody></table>

## Features

### Parallax Background

When you use a background image, the page header applies a subtle parallax scrolling effect. The image moves at a different speed than the page content as visitors scroll, creating a sense of depth.

### Video Background

Video backgrounds play automatically, silently, and on loop. They create an immersive hero experience. For best results:

- Keep videos under 10 seconds long
- Compress to under 5MB file size
- Use MP4 (H.264) for maximum browser compatibility
- Add an overlay (0.3-0.5) to ensure text remains readable

### Title Resolution

The page header automatically resolves the correct title based on the page context:

- **Regular pages** - Uses the page title
- **Search results** - Shows "Search results for: \[query\]"
- **Taxonomy archives** - Shows the term name
- **Author archives** - Shows the author display name
- **Date archives** - Shows the date range

<div data-callout="tip">

Use the text color mode setting to ensure readability. If your background image is dark, set text color to Light. If your background is bright or white, set it to Dark.

</div>

## Archive Page Headers

In addition to individual page headers, some archive types (FAQ, Portfolio) have their own page header settings in the Customizer. These work the same way but are configured globally for all pages of that archive type rather than per page.

- **FAQ page header** - Configured in **Appearance &gt; Customize &gt; FAQ**
- **Portfolio page header** - Configured in **Appearance &gt; Customize &gt; Portfolio**

<div data-callout="info">

The page header is separate from Elementor page content. If you build pages with Elementor, the page header appears above your Elementor layout and is controlled entirely through these ACF fields.

</div>