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.

0 Comments

Submit a Comment

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

0 Comments

Submit a Comment

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

Divi Presets: What it is and why you should use it

Divi Presets: What it is and why you should use it

Elegant Themes regularly releases updates for Divi. Some of those updates are more important than others. A recent update, called Divi Presets, is one of the most impressive and important updates so far. It promises to save you time in designing and editing your Divi...

15 professional website design tips you can follow in 2020

15 professional website design tips you can follow in 2020

Competing in today’s business landscape can feel like an impossible task. No matter how many calls you make, emails you send, or social media posts you submit, it will feel like companies with more resources than you are always a step or two ahead. When it comes to...

Create Divi logo carousel easily with Divi Plus logo slider module

Create Divi logo carousel easily with Divi Plus logo slider module

What makes a business website good that provides service in the market? It's their portfolio and how they present it. And Divi logo carousel on Divi theme business sites adds +1 in portfolio presentation. Therefore, in this blog post, we're going to see how we can...