Lesson 6: Layout Builder | Advanced

Lesson overview

Learn how to use Layout Builder on StFX.ca to customize page structure and design. This tutorial covers adding multi-column sections, inserting standard content blocks (WYSIWYG, colour cards, galleries), reordering elements via drag-and-drop, and saving your changes.

Topics include:

  • Accessing Layout Builder via the Layout tab
  • Understanding sections vs. blocks
  • Setting column layouts, width splits, and section labels
  • Inserting WYSIWYG, stacked colour card, and photo gallery blocks
  • Drag-and-drop block reordering and block removal
  • Saving layout changes
     
Step-by-step
  1. Access Layout Builder
    1. Open any basic page you wish to edit and click the Layout tab at the top.
    2. Note: Avoid modifying the top sections, as these manage your banner and main navigation menu.
  2. Add a New Section
    1. Click Add section where you want to split the page layout.
    2. Choose your column count (1 column for full width, or 2, 3, or 4 columns for side-by-side content).
    3. Set your width split (e.g., 50/50 or 33/33/33) and optionally add an organizational section label.
  3. Add Blocks to a Section
    1. Click Add block within your chosen section column.
    2. Select a block type from the tray (e.g., Basic block, Color card stacked, Gallery, Callout cards).
  4. Configure Block Content
    1. Basic Block: Fills via a standard WYSIWYG editor. Complete text formatting and click Add block.
    2. Colour Card Stacked: Fill in required Title, Body, and Link fields, select a background colour, and click Insert.
    3. Gallery Block: Choose multiple images from your library, click Insert media, and select Add block.
  5. Rearrange or Delete Blocks
    1. To move a block: Click and hold the crosshair icon on the block, then drag it to its new location.
    2. To delete a block: Hover over the top-right corner of the block, click the pencil icon, select Remove block, and confirm.
  6. Save Your Changes
    1. Scroll to the top of the page and click Save layout to publish your updates.


Test your knowledge

Test your understanding of the material covered in this lesson with the quick quiz below. Completing this knowledge check is entirely optional, but it's a great way to reinforce what you've learned before moving on to the next topic. Simply select your answers for each question and submit the form when you're done.

 

« Previous Lesson Next Lesson »

Contact

Marketing & Communications Department

1st Floor Xavier Hall
4545 Alumni Crescent
Antigonish NS B2G 2W5
Canada