Скачать или смотреть WordPress 404 page full site editing

Creating a custom 404 page with Full Site Editing (FSE) in WordPress allows you to design a user-friendly error page that matches the look and feel of your website. A 404 page displays when a user lands on a URL that doesn’t exist on your site, and a well-designed 404 page can help guide visitors back to relevant content.

Here’s how to create and customize a 404 page using Full Site Editing in WordPress:

Step 1: Access the Full Site Editor

In your WordPress dashboard, go to Appearance 👉️ Editor to open the Full Site Editor.

Step 2: Open or Create the 404 Template

In the Full Site Editor, click on the WordPress logo (Site Editor menu) in the top left to open the navigation menu.

Select Templates from the menu to view all the available templates.

Look for the 404 template in the list. Many block-based themes already have a default 404 template, but if it doesn’t exist:

Click on Add New and select 404 to create a new 404 page template.
Step 3: Customize the 404 Template Layout

With the 404 template open, you can now design the layout and content of your error page.

a. Add a Message for Lost Visitors

Start by adding a Heading Block with a message like “Page Not Found” or “Oops! This page doesn’t exist.”

You can also add a Paragraph Block below it with more information, such as:

"It seems we can’t find the page you’re looking for."

"The link might be broken, or the page may have been moved."

b. Add a Search Bar

Adding a Search Block allows visitors to search for the content they’re looking for, which can help them find relevant pages on your site.

Click on the + button to insert a new block.

Search for and add the Search Block.

Place it below the error message so users can quickly search your site.

c. Add Links to Popular or Recent Content

To guide users back to other parts of your site, you can add links to popular or recent content:

Latest Posts Block: Add this block to display a list of your most recent posts.

Categories Block: Display a list of categories so users can navigate directly to content areas that might interest them.

Button Block: Add a button that takes users to your homepage or other main pages, like "Return to Home" or "Visit Our Blog."

d. Add a Call-to-Action (Optional)

If you want to engage visitors further, consider adding a call-to-action:

Newsletter Signup: Encourage users to subscribe to your newsletter.

Contact Form: Offer a way for users to reach out if they need assistance.

e. Customize the Design

Use the Full Site Editor’s styling options to make the 404 page match the look and feel of your website:

Typography: Adjust font sizes, weights, and colors for headings and text.
Colors: Set background and text colors that align with your site’s brand.

Spacing: Adjust padding and margins to make the page feel spacious and easy to read.

Step 4: Preview and Test the 404 Page

Before finalizing your custom 404 page, preview it to ensure everything looks as expected. You can preview the 404 template in the Full Site Editor or try it on your live site by entering a URL that doesn’t exist (e.g., yoursite.com/nonexistent-page).

Step 5: Save the Template

When you’re satisfied with the design, click Save in the top-right corner to apply your changes.

Tips for a User-Friendly 404 Page

Keep It Lighthearted: Add humor or a friendly message to make the experience less frustrating for users.

Offer Useful Navigation: Provide links to common sections, like the home page, contact page, or popular categories.

Add Imagery: Consider adding an image or icon that visually represents an error page, like an illustration or emoji, to give the page a bit of personality.
Make It Mobile-Friendly: Ensure the design is responsive so it looks good on all devices.


A custom 404 page with Full Site Editing can turn a potential dead end into an opportunity to guide users back to relevant content on your site. By making the page user-friendly, informative, and visually appealing, you can improve the user experience and potentially keep visitors engaged with your site.

Get started at https://maxiblocks.com/ - MaxiBlocks is a no-code page builder to helps creators build websites faster with an integrated design library and 2000+ ready-to-deploy responsive templates. Also comes with 13.6K icons and 100 design styles. Join our community!

Important links:
Help desk - https://maxiblocks.com/go/help-desk
Pro library - https://maxiblocks.com/pro-library/
Demo library - https://maxiblocks.com/demo/
Maxi Blocks - https://maxiblocks.com/
X / Twitter -   / maxiblocks  
Discord community - https://maxiblocks.com/go/maxi-discord
Roadmap - https://maxiblocks.com/go/roadmap