A long wall of text is not always the best way to tell your story. With columns, you can place text, images and other content side by side. For example, an image next to a full paragraph without the text wrapping around it. The layout you build in the editor is the layout that gets sent to your website, so what you design is what your readers see. *details
This guide shows you how to insert columns, fill and rearrange them, and what to know before you publish. Looking for a multi-column layout, a two-column block or side-by-side content? You are in the right place.
🔔 Note: Not every channel supports columns. Check how columns are published before you rely on them for a specific destination.
Start adding columns to your article
1. Insert columns
Step 1. Open your article on the Write tab. Hit Enter to start a new line so the embed bar appears. Here, click 'Insert columns' (the icon with two columns).
Step 2. Two empty columns appear next to each other, and your cursor is placed in the first one. Start typing.
Step 4. Click in a column and write your text. On a new line inside a column, the media embedder bar appears just like in the rest of your article. You can add images, videos, embeds, tables, dividers and buttons to a column.
Step 5. Move between columns with your keyboard. Press the down arrow at the end of a column to jump to the next column, and the up arrow at the start of a column to go back to the previous one.
❌ Limitation: Some options are not available inside columns: you can't place columns inside columns, and the image alignment options (float, wide and full width) are hidden. Other blocks, like callouts and accordions, can't be added to a column either.
3. Add or remove columns
Step 6. Hover over a block in the column you want to build from and click its drag handle to open the block menu.
Step 7. Click 'Add column left' or 'Add column right'. The new column appears on that side, and your cursor moves into it.
🔔 Note: A column block can have between two and four columns.
Step 8. To remove a column, place your cursor in an empty column (or empty the column) and press Backspace. The column disappears, and your cursor moves to the end of the column on its left.
🔔 Note: Pressing Backspace at the start of a column that has content moves its first block to the column on the left instead. When only two columns are left and you remove one, the content that remains goes back into your article as regular blocks, so nothing is lost.
4. Move blocks between columns
Step 9. Hover over a block, then drag it by its drag handle. A blue line shows where the block will land. You can:
reorder blocks inside the same column,
move a block from one column to another,
drag a block out of the columns and back into the rest of your article,
drag a block from your article into a column.
5. Publish your article with columns
Step 10. Finish your article and publish it to your website as usual. Columns are sent to your website as a row of equal-width columns with a gap in between.
Step 11. On narrow screens, or when your website places the article in a narrow space, the columns stack below each other so the text stays readable. The more columns you use, the earlier they stack.
What happens depends on the destination:
Destination | What your readers see |
Most website channels (e.g. WordPress and Drupal) | Columns side by side |
Medium, DEV.to, Google AMP and Wix | Columns are not supported. The content of each column is placed one after the other, from the first column to the last. |
⚠️ Caution: Always check the published article on your website. Your theme's CSS can change how the columns look.
Style your columns with CSS
Want to fine-tune the result? The columns are sent to your website with these classes, so you can target them in your own CSS:
.strchf-columns: the row that holds all columns.
.strchf-columns-2, .strchf-columns-3, .strchf-columns-4: the same row, with the number of columns.
.strchf-column: a single column.
Basic layout settings are added inline, so columns work without extra CSS in most themes.
🎉 You're done, grab a coffee, you deserve it!
Check out the next steps below for more in-depth guides or follow-up actions.