Problems in the editor

If your change is saved but not showing on the website, see "I changed it and the website didn't change".

Quick reference

A component is greyed out

Elements can only go inside certain other elements. A Text element can't sit directly in a Section. It needs a Row and a Column first. The left pane greys out anything the currently selected element won't take.

The fix is to select a different parent, not to look for a setting. Click the element you want to put it inside, often a Column, and the list lights up.

The breadcrumb along the top of the editor is the quickest way to move up the tree: it shows the chain of parents around whatever you have selected, and each one is clickable.

See Adding elements for which elements accept which.

You can't drop an element where you want it

Same rule, in drag form. Dragging onto a spot that won't accept the element simply doesn't take.

Two things that help:

• Drop onto the component tree in the left pane, not the page. The tree makes the nesting visible, so you can see exactly which element you're dropping into.
• Select the parent and double-click the component instead of dragging. Same result, no aim required.

A setting is missing from the right pane

Not every element has every setting. The Image element, for instance, has only border, border radius and box shadow in its display settings. Its width comes from the parent and its shape from the ratio property. That isn't a fault, and there's no way to switch a missing setting on.

Properties and display settings are different things. Display settings can be set per screen size and per state. Properties (a link action, an image ratio, an autoplay interval) hold one value for the whole element. If you're looking for a per-screen-size version of a property, it doesn't exist.

See The Display settings pane.

Text edits that seem to disappear

The text editor has its own tick button. That tick puts your text into the element. It does not save anything to the server. You still have to press Save in the top bar afterwards.

The signal that you have unsaved work is the number beside the Save button. See below. If you leave the page with that number showing, your browser asks whether you really want to leave. Say no, and press Save.

The pending-changes counter

Next to Save in the toolbar there's a number. It appears as soon as you've changed anything and counts everything waiting to be saved: elements you added, deleted, moved or restyled, display sets you changed, and text you edited.

• No number means nothing is waiting. Pressing Save then tells you No changes made rather than saving. That's the expected response, not an error.
• Leaving with a number showing triggers your browser's own "leave site?" warning. It's the browser's dialog, so it looks different in each one, and it can be dismissed by accident. Nothing is kept if you leave: unsaved work in the editor is not stored anywhere until you press Save.

Undo

The Undo and Redo buttons sit in the bottom toolbar of the template and page editor, next to Editor view. The keyboard does the same: Ctrl+Z undoes, Ctrl+Y or Ctrl+Shift+Z redoes, and on a Mac ⌘Z and ⌘⇧Z work too. It covers adding, deleting, moving, hiding and restyling elements, up to the last 50 steps.

• While you're typing in a text block, the shortcut undoes your typing, not the last element change. Click outside the text first, or use the buttons.
• Saving clears the history. After a save there is nothing left to undo. Your route back is then an older published snapshot. See Publishing.
• The blog article editor has no buttons. Use the keyboard there.

Copy and paste

The editor has four copy/paste actions.

They all share one clipboard. Copying an element and copying display settings write to the same place, so the last thing you copied is the only thing you have. Copy an element, then copy some display settings, and pasting the "element" is no longer possible. The clipboard now holds settings.

So: copy, then paste, then copy the next thing. Don't line two copies up.

The clipboard lives in your browser, so it survives moving to another page, another template or another language. Use it to fill in a new page language, which arrives empty: copy the elements from the language you already wrote, open the new one, paste.

Pasting can be refused, with The pasted element cannot be a child of this element. Same rule as the greyed-out components: select a parent that accepts it.

Pasting an element into a page flattens its styling. An element copied from a template carries its template-level styling; pasted onto a page, that styling becomes page-level styling on the new copy. It looks the same, and it is now editable on the page.

A change that only applies at one screen width

The Screen size control in the toolbar switches what you are editing, not just what you're looking at. If you were on the phone icon when you changed a padding, you changed the padding for phones only.

• Work on All for anything that should apply everywhere, then move down to the smaller widths to fix what needs fixing.
• A value set on a smaller width overrides All from that width down.

See Making it work on phones.

The same applies to the Light/Dark switch beside it, on sites with dark mode: it changes which colour you are editing. See Dark mode.

Elements hidden by the editor view

The Editor view control offers Split, Compact and Full.

If a pane, a checkbox or a control has vanished, check this first. Several things exist only in Split: the floating Items panel for accordions, tab bars and grids, the share-elements checkboxes, and the Light/Dark colour scheme switch.

Zoom is beside it: minus, plus and reset, in 5% steps between 70% and 120%. It only changes the canvas, never the website.

Adding an item to an accordion, tab bar or grid

Their child elements are not in the component list.

They're added from the floating Items panel that appears beside the selected element: Add item, and only in Split view. Copy and paste is the other route.

Styling their parts is a different control and needs no floating panel: select the element and use the Selected component of … dropdown under Design settings in the styling pane, which works in Compact as well. On a page, an element that came from the template says Override template design settings there instead. It's the same dropdown, and the change applies to this page only.

See Accordions, Tab bars and The grid.

An element disappeared

Three common causes, in order:

1. You gave it an "Out" animation. Every animation family has an Out variant that ends with the element invisible and leaves it there. See Animations.
2. It's hidden at this screen width. Check the Show on … toggles for the element.
3. You're on a page and the element belongs to the template. A page shows its template's frame around it, and the root element is marked in the left pane as belonging to the template. Open the template itself to change it. Managing your templates.

Custom code that doesn't seem to run

The editor never runs custom code. It draws the element as a purple box showing the first hundred characters of each tab. Preview is the only place you'll see it work.

If it doesn't work in preview either, the usual cause is that your script runs before ClickWhale's own is loaded. See Site-wide custom code, which explains the wrapper every example needs.

Still stuck?

Two people editing the same page. There's no locking and no warning. Whoever saves last overwrites the other. Agree who has it.

A dialog is in English on a Dutch site. A couple of dialogs are: the text editor's Properties dialog, and the notifications for copying and pasting display settings. Nothing is wrong; the labels just aren't translated.

Everything is slow or the page won't load. Reload the builder. If a save failed you'll have seen an error notification. The change is still in the editor until you get a successful save, so don't close the tab before trying again.