Incorporating social media into your website can have many benefits, especially if you have specific goals and the needs of your target users. If you use Divi Builder as your website builder, you must be familiar with the Social Media Follow module. That module allows you to easily add social media icons to your site and link to your social media accounts. You can choose from various popular social media like Facebook, Twitter, Instagram, etc.
You can customize the social media icons’ appearance to match your website design, such as button style, icon color, hover effects, and more. This article will show how to change the social media items’ background.
How to Change the Background Color of Social Media Icons in the Social Media Follow Divi Module
Maybe your primary purpose for changing the background color of social media items on your website is an aesthetics needs; it can indirectly benefit accessibility. Ensuring sufficient contrast between the icon and the background can improve visibility for users.
There are two ways to change the background color of social media items in the Social Media Follow Divi module; on individual/single items and all items simultaneously.
1. Change the Background Color on Individual/Single Icon
First, open your Divi Builder editor, then add the Social Media Follow module to the canvas area.
Go to the Social Media Follow Settings -> Content tab. Afterward, click the settings icon button (⚙️) of the social media items you want to change the background color.
Once you enter the social media item settings, navigate to the Background section, and now you can change the background with your desired color. In this example, we set the background color of Twitter to black.
2. Change the Background Color of all Items Simultaneously
Next, we will show you how to change the background color of all items simultaneously by adding a very simple CSS snippet to the module.
On the module settings, go to the Advanced tab -> Custom CSS. Afterward, copy the CSS snippet below and paste it into the Social Icon field.
background-color: #000000 !important;
That’s it. Now you can see the background color of all your social media items is changed simultaneously.
As you can see from the image above, we set the background color of all social media items to black. You can change the color with your desired color by replacing the value (hex color code) on the CSS snippet.
The Bottom Line
This article shows how easily you can change the background color of social media items in the Social Media Divi module. It can be helpful in aesthetics, branding, visibility, and potentially more accessible to your users. However, it is ultimately a design decision that should be aligned with your website needs.
If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud and access any website you create.
