Page 1 of 1

How to add full width header and footer to your pages?

Posted: Sat Sep 04, 2010 1:48 pm
by Pablo
Often users want to have a header and footer that uses the entire width of the screen while the rest of the content is centered within the browser window. Since WYSIWYG Web Builder creates a fixed width container for your layout, you will have to do a little bit of extra work to achieve this.

The trick is to use stretchable layers for the header/footer.

Step 1
Let's assume the width of your layout is 900 pixels (the page width is also set the 900 pixels) and that you have selected 'Center this page in the browser window horizontally' (in Page Properties) according to those instructions:

Step 2
Insert a layer and set the width to 900 pixels (the height doesn't really matter).
In the Layer's properties enable 'Relative horizontal resizing' and if you plan to add other objects (like text, images) to the header then you probably also want to set the aligmenent to 'Center'.

Step 3
Insert another layer for the footer with the same properties.

The Header/Footer mode of the layer can be useful if you are using the layer as a header or footer for your page usually in combination with the 'relative horizontal resizing' option.
Normally the 'relative horizontal resizing' (and the other relative options) will add the code after the <body> container resulting in a higher z-index.
Selecting 'Header/Footer' mode will insert the code before the <body> container, so the layer will be behind all other content.

Step 4
Preview the page to see the results. Notice that both the header and footer will stretch over the full width of the browser window, while the rest of the page centers.

Using a background image
Another method to achieve the same effect is by using a background image with the repeat property set to 'Repeat in horizontal direction' (Horizontal align: Center/Vertical Align: Top)
This way you can design more advanced headers in your favorite image editor.

You can download a template which demonstrates both methods here:

Re: How to add full width header and footer to your pages?

Posted: Fri Apr 06, 2012 10:46 am
by Pablo
It's not possible to use a full width headers/footers in a master page, because objects inside the master page cannot extend outside the boundaries of the master page object.
However you can use headers/footer in a master frame. Here's an example of a full width header/footer using a master frame: ...

Re: How to add full width header and footer to your pages?

Posted: Tue Apr 09, 2013 6:21 pm
by Pablo
For footers you can also use a layer and set it to 'docking layer' mode.
This will keep the layer on the bottom of the browser window all the time.

Re: How to add full width header and footer to your pages?

Posted: Wed Jul 09, 2014 7:47 pm
by Pablo
Note that many of the new templates use layer to implement full width headers and footers: