Skip to main content

How to Change the Footer Colors

Two settings decide how the footer looks: its Background, and a Text Color Scheme that makes the text dark or light so it reads on that background. Change one and check the other.

For most sites the defaults are fine: a faint grey background with dark text. Change them when you want a dark footer, as below.

A built-in footer with a dark background and Light Text, outlined in orange.

  1. Navigate to Theme Options > Footer and find the Styles section at the top.

  2. In Background, pick a dark colour. You can also upload an image here; set a colour with it, because the footer only applies its background once a colour or an attachment value is set. The default is a faint grey, #88888812.

  3. Set Text Color Scheme to Light Text. Without it, the default dark text is hard to read on your dark background.

    Theme Options with Footer highlighted in the section list, beside the Styles group: Background set to #1b1d22 and Text Color Scheme on Light Text, both outlined in orange, with Dark Mode - Background, Gray Dotted and Top Border left as they are.

  4. Click Save Changes.

Going the other way, a light background, keep Text Color Scheme on Default (Dark Text).

Dark mode​

If your site has a dark mode, the footer text is always light there, whatever Text Color Scheme says.

So the dark mode footer needs a dark background. Set it in Dark Mode - Background, in the same section. It has no default. Pick a colour close to your dark mode page background.

How to switch dark mode on for the site: How to Enable Dark Mode Feature.

Two small extras​

Both are in Styles and off by default.

  • Gray Dotted adds a grey dotted pattern at the top left of the footer.

    The top left corner of the demo site's footer with Gray Dotted on: a faint grey dot pattern behind the first widget column, its area outlined in orange.

  • Top Border adds a grey line along the top of the footer. It helps when the footer has no background and would otherwise run into the content above.

    The top edge of the demo site's footer with Top Border on: a thin grey line between the page content above and the footer widgets below, outlined in orange.

The Styles section of Theme Options > Footer: Background, Dark Mode - Background, Gray Dotted, Top Border and Text Color Scheme.

The headings above each widget column have a style of their own, set at Theme Options > Heading Design > Footer Widget Heading Layout. Its default is 10 - Only Text: plain text with no line or background.

These settings colour the built-in footer. Under a Ruby Template they reach only the copyright bar at the bottom; the template itself takes the colours you give its containers in Elementor. See How to Build a Footer Template in Elementor.

Related Articles