{"id":237,"date":"2014-10-16T14:03:17","date_gmt":"2014-10-16T14:03:17","guid":{"rendered":"http:\/\/artsci.case.edu\/documentation\/?page_id=237"},"modified":"2015-09-29T14:59:18","modified_gmt":"2015-09-29T14:59:18","slug":"using-columns","status":"publish","type":"page","link":"https:\/\/artsci.case.edu\/documentation\/using-columns\/","title":{"rendered":"Using Columns (Instead of Tables)"},"content":{"rendered":"<p><em>The columns shortcode is not responsive on a mobile device.<\/em><\/p>\n<p>&nbsp;<\/p>\n<p>WordPress allows you to create columns through the use of plugin (an extension of WordPress) called <em>Columns<\/em>. The functions of the\u00a0<em>Columns<\/em> plugin can be accessed through the use of shortcodes (a single line of code that runs a lot of code). Shortcodes are used by placing the appropriate text inside \u00a0brackets [ ]. Two examples of shortcodes are <strong>[column]&#8230;[\/column]<\/strong>\u00a0and <strong>[column-group]&#8230;[\/column-group]<\/strong>, both of which are used in the creation of columns. Some shortcodes like the <strong>[column]<\/strong> and <strong>[column-group]<\/strong> shortcodes have closing shortcodes as well. These closing shortcodes are put at the end of the\u00a0content\u00a0to stop the code&#8217;s effect. They are just like the starting shortcodes except they have a forward slash in front of them ( \/ ). For example, the closing shortcodes for <strong>[column]<\/strong> and <strong>[column-group]<\/strong> are <strong>[\/column]<\/strong> and <strong>[\/column-group]<\/strong>.<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<p>If you insert the shortcodes to create columns correctly into your page\/news post\/highlight\/etc., it should look similar to this:<\/p>\n<p><a href=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001317\/Columns-Example.png\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-239\" src=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001317\/Columns-Example-1024x319.png\" alt=\"Columns Example\" width=\"1024\" height=\"319\" srcset=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001317\/Columns-Example-1024x319.png 1024w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001317\/Columns-Example-600x187.png 600w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001317\/Columns-Example-500x156.png 500w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001317\/Columns-Example.png 1734w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>Code:<\/p>\n<pre>Not in Any Columns\r\nThe subsidiary soap fusses. The pun pops below a cosmology! A god advocates the worst molecule. The censored arrogance dies in an analysis.\r\n\r\nTwo Columns\r\n[column-group]\r\n[column]\r\nA decided identifier dodges around the voter. The envy computerizes the syntactic anger over the rumor. A dominant conforms past the pun. The straight garden renders this candidate under the outraged island.\r\n[\/column]\r\n[column]\r\nThe battery objects? Below a selective metaphor stops a precious protein. The western reflects next to the nose. The pedantic parameter believes whatever convenience. The vat struggles across this exotic calendar.\r\n[\/column]\r\n[\/column-group]\r\nThree Columns\r\n[column-group]\r\n[column]\r\nThe outcry worries after an opposing nickname. An aunt thinks. The pride resides! An idealistic death apologies. An oar lies!\r\n[\/column]\r\n[column]\r\nWhen can an enforced inhabitant tame a drying grave? The oar oils the vicious parody. The soup screams outside a rigorous sneak. His washed nickname joins a billfold. The tune dines without the upstairs. The wider triumph scripts the goldfish.\r\n[\/column]\r\n[column]\r\nA trapped metro keeps the plague. Our charitable glow compresses the amused fuse. The ocean thumbs its decay. The soldier consents!\r\n[\/column]\r\n[\/column-group]<\/pre>\n<hr \/>\n<p>&nbsp;<\/p>\n<p>1. To create columns or add columns to an existing item, either create a new item or begin editing an existing item.<\/p>\n<p>2. Find the place you want to add your first group of columns and add the shortcode <strong>[column-group]<\/strong>. Anything below this point will be part of that group of columns until you add the shortcode <strong>[\/column-group]<\/strong>:<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001315\/Columns-Code-1.png\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-240\" src=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001315\/Columns-Code-1.png\" alt=\"Columns Code 1\" width=\"1024\" height=\"613\" srcset=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001315\/Columns-Code-1.png 1431w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001315\/Columns-Code-1-600x360.png 600w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001315\/Columns-Code-1-1024x614.png 1024w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001315\/Columns-Code-1-500x300.png 500w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<p>3. Next you want to create the actual columns by using the shortcode <strong>[column]<\/strong>. Just like <strong>[column-group]<\/strong>, anything below the shortcode will be part of the new column until the shortcode <strong>[\/column]<\/strong>:<\/p>\n<p>Remember to make sure that the columns are within the correct <strong>[column-group]<\/strong> and <strong>[\/column-group]<\/strong> shortcodes<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2.png\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-241\" src=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2.png\" alt=\"Columns Code 2\" width=\"1\" height=\"1\" srcset=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2.png 1431w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2-300x300.png 300w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2-600x360.png 600w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2-1024x614.png 1024w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2-520x250.png 520w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2-500x300.png 500w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2-768x550.png 768w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2-370x270.png 370w\" sizes=\"(max-width: 1px) 100vw, 1px\" \/><\/a><a href=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2.png\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-241\" src=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2.png\" alt=\"Columns Code 2\" width=\"1024\" height=\"613\" srcset=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2.png 1431w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2-600x360.png 600w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2-1024x614.png 1024w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001314\/Columns-Code-2-500x300.png 500w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<p>When you have finished adding the columns you want, it should look similar to this (the visual content editor is on the left and the preview of the page is on the right):<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001310\/Columns-Comparision-1.png\"><img loading=\"lazy\" class=\"aligncenter wp-image-242 size-large\" src=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001310\/Columns-Comparision-1.png\" alt=\"Columns Comparision 1\" width=\"1024\" height=\"340\" srcset=\"https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001310\/Columns-Comparision-1.png 2662w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001310\/Columns-Comparision-1-600x200.png 600w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001310\/Columns-Comparision-1-1024x341.png 1024w, https:\/\/artscimedia.case.edu\/wp-content\/uploads\/sites\/105\/2014\/10\/15001310\/Columns-Comparision-1-500x166.png 500w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p><em>The columns shortcode is not responsive on a mobile device.<\/em><\/p>\n<p>&nbsp;<\/p>\n<p>WordPress allows you to create columns through the use of plugin (an extension of WordPress) called <em>Columns<\/em>. The functions of the\u00a0<em>Columns<\/em> plugin can be accessed through the use of shortcodes (a single line of code that runs a lot of code). Shortcodes are used by placing the appropriate text inside \u00a0brackets [ ]. Two examples of shortcodes are <strong><\/p>\n<div class=\"col-xs-12 col-sm-12 col-md-##colwidth-span-0## col-lg-##colwidth-span-0##\">\n<p>&#8230;<\/p>\n<\/div>\n<p><\/strong>\u00a0and <strong><\/p>\n<div class=\"row column-group-1\">&#8230;<\/div>\n<p><\/strong>, both of which are used in the creation of columns.<\/p>\n<p><a href=\"https:\/\/artsci.case.edu\/documentation\/using-columns\/\" class=\"more-link\">Continue reading&#8230; <span class=\"screen-reader-text\">Using Columns (Instead of Tables)<\/span><\/a><\/p>\n","protected":false},"author":19,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"spay_email":""},"_links":{"self":[{"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/pages\/237"}],"collection":[{"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/comments?post=237"}],"version-history":[{"count":11,"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/pages\/237\/revisions"}],"predecessor-version":[{"id":621,"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/pages\/237\/revisions\/621"}],"wp:attachment":[{"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/media?parent=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}