User Tools

Site Tools


ce4_page_body

Page Body

The Page Body control group allows you to set the background-color for you page.

The page background comprises the bottommost layer of your document, as shown below in horrible, horrible pink.

By enabling the Linear Gradient features –

– you can use a gradient background:

For more information on using linear-gradients in CE4, see Linear-gradient Backgrounds.

Page Container

The Page Container encompasses your page content. In the screen captures above, the white area is the Page Container.

Width

The page container's Width slider is very important, as this can be used to set the maximum content width for the entire page. The default is a “fixed” width of 1140-pixels. If you wish the maximum content width to be greater or less than this value, then change it here.

By setting the width to “auto”, the page container will encompass the full-width of the browser window. You will then be able to set the content width for each section of the page (masthead, navigation, content area, gallery, footer, etc.) separately, in the relevant control group for each area.

Gutters

The Gutters sliders are also important.

The gutters sliders control the minimum distance between your page content and the edge of the browser window or display. This prevents your content from riding the edge of the window when the window or display size is less than the maximum width of your content, and improves readability on small displays.

The Gutters (on desktop) slider applies to desktop, laptop and tablets. The Gutters (on mobile) slider applies to smaller devices, such as smartphones and iPods. These sliders set a universal guideline for the page.

CE4 uses “smart gutters”, which means that you can override the guideline for any individual section of the page by setting that section's padding-left and/or padding-right slider to a value less than the applicable gutter value.

For example, if you want a full-width masthead graphic, then you will probably not want gutters in the masthead. Set the Masthead's padding-left and padding-right sliders to zero, and your masthead will have no gutters.

ce4_page_body.txt · Last modified: 2014/01/08 04:28 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.