Help: how to do everything

Start here: your first site in 3 minutes

1. Click Get a free site at the top of any page.
2. Type the name you want in the address box. If it says free, it is yours. Your site will live at yourname.serveit.site.
3. Fill in a username, your email and a password, tick the box to agree to the rules, and press Make my site.
4. That is it: your site is already on the internet. You land straight in the editor so you can make it yours.

Tip: Free sites get 1 site, 100 MB of space and files up to 5 MB. You can make another site any time from My sites by picking a design under Make a new site. Press Preview on a design to see it full size first.

↑ Back to the list

Open the editor

1. Go to My sites.
2. Find your site and press the yellow Edit site button.
3. Your files are on the left, your page is in the middle, and on wide screens your live site is on the right.
4. At the top right of the page there is a switch: ✎ Visual and </> Code. Make sure Visual is lit up (yellow). That is the easy mode where you just click things and change them.

Tip: Lost? Every editor has a Help button at the top that opens this page in a new tab.

↑ Back to the list

Change words

1. In Visual mode, double-click the words you want to change. A blinking line appears.
2. Type your new words. Delete the old ones with Backspace.
3. A small bar appears above the text: use it for bold, italic, underline and more.
4. Click anywhere outside the text when you are done.
5. Press Save all (or Ctrl + S) to put it live.

↑ Back to the list

Change a link, button, email or phone link

Links are the things people click: words that go somewhere, buttons, "email me" and "call me" links. When you point at one in the editor it gets a yellow dashed line and says Double-click to edit this link.

1. Double-click the link or button. A box called Edit this link opens.
2. In Words people click, type what the link should say (for example Email me or Shop now).
3. Under Where should it go? press one of the buttons:
   • A website: paste the web address, like https://facebook.com/yourpage.
   • Send an email: type your email address. You can add a subject line too. When a visitor clicks it, their email app opens with your address already filled in.
   • Call a phone: type the phone number. On phones, tapping it starts a call.
   • A page on my site: pick one of your pages from the list.
   • A spot on this page: jump down the page to a section (like your contact form).
4. Tick Open in a new browser tab if you want your site to stay open behind it (good for links to other websites).
5. Press Save link. Then press Save all to put it live.

Tip: Prefer buttons? Click a link once and a small black toolbar appears above it. The chain icon on that toolbar opens the same box. To stop something being a link, open the box and press Remove link; the words stay.

↑ Back to the list

Change a picture

1. Double-click the picture. The picture library opens.
2. Drag a picture from your computer onto the library, or press the upload area and pick one.
3. Click the picture you want. It replaces the old one straight away.
4. Press Save all.

Tip: Big photos straight from a phone can be slow to load for visitors. Pictures around 1600 pixels wide are plenty.

↑ Back to the list

Add new things to a page

1. On the right side of the Visual editor there are four small icons at the top. Press the one that looks like a square with a plus (the blocks).
2. You now see blocks in groups: OHS banners and motion, ServeIt blocks (hero, three boxes, picture grid, contact and more), Basic (text, pictures, columns, video, map) and Forms.
3. Press and hold a block, drag it onto your page, and let go where you want it. A green line shows where it will land.
4. Change its words, links and pictures the same way as everything else.

↑ Back to the list

Move, copy or delete things

1. Click the thing once. A blue box goes around it and a small black toolbar appears.
2. On that toolbar: the arrow up picks the thing around it, the cross arrows let you drag it somewhere else, the two squares make a copy, and the bin deletes it.
3. Changed your mind? Press Ctrl + Z to undo.

Tip: Hard to grab something small? Open the layers icon (the stacked sheets, top right) to see everything on the page in a list, and click it there.

↑ Back to the list

Change colours, sizes and fonts

1. Click the thing you want to change.
2. On the right, press the paint brush icon.
3. Open a group (like Typography for fonts and text size, or Decorations for background colour and rounded corners) and change what you like. You see it change as you go.
4. Press Save all.

Tip: To change colours on every page at once, use a theme instead (next section).

↑ Back to the list

Change the whole look (themes)

1. In the editor, press Theme at the top. (Or go to My sites, press Settings on your site, and use the Theme box.)
2. Pick one of the 8 themes. Every page changes colours and fonts at once. Your words and pictures are not touched.
3. Do not like it? Pick another. It is saved straight away.

↑ Back to the list

Animations and banners

Anything on your page can move: slide in as people scroll, glow, float, have shiny text or a moving background. These are the same effects OHS Social uses.

1. Click the thing you want to animate.
2. On the right, press the gear icon (settings). Scroll down to the animation settings.
3. Pick from: Entrance (how it appears when people scroll to it), Loop (keeps moving), Text effect (rainbow, gold, chrome, glitch and more), Background (35 moving backgrounds like aurora, stars or snow), Speed and Delay (to make things arrive one after another).
4. Tick Animations off here to make just that thing hold still.

Make a banner

1. Open the blocks (square with a plus) and drag OHS banner onto your page.
2. Click the banner. Its settings open on the right by themselves.
3. Type your Headline and Second line, then play: three colours, angle, motion, an animated layer, patterns, size, font, corners and a headline effect.

Tip: To switch every animation on the site off at once, go to My sites, press Settings, and set Animations to Off for the whole site. Visitors who have asked their phone or computer for less motion never see anything move.

↑ Back to the list

Save and see it live

1. Press the yellow Save all button at the top (or Ctrl + S). A gold dot on a tab means that file has changes that are not saved yet.
2. Press View live to open your real site in a new tab.

Tip: In the page builder the button is called Save and publish. Same thing.

↑ Back to the list

Check how it looks on a phone

