Reordering Blocks

Layout Builder allows you to reorder blocks within sections using drag-and-drop, giving you full control over the arrangement of content on the page.

How to Reorder Blocks

Drag and Drop

1. Open the Layout Builder interface by clicking the Layout tab on the content item.

2. Locate the block you want to move.

3. Click and hold the drag handle on the block (typically represented by a cross-arrow icon or grip dots).

4. Drag the block to its new position:

   • Within the same column: Move the block up or down to change its order relative to other blocks in the same column.

   • Between columns: Drag the block from one column to another within the same section.

   • Between sections: Drag the block from one section to a different section entirely.

5. Release the mouse button to drop the block in its new position.

6. Click Save layout to apply the changes.

Using the Move Button

Some Layout Builder configurations also provide a Move button as an alternative to drag and drop:

1. Click on the block you want to move.

2. Select Move from the contextual menu.

3. A dialog appears, allowing you to select the target section, region (column), and position.

4. Confirm the move.

5. Click Save layout to apply the changes.

This method is useful for precise placement or when drag and drop is difficult (e.g., on touch devices or when moving blocks a long distance on the page).

Reordering Considerations

• Visual hierarchy. Place the most important content blocks at the top of the page or section where visitors will see them first.

• Logical flow. Arrange blocks in a logical reading order, with the introduction first, details next, and calls to action at the end.

• Responsive behavior. Remember that multi-column layouts stack vertically on smaller screens. The order of blocks in each column determines their vertical order on mobile devices.

• Save before navigating away. Layout Builder changes are not persisted until you click Save layout. If you navigate away without saving, your changes will be lost.

Tips

• Use drag and drop for quick adjustments and the Move button for precise placement.

• If a page has many blocks, consider restructuring sections rather than just reordering blocks. Sometimes adding or removing sections provides a better result than rearranging blocks within existing sections.

• Preview the page on multiple screen sizes after reordering to ensure the content flow is logical on all devices.

• Coordinate with other editors if multiple people are working on the same page layout to avoid conflicting changes.