Custom Wordpress Sites

E-Commerce Sites

Featuring WooCommerce

Custom Wordpress Hosting

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

Join in on my latest discussions and Indian Country news

The most direct & personal way to communicate with me

Watch my newest videos and episodes

Inspirational quotes and images

snapchat-icon-150

SNAP ME!

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.

Pin It on Pinterest

Share This