Divi Extra Theme – How to set the background color of the Footer Widgets Area?


If you’re using the Extra Theme and don’t know how to set the background color of the Footer Widgets Area? Don’t worry, there is an easy way you can change the footer color widgets area. We’ll show you how to do it. 

The Divi Theme Builder is a solution in this modern and ever-evolving era. The background color of the Footer Widgets Area might not seem essential to many but for WordPress users, this is an integral feature and they can’t miss out on this one. Along with this, you can also take a look at how to change footer credits &  footer text on our website. 

This article will guide you to the right path and give you a detailed tutorial on setting the background color of the Footer Widgets Area. 


Unfortunately, the ability to change the footer widget section’s background color is missing in the Extra Theme. However, you can use the following CSS to change the background color:

footer#footer { background-color: #ff0000; }

  1. You can paste it into the “Custom CSS” box in the ePanel’s “Extra > Theme Options > General Settings” section to add it to the theme at the very bottom.
Go to Extra Settings

You may notice that the color of the bottom bar (the one with the copyright notice/credits) changes when you use this code. This is because the bottom bar is semi-transparent by default, allowing the main footer’s color (as determined by the code above) to show through.

  1. To fix this issue, you can modify the color of the bottom bar at Extra > Theme Customizer > Footer Settings > Bottom Bar > Background Color.
Extra > Theme Customizer

You’ll see two slider bars to the right of the color picker box when you click on this Background Color option. The transparency of the bottom bar background color is controlled by the rightmost of these.

Extra theme Background color options

Therefore, if you move the toggle to the top, the bottom bar with no clarity will appear, using the color you selected in the color picker.

If you’re not using Extra theme and don’t know How to change the background color of the Footer Widgets Area? There are simple steps to change the color.

  1. Navigate to your WordPress Dashboard, go to Appearance > Customize > Footer > Footer Widgets section.
  2. Choose a background color or image for the Footer Widgets Area under the Background options.
  3. Then, click on the Publish button.

You can take further help from our guide on how to change the category accent color. 

That’s it; leave a comment here if this information is helpful.

Leave a Comment

Your email address will not be published. Required fields are marked *

Related Posts

Regex is a useful string of characters that defines a search pattern. In the security world, regular
When developing an application or any other software, the security of the finalized product is one of
Sometimes the development teams employ unconventional practices to fix bugs or add new features without realizing the
Scroll to Top