How to Add Social Icons to the Divi Footer

Last Updated on September 16, 2022 by 1 Comment

How to Add Social Icons to the Divi Footer
Blog / Divi Resources / How to Add Social Icons to the Divi Footer

Having a strong social media presence is crucial for the success of any website. Your audience wants to connect with you on their favorite platforms. One way to make it easy for them is to provide social media links on your website. Fortunately, this is easy to do with Divi. In this article, we’ll see how to add social icons to the Divi footer.

Let’s get started.

Preview of the Divi Footer with Social Icons

Here’s a look at how my footer will look on desktop and mobile.

Desktop Preview

Desktop Preview

Here’s how the layout will look on the desktop with the new social icons in the Divi footer.

Mobile Preview

Mobile Preview

Here’s how the layout will look on mobile with the new social icons in the Divi footer.

Download a Free Footer Template

Download a Free Footer Template

First, we’ll need a footer template. Elegant Themes provides lots of free header and footer templates that match the templates that are available in Divi. These templates are pre-styled and are free to download. You can find free footer templates in the Elegant Themes blog. Search for “free footer”.

Many of them already include social icons in the footer. For this tutorial, I’ve chosen a footer that does not include them. I’m using the free footer template for Divi’s NGO Layout Pack.

Download your free footer template and unzip it. You’ll only need to upload the JSON file.

Note – Social icons can be added to any template you already have. For this tutorial, I will upload a new template. The process of adding the social icons is the same.

Use the Divi Theme Builder

Use the Divi Theme Builder

For this tutorial, we’re using the Divi Theme Builder. This is the preferred way to create custom Divi footers. You can create multiple designs and apply them to every page or specific pages. To access the Divi Theme Builder, go to Divi > Theme Builder in the WordPress dashboard.

Upload the Footer Template

Upload the Footer Template

To upload the footer template, select the Portability icon in the upper right corner. A modal will open. Chose Import and click Choose File. Navigate to the JSON file on your computer and select it. Click Import Divi Theme Builder Templates at the bottom of the modal. Wait for the upload to complete.

Upload the Footer Template

You’ll now have a global header and footer template. Delete the header template if you don’t want to use it. Click Save Changes. You’re now ready to add social icons to your Divi footer.

Add Social Icons to the Footer

Add Social Icons to the Footer

Next, you’ll need to open the template to make your edits. Either select the edit icon on the left of the Global Footer (the pencil icon) or click the three dots on the right and click Edit within the options.

Add Social Icons to the Footer

Next, choose where in the footer you want to place the social icons. I will add them to the empty spot under Campaigns. I will also add a title and divider and style the icons to match the layout.

Add Social Icons to the Footer

First, we’ll need a title that matches the rest of the elements in the footer. Clone the title in the area above it and drag it to the area you want to place the social icons.

Add Social Icons to the Footer

Next, open your new text module and change the text from Campaigns to Follow Us.

Add Social Icons to the Footer

Next, clone the Divider module under the Campaigns title and drag it under your new Follow Us title.

Add Social Icons to the Footer

Your footer template will now look like the one in the example above. Now all you need is to add a Social Media Follow module.

Add Social Icons to the Footer

To add the module, click on the plus icon in the location you want to add it. Scroll down or search for Social Media Follow and click on the module to insert it.

Adding More Social Icons

Add Social Icons to the Footer

Once you add the module from the Divi Builder, it will open and show you the default icons. You’ll have two options for moving forward.

The first option – you can click Add New Social Network to add each icon. You could then use their default styling or style one icon and then reflect that styling to the rest of the icons.

The second option – you can delete the second icon, style the first one, clone it for every icon you want to add and change them to the network you want.

The method you choose doesn’t matter. The work is essentially the same. I like to see all the icons in place, so I’ll use the first option.

Add Your Social Networks

Add Your Social Networks

Clicking Add New Social Network opens the Social Network Settings. Click on the dropdown box under Network and choose the network you want to add. Enter the URL to your page for the Account Link URL. Click the green check icon to close the settings.

Add Your Social Networks

Continue this process until you’ve added all your social networks. Next, we need to style them to match the rest of the footer.

Style Your Social Icons to Match Your Layout

This footer in my template has lots of green and orange. The button is rounded on the edges and the other icons have a circle behind them. Text on the green backgrounds is white. I’ll use these as design queues when styling the social media icons.

Style Your Social Icons to Match Your Layout

First, open the settings for the title. Go to the Design tab and add 20px of top padding. Now we have some space between Campaigns and Follow Us. Close the module.

  • Top Padding = 20px

Style Your Social Icons to Match Your Layout

Next, open the Social Media Follow module. Select the Design tab and select Center Align under Alignment.

  • Module Alignment = Center

Style Your Social Icons to Match Your Layout

Select the Content tab. Choose a social network to style and click the gear to open its settings.

Style Your Social Icons to Match Your Layout

Scroll down to the Background options and enter the number #347362. This gives the icon a green background that matches the CTA in the footer and looks great against the tan background.

  • Background = #347362

Style Your Social Icons to Match Your Layout

Select the Design tab. Under Icon, enable Use Custom Icon Size. Set the Icon Font Size to 24px

  • Icon Font Size = 24px

Style Your Social Icons to Match Your Layout

Next, scroll down to Border. Adjust the Rounded Corners to 24px. Click the green check to close the settings and return to the module’s settings.

  • Rounded Corners = 24px

Style Your Social Icons to Match Your Layout

Right-click on the social network you styled and select Extend Item Styles.

Style Your Social Icons to Match Your Layout

Select how far you want to extend the styles to (this page, this column, etc.) and click Extend.

Style Your Social Icons to Match Your Layout

The styling is now extended to the rest of the social media icons. You can now save the page and exit.

Divi Footer Social Icons Results

Here are the results for both desktop and mobile.

Desktop Results

Desktop Results

Here’s how the layout looks on the desktop with the new social icons in the Divi footer.

Mobile Results

Mobile Results

Here’s how the layout looks on mobile with the new social icons in the Divi footer.

Ending Thoughts

That’s our look at how to add social icons to the Divi footer. Divi’s Social Media Follow module is great for this. The Divi Theme Builder’s global footer templates make it easy to add them to your footer. With just a few steps, you can add social icons to the Divi footer with ease and style them to match your website.

We want to hear from you. Have you added social icons to the Divi footer with the Theme Builder? Let us know in the comments below.

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Augmented Reality Layout Pack that’ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post

1 Comment

  1. What about the TikTok icon. There is still no simple solution.
    We have to do a workaround which is so frustrating.

    Please add to DIVI icon support for TikTok.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today