Div groups other elements into a container. Use it for a card, row, or nested layout whose children should share a background, spacing, and arrangement.
Click Add , choose Div , and place it in the container.
Add the child elements inside the Div in Structure.
Choose Design > Layout to arrange the children vertically, horizontally, in a grid, or with advanced layout controls.
Set Background , Container , and Spacing for the group.
Save your changes.
Div controls in the Breakdance editor 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 > Container
Setting
Purpose and options
Behavior
Width Width.
Responsive
Min Height Min height and unit.
Responsive
Padding spacing controls .See linked controls
Borders borders controls .See linked controls
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 > Spacing
Setting
Purpose and options
Behavior
Spacing spacing controls .See linked controls
Troubleshooting
The empty Div is difficult to see Add its child content or set a useful minimum height while designing. An empty container without visible styling may occupy little space.
The children do not align as expected Check the Div's Layout mode and its alignment controls, then check widths and margins on the children.
