Seventh > Sections > Multicolumn

Multicolumn

The Multicolumn section creates a flexible multi-column layout where you can add cards or columns with customizable widths. Perfect for creating FAQ sections, contact forms, feature comparisons, or any content that benefits from a column-based layout.

What it does

This section displays content in multiple columns:

• Supports 1-6 columns on desktop
• Various column width combinations (equal or varied widths)
• Each column can contain cards or direct blocks
• Responsive column layouts for tablet and mobile
• Flexible alignment and spacing options

Section settings explained

Layout options

Desktop columns: Controls how many columns appear on desktop and their width distribution:

• Standard options:
  • 6 Columns - Six equal-width columns
  • 5 Columns - Five equal-width columns
  • 4 Columns - Four equal-width columns (default)
  • 3 Columns - Three equal-width columns
  • 2 Columns - Two equal-width columns
  • 1 Column - One full-width column
• 2 Column variations:
  • 34/66 - First column 34%, second column 66%
  • 66/34 - First column 66%, second column 34%
• 3 Column variations:
  • 50/25/25 - First column 50%, others 25% each
  • 25/50/25 - Middle column 50%, others 25% each
  • 25/25/50 - Last column 50%, others 25% each
• 4 Column variations:
  • 40/20/20/20 - First column 40%, others 20% each
  • 20/20/20/40 - Last column 40%, others 20% each
  • 20/30/30/20 - Middle columns 30%, outer columns 20%
  • 30/20/20/30 - Outer columns 30%, middle columns 20%

Tablet columns: Controls how many columns appear on tablet devices:

• 2 Columns - Two columns side by side
• 1 Column - One column (stacked)

Only appears when mobile columns is not 2

Mobile Columns: Controls how many columns appear on mobile devices:

• 2 Columns - Two columns side by side
• 1 Column - One column (stacked, default)

Only appears when desktop columns is not 1

Available blocks in multicolumn

The Multicolumn section can contain:

Column block:

• Column - A column container that can hold any blocks
• Text alignment options
• Inner blocks spacing control

Card blocks:

• Card - Regular card block
• Any other card types as available

Common use cases

FAQ

• Use 2 columns
• Left column: Questions in accordions
• Right column: Contact form
• Perfect for customer support pages

Feature comparison

• Use 3-4 columns
• Each column shows a different feature or plan
• Compare options side by side
• Great for product or service comparisons

Contact information

• Use 2-3 columns
• Each column shows different contact methods
• Include icons, text, and buttons
• Perfect for contact pages

Service highlights

• Use 3-4 columns
• Each column highlights a service
• Include icons, headings, and descriptions
• Great for service pages

Tips for Success

Column layout

• Equal widths - Use for balanced content
• Varied widths - Use to emphasize important content
• 2-3 Columns - Works well for most content
• Mobile - Always test on mobile devices

Content organization

• Consistent structure - Keep similar content in each column
• Visual balance - Balance text-heavy and image-heavy columns
• Spacing - Use grid gap to create visual separation

Column blocks

• Text alignment - Use consistent alignment across columns
• Block spacing - Adjust inner blocks spacing for readability
• Content amount - Keep content balanced across columns

Troubleshooting

Columns not aligning

Problem: Columns don't align properly.

Solutions:

1. Check alignment setting - Verify columns alignment setting
2. Content height - Columns with more content will be taller
3. Use stretch - Set alignment to "Stretch" for equal heights

Columns too narrow or wide

Problem: Column widths don't look right.

Solutions:

1. Check desktop columns - Verify column count setting
2. Column variations - Try different width variations
3. Content width - Adjust content within columns

Mobile display issues

Problem: Columns don't look good on mobile.

Solutions:

1. Mobile columns - Set to 1 column for mobile
2. Test responsively - Always preview on mobile devices
3. Content order - Consider content order on mobile