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

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.

Divi Flexile Footers – A pack of Ultimate Divi Footers

Divi Flexile Footers – A pack of Ultimate Divi Footers

Footers provide users with a lot of useful information, whether it is the footer menu, short info about the business, or social icons. You can use a Divi footer to emphasize your website’s bottom area for better user interaction and get multiple goals fulfilled, such...

How to add an Ajax Add to Cart button to Shop module in Divi

How to add an Ajax Add to Cart button to Shop module in Divi

By default, when you insert the shop module in the Divi theme, you don't get any add to cart button. The shop module only displays products with pricing, sale tag (if the products are on sale), and a sorting filter, but no "Add to Cart." However, you've probably seen...

Divi Flexile Headers – A pack of Ultimate Divi Headers

Divi Flexile Headers – A pack of Ultimate Divi Headers

Headers are an essential part of a website. From assisting users navigating the site pages to pages to bring leads to a business, headers play a key role. And with the Divi headers available in the Divi Flexile Headers, you’ll be able to enhance this role in doubles....