A wonderful way to change up the appearance of a Divi website is to add social media icons to the menu.

Not only is this an excellent way to create a unique look and feel for your website, but it’s also a great tactic for improving the user experience of your website by giving clear and consistent direction for how to follow your brand or business on social platforms. 

In the following blog post, we demonstrate how you can easily add social media icons to your Divi menu using our plugin Divi Icon Party.

For this tutorial, I’ve set up a local development/testing environment. If you’d also like to set up a testing environment for your website work, follow one of the following tutorials:

• How to Set Up a Local Development Environment Using DesktopServer (Aspen Grove Studios)
• How to Set Up a Local Development Environment Using Local by Flywheel (Divi Space)
• How To Create A Local WordPress Installation On A Mac Using MAMP (Elegant Themes)

To showcase Divi Icon Party, I’ve used our free Divi child theme Divi All Purpose with the demo content installed. If you’d like to use Divi All Purpose for your next website, you can download it for free here.

How to Set Up Divi Icon Party

To begin, you’ll need to install the Divi Icon Party on your WordPress website. There are two ways to install the plugin. If you haven’t already done so, be sure to purchase Divi Icon Party and download the plugin files.

If you’re brand new to the WordPress interface, we recommend reading our blog post How to Install a WordPress Plugin (Step by Step Guide for Beginners) which not only gives a plugin installation tutorial, but also explains what a plugin is, how it can function and what that difference is between free and paid plugins.

Once you have installed Divi Icon Party, make sure that you click Activate or else the plugin will not work.

Once activated, Divi Icon Party will create a new menu item in the Divi Theme Options tab.

As you visit the Divi Icon Party settings, you’ll be prompted to enter your plugin license key.

To find your license key, log into your Account page (either via the Divi Space website or the Aspen Grove Studios website depending on where you purchased the plugin), navigate to the Purchase History page and click on View Licenses of Divi Icon Party. Once the license page displays, click on the key icon and copy the license key. Return to your website, paste in the license key and click Continue.

How to Add Social Media Icons to the Divi Menu

Once the license key has been entered and authenticated, navigate to the General Tab of the Divi Theme Options. Here, you’ll find a collection of new social media icon options. Simply enable or disable the networks that are relevant for you.  

Next, scroll down slightly and enter the relevant URLs associated with each social network.

Now that you’ve selected the social media profiles and entered the relevant URLs, all that’s left is to add them to the main navigation bar in the header.

To do so, all you have to do is scroll just above of the options where you can add the profile links, find the option that says Show social icons in main header, toggle it to enable and Save changes.

Once you refresh and view the frontend of your website, you’ll see the social media icons – hyperlinked to the URL you specified – right within the navigation menu. If you don’t see a change, clear your browser cache with a hard refresh.

Quick, simple and effective. With no code work whatsoever, Divi Icon Party makes adding social media icons to your Divi header ridiculously easy.

Also within the Divi Theme Options General tab, above the “Show social icons in main head” option, are another two options (simply toggle these on or off to enable):

• Open social links in a new tab (leave this option disabled to open the social network in the same browser window), and
• Show social icon name on hover.

One of the best aspects of the Divi Icon Party plugin is that the social media icons are cover practically every popular social network available.

With Divi Icon Party, you can use the following icons in your Divi web builds:

• LinkedIn
• YouTube
• Pinterest
• Tumblr
• Instagram
• Skype
• Flickr
• MySpace
• Dribbble
• Vimeo
• 500px
• Behance
• Bitbucket
• DeviantArt
• GitHub
• Medium
• Meetup
• Slack
• Snapchat
• Twitch

Ending Thoughts

Adding social media icons to the Divi theme has never been easier. By simply enabling select networks and linking the respective URLs, you’ll be able to create a deep and engaging online with your brand.

The plugin is extremely easy to use, it requires no configuration and users do not need to employ any code in order for the icons to display.

If you’d like to add a collection of new social media icons to your Divi website, purchase the Divi Icon Party plugin now!

If you’d like to use the free Divi child theme from this tutorial, download Divi All Purpose.

We want to hear from you!

How have you used social media icons on your Divi site? How have you integrated your social networks into your website? Which social media icons would you like us to include in future versions? Share your thoughts with us in the comments section below. We love receiving your feedback!

Thanks for reading!