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 > Customize > 404 Page to configure the error page.
#Settings Reference
#Text Content
Setting | Type | Default | Description |
|---|---|---|---|
Eyebrow Text | Text | "Page not found" | Small label text displayed above the main title |
Title | Text | "This project doesn't exist here" | Main heading displayed on the 404 page |
Description Text | Textarea | "The page you are looking for was either removed, renamed, or never shipped. Some ideas are better left unpublished." | Supporting text shown below the title |
#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.
Setting | Type | Default | Description |
|---|---|---|---|
Mask Text | Text | "404" | Text used as a visual mask. This is the large text that acts as a cutout window |
Mask Background Image | Image | Empty | Image used behind the mask text. The image shows through the text cutout. Supports photos or video poster images |
Enable Mask Animation | Toggle | On | Enable subtle animation for the masked 404 visual. Adds movement to make the page feel dynamic |
#Call to Action
Setting | Type | Default | Description |
|---|---|---|---|
Enable CTA Button | Toggle | On | Show or hide the call-to-action button on the error page |
CTA Button Label | Text | "Back to portfolio" | Text displayed inside the CTA button. Only shown when the button is enabled |
CTA Button Link | URL | Homepage URL | Destination URL for the CTA button. Defaults to your site homepage. Only shown when the button is enabled |
#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.
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.
Last updated
Was this article helpful?
Resources
On this page
