Looking after your school website

1. Before you start

Your school website has a private area called the admin. You sign in, change something, press Publish, and the website updates. That is the whole idea.

You cannot break it

This is worth saying first, because it stops most people from trying.

• You cannot change the design. There are no font, colour or size controls in the page editor, so a page can never end up looking wrong.
• You cannot lose the website. Every change is kept, so anything can be put back.
• Nothing you type goes live until you press Publish.

The worst thing that can happen is a spelling mistake. You can fix that in a minute.

What you need

• A computer, tablet or phone. A computer is easier for long pages.
• Your school email address, and the ability to read that inbox.
• The address of your admin. It is your website address with /admin on the end.

2. Signing in

There is no password. Instead the website emails you a six-digit code each time you sign in. Nothing to remember, nothing to write down, nothing to reset.

1. Go to your website and add /admin to the end of the address.
2. Type your school email address.
3. Press Send me a code.
4. Open your email. A six-digit code will be waiting.
5. Type the six digits into the website and press Sign in.

Once you are in, you stay signed in on that computer for a week. You only do this again when the week runs out, or when you use a different computer.

Read the email on your phone, type the code on the computer

That is fine and it is expected. The email carries a code, not a link, exactly so you can read it on one device and type it into another.

If no code arrives

1. Check the junk or spam folder. This is nearly always where it is.
2. Check you typed the address correctly.
3. Wait a minute and press Send me a code again. The website will not send two codes within the same minute.
4. If still nothing, your address may not be on the list of people allowed to edit. Ask whoever looks after the website to add you.

Signing out

Sign out is in the top right corner. Use it on a shared office computer. On your own computer you can leave yourself signed in.

3. Finding your way around

Every screen in the admin is laid out the same way.

The coloured band

• Your school crest and name, on the left.
• The address you signed in with, on the right.
• View the website opens the real website, so you can check your work.
• Sign out.

The tabs

Each tab is one part of the website. They are in the order a school uses them: the ones you touch every week come first.

The list screens all look the same

Newsletters, news and notices, photos and the calendar are built the same way. Learn one and you have learned all four. Each starts with the same three things:

1. Picture across the top — the banner for that page.
2. Words at the top of the page — a sentence or two above the list. Leave it empty to say nothing.
3. A switch that puts the page on the website, or takes it off.

4. Publishing

This is the most important page in the handbook. It is also the shortest.

The Publish button sits in a bar at the bottom of the screen, and it follows you as you scroll. The bar tells you where things stand.

• "Everything is published" — your work is on the website. Nothing to do.
• "You have changes that are not live yet" — press Publish.

After you press it

You will see "Published. The website updates in about a minute." That minute is real. The website is rebuilt from scratch each time, which is why it is fast for visitors.

1. Press Publish.
2. Wait about a minute.
3. Press View the website and look at the page.
4. If it still looks old, reload the page in your browser.

Publishing several things at once

On the list screens — newsletters, notices, photos, the calendar — you can add three or four things and then press Publish once. That is quicker than publishing after each one, and it is how the screens are meant to be used.

5. Pages

Pages holds the ordinary pages of your website: Our School, Enrolment, Uniform, and so on. This is where most of your work will happen.

Opening a page

Click the name of the page. To come back to the list, press ← All pages in the top right.

Your home page is in the list too, marked Home page. It cannot be removed, because a website must have a front door.

The page name

The name is shown in the browser tab and in search results. It is also what the menu says, so renaming a page renames it in the menu too.

The picture across the top

Most pages have a wide photograph across the top, called the banner. A page with no picture simply gets a shorter header, which is a perfectly good look.

Choosing a picture

1. Press Choose a picture, or Change the picture if there is one already.
2. Pick a tab: Pictures on the website or Your photo albums.
3. Click the picture you want.

A wide picture works best. A tall one loses its top and bottom, because the banner is a wide, shallow strip.

Uploading your own

Press Upload a new one and choose a file from your computer. It joins the list, so you can use it on other pages later.

Moving the picture up and down

The banner is much wider than it is tall, so most of your photograph is cut away. The slider decides which part is kept.

1. Drag the slider left to keep more of the top of the photograph.
2. Drag it right to keep more of the bottom.
3. Stop when the faces are in the band.

Underneath, the screen says in words where you have landed — for example "Keeping above the middle (40%)".

Taking the picture off

Press Remove the picture. The page then has the shorter header. On your home page there is no Remove button, because the picture there is part of the design.

Making a new page

1. On the Pages list, press + New page.
2. Type what the page is called, for example School Council.
3. Press Make the page.
4. The page opens, empty. Write it, then press Publish.
5. Go to Navigation to put it in the menu. Until you do, the page exists but nothing points at it.

