Columns
Create responsive multi-column layouts with flexible width distributions
Create side-by-side layouts with 2-4 columns. Each column acts as a container for other blocks. Columns automatically stack on mobile devices.
Quick Reference
Column Count: 2, 3, or 4 columns
Add: Type
/columnsor use toolbarLayouts: Pre-set width distributions
Mobile: Auto-stacks vertically
Content: Any blocks can go inside columns
Understanding the Structure
The Columns block creates a Column Group. Inside this group, each Column acts as a container where you can place any other content block.
Important: Some blocks cannot be placed inside columns due to technical limitations:
Column Groups (no nested columns in columns)
Testimonial Groups
Slider Groups (slideshows)
Toggle Groups
Tables
Adding Columns
Method 1: Drag from Right Sidebar
Click the Columns category in the right sidebar
Find 2 Column, 3 Column, or 4 Column in the dropdown
Drag it onto your page where you want it
Click in each column to add content
Method 2: Slash Command
Type
/on empty lineType
columnsor select "Columns"Choose number of columns (2-4)
Column group appears
Click in each column to add content
Configuration Options
Column Count
Click column count icons in menubar:
2 columns: Most versatile
3 columns: Features/comparisons
4 columns: Simple items only
Layout Options
2 Columns:
50/50 - Equal width
30/70 - Sidebar + main
70/30 - Main + sidebar
20/80 - Narrow + wide
80/20 - Wide + narrow
3 Columns:
33/33/33 - Equal thirds
25/25/50 - Right emphasis
50/25/25 - Left emphasis
25/50/25 - Center focus
4 Columns:
25/25/25/25 - Equal quarters only
Switching Layouts
Select the column group
Click layout dropdown in menubar
Choose new distribution
Content automatically adjusts
Individual Column Styling
Each column can have its own visual settings. To access you need to click into a column and then click the dots icon at the top of any column:
Vertical Alignment
Top: Content starts at top (default)
Center: Content centers vertically
Bottom: Content aligns to bottom
Background Options
Background Color: Choose from palette
Background Opacity: 0-100% transparency
Background Image: Upload or select from stock photos - see image selection options
Column Swapping
Hover between columns to see swap icon
Click to switch column with neighbor to right
Quick way to reorder without rebuilding
Best Practices
Balance content: Keep column heights similar
Mobile-first: Columns stack left-to-right → top-to-bottom
Clear hierarchy: Most important content in first column
Consistent styling: Match formatting across columns
Avoid overcrowding: Leave breathing room
No nested columns: You cannot place a Columns block inside another column
Common Use Cases
Feature Grid (3 columns, equal)
Icon + heading + description in each
Perfect for product benefits
Text + Image (2 columns, 50/50)
Content on left, visual on right
Classic marketing layout
Sidebar Layout (2 columns, 70/30 or 30/70)
Main content + complementary info
Good for detailed pages
Stats Row (4 columns, equal)
Numbers + labels
Keep content minimal
Comparison (3 columns)
Plan names as headings
Features listed below
CTA buttons at bottom
Design Tips
Content Patterns
Keep similar structure in each column
Use consistent heading levels
Align CTAs horizontally
Background Usage
Use sparingly for emphasis
Maintain text contrast
Consider mobile stacking
Alignment Strategy
Center for varying content heights
Top for uniform content
Bottom for CTAs alignment
Mobile Considerations
First column = most important
Test stacking order
Ensure readability when stacked
Visual Balance
Similar heights look better
Use spacing to align elements
Don't overcrowd columns
Related Features
Card: Pre-styled containers for columns
Toggle Group: Expandable content in columns
Image: Visual elements for columns
Last updated