Editing pages
Layout
Two blocks arrange other blocks on the page: the Section, for simple columns with a background, and the Grid Container, for free CSS grids.
Which block should I use?
| Need | Block |
|---|---|
| A page band with 1 to 4 columns, a background and spacing | Section |
| A grid over several rows, cells of different sizes, named areas | Grid Container |
In both cases, any block can be placed in a column or a cell.
Sections
Add a section
The library offers one entry per column layout:
- Section – 1 column, 2 columns, 3 columns, 4 columns;
- Section – 1/3 + 2/3 and Section – 2/3 + 1/3.
Choose the layout you want: the section is added with its columns already created.
Place blocks in the columns
- Click the + button in the header of a column to add a block.
- Or drag an existing block into the column. Inside a column, drag a block onto another one to reorder them.
Right-clicking a block placed in a column offers: Duplicate, Toggle visibility, Paste, Extract from cell (the block goes back to the main list) and Delete.
The columns themselves are changed in the grid editor of the section, as for a Grid Container.
Section settings
| Field | Values |
|---|---|
| Content width | Centered (limited width) or Full width. |
| Space above and below | None, Small, Medium, Large, Extra large. |
| Space between columns | Small, Medium, Large. |
| Vertical alignment of columns | Same height, Top, Center, Bottom. |
| Stack columns | Never, On mobile, On tablet and mobile, On small desktop, tablet and mobile. |
| Anchor | Name used to link to the section (#name): lowercase letters, digits and hyphens. |
Backgrounds
The Background field of the section offers:
- None, Light, Dark, Primary color: colors defined by the theme;
- Custom color: uses the Background color field;
- Image: uses the Background image field, with an Image overlay (None, Light, Dark) to keep the text readable.
The Light, Dark and Primary color backgrounds, the spacing sizes and the "Centered" width come from the theme CSS variables. See Block styles.
The Grid Container
The Grid Container builds a CSS Grid layout visually. Each cell is an area where you drop blocks.
Grid templates
The Grid Template field offers: Custom Grid, 2, 3 or 4 equal columns, Sidebar Left + Content, Content + Sidebar Right, and Holy Grail Layout.
With Custom Grid, you can type the CSS values directly: columns (grid-template-columns, for example 1fr 1fr), rows (grid-template-rows) and named areas (grid-template-areas).
The grid editor
In the block list, the container shows its grid. The ? button in its header opens the help. In short:
| To… | Do this… |
|---|---|
| Create a cell | Click and drag on the grid. |
| Resize a cell | Hover it and drag a handle on a side or a corner. The grid grows if needed. |
| Move a cell | Use the ⋮⋮ handle in its header. Dropped on an occupied cell, the two cells swap. |
| Delete a cell | Hold Shift and hover the cell, then click the delete button. Its content is deleted too. |
| Add a block | Click the button in the cell header, or drag a block from another cell. |
| Add or remove columns and rows | Use the + and − buttons around the grid. |
When cells overlap, hover a cell to bring it forward, or click it to keep it in front.
Spacing and alignment
The Spacing & Alignment section sets the space between cells (Grid Gap), the vertical and horizontal alignment of items, and the Container Min Height. Each cell can also have its own alignment, CSS classes and minimum height.
Style and mobile
- Container Styling: CSS classes, background color and inner spacing (
padding). - Responsive Behavior: the Stack on Mobile field stacks the cells one below the other under a screen width (576, 768, 992 or 1200 px), or never.