Do you use Divi and find a problem to change the background colors of the social media icons on the Social Media Follow module? This article will show you how.
Divi, as you know, comes with a native module called Social Media Follow which you can use to add the social media icons, complete with the links. You can place the module to any area you want. From the header, footer, single post template, to base pages such as homepage and contact. Just like other native Divi modules, you can also style up the Social Media Follow module. One of the built-in styling options available on the module is the ability to change the background color of the social media icons.
However, it takes extra effort to find the option.
First thing first, add the Social Media Follow button to your design (page or custom template). By default, the module contains two social media platforms: Facebook and Twitter. Select one of the social media platform and click the gear icon to style it up.
Open the Background block. Select the background type and set the color you want.
Once done setting the color, go back to the main screen of the Social Media Follow settings panel by clicking the arrow icon on the top-right corner.
Repeat the steps to above to set the background color of other social media icons.
Another Option to Change the Background Color of Social Media Icons in Divi Social Media Follow Module
If you have multiple social media accounts to add, the steps above might be too time-consuming. To save you time, you can change the background color of all the social media icons at once with custom CSS.
On the Social Media Follow module settings panel, go to the Advanced block and open the Custom CSS block. Past the following CSS snippet to the Social Icon field.
background-color: #000000 !important;
You can replace the hex code (#000000) with the hex code of the color you want. Don’t forget to click the green checklist icon to apply the changes.
The Bottom Line
Divi is arguable the best premium theme for WordPress. It comes with a built-in page builder, called Divi Builder, which can be a great Elementor alternative to make it easier for you to create pages on your website. Divi Builder offers tends of modules which you can use on your design. One of which the Social Media Follow button. You can use the module to add social media icons — complete with links — on your website. The module itself comes with plenty built-in design options, including the ability to change the background color of the social media icons.
Divi itself is a great theme for agencies thanks to its simple pricing which allows you to install Divi on unlimited websites. Most WordPress hosting supports Divi, including the agency WordPress hosting plans from popular hosting providers such as Kinsta, Pressable, and Flywheel.