Similar to the main menu background colour and padding tutorial, this one is for the footer area — which has a white background by default.
With Incept, we can add a background colour to the footer area if you wish to have it stand out more. When doing this, you will have to change the colours to the social menu icons (if used) and the other elements that you see in the screenshot above.
Add a Footer Background Colour
- Go to Appearance >> Customize >> Colours
- Look for the “Footer Background Colour” setting and then make your colour choice
- You will also need to find the other colour settings for the social menu icons, the footer link colour and footer text.
- Click “Save & Publish“
Once done, this is how it should look:
Adjust the Footer Padding – Inside Spacing
As you can see in the screenshot above, we now have to make some padding (inside spacing) adjustments so that our content is not touching the side of the background container.
- Go to Appearance >> Customize >> Site Options
- Look for the “Footer Padding” setting and change the padding to your preference. By default, this is set as 20px 0 0 0 which means 20px at the top, 0 on the right, 0 on the bottom, and 0 on the left (in that sequence).
- Based on our screenshot, we want to adjust the top and the left side so we can enter in the field this value: 12px 0 0 12px
- Check your preview window, and if it looks good, click “Save & Publish“
Now it should look something like this:
