## 404 Page

Product: Monogram - Personal Portfolio WordPress Theme
URL: https://hub.jkdevstudio.com/docs/monogram/customization/404-page
Updated: 2026-04-14
Summary: 404 Page
Monogram includes a fully customizable 404 error page with a striking visual mask effect. You control every piece of text, the background visual, and the call-to-action button through the Cus

# 404 Page

Monogram includes a fully customizable 404 error page with a striking visual mask effect. You control every piece of text, the background visual, and the call-to-action button through the Customizer.

## Accessing 404 Settings

Open **Appearance &gt; Customize &gt; 404 Page** to configure the error page.

## Settings Reference

### Text Content

<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>Eyebrow Text</strong></p></td><td colspan="1" rowspan="1"><p>Text</p></td><td colspan="1" rowspan="1"><p>"Page not found"</p></td><td colspan="1" rowspan="1"><p>Small label text displayed above the main title</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Title</strong></p></td><td colspan="1" rowspan="1"><p>Text</p></td><td colspan="1" rowspan="1"><p>"This project doesn't exist here"</p></td><td colspan="1" rowspan="1"><p>Main heading displayed on the 404 page</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Description Text</strong></p></td><td colspan="1" rowspan="1"><p>Textarea</p></td><td colspan="1" rowspan="1"><p>"The page you are looking for was either removed, renamed, or never shipped. Some ideas are better left unpublished."</p></td><td colspan="1" rowspan="1"><p>Supporting text shown below the title</p></td></tr></tbody></table>

### Visual Mask

The 404 page features a large visual mask effect where text (typically "404") is used as a cutout to reveal a background image.

<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>Mask Text</strong></p></td><td colspan="1" rowspan="1"><p>Text</p></td><td colspan="1" rowspan="1"><p>"404"</p></td><td colspan="1" rowspan="1"><p>Text used as a visual mask. This is the large text that acts as a cutout window</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Mask 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>Image used behind the mask text. The image shows through the text cutout. Supports photos or video poster images</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Enable Mask Animation</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>Enable subtle animation for the masked 404 visual. Adds movement to make the page feel dynamic</p></td></tr></tbody></table>

### Call to Action

<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 CTA Button</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>Show or hide the call-to-action button on the error page</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>CTA Button Label</strong></p></td><td colspan="1" rowspan="1"><p>Text</p></td><td colspan="1" rowspan="1"><p>"Back to portfolio"</p></td><td colspan="1" rowspan="1"><p>Text displayed inside the CTA button. Only shown when the button is enabled</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>CTA Button Link</strong></p></td><td colspan="1" rowspan="1"><p>URL</p></td><td colspan="1" rowspan="1"><p>Homepage URL</p></td><td colspan="1" rowspan="1"><p>Destination URL for the CTA button. Defaults to your site homepage. Only shown when the button is enabled</p></td></tr></tbody></table>

## Design Tips

Here are some suggestions for making the most of your 404 page:

- **Choose a compelling mask image** - Since the image shows through the "404" text, pick something visually interesting with good contrast. Abstract textures, aerial photography, or portfolio highlights work well.
- **Keep the description friendly** - Visitors landing on a 404 page may be frustrated. Use a calm, helpful tone that guides them back to useful content.
- **Point the CTA to your best content** - The default links to the homepage, but you might want to link to your portfolio, blog, or contact page instead.
- **Enable the mask animation** - The subtle movement makes the page feel intentional rather than broken.

<div data-callout="tip">

You can change the mask text from "404" to anything you like. Some sites use words like "Oops" or "Lost" for a more branded feel.

</div>