The Columns (Blocks) container puts other page blocks side by side. Any block that can go on a page can go in a column: HTML, media, browse previews, sliders, a call to action, even tabs. It works like the Tabs (Blocks) container, with BlockSuite: Column dividers marking where each column starts.
Building columns
- Edit the page under Admin > Sites > (site) > Pages > (page).
- In the Add new block sidebar, click BlockSuite: Columns (Blocks). The block appears with an empty drop zone.
- Add a BlockSuite: Column block and drag it (by its handle) into the drop zone.
- Add the blocks for that column and drag them into the drop zone below the divider.
- Repeat steps 3 and 4 for each further column, then click Save.
Everything after a Column divider, up to the next divider or the end of the container, fills that column. Blocks placed before the first divider render above the columns, across their full width.
Container fields
| Field | Description |
|---|---|
| Heading | Optional <h2> above the columns. |
| Column widths | Equal, First column wider, Last column wider or Middle column wider (three columns). The wider column is twice as wide as the others. |
| Space between columns | Small, Medium or Large. |
| Vertical alignment | Equal height (the default): the columns share one height, and the last block in each column stretches to fill it, so blocks with a background, such as a Call to Action or a Search Box, end level. Top, Middle or Bottom: each column keeps its natural height and is aligned to the top, middle or bottom. |
The Column divider has an optional Note (editor only), shown in its header in the page editor (for example BlockSuite: Column — Left) and never on the public site.
Blocks inside a column start flush with the top of the column, and blocks stacked in one column are separated by an even gap.
Narrow screens
Columns sit side by side from 48em (about 768px) up, and stack in order on narrower screens, so put the most important column first.
Nesting and limits
Containers nest: a Columns (Blocks) container can go inside a tab or accordion section, and a Tabs (Blocks) container inside a column. A core Block group cannot be dropped into a container, as in core Omeka S. Removing the container removes the blocks inside it; drag them out first to keep them.