Free Divi Social Media Section
I was recently working on a project for a musician, film and performing artist who wanted his site to have a very visible and prominent social networking section instead of the usual social icons and follow buttons. After viewing some examples and discussing some details we put Divi to work.
FIRST TASK: We need a 5 column row in order to accommodate the 5 social networks he wants displayed. Thanks to the Divi community, this has already be solved by using simple float and width codes for each element.
SECOND TASK: Using the Divi icons and coloring these to the color schemes of each social network.
THIRD TASK: Make the icons change colors on hover. The colors would be a reverse and also modeled after the social network’s official colors.
Task #3 required some CSS which I found and borrowed from another Divi user ( found here). The key to using this code was to replicate it and assign each version its own class name then assign them to their respective modules via an ID tag.
Here Is The Final Result
Download The JSON File
If you feel you have a need for this feel free to download the zip file containing the two elements.
1) The actual Divi library JSON file you’ll need to import
2) A text file containing the CSS you will need to insert into your Custom CSS section in Theme Options or into your child theme stylesheet.
Obviously, you can change the background colors, spacing and so forth using the standard Divi methods. And, if needed, you can add more columns. However, that would require adjusting various settings in each module of the template to allow for proper spacing. Right now each column is set at 190px in width and 25px of margin between them.
0 Comments