Child themes created by Divi Children 3 allow you not only to easily customize your Divi social icons and to add new ones, but now you can even arrange them as you like thanks to the new Social Icons EZ-Builder.
The default Divi social icons options
Out of the box, Divi provides options to include just four social icons on your footer and top header:
You can enable them and enter their URLs in the Divi Theme Options panel, under the General tab:
And then, using the Customizer, you can choose whether to display them on your footer and on your header:
But that´s all. You can´t add new social icons easily, you can´t decide were to open the links (in the same browser tab or in a new one), you can´t modify the order in which the icons are displayed.
When it comes to styling the social icons, you can do it separately for the footer and the header. The appropriate Customizer settings are found in Footer > Bottom Bar for the footer social icons and under Header & Navigation > Secondary Menu Bar for the header icons. But the default Divi social icons style customization is limited to icon size and color (with the same color for all icons). Hover color can´t be set, for instance, nor the spacing between icons.
The new Divi social icons options brought to you by Divi Children
Child themes created by Divi Children bring you a lot more freedom. To start with, you will be able to add 10 more different social icons to your site now, because the following social networks are available in your child theme:
Secondly, you´ll not only be able to add and remove social icons, but even to change their order very easily. The Social Icons EZ-Builder will allow you to arrange your social icons as you like.
In the third place, for every social icon a separate control with a checkbox is provided to open the link in a new browser tab.
Those are features brought by the Social Icons EZ-Builder. But further customization for your social icons is also possible thanks to the controls in the new Header Social Icons Styles and Footer Social Icons Styles sections that you will find available in the Customizer for your child theme. They will allow you to customize the hover color or the spacing between icons, and also to use the original brand colors from each network.
How to add, remove or arrange your Divi social icons
First of all, you should have your CSS output set to “Development Mode” in the Output Mode section of the Customizer, so you can preview your changes. If you have never set it yet to “Production Mode” then you´re all set and you don´t have to do anything about it, because Development Mode is the default mode in your child theme. Otherwise, make sure your child theme output mode is set to Development Mode and hit the Save & Publish button of the Customizer before you continue customizing your child theme.
Now you´re ready to start playing with the Social Icons EZ-Builder. Open the “Child Theme” – Social Icons Customizer panel and then the Social Icons section and choose Customize Social Icons to make the EZ-Builder appear:
The default elements you will find in the Social Icons EZ-Builder the first time you open it are precisely the four Divi default social icons: Facebook, Twitter, Google+ and RSS icons, in that order. That is supposing you had them all enabled in Divi Theme Options, because your child theme grabs the default options and data from there. If you only had Facebook and Twitter enabled in Divi Theme Options, for example, the first time you open the Social Icons EZ-Builder you will find just those two elements on it.
Your child theme grabs the social profiles URLs from Divi Theme Options as defaults for the Social Icons EZ-Builder as well, if you´ve already entered them. Also, the Open link on a new browser tab is set as default for the default social icons:
To add a new social icon, just click on the [+] button you´re already familiar with and select the desired social network (the new element will appear open so that you can fill its option fields). To remove any icon you´ll need to open it first so both the “X” and the red “Remove” link appear, so it´s not easy to delete them accidentally. Finally, to rearrange your social icons, just drag them and put them in the desired order:
How to style your Divi social icons
Now that you´ve created and arranged your Divi social icons, you can give them a bit more spice by means of the new styling sections available in the Customizer. I´ll show you how they work for the footer social icons (using the controls available in the Footer Social Icons Styles section), but the same applies to the header social icons (by means of the Header Social Icons Styles section in that case).
As I said before, the icon size can be set via a native Divi Customizer setting, as well as the icon color in case all of them are to be displayed with the same color. Now, the new options available for your child theme are:
Original branding colors
Instead of all of them with the same color, you can display your social icons in a more colorful fashion: each icon with its original color, with the branding color from each social network:
For consistency with the color scheme, when you select this option the color displayed on hover for each social icon will be a darker shade of its original branding color.
If you´re not customizing your social icons with its original branding colors but with a homogeneous color for all icons, you can now customize the color of the icons on hover:
Original branding colors on hover
Another cool new option when you are using a homogeneous color for all icons is to have different colors on hover, more precisely the original branding color for each social icon. Just click the checkbox and you´ll get that effect:
For a better integration of the array of social icons with the design of your site, a slider control to customize the spacing between social icons is also provided:
So now, with the flexibility of the Social Icons EZ-Builder plus the style settings available for social icons, together with some other settings available for the placement of social icons in the Footer Bottom and Top Header sections of the Customizer, customizing your Divi social icons just got easier and more effective than ever.
- New Divi Children 3.0.10 update released - April 7, 2022
- New Divi Children 3.0.7 version for WordPress 4.9 - November 15, 2017
- Understanding Divi Children Output Mode - October 11, 2017
Thank you Luis.
Top quality work you have here!
Thanks, Sueli. Glad you like it! 🙂
Luis, excellent work. I’m using it right now for a new client website. And i’m very impressed about the options. Would it be possible to add more social icons? I’m looking for Xing. It’s very common in germany and all my clients want this icon. I do it manually right now. Thank you for this great peace of work!!!
Hi, Alvaro, and thank you for your kind words. Of course, I´ll eventually add more social networks in future updates. For simplicity, in this release I´ve only included those icons that come with the Divi default icon set.
how can i purchase the builder for social icon
It´s free. It´s available in any child theme created by the free Divi Children plugin.
Divi Children 3.0 is excellent! I have made various settings through the customiser including some css and also added some php directly to functions.php
How do I now use my child theme on a new project?
You’re the best. Can’t thank you enough for this magnificent plugin. I keep sharing it with my friends and customers! 🙂
Thanks for your great effort. I would like to add whatsapp icon on my top header.
have to add into Divi child theme editor, soical_icons.php ?
There showing, below codes