1. In the Visual editor, look at the top left of your page for three small icons: a computer, a tablet and a phone.
2. Press the phone. Your page shrinks to phone size so you can check it.
3. Press the computer to go back.

↑ Back to the list

Undo a mistake and get old versions back

1. Just did it? Press Ctrl + Z.
2. Already saved? Go to My sites, press Files on your site, and click the file (for example index.html).
3. Scroll down to History. The last 20 versions of the file are kept, newest first, including deleted files.
4. Press Look to see an old version, or Restore to put it back. What is there now is kept in history too, so you can never lose anything by restoring.

Tip: Press Backup on My sites any time to download your whole site as a zip file.

↑ Back to the list

Code view (for people who know HTML)

1. In the editor, press </> Code at the top right.
2. You are now in the same editor that powers VS Code, with colour-coded HTML, auto-complete and search.
3. Handy shortcuts: Ctrl+S saves, Ctrl+P finds a file, Shift+Alt+F tidies the code, and typing ul>li*3 then Tab writes the HTML for you.
4. Press ✎ Visual to go back. Both modes edit the same page, so you can switch back and forth.

↑ Back to the list

Add more pages

In the editor

1. Press the small page icon at the top of the file list on the left.
2. Type a name like about and press OK. You get about.html, which also works as yourname.serveit.site/about.
3. Link to it from another page: double-click a link and choose A page on my site.

In the page builder

1. Press + Page at the top and give it a name.
2. Press Page settings to set its address, the title shown in the browser tab, and the description Google shows.

↑ Back to the list

Set up your shop and sell with PayPal

1. Make a site with the Online store design (or use one you have).
2. On My sites, press Files on that site, then the Shop tab.
3. Under Shop settings, type the PayPal email that gets paid, pick your currency, and press Save. Until you do this, the Buy buttons stay switched off.
4. Press Add a product. Fill in the name, price, a one-line summary and the full product page (use the toolbar for headings, lists, links and pictures). Tick Digital for downloads so PayPal does not ask for a shipping address.
5. Press Save product. It shows in your shop straight away with a Buy with PayPal button.

Tip: PayPal emails you and the buyer for every sale. Buyers land on your thanks.html page afterwards. For downloads, email the file to the buyer from the PayPal sale email.

↑ Back to the list

Write blog posts and handle comments

1. Make a site with the Blog design.
2. On My sites, press Files, then the Blog tab, then Write a new post.
3. Give it a title, write it with the toolbar (headings, bold, lists, links, pictures and videos), tick Published and press Save post. Leave Published unticked to save a draft.
4. People can comment under each post. The first time someone comments, they get an email to confirm it is them; that locks their nickname to their email so nobody can pretend to be them. After that, their comments show up straight away.
5. See and remove comments in the Inbox tab.

↑ Back to the list

Forms and your Inbox

1. Contact, quote, RSVP and notify-me forms on your site send messages to the Inbox tab of that site.
2. You also get an email for every message, sent to your account email.
3. Press Delete on a message when you are done with it.

↑ Back to the list

Upload files, pictures and zips

1. In the editor, drag files from your computer anywhere onto the screen and let go. Or press the arrow-up icon above the file list.
2. Got a whole website in a zip file? Drop the zip. It unpacks itself into your site.
3. Right-click a file on the left to rename it, move it into a folder, copy its address, see its history or delete it.

Tip: Only website files are hosted: pages, styles, scripts, pictures, sound, video, fonts and documents. Server code like PHP is never run here (see Linked PHP below for that).

↑ Back to the list

Site settings, Top sites and linked PHP

1. On My sites, press Settings on your site.
2. Status: switch the site off for a while; visitors see a back-soon page.
3. List this site on Top sites: new sites are listed so people can find them, with a preview, the page title and the first paragraph. Untick it to hide your site from the list.
4. Theme and Animations: the whole-site switches from earlier.
5. Linked PHP: if you run PHP on another server, put its address here. Anything on your site under the path you pick (like /php/) is passed to it and the answer comes back, so your pages can use it.
6. Delete this site: type the name to confirm. This cannot be undone, so press Backup first.

↑ Back to the list

Plans, add-ons and OHS Social licenses

1. Go to Plans. Free is free for good.
2. A plan gives you more sites, space and bigger files. Press Subscribe with PayPal; it turns on the moment PayPal confirms, usually within a minute. Cancel any time inside PayPal.
3. Add-ons (an extra site, more space) are paid once and stay on your account.
4. An OHS Social license puts the whole OHS Social script on your own domain, billed monthly. After paying, download it from OHS Social in the menu. Each license runs one domain; move it there too.

↑ Back to the list

Keyboard shortcuts

On a Mac, use Cmd instead of Ctrl.

↑ Back to the list

Something is not working

I changed something but my live site looks the same.

Check you pressed Save all (no gold dots on the tabs). Then reload your site with Ctrl + F5 (on a phone, pull the page down).

My shop or blog says "Loading..." in the editor.

That is normal. Products and posts are filled in on the real site; press View live to see them.

The Buy buttons are greyed out.

Add your PayPal email in the Shop tab (see the shop steps).

Nothing moves on my site.

Check Settings → Animations is On, and the thing does not have Animations off here ticked. Some phones and computers are set to reduce motion; on those, nothing moves on purpose.

I cannot find the editor buttons.

Make sure ✎ Visual is lit up at the top right. The four icons on the right side are: paint brush (looks), gear (settings and animations), stacked sheets (layers) and square with a plus (blocks).

I deleted something by mistake.

Press Ctrl + Z, or get it back from History.

Still stuck?

Email God@OurHangoutSpace.com and say what you were trying to do. A screenshot helps.

↑ Back to the list