## Page Creation
Product: Monogram - Personal Portfolio WordPress Theme
URL: https://hub.jkdevstudio.com/docs/monogram/content-management/page-creation
Updated: 2026-09-06
Pages in Monogram work like standard WordPress pages, with an added **Page Header** feature that gives you control over a full-width hero section at the top of each page.
## Creating a Page
Go to **Dashboard > Pages > Add New**. You can build your page using either:
- **Elementor** - for full visual drag-and-drop design with Monogram 22 custom widgets
- **WordPress Block Editor** (Gutenberg) - for content-focused pages using blocks
Elementor-built pages automatically get a full-width layout. Pages built with the block editor use a contained layout with the standard `entry-content` wrapper.
## Page Header Settings
Every page has a **Page Header** field group with four tabs: General, Layout, Background, and Advanced. These fields control an optional full-width hero section displayed above the page content.
### General Tab
Field | Type | Default | Description |
|---|
Show Page Header | Toggle | Off | Enable the hero section above page content |
Show Breadcrumbs | Toggle | On | Display breadcrumb navigation inside the header |
Override Breadcrumb Plugin | Toggle | Off | Use a different breadcrumb source than the global setting |
Breadcrumb Provider | Select | Auto detect | Choose from Auto detect, Yoast SEO, RankMath, SEOPress, or Theme built-in |
Header Subtitle | Text (2 rows) | - | Short text below the page title, e.g., "We've been crafting digital experiences since 2010" |
The breadcrumb auto-detect checks for installed SEO plugins in this order: Yoast SEO, RankMath, SEOPress, then falls back to the theme built-in breadcrumbs.
### Layout Tab
Field | Type | Default | Description |
|---|
Header Height | Number (px) | 500 | Height of the hero section (300-1000 px). Use 300-400 for utility pages, 600-800 for hero-style pages |
Text Color | Select | Default (follows theme) | Light (white text for dark backgrounds) or Dark (dark text for light backgrounds) |
Background Overlay Strength | Number | 0.3 | Semi-transparent dark layer over the background (0 = none, 1 = solid black). 0.25-0.45 works best for most photos |
### Background Tab
Field | Type | Default | Description |
|---|
Background Type | Select | Image | None (plain color), Image, or Video |
Background Image | Image | - | Upload a photo (minimum 1920px wide recommended) |
Background Video File | File | - | Short looping video (MP4 or WebM, under 5MB recommended) |
Background Video URL | URL | - | Optional external video URL (direct .mp4 or .webm link, not YouTube/Vimeo) |
Background videos play automatically, silently, and on loop. Keep them under 10 seconds and compress well for best performance. The video URL field takes priority over the uploaded file when both are set.
### Advanced Tab
Field | Type | Description |
|---|
Custom CSS Class | Text | Add custom class names to the header wrapper for page-specific styling. Separate multiple classes with spaces |
## Example: Setting Up a Hero Page
1. Create a new page or edit an existing one
2. In the **Page Header** panel, toggle **Show Page Header** to **Yes**
3. Add a **Header Subtitle** like "Award-winning design studio based in New York"
4. Go to the **Layout** tab and set the height to **700** for a tall hero
5. Set **Text Color** to **Light** if you plan to use a dark background image
6. Go to the **Background** tab and upload a high-resolution image
7. Adjust the **Overlay Strength** to **0.35** for good text readability
8. Publish the page
For pages built entirely with Elementor, you may not need the Page Header at all - Elementor own hero sections give you more design control. The Page Header feature is most useful for editor-built pages that need a polished hero without Elementor.