Containers & Columns
Every Falcon Builder layout starts with Containers, which hold Columns, which hold Elements.
Containers
A container is a full-width row on your page. Click + Add Container to open the Column Select modal.
Container Settings
Right-click the container toolbar or click the gear icon:
Layout:
- Background color, gradient, or image
- Background position and size
- Min height
- Padding (top, right, bottom, left)
- Margin
Advanced:
- CSS Class, CSS ID
- Custom CSS
- Animation on scroll (fade in, slide up, zoom)
- Sticky (sticks to top on scroll)
Visibility:
- Show/hide on Desktop, Tablet, Mobile
Container Toolbar Actions
| Icon | Action |
|---|---|
| ↕ | Drag to reorder the container |
| ✏️ | Edit container settings |
| 📋 | Duplicate container |
| 📚 | Save to Library |
| 🌐 | Save as Global Section |
| 🗑️ | Delete container |
Column Layouts
When adding a container, choose from preset column layouts:
| Layout | Description |
|---|---|
1/1 | Single full-width column |
1/2 + 1/2 | Two equal columns |
1/3 + 2/3 | Narrow + wide |
2/3 + 1/3 | Wide + narrow |
1/3 + 1/3 + 1/3 | Three equal columns |
1/4 + 3/4 | Sidebar + main |
1/4 + 1/4 + 1/4 + 1/4 | Four equal columns |
More layouts are available in the modal. Custom ratios can be set in column settings.
Columns
Each column inside a container holds one or more elements.
Column Settings
Click the column toolbar:
Size:
- Width percentage (responsive: desktop, tablet, mobile)
- Padding
Background:
- Background color or image
Vertical Align:
- Top, Middle, Bottom, Stretch
Advanced:
- CSS Class, CSS ID
- Custom CSS
Responsive Column Widths
Each column can have different widths per device:
| Device | Example |
|---|---|
| Desktop | 1/3 (33%) |
| Tablet | 1/2 (50%) |
| Mobile | 1/1 (100%) |
This makes your layout naturally stack on mobile.
Adding Elements to Columns
Click the + button inside a column to open the Element Select modal. Choose an element type and it's inserted into the column.
Elements can be dragged within a column or between columns.
Responsive Preview
Use the device buttons at the top of the builder to preview your layout on:
- 🖥 Desktop
- 📱 Tablet
- 📲 Mobile
The canvas resizes and shows how the layout looks on each device.
Saving & Publishing
- Autosave runs every 30 seconds — your work is never lost
- Click Save Draft to save without publishing
- Click Publish / Update to make changes live
- View Revisions to restore any previous version