{"id":424,"date":"2017-05-26T01:57:57","date_gmt":"2017-05-25T23:57:57","guid":{"rendered":"http:\/\/themanual.local\/?p=424"},"modified":"2017-11-04T13:57:07","modified_gmt":"2017-11-04T11:57:07","slug":"best-practices-for-layout","status":"publish","type":"post","link":"https:\/\/simonbarnett.co.za\/themanual\/best-practices-for-layout\/","title":{"rendered":"Best Practices for Layout"},"content":{"rendered":"<p>Beaver Builder &#8211; like all other page builders &#8211; uses rows\u00a0with columns to lay out pages.<\/p>\n<p>Any module &#8211; text, photo, button, etc &#8211; will always be inside a\u00a0column.\u00a0A module never stands alone.<\/p>\n<p>The column may be one of several columns in a row.<\/p>\n<p>Both simpler and more detailed explanations of how rows, columns, and modules work in Beaver Builder can be found online. Some links will be added to this page shortly.<\/p>\n<hr \/>\n<h2>The Box Model<\/h2>\n<p>Each element or container on a web page is a box, and each box is governed by various properties, such as position, margin, border, padding, width and height.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/simonbarnett.co.za\/themanual\/wp-content\/uploads\/2017\/05\/Box-Model.png\" alt=\"\" width=\"421\" height=\"387\" \/><\/p>\n<p>The box model is the technique used to refer-to, or control size and spacing.<\/p>\n<p>&nbsp;<\/p>\n<h2>Useful tips<\/h2>\n<p>In brief, for now, what is useful to know is:<\/p>\n<ul>\n<li>Rows\n<ul>\n<li>Sometimes a single row with lots of items is fine for your layout,<\/li>\n<li>and sometimes it will feel better to make multiple rows, one for each section.<\/li>\n<\/ul>\n<\/li>\n<li>Columns\n<ul>\n<li>You can stack multiple modules vertically inside a column.<\/li>\n<li>For this reason, the columns themselves have fairly comprehensive styling controls for text and page elements inside the modules inside them.<\/li>\n<\/ul>\n<\/li>\n<li>Modules\n<ul>\n<li>By default, modules have margins set to keep space between modules,\u00a0as well as from the side of the page content boundary.<\/li>\n<li>These module margins\u00a0respond to mobile devices in an interesting way.<\/li>\n<li>It&#8217;s a way which differs from the behaviour of rows and columns, which is explained here:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Responsive spacing\u00a0on mobile devices.<\/h2>\n<p>At small device breakpoint (768px by default)<\/p>\n<ul>\n<li>Rows\n<ul>\n<li>Margins\n<ul>\n<li>All:\u00a00<\/li>\n<\/ul>\n<\/li>\n<li>Padding\n<ul>\n<li>Left &amp; Right:\u00a00<\/li>\n<li>Top &amp; Bottom:\u00a0as set<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Columns\n<ul>\n<li>Margins\n<ul>\n<li>All:\u00a00<\/li>\n<\/ul>\n<\/li>\n<li>Padding\n<ul>\n<li>Left &amp; Right:\u00a00<\/li>\n<li>Top &amp; Bottom:\u00a0as set<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Modules\n<ul>\n<li>Margins\n<ul>\n<li>if set to greater than global OR if negative value, then\u00a0set them to the value that is\u00a0set in Page Builder &gt; Tools &gt; Global Settings.<\/li>\n<li>if set to less than global setting, and not negative value, then\u00a0retain custom value.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A quick overview of how to work with margins, padding, widths and styles.<\/p>\n","protected":false},"author":1,"featured_media":1971,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,6],"tags":[21],"class_list":["post-424","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general-advice","category-content-manager","tag-page-builder"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/posts\/424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/comments?post=424"}],"version-history":[{"count":0,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/posts\/424\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/media\/1971"}],"wp:attachment":[{"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/media?parent=424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/categories?post=424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/simonbarnett.co.za\/themanual\/wp-json\/wp\/v2\/tags?post=424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}