The visual editor

Pages and posts are written in the visual editor: the page in the middle looks the way visitors will see it, with your theme around it, and you change it in place. This page explains the parts of the editor, how to add and arrange blocks, how to style them, and how to publish. For statuses, reviews, revisions and addresses, see Pages, posts and other content.

The parts of the editor

When you open a page or post, the editor fills the screen:

• The bar at the top: back to the list, the title, the buttons that open the panels, Undo and Redo, the preview widths, the status with whether your work is Unsaved or Saved (for example "Draft · Saved 4 minutes ago"), Form, Preview, and the buttons that save (Save draft, Publish, Update and so on).
• The page in the middle: the real page. Click any text to type in it.
• The left panel: Add a block, Layers or Find and replace, one at a time.
• The right panel, with four tabs:
  • Block: the settings of the selected block.
  • Style: its colours, spacing, text size and border.
  • A tab named after the content type, such as Page or Post: when it goes live, its address, template, parent page, author, the Search and sharing fields and its revisions.
  • Checks: problems that make the page harder to use, such as an image without alt text.
• The line at the bottom: where the selected block sits (for example Page › Cover › Heading; click a name to select it) and the number of words.

A content type with fields of its own, such as a post's Excerpt, has a drawer under the page named after those fields. Open it to fill them in.

The buttons in the bar show their name and shortcut when you point at them. Press ? at any time to see every shortcut.

Prefer a form

Choose Form in the bar to edit the same page as a list of fields and blocks instead. Choose Visual editor to come back. Kestello remembers your choice in this browser.

Start a new page

1. Open Content → Pages and choose New page (or Content → Posts and New post).
2. Type the title in the bar at the top, where it says Add a title. The page shows it as you type.
3. On the empty page, choose one of:
   • Start writing: a block of text, ready for typing.
   • Add a block: pick the first block yourself.
   • Start from a layout: a whole page of sections from your theme, such as a home page or a contact page, that you then change. It appears when your theme has layouts.
4. Write. Press Enter on an empty line to start a new block, and Shift+Enter for a line break inside one.
5. Choose Save draft to keep it private, or Publish to put it on the site.

A new page opens on the Block tab, so you can write straight away. Its address is made from the title until the page is published; see Publishing.

Add blocks

Pages are made of blocks: a heading, a paragraph of text, an image, a row of buttons. There are three ways to add one:

• Add a block in the bar (the button with a plus) opens the library on the left. Click a block to add it after the selected block, or at the end of the page when nothing is selected. You can also drag it onto the page or into the layers. Type under Find a block or pattern to narrow the list.
• On an empty line of text, type /. A small list opens at the cursor; type to search, then press Enter.
• The plus button on the block toolbar adds a block after the selected one.

The library groups the blocks into Text, Media, Layout, Entries and data and Widgets. Plugins can add more.

Block	What it shows
Heading	A heading. Pick the level on the block toolbar. Heading 1 is usually the page title, so use the levels from 2 down.
Text	Paragraphs with bold, italic and links.
Button and Buttons	A link styled as a button; several side by side.
List and Icon list	A bulleted or numbered list; short points, each with an icon.
Quote	A quotation and who said it.
Code	Text shown exactly as typed, in a fixed-width font.
Details	A summary visitors open to read more. Good for questions and answers.
Table	Rows and columns. Paste from a spreadsheet to fill it.
Image and Gallery	One image from the media library; several in a grid that visitors can open larger.
Video	A video from the media library, YouTube or Vimeo. YouTube and Vimeo load only when someone presses play.
Cover	Blocks over an image or a colour, such as a heading and a button at the top of a page.
Media and text	An image beside text. They stack on phones.
Group, Columns and Tabs	Blocks that hold other blocks: together, side by side, or in panels shown one at a time.
Space and Separator	Empty space; a line between two parts of the page.
Entry list and Entry field	A list of entries, such as the six newest posts or the entries that link to this one (see Links between entries); one field of the entry, such as its date.
Menu, Search box, Social links, Form	A menu of your theme, a search field, links to your profiles, one of your forms.

Patterns

Patterns are ready-made groups of blocks from your theme, such as a pricing table or a row of testimonials. Choose Browse in the library (it shows how many there are, such as Browse 24 patterns) to see them by category, with a preview of each. A pattern marked synced stays linked to the original: when someone changes the pattern under Appearance → Templates, every page that uses it changes too. Any other pattern is copied in and you can change it freely.

A layout is a whole page. Choosing one for a page that already has blocks asks first: Replace them swaps the page for the layout, Add after them puts it at the end.

Select and change a block

Click a block on the page to select it. A blue outline shows it, the Block tab shows its settings and a toolbar appears next to it. The toolbar moves out of the way of the text you are reading; to keep it in one place instead, open Options (the three dots at the right of the bar) and turn on Block toolbar at the top.

From left to right, the block toolbar offers:

• Select the block that holds this one (shown when there is one).
• Drag to move: hold and drag the block somewhere else. Drop it at the side of another block to put the two side by side in columns.
• The block's name. Click it to Turn into another kind of block, for example text into a heading or a list. The words come along.
• Move up and Move down.
• Settings of the block itself, such as the heading level and the alignment.
• Bold, Italic, Link and More formatting (strikethrough, inline code, highlight, subscript, superscript, Clear formatting). They work while you type in the text.
• Add a block after.
• More: Copy, Paste after, Duplicate, Add before, Add after, Copy styles, Paste styles, Put in a group, Ungroup and Remove.

