{"id":8921,"date":"2015-01-01T17:58:27","date_gmt":"2015-01-01T22:58:27","guid":{"rendered":"http:\/\/www.jbaker.info\/?p=2341"},"modified":"2015-01-01T17:58:27","modified_gmt":"2015-01-01T22:58:27","slug":"adding-columns-to-pages-using-shortcodes-2","status":"publish","type":"post","link":"https:\/\/www.jbaker.info\/demo05\/adding-columns-to-pages-using-shortcodes-2\/","title":{"rendered":"Adding Columns to Pages Using Shortcodes"},"content":{"rendered":"<p>[one_third]\nColumn One &#8211; Add anything you want here\n[\/one_third]\n[one_third]\nColumn Two &#8211; Add anything you want here\n[\/one_third]\n[one_third_last]\nColumn Three &#8211; Add anything you want here\n[\/one_third_last]<\/p>\n<div class=\"xpc_one_fourth\">\nIt&#8217;s very easy to customize the look of your site. And you don&#8217;t have to buy custom themes or high priced plugins.<\/p>\n<p>One of the easiest ways to give your site a fresh look is to vary the columns and layouts when you make your posts or pages.\n<\/div>\n<div class=\"xpc_three_fourth xpc_last\"><\/p>\n<div id=\"\" class=\"\" style=\"padding: 10px 10px 15px 10px; background: #F0E8C6; font-family: 'Courier New', Courier, monospace; border: solid 1px #888\">\n<p>[[wpcol_1quarter id=&#8221;&#8221; class=&#8221;&#8221; style=&#8221;&#8221;]] [[\/wpcol_1quarted]]\n[[wpcol_1quarter_end id=&#8221;&#8221; class=&#8221;&#8221; style=&#8221;&#8221;]] [[\/wpcol_1quarter_end]]\n[[wpcol_1half id=&#8221;&#8221; class=&#8221;&#8221; style=&#8221;&#8221;]] [[\/wpcol_1half]]\n[[wpcol_1half_end id=&#8221;&#8221; class=&#8221;&#8221; style=&#8221;&#8221;]] [[\/wpcol_1half_end]]\n[[wpcol_3quarter id=&#8221;&#8221; class=&#8221;&#8221; style=&#8221;&#8221;]] [[\/wpcol_3quarted]]\n[[wpcol_3quarter_end id=&#8221;&#8221; class=&#8221;&#8221; style=&#8221;&#8221;]] [[\/wpcol_3quarter_end]]\n[[wpcol_1third id=&#8221;&#8221; class=&#8221;&#8221; style=&#8221;&#8221;]] [[\/wpcol_1third]]\n[[wpcol_1third_end id=&#8221;&#8221; class=&#8221;&#8221; style=&#8221;&#8221;]] [[\/wpcol_1third_end]]\n[[wpcol_2third id=&#8221;&#8221; class=&#8221;&#8221; style=&#8221;&#8221;]] [[\/wpcol_2third]]\n[[wpcol_2third_end id=&#8221;&#8221; class=&#8221;&#8221; style=&#8221;&#8221;]] [[\/wpcol_2third_end]]\n[[wpdiv id=&#8221;&#8221; class=&#8221;&#8221; style=&#8221;&#8221;]] [[\/wpdiv]]\n[[wpcol_divided]]\n[[wpcol_end_left]]\n[[wpcol_end_right]]\n[[wpcol_end_both]]<\/p>\n<\/div>\n<p><\/div>\n<div class=\"xp_clear\"><\/div><hr>\n<div class=\"xp_clear\"><\/div><hr><\/p>\n<p>The example code above comes from a plugin called <a href=\"http:\/\/wordpress.org\/extend\/plugins\/easy-columns\/\" target=\"_blank\">WP Easy Columns<\/a>. Using this plugin, it is very easy to add or change the column layout of your posts. The section above is in 1\/4 left and 3\/4 right layout. This section is full width. Now let&#8217;s split the page up into 4 columns:<\/p>\n<div id=\"\" class=\"\" style=\"font-size: 12px;\">\n<div class=\"xpc_one_fourth\">\n[gn_box title=&#8221;Title One&#8221; color=&#8221;#324D19&#8243;]This box is the start of a 4 column section.[\/gn_box]\n<\/div>\n<div class=\"xpc_one_fourth\">\n[gn_box title=&#8221;Title Two&#8221; color=&#8221;#4D1918&#8243;]This is in the second column.[\/gn_box]\n<\/div>\n<div class=\"xpc_one_fourth\">\n[gn_box title=&#8221;Title Three&#8221; color=&#8221;#184C4D&#8221;]<a href=\"http:\/\/www.jbaker.info\/?attachment_id=1726\" rel=\"attachment wp-att-1726\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.jbaker.info\/wp-content\/uploads\/2012\/07\/wordpress-icon-60x60.png\" alt=\"\" title=\"wordpress-icon\" width=\"60\" height=\"60\" class=\"alignrightxp size-thumbnail wp-image-1726\" \/><\/a>In third place with an added image.[\/gn_box]\n<\/div>\n<div class=\"xpc_one_fourth xpc_last\">\n[gn_box title=&#8221;Title Four&#8221; color=&#8221;#33184D&#8221;]And, of course, in the fourth column.\nIt is SO easy![\/gn_box]\n<\/div><div class=\"xp_clear\"><\/div>\n<\/div>\n<p>You can mix and match the columns on the page to get the look that you want. Try out the <a href=\"http:\/\/wordpress.org\/extend\/plugins\/easy-columns\/\" target=\"_blank\">WP Easy Columns<\/a> plugin on your site and add some variety to your posts!<\/p>\n<div class=\"xp_clear\"><\/div><hr>\n<div class=\"xp_clear\"><\/div><hr>\n<div class=\"xp_clear\"><\/div><hr>\n<div class=\"xp_clear\"><\/div><hr>\n<div class=\"xp_clear\"><\/div><hr><\/p>\n<div class=\"xpc_one_fourth\">\n<img decoding=\"async\" src=\"http:\/\/lorempixel.com\/100\/200\" alt=\"\" \/><\/p>\n<p><\/div>\n<div class=\"xpc_one_fourth\">\n<img decoding=\"async\" src=\"http:\/\/lorempixel.com\/100\/200\" alt=\"\" \/>\n<\/div>\n<div class=\"xpc_one_fourth\">\n<img decoding=\"async\" src=\"http:\/\/lorempixel.com\/100\/200\" alt=\"\" \/>\n<\/div>\n<div class=\"xpc_one_fourth xpc_last\">\n<img decoding=\"async\" src=\"http:\/\/lorempixel.com\/100\/200\" alt=\"\" \/>\n<\/div><div class=\"xp_clear\"><\/div>\n<div class=\"xp_clear\"><\/div><hr>\n<div class=\"xp_clear\"><\/div><hr>\n<div class=\"xpc_one_fourth\"><\/p>\n<img decoding=\"async\" src=\"http:\/\/lorempixel.com\/100\/200\" alt=\"\" \/>\n<p><\/div><\/p>\n<div class=\"xpc_three_fourth xpc_last\"><\/p>\n<img decoding=\"async\" src=\"http:\/\/lorempixel.com\/500\/200\" alt=\"\" \/>\n<p><\/div>\n<div class=\"xp_clear\"><\/div><hr>\n<div class=\"xp_clear\"><\/div><hr><\/p>\n<div class=\"xp_clear\"><\/div><hr>\n<div class=\"xp_clear\"><\/div><hr><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s very easy to customize the look of your site. And you don&#8217;t have to buy custom themes or high priced plugins.<\/p>\n<p>One of the easiest ways to give your site a fresh look is to vary the columns and layouts when you make your posts or pages.<\/p>\n","protected":false},"author":1,"featured_media":2424,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-8921","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-unvetted"],"_links":{"self":[{"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/posts\/8921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/comments?post=8921"}],"version-history":[{"count":0,"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/posts\/8921\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/media?parent=8921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/categories?post=8921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/tags?post=8921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}