# 404 Page

Choose what visitors see when a link is broken or an address does not exist.

Source: https://docs.lookoutridgeit.com/plugins/not-found/

Every website has this screen. An Editor can use it, not just an Admin.

Sometimes a visitor lands on an address your website does not have. The link
was typed wrong, or it points at a page you took down. Your website then shows
a "page not found" page. People call it the 404 page, because 404 is the
number web browsers use for "not found".

This screen lets you choose what that page says. Turn a dead end into a way
back in: a friendly line, a picture, your services, and buttons to the pages
people want.

Go to **Plugins**, open the **Site Layout** group, and click **404 Page**.

## What visitors see now

Until someone saves this screen, the page shows:

- a large, faded **404**,
- the heading **Page not found**,
- the line "The page you're looking for doesn't exist or has been moved.",
- your search box, if search is on,
- two buttons: **Go home** and **Contact us**.

The screen tells you **Nothing changes on your site until you save this
page.**

To see it for yourself, open your website and add a made-up word to the end
of the address, such as `/nothing-here`.

## Changing the page

The screen has four parts: **Message**, **Image**, **Ways back in** and
**Buttons**. Change what you want, then save.

1. Type a new **Headline** and **Message**, if you want them. Leave a box
   empty to keep the words shown in gray inside it.
2. Pick an image, if you want one. See below.
3. Check the **Ways back in** you want.
4. Set the buttons. See below.

**Warning**
There is no draft. The moment you click **Save**, the new page is live for
every visitor who lands on a broken link.

5. Click **Save**.

You see **404 page saved.** **Save** stays gray until you change something.

**Undo changes** throws away what you changed since your last save.

## Message

- **Headline**: the big heading. Up to 120 letters.
- **Message**: the line under it, in plain words. Up to 400 letters.
- **Show the large 404 number**: the faded 404 above the heading. It starts
  on. Take the check mark off to hide it.

A message that helps: "Sorry, that page has moved. Our services are below, or
give us a call at 555-0142."

## Image

1. Click **Choose image**. A window called **Choose an image** opens, with
   your Media library in it. Type in the box at the top to search by file
   name.
2. Click the picture you want.
3. Fill in **Alt text**. Say what the picture shows, for people who cannot
   see it.
4. Pick a **Layout**.

| Layout | What it does |
| --- | --- |
| **Above the headline** | The picture sits in the middle, over the heading. This is where it starts. |
| **Banner behind the headline** | The picture fills the width of the page, behind the heading. It is darkened, so the words stay easy to read. |

Is the picture only there for looks? Check **Decorative image** instead of
writing alt text. Screen readers then skip it. A photo behind the headline is
often decorative.

The picture must be in your Media library first. This window cannot upload.
[Media](https://docs.lookoutridgeit.com/content/media/) shows you how.

**Change image** swaps it. **Remove image** takes it off the page. The picture
stays in your Media library either way.

While the 404 page uses a picture, you cannot delete it from the Media
library. The library tells you **Used by: 404 page.** Remove it here first.

## Ways back in

Three checkboxes add help under the message.

| Checkbox | What it adds | Starts |
| --- | --- | --- |
| **Show the search box** | Your site's search box. Only if search is on. See [Site search](https://docs.lookoutridgeit.com/plugins/site-search/). | On |
| **Show services** | Up to three of your [services](https://docs.lookoutridgeit.com/content/services/), featured ones first. | Off |
| **Show the newest blog posts** | Your three newest [posts](https://docs.lookoutridgeit.com/content/posts/). Only if your website has the blog. | Off |

## Buttons

The buttons sit at the bottom of the page. Pick one of two choices.

- **Default (Go home and Contact us)**: the two buttons the page always had.
- **My own**: buttons you set up yourself.

Pick **My own**, and the two default buttons fill in for you to change. Each
button has three boxes:

- **Label**: the words on the button. Up to 40 letters.
- **Link**: where it goes. See the list below.
- **Style**: **Primary** is filled with your main color. **Secondary** has an
  outline only.

**Add button** adds one. You can have up to three. The **↑** and **↓** arrows
change the order. **Remove** takes one away. Remove them all, and the page
shows no buttons.

A **Link** can be:

- a page on your site, starting with a slash, such as `/services`,
- a full web address, starting with `https://`,
- an email, such as `mailto:hello@northwind-heating.example`,
- a phone number, such as `tel:555-0142`.

Type `example.com` with no `https://`, and the screen will not save. It tells
you which button needs fixing. A button with no label stops the save too.

## Going back to the original

Click **Reset to original**. The form fills in with the page as it first
came. Then click **Save** to put it live.

Until you save, your website keeps showing what you saved last.

## Fixing the broken links themselves

This page catches people who hit a broken link. It does not fix the link.

The [SEO](https://docs.lookoutridgeit.com/plugins/seo/) screen lists the addresses people tried that do not
exist. From there you can send each one to the right page, so nobody lands on
the 404 page at all.