Add a background colour to your footer and adjust the spacing

Similar to the main menu background colour and padding tutorial, this one is for the footer area — which has a white background by default. 

footer bg

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

  1. Go to Appearance >> Customize >> Colours
  2. Look for the “Footer Background Colour” setting and then make your colour choice
    footer bg setting
  3. You will also need to find the other colour settings for the social menu icons, the footer link colour and footer text.
  4. Click “Save & Publish

Once done, this is how it should look:

footer bg2

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.

  1. Go to Appearance >> Customize >> Site Options
  2. 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).
    footer padding setting
  3. 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
  4. Check your preview window, and if it looks good, click “Save & Publish

Now it should look something like this:

footer bg3