Editing

Move, group and arrange blocks

You can change the order of sections and blocks, move a block into another section, and wrap blocks in a Group to put them side by side. On Windows, use Ctrl wherever this article says ⌘, and Alt for ⌥.

Move a block up or down

  1. Open your project in Fantasma.
  2. Select the block or section. Select blocks inside a section shows how.
  3. In the toolbar over it, click the up arrow, Move up, or the down arrow, Move down. You can also press ↑ or ↓.

A block in a Group with the Row layout shows Move left and Move right instead, and moves with ← and →. The arrows move a block only among the blocks next to it, inside the same section or Group. A section moves among the other sections of the page.

Drag a block to another place

  1. In the left sidebar, under Sections, find the row of the block or section.
  2. Drag the row up or down. A line shows where it will land. To put a block inside a Group or another section, drop it among that Group's or section's own rows.
  3. Release to drop it there.

To copy instead of move, hold ⌥ when you release. With several rows selected, a drag moves all of them.

Put blocks in a Group

A Group holds other blocks and decides how they line up.

  1. Hold Shift and click each block you want to group on the canvas. They must sit directly inside the same section or the same Group: in the Sections list, their rows sit at the same indent under the same row. If they do not, Group is grayed out.
  2. Press ⌘ G, or right-click one of them and select Group. A new Group takes their place, with the blocks inside it.

To take blocks out of a Group, select the Group and press ⇧ ⌘ G, or right-click it and select Ungroup. The Group goes away and its blocks stay where the Group was. ⌘ Z undoes either change.

Lay blocks out in a row or a grid

  1. Select the Group.
  2. In the right sidebar, in the General group at the top, select a Layout: Stack, Row or Grid. The three buttons show icons; point at one to see its name.
A Group named Side image set to the Row layout, with an image on the left and the text on the right of the canvas

Layout

What you see

Its settings

Stack (default)

Blocks one under another.

Justification lines them up on the left, center or right, or stretches them to the full width. Reverse shows them from last to first.

Row

Blocks side by side.

Justification places them from left to right: on the left, in the center, on the right, or spread with space between. Alignment places them from top to bottom. Wrap, on by default, moves blocks to a new line when the row is full. Reverse shows them from last to first.

Grid

Blocks in equal columns.

Max columns, 2 to 16, default 2. Min column width, 3 to 38 rem, default 16: when the columns would get narrower than this, the grid uses fewer columns.

Justification and Alignment are buttons in the toolbar over the Group. Wrap and Reverse show under General once you change them; to reach them, click + next to General. Gap, under Spacing, sets the space between the blocks in every layout. The layout and its settings can differ on tablets and phones, so a row can turn into a stack on a phone. Change the design on tablets and phones shows how.

Duplicate or delete

  • To duplicate a block or a section, or several selected at once, select it and press ⌘ D. The copy appears right after it.
  • To delete it, press ⌫ or Delete, or right-click it and select Delete. To get it back, press ⌘ Z.

In a section that follows a pattern, each of these changes asks whether to Change only here or Edit pattern. How patterns work explains the choice.

To move a block somewhere the drag cannot reach, such as another page, cut and paste it. Copy, paste and copy styles shows how.

Was this article helpful?