Section & Column Elements

Section and Column elements are layout containers that structure your popup content. They work together to create flexible, responsive layouts.

Overview

Element	Purpose	Contains
Section	Horizontal row	Columns only
Column	Vertical container	Any content element

How They Work Together

Section (Row)
├── Column 1
│   ├── Heading
│   └── Text
├── Column 2
│   ├── Image
│   └── Button
└── Column 3
    └── Form

Sections create horizontal rows. Columns divide that row vertically. Content elements go inside columns.

Section Element

Creating Sections

Method 1: Quick Add

1. Click + Add Row on the canvas
2. Choose column layout (1, 2, 3, or 4 columns)

Method 2: Widget Panel

1. Drag Section from Widgets
2. Choose preset or empty
3. Add columns manually

Section Settings

Layout

Setting	Description
Column Count	Number of columns
Column Layout	Preset width distributions
Gap	Space between columns
Alignment	Vertical alignment of columns

Column Layout Presets:

Preset	Distribution
Equal	50/50, 33/33/33, 25/25/25/25
1/3 + 2/3	Narrow + wide
2/3 + 1/3	Wide + narrow
1/4 + 3/4	Sidebar + main
Custom	Manual widths

Column Gap

Space between columns:

Gap: 24px

Common values: 16px, 24px, 32px

Vertical Alignment

Align columns vertically:

Option	Description
Top	Align to top
Center	Center vertically
Bottom	Align to bottom
Stretch	Equal height columns

Section Styling

Background

Section background options:

Type	Description
None	Transparent
Solid	Single color
Gradient	Color gradient
Image	Background image

Padding

Inner spacing:

Padding: 24px

Or individual sides:

Top: 32px
Right: 24px
Bottom: 32px
Left: 24px

Border & Radius

Add borders and rounded corners.

Section Width

Control how the section spans:

Option	Description
Full	100% width
Boxed	Max-width container
Custom	Specific width

Column Element

Column Settings

Width

Column width within section:

Method	Example
Percentage	50%, 33.33%
Fraction	1/2, 1/3
Fixed	300px
Auto	Content-based

Responsive Widths

Set different widths per device. Columns often stack (100% width) on mobile.

Content Alignment

Align content within column:

Horizontal:

Option	Description
Left	Align content left
Center	Center content
Right	Align content right

Vertical:

Option	Description
Top	Content at top
Center	Content centered
Bottom	Content at bottom

Column Styling

Background

Column-specific background (overrides section).

Padding

Inner spacing for column content.

Border

Column borders.

Column Visibility

Show/hide columns per device:

Desktop: Visible
Tablet: Visible
Mobile: Hidden

Responsive Behavior

Desktop to Mobile

Columns typically:

1. Desktop: Side by side
2. Tablet: May reduce to fewer columns
3. Mobile: Stack vertically (100% width each)

Configuring Responsive

For each breakpoint:

Device	Typical Setting
Desktop	Original layout
Tablet	Maybe 2-column max
Mobile	Single column (stacked)

Column Order

Change column order on mobile:

Desktop: [Image] [Text]
Mobile: [Text] [Image]

Use the order setting to rearrange.

Common Layouts

Two-Column Split

Section
├── Column (50%)
│   └── Content
└── Column (50%)
    └── Content

Sidebar Layout

Section
├── Column (30%)
│   └── Navigation
└── Column (70%)
    └── Main Content

Three-Column Features

Section
├── Column (33%)
│   ├── Icon
│   ├── Heading
│   └── Text
├── Column (33%)
│   ├── Icon
│   ├── Heading
│   └── Text
└── Column (33%)
    ├── Icon
    ├── Heading
    └── Text

Hero with Image

Section
├── Column (50%)
│   ├── Heading
│   ├── Text
│   └── Button
└── Column (50%)
    └── Image

Nesting Sections

You can nest sections for complex layouts:

Section (outer)
└── Column
    └── Section (inner)
        ├── Column
        └── Column

Caution

Avoid deep nesting. It complicates maintenance and can cause responsive issues.

Advanced Settings

HTML ID

Custom IDs for targeting:

#hero-section {
  min-height: 400px;
}

CSS Classes

Add custom classes.

Device Visibility

Show/hide entire section per device.

Best Practices

1. Plan your layout — Sketch structure before building
2. Mobile-first — Consider mobile stacking
3. Consistent gaps — Use same gap throughout
4. Limit nesting — Keep structure simple
5. Test all devices — Verify responsive behavior
6. Use alignment — Vertically center for polish

Troubleshooting

Columns not side by side:

• Check column widths total to 100%
• Verify no elements forcing overflow
• Check responsive settings

Content not centered:

• Set column content alignment
• Check element-level alignment
• Verify parent section alignment

Uneven heights:

• Use "Stretch" vertical alignment
• Set min-height on sections
• Check content differences

Related Elements

• Divider — Separate sections visually
• Spacer — Add space between sections
• All content elements go inside Columns