Your own CSS classes on page elements

A page element is a named look you write in CSS once and then apply to individual paragraphs, headings, list items or images from inside the text editor, without touching code again. You write the rule, everyone else picks it from a list by name.

Try a display set first. Most of what people reach for this feature for (headings all one colour, buttons all one shape) is a display set, which is visual, applies automatically and can be changed by anyone. Page elements are for the leftovers: a look the builder can't express, or a variant only some paragraphs should have.

What one is made of

Making one

1. Go to Manage → Custom code → Page elements.
2. Under New, type a Name and click Create. The page element opens.
3. Fill in CSS class name and Used on, and click Save in that section.
4. Write your CSS in the Custom element code editor and click Save underneath it.

The two sections have their own Save buttons. Save both.

Write complete rules, selector and all. The field is not a rule body; whatever you type is added to your website's stylesheet as-is. So:

.intro-paragraph {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #444;
}

Not just font-size: 1.25rem;. You can add as many rules as you like in one page element. A rule for the class and rules for what's inside it, as long as they all use the class you named.

"Used on" decides where it appears

This field is a comma-separated list of HTML tag names:

Three rules for that field:

• It can't be empty. An empty Used on doesn't mean "everywhere". It means the style is offered on nothing at all, and you'll never find it in the editor.
• Lower case, no spaces. p,h2 works; P, H2 does not.
• Tag names, not classes. p, not .paragraph or Text content.

Applying it to something

Page elements live in the text editor, not in the component list. You apply them to a block of text, not to an element of the page.

1. Double-click the text you want to style. The Text editor tab opens with the cursor in it.
2. Look at the bottom of the Text editor tab in the right column. A row of small purple tag labels shows the tags of the block your cursor is in: p, or h2, or ul li.
3. Click the tag you want to style. A Properties window opens.
4. Its first tab lists every page element whose Used on includes that tag. Switch the one you want on and click Apply.
5. Click the tick to finish editing, then Save changes in the editor toolbar.

If the window says No styles available for this tag, that tag isn't in any page element's Used on. Go back and add it.

The Properties window comes from the text editor component and is always in English, whatever language the rest of ClickWhale is in. The style names in it are the ones you typed.

Seeing the result

Page-element CSS is applied inside the builder as well as on the live site, so most changes show up in the editor canvas after a reload.

Two things behave differently:

• @media rules don't apply in the builder. They work perfectly on the live site. Check them with Preview and the screen-size buttons rather than in the canvas.
• A style you just created needs the editor reloaded before it appears in the Properties list.

And as always, the live site only changes when you publish. See Saving, previewing and publishing.

Deleting one

The bin icon on the Page elements list removes it. The CSS stops being published, so anything still carrying that class simply loses the look. The class stays in the text, harmlessly, until someone switches it off in the Properties window.

Page elements or a display set?

If a display set can do it, a display set is the better answer, because the next person to edit the site can change it without knowing CSS. Reach for a page element when it can't: a two-column paragraph, a first-letter drop cap, a gradient on the text itself.

Common issues