Components: Columns

Columns help you control your page layout by dividing sections into smaller areas where you can place content. They enable you to arrange text, images, and other components next to each other, giving your page structure and balance.

Key details

• Placement: Columns sit inside sections and define the structure for your content.
• Layout: Each section can include one to four columns, arranged side by side.
  • You can divide your content into more than 4 columns, using box components. 
• Components: Text, images, videos, and other elements can only be placed inside columns.
• Sizing: The width of a column controls the maximum size of the components inside it.

Add columns to pages

In your Page Builder:

1. Add a section.
2. Go to Components > Columns in the left-side menu.
3. Choose a column layout.
4. Drag it into your section and drop it over a “Drop Here” area when it turns green.
5. Repeat as needed to add different column layouts to other sections.

Default column width layouts

These presets determine how columns divide space within a section.

One column:

• 100% width
• 66% width
• 50% width

Two columns:

• 50% - 50%
• 33% - 66%
• 66% - 33%

Three columns:

• 33% - 33% - 33%
• 50% - 25% - 25%
• 25% - 25% - 50%
• 25% - 50% - 25%

Four columns:

• 25% - 25% - 25% - 25%

Edit columns

Toggle Edit columns ON in the top builder menu to modify the layout.

When column editing is active:

• Blue outlines mark individual columns.
• A green outline marks the row containing those columns.
• Each level (column and row) has its own customization options.

Column customization

• Drag (#1): Move the column to a different spot.
• Edit (#2): Open styling options such as padding, borders, background, corner radius, and alignment.

Row customization

• Column width (#3): Adjust the width of columns within the row. Drag the column width handles to expand or contract the column.

• Drag (#4): Move the entire row to another position within or across sections.
• Clone (#5): Duplicate the row.
• Edit (#6): Apply styling options (similar to column editing) to the whole row.
• Delete (#7): Remove the row.