Academic unit site support
Business unit site support
Three column layout
Watch the Columns shortcode video
Overview Accordion Open
Columns give you the chance to split your pages and display content in an appealing way. Three-column layouts are a great way to feature a few highlights in a condensed space, and should not be used for long blocks of text. Images can increase the impact of a three-column layout. The examples below show a couple of approaches to using three columns.
Example 01: Images and links
Here’s an example of three columns with images and links to other pages. In the mobile view, the content will stack as laid out top to bottom of the first column, then to the next two columns in the same fashion.
Example 02: Images and text
Heading
This is a nice way to display two portrait images side by side with some text in the third column. In narrow views or mobile view, the columns will stack.
How-To Accordion Closed
How to add three columns
- Select column, then select third from the dropdown menu.
The shortcode appears in the text editor. - Insert your cursor between the shortcode bookends and hit Enter to put them onto separate lines.
- Enter content into each column.
Use images to punctuate a three-column layout
- Use this approach in three-column layouts. (On narrower screens, the right column will be stacked below the left column.)
- Use any Large image format. (This ensures that images will look correct on narrower devices.)
- Select the same image format in all three columns.
- Align all images Center within the WordPress editor.
Troubleshooting Accordion Closed
Check the following list if your columns are not appearing as intended:
- Ensure you specified the correct number of columns
- Check the image ratios and sizes, and resize if necessary
- Ensure that the text for your shortcode is complete, all brackets are present and the closing brackets contain a forward slash “/”.