Column holds content inside a Columns element. It provides per-column layout, background, sizing, order, borders, and spacing.
Click Add , choose Column , and place it in the container.
Select the parent Columns , then add or select a Column inside it.
Place the content inside the Column.
Configure Design > Layout , Size , and Order , then style its background and spacing.
Save your changes.
Column controls in the Breakdance editor Place the element correctly
Column must be a direct child of Columns . Select that parent before adding or moving this element.
Controls
Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”
Design > Layout
Setting
Purpose and options
Behavior
Layout layout controls . When: Layout is set.See linked controls
Design > Layout
Setting
Purpose and options
Behavior
Layout layout controls . When: Layout is unset.See linked controls
Design > Background
Setting
Purpose and options
Behavior
Color Color or supported fill.
Hover
Type Image , Gradient .Shared
Shown when Type = Image .
Setting
Purpose and options
Behavior
Image WordPress media.
Responsive, Hover
Image Size Registered WordPress or custom image size.
Responsive, Hover
Lazy Load On/off.
Shared
Image Settings > Size cover , contain , auto , custom .Responsive
Setting
Purpose and options
Behavior
Image Settings > Width Width. When: Type = Image and Size = custom .
Responsive, Hover
Image Settings > Height Height. When: Type = Image and Size = custom .
Responsive, Hover
Image Settings > Repeat repeat , no-repeat , repeat-x , repeat-y . When: Type = Image .Responsive
Image Settings > Position center top , center center , center bottom , left top , left center , left bottom , right top , right center , right bottom , custom . When: Type = Image .Responsive
Image Settings > Custom Position Set custom position. When: Type = Image and Position = custom .
Responsive
Image Settings > Attachment scroll , fixed . When: Type = Image .Responsive
Image Settings > Unset Image At Breakpoint. When: Type = Image .
Shared
Shown when Type = Gradient .
Setting
Purpose and options
Behavior
Gradient Color or supported fill.
Shared
Gradient Animation > Scale Scale and unit.
Shared
Gradient Animation > Speed Speed and unit.
Shared
Setting
Purpose and options
Behavior
Overlay > Color Color or supported fill.
Hover
Overlay > Type Image , Gradient .Shared
Shown when Type = Image .
Setting
Purpose and options
Behavior
Overlay > Image WordPress media.
Responsive, Hover
Overlay > Image Size Registered WordPress or custom image size.
Responsive, Hover
Overlay > Lazy Load On/off.
Shared
Overlay > Image Settings > Size cover , contain , auto , custom .Responsive
Setting
Purpose and options
Behavior
Overlay > Image Settings > Width Width. When: Type = Image and Size = custom .
Responsive, Hover
Overlay > Image Settings > Height Height. When: Type = Image and Size = custom .
Responsive, Hover
Overlay > Image Settings > Repeat repeat , no-repeat , repeat-x , repeat-y . When: Type = Image .Responsive
Overlay > Image Settings > Position center top , center center , center bottom , left top , left center , left bottom , right top , right center , right bottom , custom . When: Type = Image .Responsive
Overlay > Image Settings > Custom Position Set custom position. When: Type = Image and Position = custom .
Responsive
Overlay > Image Settings > Attachment scroll , fixed . When: Type = Image .Responsive
Overlay > Image Settings > Unset Image At Breakpoint. When: Type = Image .
Shared
Shown when Type = Gradient .
Setting
Purpose and options
Behavior
Overlay > Gradient Color or supported fill.
Shared
Overlay > Gradient Animation > Scale Scale and unit.
Shared
Overlay > Gradient Animation > Speed Speed and unit.
Shared
Setting
Purpose and options
Behavior
Overlay > Opacity Set opacity. Range: 0–1.
Hover
Overlay > Effects > Filter > Filter Items Add, edit, remove, and reorder filter items.
Hover
Overlay > Effects > Filter > Filter Items > Type blur , brightness , contrast , grayscale , hue-rotate , invert , saturate , sepia .Shared
Overlay > Effects > Filter > Filter Items > Blur Amount Blur amount and unit. When: Type = blur .
Shared
Overlay > Effects > Filter > Filter Items > Amount Amount and unit. When: Type = brightness , contrast , grayscale , invert , saturate , sepia .
Shared
Overlay > Effects > Filter > Filter Items > Rotate Rotate and unit. When: Type = hue-rotate .
Shared
Overlay > Effects > Blend Mode normal , multiply , screen , overlay , darken , lighten , color-dodge , color-burn , hard-light , soft-light , difference , exclusion , hue , saturation , color , luminosity .Shared
Transition Duration Transition duration.
Shared
Design > Size
Setting
Purpose and options
Behavior
Width Width.
Shared
Min Height Min height and unit.
Responsive
Design > Order
Setting
Purpose and options
Behavior
Order Numeric order.
Responsive
Design > Text Colors
Shown when Text Colors is set.
Setting
Purpose and options
Behavior
Headings Color or supported fill.
Shared
Text Visible text.
Shared
Link Destination and link options .
Hover
Brand Color or supported fill.
Shared
Design > Borders
Setting
Purpose and options
Behavior
Borders borders controls .See linked controls
Design > Spacing
Setting
Purpose and options
Behavior
Spacing spacing controls .See linked controls
Troubleshooting
The Column cannot be placed here Column must be a direct child of Columns. Use Div for an independent container.
Visual order differs from the expected reading order Review Order values and the parent layout. Check keyboard and reading order as well as the visual arrangement at each width.
