Divi is, according to its developer at least, the most popular WordPress theme in the world. With its ease of use and customisability, it’s easy to see why. However, it still has its quirks, and one of the more frustrating aspects of Divi is the way it handles social media icons. If you’re using Divi and having difficulty getting your social media icons to do what you want, here’s three fixes that should help:
1) Open Divi Social Media Links in New Window
This is pretty much HTML 101 for any web developer – always set your external links (i.e. links on your website that open pages on other people’s websites) to open in a new tab/window. We’ve actually covered this before here, but we thought it would be helpful to group it together with these other fixes to give you a complete set of fixes for Divi’s social media icons
Most people have to work very hard on SEO or spend a lot of money on AdWords in order to bring traffic to their websites. The last thing you want to do is send people away before they’re finished. As a result, you need to ensure that your social media links (as with any external links) are always set to open in a new tab/window. The only problem is, Divi sets them to open in the same window by default and there is no way to change this through the options. Luckily, there’s a fix. Just add the following code to your Theme Options ->Integration page (in the ‘Add code to the < body > of your blog):
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".et-social-icon a").attr('target', '_blank');
});
</script>
2) Separate Divi Social Media Icons from Contact Details
This is a very strange one, and I think it may actually be a bug in Divi. For some reason, the Divi social media icons seem to ‘stick’ to the contact details in the secondary menu bar, but this has happened intermittently in the past so it’s not clear whether this is a frequent bug or a conscious design. In either case, there’s a very simple fix that will split your secondary menu so that the contact details are on the left, and the social media icons are on the right. Just add this to your CSS (either via a child theme or at the bottom of the Theme Options – General page):
#top-header .et-social-icons { float:right !important; }
#top-header #et-info { width: 100%; }
3) Change Divi Social Media Icons
This is a really nice one. Divi ships with just a few basic social media icons out of the box, so you are limited to just Facebook, Twitter and Google Plus. However, there is a simple way to change these so you can add whichever networks you like. Firstly, take a look at these CSS styles:
.et-social-facebook a.icon:before {content:'\e093'; }
.et-social-twitter a.icon:before {content:'\e094'; }
.et-social-google-plus a.icon:before {content:'\e096'; }
.et-social-pinterest a.icon:before {content:'\e095'; }
.et-social-linkedin a.icon:before {content:'\e09d'; }
.et-social-tumblr a.icon:before {content:'\e097'; }
.et-social-instagram a.icon:before {content:'\e09a'; }
.et-social-skype a.icon:before {content:'\e0a2'; }
.et-social-flikr a.icon:before {content:'\e0a6'; }
.et-social-myspace a.icon:before {content:'\e0a1'; }
.et-social-dribbble a.icon:before {content:'\e09b'; }
.et-social-youtube a.icon:before {content:'\e0a3'; }
.et-social-vimeo a.icon:before {content:'\e09c'; }
.et-social-rss a.icon:before {content:'\e09e'; }
Each of these is included in Divi by default, and is responsible for pulling in the relevant icon for your social media network. If you want to use, say, Instagram instead of Facebook, all you need to do is add the Instagram style to your CSS, making sure it targets your ‘Facebook’ element. For example, this is the Instagram style:
.et-social-instagram a.icon:before {content:'\e09a'; }
Just change the Instagram class to Facebook:
.et-social-facebook a.icon:before {content:'\e09a'; }
Then add this to your CSS (either via a child theme or at the bottom of the Theme Options – General page), and the icon will change to an Instagram logo. Finally, you need to add the link to your Instagram page to the ‘Facebook Profile Url’ in your Theme Options – General page. That’s it!
