{"id":138,"date":"2016-01-29T07:30:33","date_gmt":"2016-01-29T07:30:33","guid":{"rendered":"http:\/\/loftocean.com\/curious-doc\/?page_id=138"},"modified":"2016-03-13T14:56:16","modified_gmt":"2016-03-13T14:56:16","slug":"how-to-style-a-section","status":"publish","type":"page","link":"https:\/\/loftocean.com\/doc\/loftbuilder\/layouts\/section\/how-to-style-a-section\/","title":{"rendered":"How to Style a Section"},"content":{"rendered":"<p>Click <strong><i class=\"fa fa-cog\"><\/i> (Section Settings)<\/strong> button in the section toolbar to open the settings panel. Here are 3 tabs: <strong>Basic<\/strong>, <strong>Background<\/strong> &amp;amp <strong>Animation<\/strong>.<\/p>\n<h5>Basic settings include:<\/h5>\n<ul>\n<li><strong>Color Scheme<\/strong> &#8211; Allows you to select color scheme for this section. It inherits the color scheme selected for the page by default.<\/li>\n<li><strong>Content Vertical Alignment<\/strong> &#8211; It decides the vertical position of the rows inside the section.<\/li>\n<li><strong>Section Height<\/strong> &#8211; There are 3 options:\n<ul>\n<li><strong>Auto<\/strong> &#8211; The height is decided by how much content inside of the section.<\/li>\n<li><strong>Screen Height<\/strong> &#8211; It makes the section at least 100% height of browser window.<\/li>\n<li><strong>Custom Height<\/strong> &#8211; Allows you to enter a custom height value.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Content Area<\/strong> &#8211; It decides if the content takes 100% width and\u00a0height.<\/li>\n<li><strong>Content Paddings<\/strong> &#8211; You can enter custom top and\u00a0bottom padding for the section (depending on Content Area).<\/li>\n<li><strong>Top Border<\/strong> &#8211; Allows you to add a top border and style it.<\/li>\n<li><strong>Bottom Border<\/strong> &#8211; Allows you to add a bottom border and style it.<\/li>\n<\/ul>\n<h5>Background settings include:<\/h5>\n<ul>\n<li><strong>Transparent Background<\/strong> &#8211; Enable to set the section&#8217;s background to transparent. Disable it then you can style the section&#8217;s background.<\/li>\n<li><strong>Background Color<\/strong> &#8211; Allows you to pick a background color for the section with a color picker.<\/li>\n<li><strong>Background Color Opacity<\/strong> &#8211; Allows you to change the background color&#8217;s opacity.<\/li>\n<li><strong>Background Type<\/strong> &#8211;\n<ul>\n<li><strong>Static Background Color<\/strong> &#8211; Normal one background color.<\/li>\n<li><strong>Background Image<\/strong> &#8211; Allows you to add a background image by uploading a new image or selecting one from Media Library.<\/li>\n<li><strong>Parallax Bg Image &#8211; Scroll<\/strong> &#8211; Read <a href=\"http:\/\/loftocean.com\/doc\/loftbuilder\/basic-knowledge\/parallax-effects\/parallax-scrolling-for-section\/\" target=\"_blank\">Parallax Effects<\/a> chapter.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Color Overlay<\/strong> &#8211; You can add a color overlay on top of the background with any color picked in a color picker, and tweak its opacity.<\/li>\n<\/ul>\n<div class=\"note-box\">If your section <span class=\"highlight\">does not<\/span> have any content but has background only, no matter any type of background, you have to set the section&#8217;s height to fullscreen or give it a custom height. Or this section is not visible because its height is 0.<\/div>\n<h5>Animation settings include:<\/h5>\n<p><strong>Scroll Down Button<\/strong> &#8211; Allows you to add a <strong>Scroll Down Button<\/strong> to the section. It sits at the bottom of the section. When clicking the button, it scrolls down to the following section. Usually it is used as a &#8220;scroll down for more content&#8221; indicator for a fullscreen section. You can control its styles:<\/p>\n<ul>\n<li><strong>Enable Animation<\/strong> &#8211; It adds a slight floating animation to the button.<\/li>\n<li><strong>Select Button<\/strong> &#8211; You can choose a down arrow icon from the list.<\/li>\n<li><strong>Button Size<\/strong> &#8211; There are 3 sizes to choose: small, medium &amp; large.<\/li>\n<li><strong>Label<\/strong> (optional) &#8211; You can enter a label, for instance, &#8220;Scroll down for more&#8221;. The label will show above the arrow icon.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Click (Section Settings) button in the section toolbar to open the settings panel. Here are 3 tabs: Basic, Background &amp;amp Animation. Basic settings include: Color Scheme &#8211; Allows you to select color scheme for this section. It inherits the color scheme selected for the page by default. Content Vertical Alignment &#8211; It decides the vertical [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":129,"menu_order":40,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-138","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages\/138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/comments?post=138"}],"version-history":[{"count":2,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages\/138\/revisions"}],"predecessor-version":[{"id":870,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages\/138\/revisions\/870"}],"up":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/pages\/129"}],"wp:attachment":[{"href":"https:\/\/loftocean.com\/doc\/loftbuilder\/wp-json\/wp\/v2\/media?parent=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}