Columns Block
Display content in multiple columns, with blocks added to each column.
Quick links
Overview
In the Gutenberg editor, open the block section and click or drag the Columns Block to the editor area. Once the block appears in the editor, add your content in each column by clicking the square with the + sign.
Because of the limited width space, only certain Sana Blocks can be used inside of the Columns Block:
- Text Block
- Gallery Block
- Numbers Block
- Accordion Block
- Features Block
- Map Block
- Video Block
- Forms Block
Tip: If you need additional content options, feel free to use any available Gutenberg block.
Settings
If the settings side panel is not visible while working on your page or post, click on the Settings icon in the top left corner of the editor toolbar. Once opened you will see all the available options of the selected block, organized into collapsible tabs.
General
- Number of Columns – Display your content in two or three columns
- Columns Ratio – Choose between 50/50, 33/66, 66/33 and 33/33/33 (three column) ratios
- Column Gap – Add space between columns (px)
- Equal Height – Columns have equal height based on the content of the highest column
- Horizontal Padding – Add left and right padding to each column
- Padding – Add top and bottom block padding
- Background – Choose a solid color or a background image
Responsive
- Hide on Desktop – Block is visible on mobile, but not on desktop screens
- Hide on Mobile – Block is visible on desktop, but not on mobile screens
Tip: You can create two separate blocks for a section of your page and load each block on a different screen size.
Column
Within the Columns Block you will find the Column. This inner block behaves like a module that gives you more flexibility and control over your content. Add blocks within each column by clicking the square with the + sign.
Tip: Inner blocks are similar to regular blocks. Feel free to move them around, delete them or add new ones.
