## FAQ Settings

Product: Monogram - Personal Portfolio WordPress Theme
URL: https://hub.jkdevstudio.com/docs/monogram/customization/faq-settings
Updated: 2026-04-14
Summary: FAQ Settings
Monogram includes a dedicated FAQ custom post type with its own archive page. You can customize the FAQ page header through the Customizer.
Accessing FAQ Settings
Open Appearance &gt; Cus

# FAQ Settings

Monogram includes a dedicated FAQ custom post type with its own archive page. You can customize the FAQ page header through the Customizer.

## Accessing FAQ Settings

Open **Appearance &gt; Customize &gt; FAQ** to configure the FAQ page header. All settings are grouped under the **Header** tab.

## Page Header

The FAQ page header is a full-width hero section displayed at the top of the FAQ archive page. It supports a background image or video, breadcrumb navigation, and customizable text colors.

### General Settings

<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>Enable 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>Display a dedicated hero header section at the top of the FAQ page. All other settings below become available once this is enabled</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 FAQ page header (e.g., Home &gt; FAQ)</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Override Global Breadcrumbs</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 source for the FAQ page instead of the global setting</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Breadcrumb Source</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 which plugin generates breadcrumbs: Auto detect (recommended), Yoast SEO, Rank Math, SEOPress, or Theme default. 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>Optional short text displayed below the FAQ page title. Keep it to one or two sentences</p></td></tr></tbody></table>

### Layout Settings

<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>Vertical height of the FAQ page header. Values between 400-600px work well for most layouts</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Text Color Mode</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 the color of title, subtitle, and breadcrumb text. Choose Default (follows theme), Light (white text for dark backgrounds), or Dark (dark text for light backgrounds)</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Overlay Opacity</strong></p></td><td colspan="1" rowspan="1"><p>Slider</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 to improve text readability. 0 = no overlay, 1 = fully black. Values of 0.25-0.45 work well for most photos</p></td></tr></tbody></table>

### Background Settings

<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: None (theme background color), Image (static photo), or Video (looping 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>Select or upload an image. Recommended minimum width: 1920px. Compress before uploading. Only shown when type is Image</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Background Video</strong></p></td><td colspan="1" rowspan="1"><p>Upload</p></td><td colspan="1" rowspan="1"><p>Empty</p></td><td colspan="1" rowspan="1"><p>Upload a short looping video (MP4 format, under 5MB). Plays automatically, silently, and on loop. Only shown when type is Video</p></td></tr></tbody></table>

### Advanced

<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>Extra 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 custom CSS class names to the FAQ header wrapper for page-specific styling. Separate multiple classes with a space</p></td></tr></tbody></table>

<div data-callout="tip">

If you want a simple, clean FAQ page without a hero header, leave Enable Page Header turned off. The FAQ archive will display with the standard page layout.

</div>

## FAQ Content

FAQ items are managed as a custom post type. To add or edit FAQ entries:

1. Go to **FAQ** in the WordPress admin sidebar.
2. Click **Add New** to create a new FAQ item.
3. Enter the question as the title and the answer as the post content.
4. Publish the FAQ item.

FAQ items appear on the FAQ archive page and can also be displayed anywhere on your site using the **FAQ Elementor widget**, which renders them as an interactive accordion.

<div data-callout="info">

The FAQ Elementor widget lets you display FAQ items as an accordion on any page you build with Elementor.

</div>