Style pages
Your website consists of three parts - the body of the page (page content area), your header and footer.
The Style editor button (resembles a paintbrush) you can find when you open All pages, then click on a page. The Style editor is the first icon on the menu (from left to right) next to each page. You can access the Style editor from the left side on the grey area of the editor below Page settings.
From here, you can style the Page header area, the Page content area, The Page footer area and the Entire page area at once.
When you open a template, you will see guidelines that will not be visible on your live site. The vertical guidelines are there to give you an approximate idea where your layout is positioned horizontally.
All the elements added in the footer and header areas are visible for all pages.
Page header areas
Widescreen Background – this is the total width of the header including both inside and outside the guideline. By clicking on the down-pointing arrow, you will see the color or image options for styling the header background.
Color options:
- Select Color.
- Go to the color palette to select a color of your choice.
- Scroll the opacity button to change opacity of the color selected.
Image options:
- Select Image.
- Change image - opens Media library where you can add an image of your choice.
Centre Background – that is the width of the header inside the guidelines. The same styling options for color or image apply.
Page content areas
Widescreen Background – this is the full width of the content area of your site inside and outside the guideline. The same styling options for color or image apply.
Center Background – this is the content area just inside the guidelines. The same styling options for color or image apply.
Page footer areas
Widescreen Background – this is the full width of your footer inside and outside the guidelines. The same styling options from above apply.
Center Background – this is the footer width inside the guideline. The same styling options for color or image apply.
Entire Background
Background – from here you can choose a font for the entire page. The same styling options for color or image apply.
Scroll background with site – this property allows a simple scrolling layout with fixed background image , i.e. an image can be set to stay fixed in the background as you scroll on the page.