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:

• Facebook
• Twitter
• Google+
• RSS

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:

• Facebook
• Twitter
• Google+
• Pinterest
• Linkedin
• Tumblr
• Instagram
• Skype
• Flikr
• Youtube
• Vimeo
• Myspace
• Dribbble
• RSS

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.

Hover 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:

Icons separation

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.

EZ-Builder, Social Icons

• Author
• Recent Posts

Luis Alejandre

Luis is the creator of Divi4u and the editor of this blog. You can read more about Luis in his About page. Luis also created and runs the free online WordPress tool WPThemeDetector.

Latest posts by Luis Alejandre (see all)

• 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