Removing a page

1. On the Pages list, press Remove beside the page.
2. It asks "Remove it?". Press Yes, remove to go ahead, or Keep it to stop.

6. Writing the words

You type straight into the finished page. What you see is what a parent will see. There is no separate preview to remember.

The row of buttons

Normal text

A dropdown. Choose Heading 2 to start a new section of the page. Headings also build the list of sections down the side of the page, automatically.

B, I, U, S

Bold, italic, underline and crossed out. Use bold sparingly — a page where everything is bold has nothing emphasised.

Line up

Left, middle or right. Left is right for almost everything.

Lists

A bullet list, or a numbered list for steps that happen in order.

Quote

Sets a passage apart with a line down the side.

Add a link

Turns the selected words into a link. See below.

Add a picture

Puts a photograph inside the words. See below.

Add a video

Puts a YouTube or Vimeo video in the page.

Add a table

Starts a table of three rows and three columns, with a heading row.

Add a form

Puts the enrolment enquiry form into the page.

Undo / Redo

Steps backwards and forwards through what you have typed. Ctrl+Z works too.

See the code

The far right button. Shows the page as plain text. You will not need this. If you open it by mistake, press it again to come back.

Adding a link

1. Select the words that should be the link.
2. Press the link button.
3. Type where it should go, then press Add link.

• For another page on your website, type the address part only: /enrolment.
• For another website, paste the whole thing: https://….

To take a link off, select the words, press the link button, clear the box and press Remove link.

Adding a picture

1. Click in the page where you want the picture.
2. Press the picture button.
3. Press From my computer, or paste a link to a picture.
4. Fill in what it shows. See the note below.
5. Set the Width in dots. 400 is a good size beside words; 800 is large.
6. Choose Where: on its own, in the middle, or with the text beside it.
7. Press Add picture.

Adding a video

1. Press the video button.
2. Paste the link you see in your browser when watching it. YouTube and Vimeo both work.
3. Say what the video is, for people using a screen reader.
4. Press Add video.

You can also press Upload a video file to put a video of your own on the website. Keep those short — a long video is a very large file.

Adding the enrolment form

1. Click in the page where the form should sit — usually at the bottom.
2. Press the form button.
3. Press Enrolment and tour enquiry.

7. Newsletters

Every newsletter you add stays on the website, grouped by year, so a family can always find an older one.

Adding one

1. Press + Add newsletter.
2. Pick the day it went out. The button on the website is named after that day, so pick the real date.
3. Press Upload a PDF and either drag the file in or press Choose a file.
4. Press Add.
5. Add any others the same way, then press Publish once.

If the newsletter already lives somewhere else on the web, press Paste a link instead and paste the address.

Changing or removing one

Press Edit beside it to change the date or swap the file. Press Remove to take it off the website.

8. News and notices

Short announcements: sports day has moved, the canteen is closed on Friday, the book week parade is on Wednesday. The newsletter carries the long version; this is the quick one.

Adding a notice

1. Press + Add notice.
2. Title — a short line, such as "Sports day has moved to Friday".
3. What it says — a sentence or two. Leave a blank line to start a new paragraph.
4. Starts showing — today, unless you are writing it in advance.
5. Stops showing — the day it stops being true. Leave it blank to keep it up until you remove it.
6. Tag — one short word beside the title, such as "Important" or "Reminder". Leave it empty for none.
7. Tick Also show this at the top of the home page for something nobody should miss.
8. Press Add, then Publish.

The two switches

• Show the news and notices page on the website — turn it off if the school has nothing to announce. The page leaves the website and the menu, and no notice is lost.
• Offer the school's Facebook posts on this page — if your school has a Facebook page, paste its address and visitors can see the posts here. Copy the address from the bar at the top of your browser when you are on the school's page, not a link to one post.

9. Photos

Photographs are kept in albums. One album per event works well.

Making an album and adding photographs

1. Press + New album.
2. Give it a name and the date of the event.
3. Add a sentence about it if you like. This is optional.
4. Drag your photographs into the dotted box, or press Choose photos and pick several at once.
5. Wait while they upload. It counts them off as it goes.
6. Press Publish.

Describing each photograph

Under each one is a box: What it shows. Fill it in for people who cannot see the picture. One short sentence is plenty.

Switching the page off

Show the photos page on the website takes the whole photos page off the site and out of the menu. Your albums are kept, and come back the moment you switch it on again.

10. Calendar

Term dates, assemblies, concerts and school closures.

Adding an event

