Customizing Divi social icons is probably one of points that have raised more questions within the Divi users community, so we will begin this Engined tutorial series addressing it.
Getting ready for customizing Divi
First of all, you should have your CSS output set to “Development Mode” in the “Engined 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 ok, because “Development Mode” is the default mode in Engined.
So, in case you´ve used this option before, make sure your site is set to Development Mode before going ahead with your Divi customizations. Use the Engined Output Mode section of the Customizer:
Setting up your social icons
The first social icons option you will find in Engined is a dual button that lets you choose between the default Divi social icons settings (found in the Divi ET epanel) and the Engined customization settings.
Even if you choose to customize your social icons instead of using the settings from the epanel, Engined will automatically import any setting values you might have already entered via your epanel.
Once you´re in the Customizer, open the Social Icons section inside the Engined General Settings panel and hit the Customize social icons button to start customizing your social icons:
You´ll notice that a couple of new options appear underneath the button as soon as you hit it: one to open the social icon links in a new browser tab and the other to add nofollow attribute to links. You´ll no doubt find the first option very useful because you´ve probably noticed that in the default Divi condition the links open in the same browser tab, and there was no way to change this without adding some code to your site.
You will also see a whole sub-section appearing below those options. It is titled Individual social media settings, and here is where you can type or paste your social media urls and set which social icons you want to display on your site. Here is also where the data imported from your epanel settings is used to fill the appropriate default settings.
As you can see in the image above, Engined comes with settings for a few other social media networks that have been added to the default Divi options, since only Facebook, Twitter, Google+ and RSS are included in Divi.
With Engined you can also set your social icons for Pinterest, Linkedin, Instagram, Skype, Flickr, Youtube and Vimeo.
Customizing your footer social icons
Once your social icons have been set, you´re ready to start customizing the way they are displayed on your Divi site. We´ll begin having fun with the footer social icons.
The Divi footer is divided in two parts: the Main Footer where the footer widgets are displayed and the so called Footer Bottom or the bottom band where you can see your site credits. In Divi out of the box, the footer Social Icons are displayed on the right side of the Footer Bottom.
Engined includes two separate Customizer sections for the Main Footer and the Footer Bottom (besides yet another one for the Footer Credits, but we will take care of that one on another tutorial). So go ahead and open the Footer Bottom section you will find inside the Engined General Settings panel.
The first Engined option you can use to customize the way your social icons are displayed in the footer is not a social icons specific setting, but it lets you choose the position of the social icons:
Instead of the default Divi footer layout with the social icons at the right and the credits at the left hand side, Engined also allows you to select a reversed layout (with the social icons at the left side), or even a nice centered layout where your social icons are clearly visible right in the middle of the footer bottom while the credits are displayed in a different line below them:
Next, if you scroll down the Engined Footer Bottom section of the Customizer, you´ll find the Social Icons sub-section where you have several settings.
The first option lets you hide or display your social icons in the footer. The Divi “Show social icons in footer” option is always forced to on by the Engined child theme, so here is where you can disable the display of footer social icons if you don´t want to show them.
Regarding the social icons colors, you have the option to display all the icons with the same color (Divi default) or to use the color taken from the original color used by each media network (so that Engined uses Facebook blue, Google+ red, and so on).
If you select “Use Divi Default“, you can choose the color and the hover color you want to display for all the social icons, whereas if you select “Use Original Icon Colors” each icon will be displayed with its own original color, the hover color being a darker shade of it.
There are yet a couple more settings available to further customize your social media icons in the footer:
- Social icons size: This slider control lets you change the size of your icons if you like it to be different from the Divi default 24px size.
- Social icons separation: The spacing between social icons can be set via a slider control that lets you modify the left margin for each icon.
Customizing your social icons in the header
The other place where social icons are shown in Divi is on the Top Header. By default, Divi displays the phone and email info at the left side of the header and the social icons at the right side, but Engined lets you reverse this layout in the Top Header section of the Customizer, also inside the Engined General Settings panel.
The option to reverse the layout is under the Top Header Info sub-section, where you can also see a setting that allows the alignment of the header social icons to the top right position of the screen:
As in the footer, Engined also includes a Top Header Social Icons sub-section to customize your header social icons. And, as in the case of the footer social icons, you can customize here the colors and hover colors, as well as the icons size:
Finally, remember that once you´re done with all your customizations, you can switch the Engined Output Mode back to Production Mode in order to make your site work faster.
And that´s it. I hope you´ve found this tutorial useful. See you in the next one!