WordPress provides a lot of flexibility to set text in columns. You can set text from 1 to 8 columns but we don’t recommend exceeding 4 columns. Keep the mobile experience in mind. Those columns will stack vertically as the page width decreases for different devices and breakpoints.

If you want to insert columns into your layout, when editing a page, select the little (+) icon in the upper left to launch the block menu and then search for “columns”. If you select the default column block, you will immediately be prompted to identify the number of columns you wish to insert.

The default “Columns” block prompts you on insert to select a column structure.

We’ve provided some ready-made column components with text, text and images and accordions to make different types of content in columns easier to layout.

Two Columns

Reusable Block Name: Columns

This page tests how the theme displays the columns block. The first block tests a two column block with paragraphs. Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Orci phasellus egestas tellus rutrum tellus pellentesque eu. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Mi tempus imperdiet nulla malesuada pellentesque elit. Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Ac odio tempor orci dapibus. Nibh mauris cursus mattis molestie. Libero justo laoreet sit amet cursus sit amet. Massa massa ultricies mi quis hendrerit. Massa id neque aliquam vestibulum. Lacus sed turpis tincidunt id aliquet risus. In arcu cursus euismod quis viverra nibh cras pulvinar mattis.

This is the second column. It should align next to the first column. Reduce the browser window width to test the responsiveness. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tortor dignissim convallis aenean et tortor at risus. Cursus in hac habitasse platea dictumst quisque. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut. Eu non diam phasellus vestibulum lorem sed risus. Blandit massa enim nec dui nunc. Lectus nulla at volutpat diam ut venenatis.

Three Columns

Reusable Block Name: Columns

This is the second column block. It has 3 columns.

Paragraph 2 is in the middle.

Paragraph 3 is in the last column.

Four Columns

Reusable Block Name: Columns

The third column block has 4 columns. Make sure that all the text is visible and that it is not cut off.

Now the columns are getting narrower.

The margins between the columns should be wide enough,

so that the content of the columns does not run into or overlap each other.

Two Columns

Reusable Block Name: Columns

To change the number of columns, select the column block to open the settings panel. You can show up to 6 columns. If the theme has support for wide align, you can also set the alignments to wide and full width.

And here is a two-column block with full width, and a longer text. Make sure that the text wraps correctly.

This is column one. Sometimes, you may want to use columns to display a larger text, so, lets add some more words.   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis. Quisque convallis libero in sapien pharetra tincidunt. Aliquam elit ante, malesuada id, tempor eu, gravida id, odio. Maecenas suscipit, risus et eleifend imperdiet, nisi orci ullamcorper massa, et adipiscing orci velit quis magna. Praesent sit amet ligula id orci venenatis auctor. Phasellus porttitor, metus non tincidunt dapibus, orci pede pretium neque, sit amet adipiscing ipsum lectus et libero. Aenean bibendum. Curabitur mattis quam id urna. Vivamus dui. Donec nonummy lacinia lorem. Cras risus arcu, sodales ac, ultrices ac, mollis quis, justo. Sed a libero. Quisque risus erat, posuere at, tristique non, lacinia quis, eros.

Column two. Cras volutpat, lacus quis semper pharetra, nisi enim dignissim est, et sollicitudin quam ipsum vel mi. Sed commodo urna ac urna. Nullam eu tortor. Curabitur sodales scelerisque magna. Donec ultricies tristique pede. Nullam libero. Nam sollicitudin felis vel metus. Nullam posuere molestie metus. Nullam molestie, nunc id suscipit rhoncus, felis mi vulputate lacus, a ultrices tortor dolor eget augue. Aenean ultricies felis ut turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse placerat tellus ac nulla. Proin adipiscing sem ac risus. Maecenas nisi. Cras semper.

We can also add blocks inside columns:

  1. This is a numbered list,
  2. inside a 3 column block
  3. with a wide alignment.

The middle column has a paragraph with an image block below.

-This third column has a quote

Theme Reviewer

Two Columns, Media and Text

Reusable Block Name: Image Lockup__ Two Column Image-text, no background

This block and the “Media & Text” block, are two-column blocks that help you display media and text content next to each other, without having to first set up a column block.

Media & Text

A paragraph block sits ready to be used, below your headline.

Keep in mind that you can “flip” the content in the columns with the touch of a button. Click on the block and this little tool palette shows:

Student with a cow in UVM's dairy barn

Media &Text

For displaying media and text next to each other. By default, the media is to the left.

Skip to toolbar