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
  • 2 Column Layout

Academic unit site support

Digital Marketing Support 928-523-1741

Business unit site support

ServiceNow 928-523-1511

Two 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. The examples below show a couple of approaches to using a two column layout.

Example 01: Two columns of text with headers

Heading 01

This is the first column, full of interesting information.

Heading 02

This is the second column. The column may or may not have a header, depending on whether it is continuing the information from the first column or is a new piece of information.

Example 02: Two columns with an image and text

Create an interesting layout by filling one column of a two-column layout with an image, and the other with text.

How-To Accordion Closed

How to add two columns

  1. Select column, then select half 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.

Image/text 2 column layout

  • Use this approach in 2-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.)
  • In most cases, you will want to edit your copy so that it is roughly the same height as your image.
  • Align the image 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