--- title: "Customizing 404 page" slug: "404-page" description: "404 page appears when a reader tries to access a nonexistent page on our Knowledge base site. You can customize the 404 page using the basic or custom style." tags: ["Error pages", "Customize site"] updated: 2026-06-01T09:47:00Z published: 2026-06-01T09:47:00Z --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Customizing 404 page A 404 page appears when a reader tries to access a non-existent page on the Knowledge base site. For instance, when a reader attempts to access a deleted URL in the Knowledge base site, a 404 page will appear. Customize the 404 error page of your Knowledge base site by adding a custom message and illustration. This enhances the reader's experience, guiding them to the desired pages instead of leaving them on a default 404 page. You can add links, titles, descriptions, and images that reflect your brand. The 404 page can be customized using either the basic or custom style. > [!NOTE] > ** NOTE > > Once you configure a custom 404 page, you cannot revert to the default. It's recommended to have a custom 404 page to improve the reader experience. --- ## Customizing the 404 page To customize the 404 page, follow the steps below: 1. Navigate to **Settings** (**) > **Knowledge base site** in the left navigation bar****in the Knowledge base portal. 2. In the left navigation pane, navigate to **Site customization**. The **Site customization** page contains all the basic site design configurations. 3. Click **Customize site**. ![Site customization options for branding, including theme selection and logo upload.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Customize-site.png) 4. From the left dropdown menu, select **404**page. 5. Customize the page using one of two options: - **Basic style**: Allows customization of the default image. - **Custom style**: Add custom HTML and CSS. Use the **Preview** toggle to switch between code view and rendered view. 6. Click **Save******to save your changes without applying them immediately. 7. Click **Preview** to see how your changes will appear on the knowledge base site. 8. Click **Publish******to make your recent changes visible to readers. 9. Click the **More** (**) icon and select **Reset to published version** to discard all saved and unsaved customizations and revert to the last published version. > [!NOTE] > ** NOTE > > The **Reset to published version** feature is available only for new Knowledge base site 2.0 projects created after March 29, 2025. ![404 error page with options to customize site and navigate to documentation or home.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1773140589648.png) --- ### Basic style #### Image Upload a related image to enhance the page. 1. Click **Image**. The **Image**panel will appear. 2. Click **Change** and choose between two options: a. **Default images**: Select from the default images and click **Save**. b. **Image**: Either provide a URL or upload an image from your drive. - To upload from URL: Enter the image URL in the URL field and click **Save**. - To upload from your drive: Click **Upload an image**, select the file, and click **Save**. 3. Set the image alignment (left, center, or right) as needed. ![Image selection interface showing alignment options and default images for customization.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1773140609668.png) #### Heading 1. Click **Heading**. The **Heading**panel will appear. 2. Enter the desired heading text. 3. Select a color from the text color palette. > The default heading will be "404." ![Editing a 404 error page with options for heading and navigation links.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1773140635154.png) #### Paragraph 1. Click **Paragraph**. The **Paragraph** panel will appear. 2. Enter a description for the page. This will help readers understand the context. 3. Select a color from the text color palette. > The default text will be "Oops! Page not found." ![Editing a paragraph with a message indicating a page was not found.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1773140655833.png) #### Buttons Add up to three link buttons to guide readers to the desired pages. 1. Click **Buttons**. 2. Click the **Add button** to create a new button. 3. Enter text and URL for each button. 4. Click the **Delete** (**) icon to remove a button or the **Hide** (**) icon to hide it. 5. Click **Delete**at the bottom to remove all buttons. 6. Once done, click **Save**. ![404 error page with buttons for Documentation and Home navigation options.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1773140681230.png) > [!NOTE] > ** NOTE > > Suggested links to include on the 404 page: > > - Home page > - Contact page/form for readers to report a broken link > - Knowledge base sitemap > - Some of your most popular blog pages > - Most popular or valuable product or category pages --- ### Custom style Customize the 404 page with HTML or CSS section. 1. Select **Custom style** and switch between the **HTML** and **CSS** sections. 2. Update the code as required in each section. 3. Turn on the **Preview** toggle to view the updated page. 4. One done, click **Save******to save your changes without applying them immediately. 5. Click **Preview** to see how your changes will appear on the knowledge base site. 6. Click **Publish******to make your recent changes visible to readers. 7. Click the **More** (**) icon and select **Reset to published version** to discard all saved and unsaved customizations and revert to the last published version. > [!NOTE] > ** NOTE > > The **Reset to published version** feature is available only for new Knowledge base site 2.0 projects created after March 29, 2025. ![Customizing a 404 error page with HTML and CSS code sections displayed.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1773140700291.png) > [!NOTE] > ** NOTE > > **Page not found** feature in Document360 shows the list of URLs for which a 404-page error is shown after the link is accessed. It helps in replacing this URL with redirecting URL, which can provide the required content and enhance the reader experience. Also using redirection rule, we can fix the 404-page error. For more information, read the article on [Page not found analytics](/help/docs/page-not-found-analytics). > [!NOTE] > ** NOTE > > **Links status** feature checks for broken links across your Knowledge base site and helps you fix them to enhance SEO and improve reader experience. For more information, read the article on [Link status](/help/docs/links-status). --- ### FAQ #### What are the best practices to create a 404 page? The best practices for creating a 404 page are: 1. **Keep the design consistent** - Ensure the 404 page matches the overall look and feel of your website or product. - Use the same branding, colors, and fonts to create a seamless experience and avoid confusion. 2. **Use clear and friendly language** - Avoid overly technical jargon. Use simple, friendly language that lets users know they’re in the right place but the page is unavailable. - Acknowledge the error with a human touch. 3. **Offer helpful navigation** - Provide clear links to guide users back on track: - **Homepage** - **Search bar** - **Popular or recommended pages** - Consider offering links to **frequently visited sections**, like support, contact, or a knowledge base. 4. **Add a search bar** - Give users the chance to search for what they were trying to find. A well-placed search bar can help them continue their journey seamlessly. 5. **Explain what might have happened** - Include a short explanation of why the user may have ended up there (e.g., broken link, outdated URL). - Keep it light and user-friendly: "It’s possible the page has been moved or no longer exists." 6. **Include a Call-to-Action (CTA)** - Suggest actions they can take: - **Contact support** for help. - **Report the broken link**. - For an e-commerce site, offering product recommendations or deals could also be beneficial. 7. **Add a touch of humor or personality** - Inject some personality with humor or visuals. A light-hearted approach can ease the frustration of hitting an error. - Use quirky messaging like: "Looks like this page is on vacation!" or visual elements like an illustration. 8. **Make the page functional** - Ensure any buttons or links on the 404 page are working properly and are easy to locate. - Double-check that navigation back to the homepage or other sections is smooth and intuitive. 9. **Add a feedback option** - Provide a link or form to report the issue or give feedback. This can help identify any broken links or common user issues. 10. **Consider SEO** - Include proper meta tags and an SEO-friendly 404 page that informs search engines of the missing page. - Include relevant internal links so search engines can still index your important pages. 11. **Use an eye-catching image or animation** - Visuals can make the 404 page engaging. You can use custom illustrations, fun animations, or even GIFs to add interest and reduce frustration. 12. **Ensure it’s mobile-friendly** - Make sure your 404 page is responsive and works well on mobile devices, just like the rest of your site. ## Related - [Error pages](/error-pages.md) - [Customizing Access denied page](/access-denied-page.md) - [Customizing Unauthorized page](/unauthorized-page.md) - [Customizing IP restriction page](/ip-restriction-page.md)