500 Error¶
The content block for a 500 "server error" system page - a large error code, a title, a short description, and a back-home button. Best for: the theme's 500 system page, or any "something went wrong" message section.
📷 Hero image
Target file: assets/img/500-error/hero.webp
A full 500 system page captured against a Dark background, with the content stack centered on the page. Show a very large "500" error code at the top (in the Primary color or the navy-to-purple Gradient 1), a bold heading below it, a short line of supporting description text, and a single solid Primary button reading "Back to home". Keep it centered with generous surrounding space so the error-page hierarchy is clear. Captured at desktop width.
At a glance¶
System page Error 500
- What it does: renders a centered (or left/right aligned) error message - a big error number, a heading, a short description, and one action button. This module holds only the text; all visual styling comes from Theme settings.
- Best used for: the 500 "internal server error" system page, so the look stays consistent across the site.
- Not the right fit if: you need a page-not-found page (use 404 Error), or a general content block with full styling controls (use Content).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- Open Settings › Website › Pages › System pages and set the theme's 500 template.
- In the page editor, the 500 Error module is already placed in the system template.
- Open Content and edit the Error code, Error title, and Error description.
- Set the Button text and link (leave the text empty to hide the button).
- Restyle background, glow, spacing, typography, and button under Theme settings › System pages › 500.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
The big code, title, description, and button all centered.
📷 Result
Target file: recipe-classic-centered-500.webp
The full centered stack: a large "500" code, a heading, a short description, and a solid Primary "Back to home" button, all aligned to the center of the Dark page. Capture the whole block at desktop width.
| Field | Set to |
|---|---|
| Content › Error code | 500 |
| Content › Error title | your headline |
| Content › Button › Button text | Back to home |
| Theme settings › 500 › Content alignment | center |
Just the code and title, no button.
📷 Result
Target file: recipe-minimal.webp
A pared-back version showing only the large "500" code and the heading below it, with no description button beneath. Center it on the Dark page so the minimal treatment reads clearly.
| Field | Set to |
|---|---|
| Content › Error code | 500 |
| Content › Error title | your headline |
| Content › Button › Button text | leave empty |
One or two radial glows behind the content (Theme settings).
📷 Result
Target file: recipe-glow-backdrop.webp
The centered error stack with a soft radial glow in the Secondary color behind the content, and the "500" code filled with the navy-to-purple Gradient 1. Capture the whole block so both the glow and the gradient code are visible.
| Field | Set to |
|---|---|
| Theme settings › 500 › Add radial glow | on |
| Theme settings › 500 › Glow color | Secondary |
| Theme settings › 500 › Error code color | gradient (--gradient-1) |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Change the big number | Content › Error code |
| Change the headline | Content › Error title |
| Edit the supporting text | Content › Error description |
| Change the button label | Content › Button › Button text |
| Point the button elsewhere | Content › Button › Button link |
| Hide the button | Leave Button text empty |
| Restyle background, glow, spacing, typography, button | Theme settings › System pages › 500 |
Field reference¶
This module holds text content only. All styling lives in Theme settings. (5 fields total.)
Content tab¶
Content
| Field | Type | Default |
|---|---|---|
| Error code | text | 500 |
| Error title | text | Something went wrong |
| Error description | richtext | short "try again in a moment" copy |
| Button › Button text | text | Back to home |
| Button › Button link | link | / (same tab) |
Style tab¶
Styling comes from Theme settings
This module has no Style-tab fields. Section background (color / gradient), radial glow (×2), spacing, page and content containers, error-code and title/description typography, and the button style are all read from Theme settings › System pages › 500.
Tips & gotchas¶
Empty button = no button
The button only renders when Button text is filled in. Clear it to show code, title, and description alone.
Styling is theme-driven
You cannot restyle this block per page. Change the background, glow, spacing, typography, and button under Theme settings › System pages › 500 so every system page matches.
Set the system template
The 500 module only shows up if the theme's 500 template is assigned under Settings › Website › Pages › System pages.