PageTree demo by

Editing pages

Working with blocks

A page is a list of blocks. This page explains how to add, edit, reorder, copy and hide them.

The block library

Click Add Component to open the library. Blocks are grouped there (by the plugin that provides them, or by the category of a custom block). To find a block:

  • type a few letters in the Search... field at the bottom of the list;
  • or expand and collapse the groups by clicking their title.

The library contains the built-in blocks, the CMS components of your plugins and the blocks added by your developers.

Add a block

To add a block:

  1. Click Add Component.
  2. Click the block you want: it is added to the page.

You can also drag a block from the library into the list. An empty page shows a Drop here area: click it to open the library, or drop a block on it.

Edit a block

  1. Double-click the block in the list, click its pencil icon, or click the block in the preview.
  2. Fill in its form. The preview updates.
  3. Click Back to Components (Ctrl+Q) to return to the list.
  4. Save the page.

Reorder blocks

Drag a block by its handle (⋮⋮) and drop it at its new position. A line shows where it will be inserted.

Section and Grid Container blocks are moved by their header. To place a block in a column or a cell, see Layout.

Block actions

Each block in the list has an icon bar. Right-clicking a block also opens a menu:

ActionWhere to find it
EditPencil icon, double-click
DuplicateCopy icon, or right-click → Duplicate this block
Hide / showEye icon, or right-click → Hide this block / Show this block
Paste above / belowArrow icons, or right-click → Paste above this block / Paste below this block
Paste at the endRight-click → Paste here
DeleteTrash icon, shown while you hold Shift over the block, or right-click → Delete Component

Select several blocks

Tick the checkbox on the left of each block, or hold Ctrl and click several blocks. You can then copy them with Copy selected components or delete them with Delete Component, in the list toolbar.

Copy and paste

Copied blocks go through the browser clipboard. You can therefore paste them into another page, even one open in another tab.

To copy blocks from one page to another:

  1. In the source page, click Copy selected components (after selecting with Ctrl + click) or Copy all components.
  2. Open the target page.
  3. Click Paste all components, or right-click a block and choose where to paste.
  4. Save the target page.

The browser may ask for permission to read the clipboard. If you deny it, pasting fails with the message "Unable to access clipboard".

Hide a block without deleting it

Each block has an Displayed? checkbox, added automatically at the end of its form. When it is unchecked, the block:

  • stays in the list and in the editor preview;
  • is no longer displayed on the website.

The eye icon in the list and the right-click menu change the same value. This is handy to prepare content or to temporarily remove an offer.

Unavailable block

If a page contains a block whose type no longer exists (plugin uninstalled, block deleted), this block is skipped when rendering and can no longer be edited. In the list, it is flagged with a prohibition icon and only offers deletion. The page data is kept: the block comes back if its type becomes available again.