Column
A responsive column inside a row, with fine-grained control over width, offset, alignment and order across breakpoints. The column width itself (twelfths plus a single one-fifth 1_5) is set from the builder's width tiles; the remaining controls live across the Layout, Styling, Animations, and Advanced tabs.
A column renders as an outer <div> (the grid column, carrying width / offset / order / alignment) and — only when a styling control needs it — an inner "card" <div> (carrying Box Preset, Background, Spacing and Full Height). Each setting is routed to the leanest layer:
- Grid / flex utility class — width, offset, order, direction and alignment toggle classes defined once in the builder's
frontend-grid.css. - Generated preset class — Gap, Box Preset, palette Background and Spacing are generated by
css-tokens.phpinto the shared, cachedpresets-{hash}.css. - Inline
style=— reserved for a custom-hex Background, Max Width, and (from the Advanced tab) Position / Z-Index.
The Animations and Advanced tabs are shared, cross-shortcode controls and are covered on the Common controls page. Rows below are in the same order as the actual Layout and Styling tabs. Hover any cell for more detail.
Most visitors are on a phone, so design the narrow layout first, then add columns for wider screens. Use the responsive controls (which set CSS media queries) rather than fixed pixel widths, so columns reflow to a single column on mobile instead of overflowing. MDN: media queries
Live demo
▶ See the Column live on the demos site — an interactive example you can click through.
Layout
| Option | atts key | Control | Default | Responsive | Renders as | Stylesheet |
|---|---|---|---|---|---|---|
| Content Alignment | content_h | Responsive image-picker | Default | Yes | <div class="… d-flex align-items-center"> | frontend-grid.css |
| Content Direction | content_direction | Image-picker | Stacked | No | <div class="… d-flex flex-row flex-wrap"> | frontend-grid.css |
| Content Vertical Alignment | content_v | Responsive image-picker | Default | Yes | <div class="… justify-content-center h-100"> | frontend-grid.css |
| Full Height | full_height | Switch | No | No | <div class="… h-100"> (inner) | frontend-grid.css |
| Gap | content_gap | Responsive short-select | None | Yes | <div class="… sc-cgap-3 sc-cgap-md-4"> | presets-{hash}.css |
| Column Vertical Alignment | align_self | Responsive image-picker | Default (stretch) | Yes | <div class="fw-col-6 align-self-center"> | frontend-grid.css |
| Width Override | col_width | Responsive image-picker | Default | Yes | <div class="fw-col-12 fw-col-md-6 fw-col-lg-4"> | frontend-grid.css |
| Max Width | max_width | Unit-input | None | No | <div class="fw-col" style="max-width:640px"> | Inline style |
| Offset | col_offset | Responsive image-picker | None | Yes | <div class="fw-col-6 fw-offset-2 fw-offset-lg-0"> | frontend-grid.css |
| Reverse Order | content_order | Responsive switch | Default | Yes | <div class="… d-flex flex-column-reverse"> | frontend-grid.css |
| Order | mobile_order | Responsive short-select | Default | Yes | <div class="fw-col-6 fw-order-first fw-order-md-0"> | frontend-grid.css |
- Content Alignment — align the whole column's content at once (the simplest way to center a column, including a Special Heading's overline).
- Content Direction — Stacked (default) stacks elements vertically; Inline lays them side-by-side (wrapping if they don't fit). In Inline mode the flex axes swap, so Content Alignment drives horizontal distribution and Content Vertical Alignment works the cross axis.
- Content Vertical Alignment — position elements within the column's height: Top / Default, Middle, Bottom, or Space Between (needs height, e.g. Full Height or a taller sibling).
- Full Height — stretches the inner card to the full row height so colored cards line up next to siblings.
- Gap — space between the column's elements, from the site Gap Scale; works in both directions once the column has 2+ elements.
- Column Vertical Alignment — align this column against its row siblings (visible only with unequal-height columns).
- Width Override — Phone / Tablet / Desktop — mobile-first per-breakpoint width. Phone is the base (applies at all widths); Tablet overrides from md up, Desktop from lg up; a device left on Default inherits the smaller one. Each offers Default,
1/12–12/12, a fifth, or Auto. - Max Width — an exact cap for an Auto-width column.
- Offset — Phone / Tablet / Desktop — per-breakpoint indent (
1/12–11/12), pushing the column right by that many twelfths. - Reverse Order — show this column's own elements in reverse, per device, without changing the markup (flips the stack in Stacked direction, swaps the row in Inline).
- Order — reorder this whole column relative to its siblings per breakpoint: Default, First,
1–12, or Last.
Styling
| Option | atts key | Control | Default | Responsive | Renders as | Stylesheet |
|---|---|---|---|---|---|---|
| Text Alignment | text_align | Alignment buttons | Inherit | No | <div class="fw-col-6 text-center"> | frontend-grid.css |
| Background Color | bg_color | Compact color picker | None | No | <div class="… bg-primary"> (inner) | presets-{hash}.css / inline |
| Box Preset | border_preset | Box-style picker | None | No | <div class="… boxp-card"> (inner) | presets-{hash}.css |
| Margin & Padding | spacing | Spacing | None | No | <div class="… pt-4 pb-3"> (inner) | presets-{hash}.css |
- Text Alignment — sets
text-alignfor the whole column; nested content inherits it. Distinct from Content Alignment (which is flexbox). - Background Color — a compact color picker for the column's inner card. A palette preset applies a
bg-{slug}class; a custom hex is written inline. - Box Preset — a reusable box style (border, corners, shadow and optional background fill, with a Default/Hover state) defined in Theme Settings → Components → Box Presets, applied as a
.boxp-{name}class on the column's inner card wrapper. - Margin & Padding — a
spacingcontrol: All Sides applies to every side at once; any per-side value (Top, Right, Bottom, Left) overrides it for that direction.
Grid and flex-slot controls (Width, Offset, Order, Column/Content Alignment, Text Alignment) sit on the outer column <div>. Styling controls (Box Preset, Background, Margin & Padding, Full Height) render on an inner card <div> — created only when one of them (or an Advanced Inner Wrapper Class) is set. When no inner card exists, the content-alignment classes fall back onto the outer column.
Animations
Standard entrance-animation controls (Effect, Duration, Delay, Offset), shared across all elements — see Common controls → Animations.
Advanced
Shared per-element controls — see Common controls → Advanced — including Position (Static / Relative / Absolute / Sticky / Fixed) and Z-Index, which render as an inline style= on the outer column. Column also adds an Inner Wrapper Class field: when set, an inner <div> is rendered around the column content carrying those classes (e.g. card p-4 rounded-3) without affecting the grid wrapper.