{"id":916,"date":"2017-09-05T20:53:49","date_gmt":"2017-09-05T20:53:49","guid":{"rendered":"https:\/\/in.nau.edu\/web\/?page_id=916"},"modified":"2020-05-04T15:00:49","modified_gmt":"2020-05-04T22:00:49","slug":"3-column","status":"publish","type":"page","link":"https:\/\/in.nau.edu\/web\/3-column\/","title":{"rendered":"3 Column Layout"},"content":{"rendered":"

Three column layout<\/h1>\n
Watch the Columns shortcode video<\/u><\/a><\/p>\n\n\n\n
\n
\n
\n \n
\n
\n Overview Tab Open<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n
\n \n
\n
\n How-To Tab Closed<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n
\n \n
\n
\n Troubleshooting Tab Closed<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n <\/ul>\n \n
\n \n
\n
Overview Accordion Open<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
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.<\/p>\n
Example 01: Images and links<\/h2>\n
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.
\n
\n
\n $\"\"$ College Contextual Factors<\/a>\n<\/div>\n\n
\n $\"\"$ Aspects of Faculty Member’s Self Regulated Learning<\/a>\n<\/div>\n\n
\n $\"\"$ Outcomes of Faculty Member’s Research<\/a>\n<\/div>\n<\/div>\n<\/p>
Example 02: Images and text<\/h2>\n
Heading<\/h4>\n
\n
\n $\"\"$ \n<\/div>\n\n
\n $\"\"$ \n<\/div>\n\n
\n 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.\n<\/div>\n<\/div>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n \n
\n \n
\n
How-To Accordion Closed<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
How to add three columns<\/h3>\n
\n
Select column,<\/strong> then select third<\/b> from the dropdown menu.
\nThe shortcode appears in the text editor.<\/li>\n
Insert your cursor between the shortcode bookends and hit Enter to put them onto separate lines.<\/li>\n
Enter content into each column.<\/li>\n<\/ol>\nUse images to punctuate a three-column layout<\/h3>\n
\n
Use this approach in three-column<\/strong> layouts. (On narrower screens, the right column will be stacked below the left column.)<\/li>\n
Use any Large<\/strong> image format. (This ensures that images will look correct on narrower devices.)<\/li>\n
Select the same image format in all three columns.<\/li>\n
Align all images Center<\/strong> within the WordPress editor.<\/li>\n<\/ul>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n \n
\n \n
\n
Troubleshooting Accordion Closed<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
Check the following list if your columns are not appearing as intended:<\/p>\n
\n
Ensure you specified the correct number of columns<\/li>\n
Check the image ratios and sizes, and resize if necessary<\/li>\n
Ensure that the text for your shortcode is complete, all brackets are present and the closing brackets contain a forward slash “\/”.<\/li>\n<\/ul>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n <\/div>\n\n
\n
\n\n
\n
\n
Academic unit site support<\/h3>\n <\/div>\n
\n
\n