How to Change the Header and Footer

A regular page is divided into three sections: headers, footers and content.

This tutorial will walk you through how to change the header and footer background colors, as well as, the font, font colors and styles.

If you want to change areas of the page are please refer to this tutorial: How to Make Global and Individual Changes To the Page Area

It is very important to have a plan before starting making changes to the elements in a project.

All changes are recorded by the app and need to be made in an orderly sequence.

The best way to do this is using a top down approach. This is, do first all the global changes and then, if needed, make the individual changes.

Select the first header container by clicking on it. Make sure that you see the word 'Page Header' in the upper left corner of the box. This will ensure that you have clicked on the correct element. In the Designrr sidebar, you are presented with several options. Here you want to select the 'Background' drop down menu and click on 'Color'. Make sure the “Make Changes To All Elements” tab is turned on, as we want to make the color background change globally to all headers.

Select the color you want use. Then click on 'Choose' button. 

Now all of your project headers are changed to the new color.

To change the footer background color do the same as with the header. Select the first footer container by clicking on it. Make sure that you see the word 'Page Footer' to the upper left of the box. This will ensure that you have clicked on the correct element. 

Make sure the “Make Changes To All Elements” tab is turned on, as we want to make the color background change globally to all footers.

Select the color you want use. Then click on 'Choose' button.

Now all of your project footers are changed to the new color.

Go back to the first header of your project. When you hover over the header container you will see that inside there is another element called 'Heading'. Click on that to activate it. You will know that it is activated when you see the word 'Heading' in the upper right hand corner. 

The “Make Changes To All Elements” tab is turned on by default, as we want to make the change global.

In the Designrr sidebar, select the 'Text Style' drop down.

From this menu you can change the font family, size, color, weight, alignment, etc. of your header text. These changes will affect all of the headers throughout the project.

Now all of your project headers fonts are changed.

If your footer text is hyperlinked

To change your footer font styles hover over the footer container and select the 'Link' element inside. Once this is activated follow the same steps as with the header. The “Make Changes To All Elements” tab is turned on by default as we want to again make the change global.

Select the font, color and size you want. Now all of your project footers are changed.

If your footer text is not hyperlinked

To change your footer font styles hover over the footer container and select the 'Locked' element inside. Once this is activated follow the same steps as with the header. The “Make Changes To All Elements” tab is turned on by default as we want to again make the change global.

Select the font, color and size you want. Now all of your project footers are changed.

To change the text in the headers simply click inside the header area and type the new text.

All headers will be updated automatically to the new text.

To change the text in the footer area do the same as in the headers: click inside the footer area and type the new text.

All footers will be automatically updated.

- Not Recommended - To make individual changes to the headers and footers, repeat the same steps outlined in this tutorial, but in this case make sure that the “Make Changes To All Elements” tab is set to OFF.