Search
Close this search box.

How to Change the Background Color of Social Media Icons in the Social Media Follow Divi Module

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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Save your Divi assets to the cloud and access them from anywhere.
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.