{"id":102,"date":"2013-04-13T08:18:58","date_gmt":"2013-04-13T08:18:58","guid":{"rendered":"http:\/\/bonsaished.com\/estatement\/?page_id=102"},"modified":"2013-04-13T08:18:58","modified_gmt":"2013-04-13T08:18:58","slug":"columns","status":"publish","type":"page","link":"http:\/\/qualitaslettings.co.uk\/?page_id=102","title":{"rendered":"Columns"},"content":{"rendered":"

Columns enable you to easily sort your content into a column based layout. Creating columns requires the use of two separate shortcodes, the [row] and the [column] shortcode. If you don’t know what shortcodes are we recommend you read our article on How to Use Shortcodes<\/a>. The parameters of this shortcode are:<\/p>\n

There is only one attribute involved which needs to be added to the column shortcode to tell it how wide it should be.<\/p>\n

width<\/strong>
\nSets the width of a column in units. Should be given as one to twelve.<\/p>\n

There are twelve units in each row. This means that whenever you create a row you will need to distrbute 12 units throughout them. In other words you can create one ’12’ width column in a row or two ‘6’ width coliumns, or three ‘4’ width columns. The idea is that the width of all columns in a row should add up to twelve.<\/p>\n

You don’t have to use the same widths in a row though. You could create a ‘6’ width column and two ‘3’ width columns. Let’s look at some examples.<\/p>\n

Examples<\/h2>\n
[row]\n[column width='6']\nThis column occupies half of this row.\n[\/column]\n[column width='6']\nThis column also occupies half of this row\n[\/column]\n[\/row]<\/pre>\n
[row]
\n[column width=’6′]
\nThis column occupies half of this row.
\n[\/column]
\n[column width=’6′]
\nThis column also occupies half of this row
\n[\/column]
\n[\/row]<\/p>\n
[row]\n[column width='4']\nThis column occupies a third of this row.\n[\/column]\n[column width='4']\nThis column also occupies a third of this row\n[\/column]\n[column width='4']\nAll three columns occupy a third of this row\n[\/column]\n[\/row]<\/pre>\n
[row]
\n[column width=’4′]
\nThis column occupies a third of this row.
\n[\/column]
\n[column width=’4′]
\nThis column also occupies a third of this row
\n[\/column]
\n[column width=’4′]
\nAll three columns occupy a third of this row
\n[\/column]
\n[\/row]<\/p>\n
[row]\n[column width='6']\nThis column occupies half of this row.\n[\/column]\n[column width='4']\nThis column occupies a third of this row\n[\/column]\n[column width='2']\nThis is tiny!\n[\/column]\n[\/row]<\/pre>\n
[row]
\n[column width=’6′]
\nThis column occupies half of this row.
\n[\/column]
\n[column width=’4′]
\nThis column occupies a third of this row
\n[\/column]
\n[column width=’2′]
\nThis is tiny!
\n[\/column]
\n[\/row]<\/p>\n","protected":false},"excerpt":{"rendered":"
Columns enable you to easily sort your content into a column based layout. Creating columns requires the use of two separate shortcodes, the [row] and the [column] shortcode. If you don’t know what shortcodes are we recommend you read our article on How to Use Shortcodes. The parameters of this shortcode are: There is only […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":87,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-102","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/qualitaslettings.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/qualitaslettings.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/qualitaslettings.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/qualitaslettings.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/qualitaslettings.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=102"}],"version-history":[{"count":0,"href":"http:\/\/qualitaslettings.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/102\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/qualitaslettings.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/87"}],"wp:attachment":[{"href":"http:\/\/qualitaslettings.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}