# Pages

Pages are the screens of your website. Home, Contact, Services: each one is a
page, and each one has a row here.

Go to **Content**, then **Pages**.

## The list of your pages

![The Pages list. Three numbered marks: 1 on the page title Home, 2 on the view icon in its row, 3 on the red trash icon.](../../../assets/screenshots/pages-list.png)

*Every row is one page on your website.*

**1. The title.** Click it to open the page and edit it.

**2. The view icon.** Opens that page on your live site in a new tab.

**3. The red trash icon.** Sends the page to the Trash. Read the warning below first.

The **Status** column tells you what the public can see. **Published** means the
page is live. [Saving and publishing](/start-here/saving-and-publishing/)
explains the rest.

:::caution[Warning]
Your website is built around the pages in this list. It needs them.

Take away the Home page, by using **Unpublish Page** or the red trash icon, and your
front page stops showing your business. Visitors get a short setup message
instead. The same goes for Contact, and for every other page in the list.

Leave these pages in place. To change a page, edit it. Do not remove it.
:::

## Inside a page

Click a title and the page opens. There are two boxes: **Title** at the top,
and **Content** under it.

![The page editor. Four numbered marks: 1 on the Title box, 2 on the row of formatting buttons, 3 on a gray block card, 4 on a line of ordinary text.](../../../assets/screenshots/pages-editor.png)

*The Content box holds two kinds of thing: blocks, and plain text.*

**1. Title.** The name of the page. It shows at the top of the browser tab.

**2. The buttons.** Bold, headings, links and more. They work on text you have
selected.

**3. A block.** A ready made section, shown as a gray card with its name on it.
A block builds a whole strip of your page: a big headline, your list of
services, your photos. You do not type that layout yourself. You fill in a
short form and the block does the rest.

**4. Plain text.** Words you type yourself, exactly as you type them.

Most pages are mostly blocks. Blocks you may see include:

- **Basic Hero.** The big headline and buttons at the top of a page.
- **Story.** A few paragraphs about you, next to a photo.
- **Services.** Cards for your services, taken from **Content**, **Services**.
- **Testimonials.** Customer quotes, taken from **Content**, **Testimonials**.
- **Gallery.** A grid of photos, taken from your albums.
- **FAQ.** Questions and answers that open and close.
- **Pricing.** A price card for each of your plans.
- **Map.** A map of where you are.

Some blocks pull their words from somewhere else in the panel. The Services
block is one. To change a service, you edit it under **Content**, then
**Services**, and every page that shows it updates.

## Changing the words in a block

1. Click the block once. A blue line appears around it.
2. Click the pencil icon on the right of the card.
3. A form opens, holding the block's words in boxes. Change what you need.
4. Click **Save**.
5. Click **Publish** to send the change to your website.

## Adding a block

A new block lands wherever the cursor is, so put the cursor there first. To add
one at the end of the page, click at the end of the last line and press
**Enter** to open an empty line.

![The page editor with a slash typed on an empty line and a short menu open, showing the Story block.](../../../assets/screenshots/pages-add-block.png)

*Type a slash, then a word. The list shrinks to what matches.*

1. Type `/` on the empty line. A menu opens. It only opens on an empty line,
   so press **Enter** first if you are at the end of a sentence.
2. Type a word from the block name, such as `story`.
3. Click the block in the menu.

A form opens with the block's fields.

![The Insert Story form. Three numbered marks: 1 on the Headline box, 2 on Select media, 3 on the Insert button.](../../../assets/screenshots/pages-block-fields.png)

*Every block has its own form. This one is Story.*

**1. Headline.** The heading for this part of the page.

**2. Select media.** Opens your photo library. [Media](/content/media/) walks
through picking a photo.

**3. Insert.** Adds the block to the page. The form closes and the gray card
appears.

Then click **Publish**.

Leave a field empty if you do not need it. The block simply leaves that bit
out.

## Moving a block

Click the block once. Six small dots appear to the left of the card. Hold the
mouse button down on those dots, drag the card up or down, and let go.

The other blocks move out of the way. Click **Publish** when the order is
right.

## Removing a block

:::caution[Warning]
Removing a block takes that whole part of the page away, with all the words in
it. Once you publish, visitors stop seeing it.

If you only want it gone for now, it is safer to copy the words into a note
first.
:::

Click the block once, then click the red trash icon on the right of the card. Click
**Publish** to make the change live.

## Putting two things side by side

Everything on a page runs full width by default, one thing under the next.
Sometimes you want two things next to each other instead: a few paragraphs
beside a photo, two short lists, your opening hours next to a map.

That takes three pieces, added in this order: **Columns start**, **Column
break**, **Columns end**. Whatever you put between them ends up in the columns.

![The slash menu open on an empty line, filtered to col. Three numbered marks: 1 on Columns start, 2 on Column break, 3 on Columns end.](../../../assets/screenshots/pages-columns-menu.png)

*All three are in the menu together. Type `/col` and they come up.*

**1. Columns start.** Opens the columns. What you add after it goes in the left
one.

**2. Column break.** Ends the left column and starts the right one.

**3. Columns end.** Closes the columns. What comes after it runs full width
again.

Here is the order you type them in:

1. Put the cursor on an empty line and type `/col`.
2. Click **Columns start**. Pick your settings, click **Insert**.
3. Type the words for the left column, or add a block for it.
4. Type `/col` again and click **Column break**.
5. Type the words for the right column.
6. Type `/col` once more and click **Columns end**.
7. Click **Publish**.

