The Advanced - Two Columns and Advanced - Three Columns sections allow you to divide your page into multiple columns.
This is useful for creating layouts such as text beside images, side-by-side content, or multi-column sections.
Setting Column Widths
Each column has its own width field. You can enter values using standard CSS units such as percentages or pixels.
Examples:
- 200px – Fixed width column
- 30% 70% – Two columns split proportionally
- 50% 50% – Equal width columns
If one column is left blank, it will automatically fill the remaining space.
Default Behavior
If no widths are entered:
- Two-column sections default to 50% / 50%
- Three-column sections default to 33% / 33% / 33%
Column Settings
Each column can be styled independently with its own settings:
- Display: Width, padding, margin, and alignment
- Background: Background colors, images, and visual styling
- Animation: Optional animations on load or hover
- Borders and spacing: Control visual separation between columns
- Custom styling: Add CSS classes or inline styles
This allows each column to have its own appearance and behavior, independent of the other columns.
Working with Columns
- Each column can contain its own sections
- You can add text, images, or components inside each column
- Columns help organize content into clean, structured layouts
Tip: You can apply different background colors or animations to each column to create visually engaging layouts.
Responsive Behavior
Columns can be set to stack vertically on smaller screens.
- Stackable in Responsive Mode: When enabled, columns will stack for better mobile display
- When disabled, columns will remain side-by-side on smaller screens
Dividing Line
You can optionally add a dividing line between columns by selecting a color in the Dividing Line setting.
Tips
- Use percentages for flexible, responsive layouts
- Use pixels when you need fixed-width columns
- Enable stacking for better mobile usability
- Use columns to create balanced, easy-to-read layouts