Layout tab
Flexbox layout controls for rows, columns and inner rows: content direction, alignment, gaps, minimum height, sticky columns, and corner shapes.
Rows, columns, and inner rows and columns each get a new Layout tab in their edit panel. It turns them into flexbox containers you can align, space, and size with tablet and phone overrides, without writing custom CSS.
Where to find it: click the pencil icon on any row, column, or inner row to open its edit panel, then select the Layout tab.
The Layout tab needs WPBakery Page Builder version 9.0 or newer. On older versions the tab doesn't appear, and any Layout settings already saved from a newer version are ignored.
Not every setting is available on every element. This table shows what each one gets:
| Setting | Row | Inner row | Column | Inner column |
|---|---|---|---|---|
| Content Direction and alignment | Yes | Yes | ||
| Minimum Height | Yes | Yes | Yes | Yes |
| Padding on Phones | Yes | Yes | Yes | Yes |
| Corner Shape | Yes | Yes | Yes | Yes |
| Side Inset | Yes | |||
| Fill Height | Yes | |||
| Sticky | Yes |
Rows also get a separate Stacked Cards tab; see Stacked Cards.
Content direction
On columns and inner columns, setting a direction turns the column into a flex container for the elements inside it.
Defaulthb_directionHow the elements inside this column are laid out. Leave it on Default for normal stacked content, or choose Stack vertically or Side by side to lay the column's elements out with flexbox.
Same as desktophb_direction_tabletOverrides Content Direction on tablets. Shown once Content Direction is set.
Same as desktophb_direction_phoneOverrides Content Direction on phones. Shown once Content Direction is set.
Defaulthb_justifySpacing along the direction axis: Default, Start, Center, End, Space between (first at the start, last at the end), or Start, last element at the end (the elements sit at the start and the last one is pushed to the end, such as a button at the bottom of a card). Shown once Content Direction is set.
Defaulthb_alignAlignment across the direction axis: Default, Start, Center, End, or Stretch. Shown once Content Direction is set.
hb_gapSpace between elements, in pixels. Leave empty for none. Shown once Content Direction is set.
Minimum height
Available on rows, columns, and inner rows and columns.
hb_min_heightIn pixels. Leave empty for none.
hb_min_height_tabletIn pixels. Leave empty to use the desktop value, or enter 0 for none.
hb_min_height_phoneIn pixels. Leave empty to use the tablet value, or enter 0 for none.
Padding on phones
Available on rows, columns, and inner rows and columns. Fine-tunes the padding set in the Design Options tab, specifically on phones.
hb_padding_top_phoneIn pixels. The top padding from Design Options scales smoothly down to this value on phones. Leave empty to pick it automatically when Fluid Typography is enabled in Highend Options.
hb_padding_bottom_phoneIn pixels. The bottom padding from Design Options scales smoothly down to this value on phones. Leave empty to pick it automatically when Fluid Typography is enabled in Highend Options.
hb_padding_sides_phoneIn pixels. The left and right padding from Design Options scale smoothly down to this value on phones, so a card with generous padding on desktops doesn't squeeze its content on a small screen. Leave empty to pick it automatically when Fluid Typography is enabled in Highend Options.
Corner shape
Available on rows, columns, and inner rows and columns.
Roundhb_corner_shapeHow rounded corners are drawn: Round, Squircle, Soft squircle, Bevel (cut corners), Scoop (inward curve), or Notch (inward square). Set the corner size with Border Radius in Design Options. Browsers without corner shape support show normal rounded corners.
Side inset
Rows only, for rows with Row Stretch set in the General tab.
hb_insetSpace in pixels between the stretched row and the screen edges. Combined with a background and Border Radius from Design Options, the row becomes a floating card.
hb_inset_phoneIn pixels. Leave empty to use the value above, or enter 0 for none.
Fill height
Inner rows only.
hb_growIn a column set to stack vertically, this inner row takes a share of the free height, for example 1. Inner rows set to 1 and 2 split the free height one third to two thirds. Leave empty to keep the inner row's own height.
Sticky columns
Columns only (not inner columns).
Offhb_stickyThe column stays in view while the other columns in the row scroll past, for example a heading next to a longer list. Choose Stick below the top or Stick in the middle of the screen. Off on phones, where columns stack.
100hb_sticky_topDistance from the top of the screen, in pixels. Default 100, room for a sticky header. Shown once Sticky is set.