<\/i> Button 1<\/a>\n<\/div>\n These columns are actually a 12-block grid systems that can be used for creating unique page layouts. 1<\/p>\n<\/div>\n 2<\/p>\n<\/div>\n 3<\/p>\n<\/div>\n 4<\/p>\n<\/div>\n 5<\/p>\n<\/div>\n 6<\/p>\n<\/div>\n 7<\/p>\n<\/div>\n 8<\/p>\n<\/div>\n 9<\/p>\n<\/div>\n 10<\/p>\n<\/div>\n 11<\/p>\n<\/div>\n 12<\/p>\n<\/div>\n<\/div>\n You’ll never\u00a0want to use 12 columns: there’s just not enough space for content. Instead, you can group the columns together to create wider columns.\u00a0 Two and three column layouts like the examples below are the most common.<\/p>\n <\/p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel nibh pretium, luctus libero nec, tristique nunc. Vivamus neque purus, pellentesque sed faucibus eget, varius eget urna.<\/p>\n<\/div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel nibh pretium, luctus libero nec, tristique nunc. Vivamus neque purus, pellentesque sed faucibus eget, varius eget urna.<\/p>\n<\/div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel nibh pretium, luctus libero nec, tristique nunc. Vivamus neque purus, pellentesque sed faucibus eget, varius eget urna.<\/p>\n<\/div>\n<\/div>\n <\/p>\n Once you’ve finished with the column specifications and clicked the Insert Columns<\/strong> button (as explained above), some code will be place on your page.\u00a0 This “shortcode” is what defines your columns.\u00a0 The shortcode is pretty easy to read.\u00a0 It starts with an opening\u00a0[row]<\/strong> tag and ends with a closing [\/row]<\/strong> tag.\u00a0 Within the row is code for each column.\u00a0 A starting column [column]<\/strong>\u00a0and ending [\/column]<\/strong> tag.\u00a0 Within each column tag is the word Text<\/strong>.\u00a0 Simply\u00a0replace the word Text with your own content. Be sure to keep all your content within the opening and closing [column]\u00a0 [\/column] tags.<\/strong><\/p>\n You don’t have to keep your columns an equal width.\u00a0\u00a0Feel free to vary the width\u00a0to get different layouts.\u00a0 Just remember that\u00a0the width of all columns must equal 12<\/strong> (for every screen size).<\/p>\n The home page of the Orthopaedics<\/a> web site uses a 2-column layout with a slider in one column and some custom styled buttons in the second. Note that sliders pose accessibility issues and are being phased out.\u00a0 The left column has a weight of 9 and the right column has a weight of 3.<\/p>\n The TEACCH home page uses a similar layout to Orthopaedics but it’s column weight is 8 and 4.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Columns\u00a0can be used to lay out content side by side. In the example below I used a 2-column layout to arrange the buttons side by side. These columns are actually a 12-block grid systems that can be used for creating unique page layouts. You’ll never\u00a0want to use 12 columns: there’s just not enough space for … Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":2212,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-7053","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/7053","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=7053"}],"version-history":[{"count":50,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/7053\/revisions"}],"predecessor-version":[{"id":12736,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/7053\/revisions\/12736"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/2212"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=7053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n![\"\"](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2018\/03\/cardiology-600x467.jpg\")
<\/p>\nEDUCATION<\/h2>\n
![\"\"](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2018\/03\/general-practice-600x467.jpg\")
<\/p>\nRESEARCH<\/h2>\n
![\"\"](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2018\/03\/pediatrics-600x467.jpg\")
<\/p>\nPATIENT CARE<\/h2>\n
How to Add Columns<\/h2>\n
\n
\n![\"Toolbar](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2022\/05\/5EA5FD95-E9CB-4651-8A6E-951CB1986808_4_5005_c.jpeg\")
<\/li>\n
\n![\"EBS](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2022\/05\/16AFC7AF-748B-4361-AA7D-233F78EDB42A_4_5005_c.jpeg\")
<\/li>\n\n
![\"two](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/2-columns-e1641321948910.jpg\")
If you want to lay out content in\u00a03 equal columns, set\u00a0each column\u00a0to\u00a04 blocks\/columns each because\u00a04 +\u00a04 + 4\u00a0= 12:![\"three](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/3-column-e1641321819912.jpg\")
<\/li>\nThe Code<\/h2>\n
Not All Columns Are Created Equal<\/h2>\n
Examples<\/h2>\n
ºÚÁÏÍø Orthopaedics<\/h3>\n
![\"Example](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2018\/03\/Columns-Uneaven.png\")
<\/p>\nTEACCH Autism Program<\/h2>\n
![\"Example](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2018\/03\/Columns-Uneven-2.png\")
<\/p>\n