Getting started with ClickWhale

ClickWhale is a website builder. You design your site visually, dragging blocks onto a page and styling them, and ClickWhale turns that into a real website, hosted and served for you. There's no code to write, and nothing to install.

Basic terms

Saving and publishing are two different actions, and you need both.

The order things happen in

1. Make a template. Under Manage → Templates. This is where you build the parts that repeat on every page: the header with your logo, the menu, the footer. Most websites need one or two templates in total, not one per page.
2. Make pages from it. Under Manage → Pages. When you add a page you give it a name, an address, and the template it should use. Everything in the template shows up automatically; you fill in the part that's specific to that page.
3. Fill the pages. Click a page to open the editor. Drag elements in from the left, type into them, style them on the right.
4. Set up the menu. Under Manage → Menus. Pages don't appear in your navigation on their own. You add them to a menu, and then place that menu on your template.
5. Publish. Top right, the Publish button in the black bar. Until you do this, everything you've made lives only in the builder.

You'll go round steps 3 to 5 many times. Steps 1 and 2 you'll do far less often than you expect.

Getting around the builder

The black bar at the top is always there:

• Manage: everything about the structure of your site: templates, pages, design, media, menus, languages, settings.
• Modules: the extras: forms, publications (your blog), members.
• Publish: the publish screen.
• Your website's name: a dropdown with Show preview, Open live website and, if you manage more than one site, Switch website.
• Your own name: a dropdown to the account portal and to log out.
• The two flags at the far right switch the builder's own language between English and Dutch. They don't change your website, only the buttons and labels you see.

The grey menu on the left changes depending on where you are. Under Manage it lists Templates, Pages, Design, Media, Menus, Languages, Settings and Custom code. Under Modules it lists the modules you've switched on.

Where to change the design

Colours, fonts and reusable styling are not set per element. They're set once, centrally, under Manage → Design:

• Colors: your brand colours: a palette to pick from, and function colours the whole website refers to by name, so a rebrand is one afternoon instead of one week.
• External fonts: pick a font from Google Fonts and it becomes available in your text settings.
• Elements: display sets: named bundles of styling you attach to many elements at once. Style your button once, and every button on the site follows.

You can style a single element directly in the editor, and sometimes that's exactly right. But if you find yourself making the same change to the tenth button, stop and use a display set instead.

Save, preview, publish

Three different things, in increasing order of "who can see this":

1. Save (the button at the top of the editor's right-hand panel) stores your work. The number next to it counts your unsaved changes. If you leave the editor without saving, those changes are gone.
2. Show preview (in the website-name dropdown) opens your site at a temporary address, exactly as it will look, without touching the live site. Use it to check your work, and to show a colleague before anything is final.
3. Publish makes a snapshot of the whole website and points your domain at it. Only now is anything visible to the public.

Settings need publishing too. Turning on the cookie bar, adding an analytics ID, choosing a 404 page, none of it reaches your visitors until you publish. If you've changed a setting and nothing happened on the live site, this is almost always why.

Your first steps

1. Open Manage → Design → Colors and set your brand colours. Doing this first saves re-doing it later.
2. Open Manage → Templates, open the template that's there, and put your logo in the header.
3. Open Manage → Pages and look at the pages you have. Open the home page and change the headline to something of yours.
4. Press Save, then Show preview. Look at it.
5. Press Publish. Open your live website.

Where to go next