Add Instagram Color Gradient to Social Media Follow Module

| instagram social media follow module

The Divi theme comes with a Social Media Follow module which lets you add icons for various social networks, including Instagram. By default, the Instagram icon has the old-style red background. If you'd rather use Instagram's newer yellow / purple color gradiant for the background, this post explains how.

Adding a Background Gradiant to the Instagram Icon

First, let's look at the case where we change the background of the instagram icon, like so:

Before

After

Changing the Instagram Background with CSS

The Instagram background can be changed relatively easily by pasting some CSS into the Social Media Module.

First, here's the CSS:

background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);

Note: CSS sourced from this StackOverflow post.

Now go to:

Social Media Follow Settings > Social Network Settings {for your Instagram icon} > Advanced > Custom CSS > Social Icon

And paste in the CSS above like so:

Now Save and view your page. If all is well, you should now see the gradient effect on your Instagram icon.

Adding a Foreground Gradiant to the Instagram Icon

Now, let's look at the case where we change the color of the instagram icon itself, not the background. i.e:

Before

After

Changing the Instagram Icon Color with CSS

The Instagram foreground can be similarly changed by pasting some CSS into the Social Media Module.

In this situation, we need some different CSS, and unfortunately this CSS can't be applied via the module's Custom CSS fields. Instead we can add it into the "Divi > Theme Options > General > Custom CSS" box, from where it will be applied to all usage of the Instagram icon in the social media module site-wide.

.et_pb_social_media_follow .et-social-instagram a.icon {
    background-color: #fff0 !important;
}
.et_pb_social_media_follow .et-social-instagram a.icon:before {
    background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff0 !important;
}

Related Post: Adding CSS to the Divi Theme

Once added, it should override the colors set within the social media module.

Note: This CSS code won't work with Internet Explorer, which will instead show the gradient as a background, similar to the effect shown earlier in this post.

Note: If you'd like to apply the effect only on hover, use this CSS instead:

Hover-only version:

.et_pb_social_media_follow .et-social-instagram a.icon:hover {
    background-color: #fff0 !important;
}
.et_pb_social_media_follow .et-social-instagram a.icon:hover:before {
    background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff0 !important;
}

Divi Booster