Build a 404 Page
Build a custom not-found page with the Composer widget so visitors who hit a broken link see a helpful, branded experience.
A 404 Page template replaces the theme's default error page for every URL on your site that returns a not-found response. A well-designed 404 page keeps visitors on your site and points them toward content they actually want.
404 page templates are available on Free and Pro. Archive, search, and WooCommerce template types require Pro. See Free vs Pro.
Create a 404 Template
- Go to UiChemy → Theme Builder.
- Click + Add New → 404 Page.
- It opens for editing in Gutenberg by default. Use Edit on the template card to reopen it later. Elementor needs to be active on the site either way.
- Add the Composer widget to the canvas.
- Build the not-found experience.
- Click Update to activate it, there are no display conditions to set for this type, see below.
Build the 404 Page
Using Chat AI (Pro):
"A 404 error page. Large '404' in a muted brand color. A heading: 'Page not found'. A short friendly message explaining the page may have moved. A button linking to the homepage labeled 'Back to Home'. Centered layout, light background."
Or write it in the Code tab:
<section class="error-404">
<div class="error-inner uc-boxed">
<p class="error-number">404</p>
<h1 class="text-heading-h2">Page Not Found</h1>
<p class="text-body">
The page you're looking for doesn't exist or may have been moved.
Let's get you back on track.
</p>
<div class="error-actions">
<a href="{{ site.url }}" class="btn-primary">Back to Home</a>
<a href="{{ site.url }}/contact" class="btn-outline">Contact Us</a>
</div>
<div class="error-search">
<p class="text-body-sm">Or try searching:</p>
<form role="search" method="get" action="{{ site.url }}">
<input type="search" name="s" placeholder="Search the site…">
<button type="submit">Search</button>
</form>
</div>
</div>
</section>
site.* requires UiChemy Pro. The example above uses {{ site.url }} for the homepage link, in the free version this returns an empty string. Free users can hardcode the homepage URL or any other link directly.
CSS Example
.error-404 {
min-height: 70vh;
display: flex;
align-items: center;
background: var(--color-bg-alt);
}
.error-inner {
text-align: center;
padding-block: var(--space-xl);
}
.error-number {
font-size: clamp(6rem, 20vw, 12rem);
font-weight: 900;
line-height: 1;
color: var(--color-brand);
opacity: 0.2;
margin-block-end: var(--space-sm);
}
.error-actions {
display: flex;
gap: var(--space-sm);
justify-content: center;
margin-block: var(--space-lg);
}
.error-search {
max-width: 400px;
margin-inline: auto;
}
.error-search input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--color-border, #e5e7eb);
border-radius: 8px;
margin-block-end: var(--space-sm);
}
No Display Conditions
A 404 Page template applies to every not-found URL on your site as soon as it's active, there's nothing to configure. You can't scope different 404 templates to different broken URLs, if you activate more than one, the most recently activated one wins.
What to Include on a 404 Page
| Element | Why |
|---|---|
| Clear "404" or "not found" label | Confirms the page is missing, not broken |
| Friendly explanation | Tone matters, visitors feel less lost |
| Homepage button | Primary escape route |
| Search form | Lets them find what they were looking for |
| Popular links | Direct visitors to high-value pages |
| Contact link | For visitors who need specific help |
Optional addition, popular posts:
<div class="popular-posts">
<h3 class="text-label">Popular Articles</h3>
{% for post in get_posts({ posts_per_page: 3, orderby: 'comment_count', order: 'DESC' }) %}
<a href="{{ post.link }}">{{ post.title }}</a>
{% endfor %}
</div>
Tips
- Keep the header and footer. Your site header and footer still render on 404 pages if you've assigned them site-wide. The 404 template controls only the main content area between them.
- Track your 404s. High-traffic 404s often point to a broken backlink or an old URL that needs a redirect. Add your analytics tracking code at Site scope in any Composer widget's Code tab to capture 404 events.