How to Create a Custom 404 Page in Webflow
Learn how to create a custom 404 page in Webflow: design, essential elements, and the correct status code.
In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to create a custom 404 page in Webflow.
1. Go to the Webflow 404 page
In the Pages panel, scroll down to the Utility Pages section. Webflow includes a default 404 Not Found page. Click it to design it like any other page.
2. Design your 404 page
Replace the default content with your custom design. Recommended elements: a friendly error message ("Oops, this page doesn't exist"), a link to the homepage, a search bar, and links to your key pages (services, blog, contact).
3. Add the correct 404 status code
Webflow automatically returns an HTTP 404 code for this page. Check it with a tool like httpstatus.io by testing a non-existent URL. A 200 code on a 404 page (a soft 404) hurts SEO.
Conclusion
A Webflow 404 page is designed like a standard page in Utility Pages. See also: create redirects in Webflow.
Good to know
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.avif)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
