Website Support
Virtual Visit Request info Apply
MENUMENU
  • Resources
    • Publishing Help
      • Style Guide Index
      • Keyboard Shortcuts
      • Shortcodes
      • Web Writing Guide
    • Roles
      • Overview of Roles
      • Unit Web Coordinator
      • Site Steward
    • Policies & Procedures
  • Training
    • Training
      • How to become a WordPress user
      • Request a Sandbox Site
      • Sandbox requirements
      • Training schedule
    • Additional Training Opportunities
      • Siteimprove
      • UX/UI
  • About
    • News
    • Contact Us
  • FAQs
  • Submit a Support Request
  • IN
  • Web
  • 3 Column Layout

Academic unit site support

Digital Marketing Support 928-523-1741

Business unit site support

ServiceNow 928-523-1511

Three column layout

Watch the Columns shortcode video

  • Overview Tab Open

  • How-To Tab Closed

  • Troubleshooting Tab Closed

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.

College Contextual Factors
Aspects of Faculty Member’s Self Regulated Learning
Outcomes of Faculty Member’s Research

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

  1. Select column, then select third from the dropdown menu.
    The shortcode appears in the text editor.
  2. Insert your cursor between the shortcode bookends and hit Enter to put them onto separate lines.
  3. 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 “/”.
Website support
Location
Building 54
Information Technology Services
1301 S. Knoles Drive
Flagstaff, AZ 86011
Mailing Address
PO Box 5100
Flagstaff, AZ 86011
Contact Form
Email
ask-its@nau.edu
Phone
928-523-3335