## Your column settings

![The Insert Columns start form. Three numbered marks: 1 on Split, 2 on Vertical alignment, 3 on the Insert button.](../../../assets/screenshots/pages-columns-start.png)

*Both boxes already have a setting chosen. You can click Insert right away.*

**1. Split.** How the width is shared. **Even** gives both columns the same
width. **Wider left** gives the left one twice as much as the right. **Wider
right** does the opposite.

**2. Vertical alignment.** Where the columns sit when one is shorter than the
other. **Top** lines them up at the top. **Centered** floats the shorter one to
the middle.

**3. Insert.** Adds it to the page.

Two more settings live on the other two pieces:

- **Draw a line between the columns**, on **Column break**, runs a thin
  dividing line down the middle.
- **Extra space below**, on **Columns end**, adds a gap under the whole thing
  before whatever comes next.

## What it looks like while you are editing

![The page editor showing five things in a list. Five numbered marks: 1 on the Columns start card, 2 on the left column heading, 3 on the Column break card, 4 on the right column heading, 5 on the Columns end card.](../../../assets/screenshots/pages-columns-editor.png)

*In the editor it is a list. On your website it is two columns.*

**1. Columns start.** A gray card, like any other block.

**2. The left column.** Your words, sitting between the first two cards.

**3. Column break.** The card that splits the two.

**4. The right column.** Your words, sitting between the break and the end.

**5. Columns end.** The card that closes the group.

Five things in a row, one under another. The editor does not show them side by
side.

That is normal, and it is the one thing about columns worth getting used to. To
see the real thing, click **Publish**, then click **Live View**. It opens the
page on your website in a new tab.

![The published page, showing the two columns side by side with a dividing line between them.](../../../assets/screenshots/pages-columns-live.png)

*The same page on the website.*

## On a phone

Two columns need width, and a phone has none to spare. So on a narrow screen
they stack: the left column first, then the right one, each full width. The
dividing line disappears. A tablet and a small laptop window do the same.

Nothing to set up, and nothing to fix. But it is worth knowing while you write.
Anything that only makes sense read side by side, a before and after for
instance, should say so in the words, because anyone on a phone will read it
stacked.

## If the columns look wrong

:::note[Important]
**Everything below is in the columns.** You left out **Columns end**. Without
it, the second column runs to the bottom of the page. Add **Columns end** where
you want the columns to stop, and publish.

**Nothing shows up at all.** The three pieces are there, but empty. Empty
columns are skipped, so the whole group disappears. Put your words or a block
between the cards, then publish.

**A gray card sits there doing nothing.** A **Column break** or **Columns end**
on its own, with no **Columns start** above it, is ignored. It shows in the
editor and changes nothing on your website. Click it and use the red trash icon
to tidy it away.
:::

## Headings, bold, and links

These work on plain text, not on blocks.

![The row of formatting buttons above the Content box. Four numbered marks: 1 on the bold button, 2 on the headings button, 3 on the image button, 4 on the link button.](../../../assets/screenshots/pages-toolbar.png)

*Select your words first, then click a button.*

**1. Bold.** Select the words, click **B**.

**2. Headings.** Click on the line you want to be a heading, click **H**, then
pick **Heading 2**. Use Heading 2 for the main parts of a page, and Heading 3
for smaller parts inside them.

**3. Insert Image.** Opens your photo library, and drops the photo you pick
into the text. [Media](/content/media/) covers the picker.

**4. Insert Link.** Turns selected words into a link. See below.

To add a link:

1. Select the words you want people to click.
2. Click the link button.
3. Type the address in the box.
4. Click **Apply**.

For a page on your own website, type the part after your web address, starting
with a slash: `/contact`, or `/services`. For anywhere else, type the whole
address, starting with `https://`.

To take a link off, select the linked words, click the link button, leave the
box empty, and click **Apply**.

:::tip[Tip]
Links are easy to get slightly wrong. After you publish, click **Live View**
and click the link yourself. Ten seconds now saves a customer landing on
nothing.
:::

## What Google shows

Scroll down the panel on the right to **SEO**. These fields do not change your
page. They change how it looks in a search result.

![The SEO fields in the right hand panel. Three numbered marks: 1 on SEO Title, 2 on Meta Description, 3 on Hide from search engines.](../../../assets/screenshots/pages-seo.png)

*Two boxes worth filling in, and one switch to leave alone.*

**1. SEO Title.** The blue line people click in Google. Leave it empty and your
page title is used, with your business name after it. Fill it in when you want
different wording. Keep it short, around eight words.

**2. Meta Description.** The gray sentence under that blue line. Say what is on
the page and why someone should click. The counter under the box stops at 160
characters, so write for that.

**3. Hide from search engines.** Leave this switch off. It exists for a page
you want kept out of Google, which is almost never what a small business wants.
If you think you need it, ask us first.

## Adding a new page

:::danger[Contact support]
Your website has a set list of pages. Each one was built into the design and
into your menu when we made the site.

**Add New** on this screen makes a new entry, but no new page appears on your
website. Nothing breaks. It simply sits in the list doing nothing.

Email us instead and say what the page is for. We build the page, add it to
your menu, and tell you when it is ready.

Email [support@lookoutridgeit.com](mailto:support@lookoutridgeit.com).
[Getting support](/help/getting-support/) says what to put in the message.
:::

The menu across the top of your website is edited under **Manage**, then
**Menus**.