4. The editor in detail

Who: everyone who writes posts or pages. This chapter is a reference for the editor that you have already used in Posts.

The same editor is used for posts, pages and the Text block of the page builder. You write as you would in a word processor, and the CMS stores clean web code.

Three views of the same text

At the top of the editor are three tabs:

• Visual: what you see is what you write. Use this one most of the time.
• HTML: the text as web code, for people who know HTML. Anything the site does not allow (scripts, unknown tags, risky styles) is removed when you save.
• Preview: shows exactly what the site will output, after the CMS has cleaned the text.

The toolbar

Buttons that cannot be used at the moment are grey.

The Style panel

Press Style ▸ at the top right of the editor to show or hide the Style panel. It changes the look of the selected block: a paragraph, a heading, a picture or a table. The panel needs no CSS knowledge.

1. The Style button shows or hides the panel. The CMS remembers your choice.
2. The panel. The row of buttons at the top shows what is selected (here Image). What you find below depends on the block:
   • Text (paragraphs and headings): colour swatches, size, font, weight, line height, letter spacing, upper/lower case and alignment.
   • Image: Alt text (the description for people who cannot see the picture), Position (left, centre, right), Width, and space above and below.
   • Background & border: background colour, border, rounded corners and shadow.
   • Advanced CSS: for those who know CSS. Only safe properties are accepted; the rest are ignored and listed.
   • Reset styles removes all styling from the block.
3. The selected picture is outlined in the writing area. Click a picture to select it.

Tip: for a picture that sits beside the text, set Position to Left or Right and a Width such as 40%.

Tables

Press Table to insert a table of three rows and three columns, with a header row. Click a cell and type; press Tab to move to the next cell (pressing it in the last cell adds a new row).

1. The Table button inserts the table.
2. While the cursor is in a table, an extra bar appears: + Row and + Column add after the current one, − Row and − Column delete the current one, Header row switches the first row between heading and normal cells, and Delete table removes the whole table.
3. The table in the writing area.

The HTML and Preview views

1. The tabs. Here HTML is selected.
2. The source of the text. You can edit it directly. Remember that it is cleaned when you save: scripts, unknown tags and risky style properties (for example url() or position) are removed.

1. The tabs. Here Preview is selected.
2. The text as the site will show it. If something looks different from what you wrote in Visual, the CMS has removed or changed it for safety.

Excerpt and SEO

Below the writing area are two more panels:

1. Excerpt: a short summary that is shown in lists of posts. If you leave it empty, the first words of the text are used. It is also the default for the Meta description below.
2. SEO: Meta title is the title that search engines show (leave empty to use the post's title) and Meta description is the short text below it. About 160 characters work best; the counter below the field reminds you.

Posts written before: Markdown

Older content may have been written in Markdown, a simple text format. When you open it, the CMS converts it to rich text and tells you so. It is saved as rich text the next time you save.

Keyboard shortcuts