Press Esc to clear the selection; the right panel then shows the page's own settings. With several blocks selected, Esc goes back to one.

Layers

Layers (the button with lines in the bar, or Alt+Shift+O) lists every block in order, with the blocks inside others indented below them. Each row shows the block's kind and its first words, so you can tell the blocks apart. Use it to select a block that is hard to click on the page, such as an empty one or one inside a column.

In the layers:

• The arrow keys move between blocks, and the left arrow selects the block that holds the current one.
• Alt with the up or down arrow moves the block.
• Delete or Backspace removes it.
• Drag a row to move the block.
• Hold Shift and press an arrow, or hold Shift or Ctrl (Cmd on a Mac) and click, to select several blocks. You can then Put in a group, Duplicate or Remove them together.

A row with an eye icon is hidden on some screens or for some visitors; see Choose who sees a block.

Undo

Undo and Redo in the bar (Ctrl+Z and Ctrl+Shift+Z, or Cmd on a Mac) step back and forward through every change. After a step you may regret, such as removing a block, adding a layout or Replace all, a message at the bottom right offers Undo for a few seconds.

Style a block

The Style tab changes how the selected block looks, without touching the theme:

• Colour: Text and Background, from your theme's colours or any colour you pick.
• Spacing: Padding (on every side, or Different padding per side), Space above and Space below.
• Type: Text size.
• Border: Line, Line width, Line colour and Corners.

Each block offers only the styles that suit it. A block with This block has no style settings takes its look from the theme.

Styles per screen size

At the top of the tab, Phone, Tablet and Desktop choose which screen you are styling, and the page switches to that width. Styles set on Desktop apply on every screen size. Styles set on Phone or Tablet apply on that size only, for example less padding on phones.

Clear the phone styles (or tablet) removes the styles of one size; Clear every style of this block removes them all.

To give several blocks the same look, style one, choose Copy styles in its More menu, select the others and choose Paste styles.

Choose who sees a block

The Block tab ends with Who sees this block:

• Visitors: Everyone, Only visitors who are not signed in or Only signed-in members.
• Screens: turn the block off for Phones, Tablets or Larger screens. A block cannot be hidden on all three; remove it instead.
• Show from and Hide after: a date and time window, handy for a notice about a sale or a closure.

Blocks shown only to signed-in members, or only within a date window, are left out of site search.

Preview widths

The three buttons in the middle of the bar show the page as on a phone (390 pixels wide), a tablet (820 pixels) or a full screen. Above the page, a line such as "Phone, 390 px wide" says which width you are looking at. The width also chooses which screen size the Style tab changes.

Find and replace

Find and replace (the magnifying glass, or Ctrl+Shift+F) searches the words on the page: headings, text, lists, tables and buttons.

1. Type under Find. The panel lists each block with a match, the words found marked. Click one to go to that block.
2. Type the new words under Replace with.
3. Choose the replace button next to one block (Replace in this block), or Replace all.

Turn on Match upper and lower case to find "Spring" but not "spring".

Details, outline and checks

The i button in the bar opens Details and outline: the number of words, characters, paragraphs and blocks, the reading time, and the page's headings in order. Click a heading in the outline to go to it.

The Checks tab looks at the page as visitors get it, theme included, for problems such as an image without alt text, a link with no text, an empty heading or heading levels that skip one (from Heading 2 to Heading 4). Choose Show next to a problem to select the block. Check again runs the checks after you change something.

Publishing

The buttons at the right of the bar save the page. What they say depends on its status: Save draft and Publish for a draft, Update for a published page, Schedule when a time is set. Ctrl+S (Cmd+S on a Mac) saves too. Next to them, the bar says Unsaved while you have changes and Saved after.

The tab named after the content type (Page for a page) starts with a short timetable:

• Goes live: When you publish, or the time it is set to go live. A time still to come is marked in yellow, and Publish becomes Schedule. Choose Set a time (or Change) to pick one. Publish when I choose Publish removes it again.
• Address: the page's address on the site. It follows the title until the page is published. Choose Change to type the last part yourself.
• Created and Version, once the page has been saved.

Below it are the page's Template, parent page, Page order and author, the Search and sharing fields and Revisions. Actions the bar does not have, such as Unpublish (back to draft), are here too.

Templates

Template decides how the page is laid out around your blocks: a header, a footer, a sidebar. The page in the editor changes as soon as you choose another template, before you save. Templates are made under Appearance → Templates; see Themes and design.

Laptops and small screens

On a screen narrower than about 1,180 pixels, only one side panel is open at a time, so the page keeps its room: opening Settings closes Layers, and the other way round. Hide both panels in Options (or Ctrl+Shift+\) gives the page the whole width.

If something goes wrong

"Not available: its plugin may be off." The page uses a block from a plugin that is turned off. The block is kept, but not shown on the site. Turn the plugin back on under Plugins and it returns.

"This page's template has no Entry content block, so these blocks go after everything in the template, for visitors too." The chosen template has no place for the page's own blocks, so they appear after it. Choose Choose another template, or ask whoever designs the site to add the Entry content block to that template.

A block cannot be changed or moved. The block came from a layout whose designer locked it (Locked for editors in the layers). People who may design can still change it; see Themes and design.

"The block list could not be loaded." The editor could not reach the site. Check your connection and choose Try again.

"Someone else saved this while you were editing." See When two people edit at once.

Related pages

• Pages, posts and other content: statuses, reviews, scheduling, revisions and addresses.
• Media library: the images and files your blocks use.
• Themes and design: templates, parts and patterns.
• Forms: build a form and put it on a page with the Form block.