Add social icons in the top bar and footer of Divi

Jul 30, 2020 | Divi Resources

How to display and customize social media icons in Divi header and footer

With social icons on your website, you can increase your following as well as reach a wider audience. So, every time you post something on your social networks, it gets seen by the one who follows you and to whom they share it. And in the Divi theme, you can add them at both header and footer of your website.

In this article, we’re going to see how we can do it in simple steps.

Step 1: Enable icons to display them on the site

The first thing you need to do is enable the icons in your Divi theme. For that, you have to go to the WordPress dashboard >> Divi >> Theme Options. Scroll down a bit, and then enable the following icon options.

Enable social icons in divi theme options

Once options are enabled, input the URL in the fields respective to your social media profiles.

Step 2: Add social icon at Divi top bar

After enabling the social media icons in the Divi theme and entering the URL, we can now add them to the top. To do that, go to Divi >> Divi Theme Customizer >> Header & Navigation >> Header Elements >> and check the SHOW SOCIAL ICONS’ box. Once checked, hit the Publish button.

Show social icons on top bar of divi

Doing this would add social media icons at the header of your Divi theme website.

Output divi header social icons

How to adjust header icons’ size

To increase or decrease the header icons’ size, go to Divi >> Divi Theme Customizer >> Header & Navigation >> Secondary Menu Bar >> Text Size, and move the slider or input the value.

Set header social icon size

How to change header icons’ alignment

By default header icons in Divi theme comes on the left side. But you can also place them either right or center of the header. To place them on the right side, go to WordPress dashboard >> Divi >> Theme Options scroll to the Custom CSS section and add the below custom CSS.

Divi theme options custom css

#top-header #et-info {
    float: right;
}

Divi header social media icons

To set icons in the center of the header, add below custom CSS into your Divi Theme Options.

#top-header #et-info {
    float: none;
    text-align: center;
}

Customize divi header social media icons

Step 3: To add social media icons at Divi footer

To add social media icons in the footer, go to Divi Theme Customizer >> Footer >> Footer Elements >> and then check the SHOW SOCIAL ICONS’ box.

Show social icons on footer of divi

This would add social media icons to the Divi footer.

Output divi footer social icons

How to change footer icons’ size

To adjust Divi theme’s footer icons’ size, go to Divi >> Divi Theme Customizer >> Footer >> Bottom Bar >> Social Icon Size, and move the slider or input the value.

Set footer social icon size

How to change footer icon’s alignment

By default footer icons of Divi theme are aligned in the right. However, you can change their position to either left or in the center of the footer.

To place footer icons on the left side, add below custom CSS in the Divi Theme Options.

#footer-bottom .et-social-icons {
    float: left;
}
Divi footer social media icons

To set icons in the center of the footer, add below custom CSS in the Divi Theme Options.

#footer-bottom .et-social-icons {
    float: none;
    text-align: center;
}
Customize divi footer social media icons

How to apply brand colors to Divi social media icons

Having icons on the website according to the branding in today’s time is one of the essential designing aspect. And the Divi theme blends it very well. Therefore, to change your icons’ color in respect to the branding use below custom CSS.

/* Facebook icon color */
.et-social-facebook a.icon:before {
    color: #3B5998;
}

/* Twitter icon color */
.et-social-twitter a.icon:before {
    color: #1DA1F2;
}

/* Instagram icon color */
.et-social-instagram a.icon:before {
    color: #833AB4;
}

Yet, this option would only allow you to add social icons of Facebook, Twitter, and Instagram. If you want to add icons of other social media networks, you can visit the links below.

How to add more social media icons to Divi footer

How to open social links in new tab in Divi and Extra theme

Do you want to add 50+ new modules to your Divi Theme?

Hope you find this article helpful. Before you go, we would like to introduce you to Divi Plus, our multipurpose plugin that comes with some great features you might like.

Divi Plus Divi Web Design Tool
Posted By:
Karan
Karan loves making web beautiful with his keen eyes toward design.

3 Comments

  1. Andrew

    Great! Any idea how to “unstack” the social media icons so they are horizontal?

    Reply
  2. Femil

    Thanks for this post. Can I change the icon to some other?

    Reply

Trackbacks/Pingbacks

  1. Add A Custom Image Icon To The Divi Social Media Module, EASY - Divi Theme - Heather Valencia - […] is a tutorial that shows you how to customize the social icons that are included in the default header…

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

3 Comments

  1. Andrew

    Great! Any idea how to “unstack” the social media icons so they are horizontal?

    Reply
  2. Femil

    Thanks for this post. Can I change the icon to some other?

    Reply

Trackbacks/Pingbacks

  1. Add A Custom Image Icon To The Divi Social Media Module, EASY - Divi Theme - Heather Valencia - […] is a tutorial that shows you how to customize the social icons that are included in the default header…

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

9 Fantastic Ways to Improve Divi SEO of Your Website

9 Fantastic Ways to Improve Divi SEO of Your Website

Whether a small business website or a huge one like Elegant Themes, every website owner wants to rank his/her web pages and posts high in search results in their respective fields, then whether it’s Google, Bing or even DuckDuckGo. Being on the front page of the...

Top 10 Divi Modules You Should Look to Create Amazing Divi Images

Top 10 Divi Modules You Should Look to Create Amazing Divi Images

Images on a website are a crucial part of web design. The same is true with Divi images. However, adding images to the site isn’t enough because web designing has evolved, and simple images on the site with content won’t do much for your business.  It is...