Column Block & Layouts
Introduction
A Column Block is like a shelf inside a section. It helps you organize content neatly side by side. Before you add text, images, buttons, or any other blocks, you should always put columns inside a section first.
Think of it like building shelves in a room: if you don’t have shelves, items would be scattered all over, and your page will look messy.
1. Adding a Column Block
- Drag a Section Block onto the canvas first.
- Inside that section, open the Components Panel.
- Look for Column Block and drag it into the section.
Important: You must add columns inside the section before adding any other content. This keeps your layout structured and easy to style.
2. Column Layout Options
a. 1 Column Layout
- A single column fills the whole section.
- Perfect for simple content like a centered image, a paragraph of text, or a hero banner.
b. 2 Columns Layout
- The section is split into two equal columns.
- Great for side-by-side content, like text on the left and an image on the right.
- Each column can hold different blocks, and you can style them individually.
c. 3 Columns Layout
- The section is divided into three columns.
- Useful for features, services, or product listings side by side.
- Keep content balanced in each column for a clean design.
3. Adding Blocks Inside Columns
After you’ve set up your columns:
- Drag blocks (text, images, buttons, videos, etc.) into each column.
- Columns act like separate spaces, keeping content organized and easy to move or style.
- You can mix and match blocks in different columns for dynamic layouts.
Tip: If you want equal spacing, make sure your blocks inside each column have similar sizes or use alignment options.
4. Styling Columns
Columns can be styled individually for a polished look:
- Background Colors: Highlight a specific column.
- Spacing: Adjust padding inside the column or margin outside.
- Borders & Shadows: Make columns pop or separate visually.
- Typography & Text Alignment: Change font style, size, or alignment inside the column.
Think of padding as the personal space inside the shelf, and margin as the space between shelves.
5. Tips for Using Column Blocks
- Always add columns before adding content.
- Use 1 column for simple content, 2 columns for comparison or paired content, 3 columns for lists or features.
- Keep content balanced—uneven blocks can look messy.
- Reuse column layouts for consistency across pages.