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

Two 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. The examples below show a couple of approaches to using a two column layout.<\/p>\n
Example 01: Two columns of text with headers<\/h2>\n
\n
\n \n
Heading 01<\/h3>\n
This is the first column, full of interesting information.<\/p>\n\n<\/div>\n\n
\n \n
Heading 02<\/h3>\n
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.<\/p>\n\n<\/div>\n<\/div>\n
Example 02: Two columns with an image and text<\/h2>\n
\n
\n \n
$\"\"$ <\/p>\n\n<\/div>\n\n
\n \n
Create an interesting layout by filling one column of a two-column layout with an image, and the other with text.<\/p>\n\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 two columns<\/h3>\n
\n
Select column,<\/strong> then select half<\/strong> 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>\nImage\/text 2 column layout<\/h3>\n
\n
Use this approach in 2-column 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
In most cases, you will want to edit your copy so that it is roughly the same height as your image.<\/li>\n
Align the image 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
\n
Academic unit site support<\/h3>\n <\/div>\n
\n
\n