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!
- 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
Brilliant, thank you Luis. I will definitely be using Engined on my next website, need to read up a bit more about it to see if I could and should be using it existing sites which were created with the DIVI Children plugin and Child Theme.
Thanks again for your amazing effort in developing these plugins and Child Themes to make it so much easier to customise DIVI for ‘limited’ coders like myself 🙂
Just one thing: I LOVE Engined, it makes my life so much easier!! I have one problem though… when I try to set the social icons like you explained, in the Customizer, it works in the pre-mode, but when I save and publish, it still shows the default icons from the epanel. Have you any idea what is happening here? Thank you so much!!
I´ve checked somebody else´s site last week with a similar issue, and it was a problem related to the initialization of setting values imported from the epanel. The way to solve it was really simple: I checked the one icon she didn´t want, saved the changes, unchecked the unwanted icon again, saved once more… and it worked. Can you please check this out?
Sorry about the inconvenience. I still have to find the right way to fix this, but I´m afraid I´m going to be too busy with all the changes coming with the Divi 2.4 update to have this ready soon.
Hi Luis! Yesssss it worked!! Thanks a lot, you just made my day!
Best of luck with the changes for the update and keep on rockin’!!
Glad to be of help, Miriam 🙂
Hi there Luis,
First of all, I would like to thank you for all the efforts you’ve made for the great improvement / developer’s ease of use experience in using DIVI. I am aware about what happened in the other fence.
But you know what, I cant get Engined run on my Divi. I am very excited to use Engined by I cant get through in installing it. I am getting “The parent theme is missing. Please install the “Divi” Parent theme.”
I am a newbie and your product Engined will great help me in developing. How or what will I do to install Engined flawlessly…?
Thanks again in advance.
Can you check whether you have a standard installation of Divi like yoursite.com/wp-content/themes/Divi/ or not?
Luis, yes this is what i have: mysite/wp-content/Divi2.1.2
What shall I do next?
I see, that´s why you´re having problems: the parent theme folder should be named just ‘Divi’, not ‘Divi2.1.2’, and it should be within the ‘/themes/’ folder.
Just wanted to let you know that this helped me a lot today! Could not have figured it out alone.
Thank you very much, Luis! 😀
Is it ok if I rename it using Filezilla? Btw, there are Engined folder there already. There are 6 Engined folders coz I tried 6x. Should I delete the Engined folders and I’l do an Add New theme within WP?
Is that the right thing to do in my scenario?
Yes you can delete all those repeated Engined folders and install Engined from scratch once you have renamed the parent theme folder.
Great Luis, it is now working.
Thanks a lot men.
I can now start customizing my page.
Is it possible to change the screenshot of the engined theme?
Not in an automated way as it´s possible with Divi Children, but you can always replace the screenshot file manually.
hi there luis,
here i go again. i have a new installation of divi and i am getting an error message “the parent theme is missing, please install the Divi parent theme”
its a fresh installation of WP & DIVI, then i want the Engined to be there and i am getting the above error. what shall i do??
thanks in advance luis.
luis, prob solved. i just activated the divi theme and engined is working now.
Can I use thiis, together with the Divi theme and do I not lose my work?