Columns
Using the Columns Block
Columns are useful for organizing content in a clear and visually appealing manner. This versatile block can accommodate regular text content as well as many other types of blocks such as tiles, sub-columns, images, purloined content, highlight boxes, lists, and Bates profiles. Columns are also highly customizable, allowing a user to choose the number of columns and the width of each column.
First, type /columns and select the “Columns” block.
![](https://www.bates.edu/wordpress/files/2020/09/columns.gif)
You will now be prompted to select a columns template. Hitting the skip button will let you start with two columns and customize from there.
![](https://www.bates.edu/wordpress/files/2020/09/Screen-Shot-2020-09-03-at-11.53.39-AM.png)
For this example I will use two equally-sized columns. After choosing the first variation to start with, my cursor is automatically set on the left column. Clicking the plus sign allows me to choose a type of content to put within the left column.
![](https://www.bates.edu/wordpress/files/2020/09/columns-add-content-2.gif)
The options on the right sidebar also let me adjust the width of the left column while the right column changes size accordingly.
![](https://www.bates.edu/wordpress/files/2020/09/columns-percentage-width-2.gif)
Clicking the empty space between both columns, however, will allow me to use a slider function on the right sidebar to choose how many columns I want. Even though I started with two, I can select more and end up with six columns total.
![](https://www.bates.edu/wordpress/files/2020/09/how-many-columns.gif)
Examples of Columns in Use
Example of images in columns (block editor and front-end view):
![](https://www.bates.edu/wordpress/files/2020/09/Screen-Shot-2020-09-07-at-1.12.23-PM-1.png)
![](https://www.bates.edu/wordpress/files/2020/09/Screen-Shot-2020-09-07-at-1.12.35-PM-1.png)
Example of text in columns (block editor and front-end view):
![](https://www.bates.edu/wordpress/files/2020/09/Screen-Shot-2020-09-07-at-1.19.46-PM.png)
![](https://www.bates.edu/wordpress/files/2020/09/Screen-Shot-2020-09-07-at-1.20.28-PM.png)
Example of multi-media columns (block editor and front-end view):
![](https://www.bates.edu/wordpress/files/2020/09/Screen-Shot-2020-09-07-at-1.17.25-PM.png)
![](https://www.bates.edu/wordpress/files/2020/09/Screen-Shot-2020-09-07-at-1.17.38-PM.png)