Columns

Usage

This block is similar to the core Columns block that Gutenberg provides, but with added functionality to ensure it looks good on both mobile and desktop. Dirigible Columns contain two child Column blocks — a left and a right column. Each column can hold most Dirigible and core blocks; only very complex blocks are excluded. For this reason, you will only be able to drag allowed blocks into a column.

Like all Dirigible blocks, Columns use a blue icon in the inserter to prevent confusion and differentiate from the core Columns block.

Search for Photo & Text in the inserter to insert that layout directly, or insert Columns (blue icon) and choose a starter from the layout picker.

Photo & Text starter

Photo & Text is a Columns starter: a photo in one column and a content column beside it on desktop, stacked on mobile. The template includes a Heading, Paragraph, and optional Button in the content column. Replace the image or edit inner blocks as needed. It is also the first card in the Columns starter picker.

Use Swap Columns when the photo should sit on the opposite side. Columns Size, Separator, and Split Scroll are available when you need more than the default even split.

Older Photo & Text blocks

Pages created before this change may still contain the legacy Photo & Text block. Those convert to Columns automatically when you open the post in the editor, or when you run Tools & Maintenance → Update blocks. Save the page to persist the update on the live site.

Parent and child blocks

The parent Columns block controls layout options that apply to both columns: sizing, swap order, split scroll, and the optional separator. Select the parent to change those settings.

Each Column child controls its own content. Select a column to edit what's inside it or to change Content Position (text alignment and placement within the column). The two children are interchangeable — they default to the common pattern of media on one side and copy on the other, but you can put any allowed blocks in either column.

Selecting the parent: While a child is selected, click the parent block name in the block toolbar above the content, use the breadcrumb path at the bottom of the editor, or open List View to jump to Columns.

Block width

Columns supports Wide and Full alignment from the block toolbar. Wide follows your content column; full spans the viewport. On mobile, columns stack vertically regardless of width setting.

Columns Size

Use Columns Size in the sidebar (or the sizing icons in the block toolbar) to change how space is split on desktop:

• Even — 50% / 50% (default)
• Large left or right — golden-ratio split at 61.8% / 38.2%
• Larger left or right — emphasizes one column further using the same ratio pattern

Sizing is independent from Swap Columns. If the left column is set larger, the leftmost column stays larger on desktop even when swap is enabled.

Swap Columns

Swap Columns reverses column order on desktop only. On mobile, columns always stack with the first column on top.

This is useful when you want media on the right on desktop but still need content to appear first on mobile — a common pattern for photo-and-text layouts.

Split Scroll

Scrolling → Split Scroll pins column content to the top or bottom of the viewport as the user scrolls on desktop. It does not affect the mobile stacked layout.

Use it when one column is much taller than the other and you want the shorter column to stay visible while the longer column scrolls.

Separator

Enable a vertical rule between columns from the Separator panel:

• Enable Separator — draws a border between columns on desktop
• Enable on Mobile — also shows a horizontal rule between stacked columns on small screens
• Width — border thickness (0–4)
• Separator Color — palette color for the rule

Column settings (child)

Select an individual Column block to access Content Position in the sidebar or from the block toolbar matrix control. This sets both where content sits inside the column and the text alignment applied to nested blocks.

For example, lower-right placement positions content in that corner and applies right alignment to children. Right alignment reverts to left on mobile for readability.

Tips

• Start with the default template (image in one column, headline and paragraph in the other) and replace blocks as needed.
• Combine Swap Columns with uneven sizing to keep copy first on mobile while balancing visual weight on desktop.
• Use Enable on Mobile for the separator when stacked columns need a clearer divide on phones.