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

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.

1. Change The Header Background Color

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.

3. Change The Header Font, Font Size & Font 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.

5. Making Individual Changes To Headers and Footers

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.

Did this answer your question?