1. Press + Add event.
2. What it is — for example "School photo day".
3. Day — the date. For something longer, tick This runs over more than one day and give the first and last day. The last day is the day it actually runs, not the day after.
4. Starts at and Finishes at — leave both empty for an all-day event. Leave the finish empty if there is no set end.
5. Where — the hall, the oval. Leave empty if it does not matter.
6. Anything else — a sentence shown under the event.
7. Press Add, then Publish.

Leaving weekends off

Leave Saturday and Sunday off the calendar shows Monday to Friday only, which gives the school days more room. Turn it off if you run weekend events.

Using the school's Outlook calendar

If the school keeps its events in Outlook already, the website can read them, so nobody types them twice.

1. In Outlook, publish the calendar and copy the link it gives you. It ends in .ics.
2. In the admin, under Address of the school's Outlook calendar, press Add it.
3. Paste the whole address and press Save.

11. Enrolment Form

This is the form a family fills in to ask about enrolling, or to book a tour. What they write is emailed to the school office.

Switching it on

The form is off until the school says where enquiries should go. Until then, any page that has the form shows the school's telephone number and email address instead.

1. Under Where enrolment enquiries are sent, press Add it.
2. Type the office email address.
3. Press Save.

This box saves on its own, straight away. It has no Publish button, because the address is never built into the website — it is kept privately, so no visitor can read it.

What happens to an enquiry

• It is emailed to that address as soon as somebody sends it.
• It is kept nowhere else — not on the website, and not in the admin.
• Pressing Reply in that email answers the family directly.
• If the email cannot be sent, the family is told so and asked to telephone, rather than being thanked for something that never arrived.

The questions

Every school starts with the same standard questions. The moment you change one, they become your school's own and stay as you leave them. A Use the standard questions button appears if you ever want to go back.

• The question — what the family sees, such as "First name".
• What kind of answer — a line of writing, a longer answer, an email address, a phone number, a date, or a choice.
• Must be answered — tick for the handful you really need. Everything else should be optional.
• + Add a question adds one at the bottom.

Where the form appears

Wherever a page asks for it. Open the page under Pages and press the form button where you want it to sit — see section 6.

12. Contact details

The contact page is built from what is here. Nobody types that page by hand, so the school only ever has one address and one phone number to keep right.

The details table

• What it is called — "Phone", "Principal", "Office hours".
• What it says — the value itself.
• Kind — plain words, a phone number, or an email address. Choosing the right kind makes it tappable on a phone, so a parent can ring you with one touch.

Drag a row by the grip on its left to move it. A row with nothing in it is simply left off the page, so an empty row does no harm.

The map

In Google Maps, find the school, choose Share, then Embed a map, and copy the address out of the code it gives you. Paste it in. Leave the box empty for no map.

Anything else to say

A short note under the table — office hours, where to park, how to reach the school out of hours.

13. Navigation

The menu across the top of every page.

How it works

• Each menu item is just the page it points at. It shows that page's name, so renaming a page renames the menu too.
• Change a number to move a top-level item along the bar.
• Drag the items underneath to reorder what drops down.

Adding something to the menu

1. Press + Add a menu item for a new item along the top, or + Add one under this to put it in a drop-down.
2. Choose the page from the dropdown.
3. Set its number if it should sit somewhere particular.
4. Press Publish.

Two helpful messages

• "3 pages are not in the menu" — just so you know. That is fine if you link to them another way.
• A page that is switched off — such as photos or notices — keeps its place here but is not drawn on the website, and comes back the moment the page is switched on again. You do not need to change anything here when that happens.

14. Branding

The name, the logo and the colours the whole site is built from. Most schools set this once and never touch it again.

The name

Shown beside the logo, in the browser tab and in search results.

The logo

Press Change the logo and choose a file. A PNG with a see-through background works best — a logo with a white box around it will show that box on every page.

The colours

Anything you leave out is worked out from the first colour — and so is the colour of the words on top, so nothing ever ends up unreadable.

If a colour you pick would make the words hard to read, the screen tells you and explains what it will do instead. Trust it.

15. Who can edit

Only some people see this tab. If you cannot see it, you do not need it — ask whoever looks after the website.

Adding somebody

1. Type their email address.
2. Press Add.

That is all. There is no password to set up or pass on — they sign in by asking for a code, like everyone else. Any email address will do; it does not have to be a school one.

Removing somebody

Press Remove. It takes effect straight away, not when their week runs out. If they are signed in at that moment, their very next click will fail.

16. If something looks wrong

17. Getting help

If something here does not match what you see, or you are stuck, ask. It is quicker than guessing, and no question about this website is a silly one.

This website was built and is looked after by Onsite IT Solutions.

When you ask, it helps to say

• Which tab you were on — Pages, Newsletters, and so on.
• Which page you were editing.
• What you pressed, and what happened.
• The exact words of any message on the screen. A photograph of the screen is perfect.