How to Add Social Media Icons to the Divi Menu

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. 

Divi Icon Party Menu
  • Google+
  • Facebook
  • Twitter

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:

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.

Install and Activate Divi Icon Party plugin
  • Google+
  • Facebook
  • Twitter

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

Divi Icon Party Divi Theme Options
  • Google+
  • Facebook
  • Twitter

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.

Divi Icon Party License Key
  • Google+
  • Facebook
  • Twitter


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.  

Divi Icon Party Divi Theme Options Social Network Icons
  • Google+
  • Facebook
  • Twitter

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

Divi Icon Party Divi Theme Options Social Network URLs
  • Google+
  • Facebook
  • Twitter

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.

Divi Icon Party Divi Theme Options Social Icons in Header Frontend
  • Google+
  • Facebook
  • Twitter

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.

Divi Icon Party Divi Theme Options New Tab and Icon Name on Hover
  • Google+
  • Facebook
  • Twitter
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.

Divi Icon Party Theme Options Example Icons in Header
  • Google+
  • Facebook
  • Twitter

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!

Lisa-Robyn Keown

Lisa-Robyn is a qualified copywriter and brand strategist from Cape Town, South Africa.

Previous post
Next post

5 Comments

  1. Melissa Breau

    Any way to use this to create “share to” links instead of follow links?

    I’ve been trying to find a way to do that :/

    Reply
  2. Glen Woodfin

    Will this icon pack also work with the social icons in the footer/bottom bar, where the four default icons are when you first activate the Divi theme?

    Reply
    • Glen Woodfin

      Never mind, I see that the icons do work on the bottom bar of Divi sites on your purchase page.

      Thanks!

  3. Jessica

    I need a Houzz icon! 🙁

    Reply
  4. Peta Caswell

    Are you likely to be adding any more icons in the future? As a musician, there are a bunch that would be really handy, such as Spotify, iTunes, Bandcamp, Soundcloud, etc.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *


Receive notifications about our new blog posts.


Don’t leave before entering to win an iPad Pro! It’s Free!

You may be too early for our Black Friday specials, but you can still enter our competition! Leave your details below and you could win an iPad Pro!

Great you've entered our giveaway! Only one step remaining! Please check your email and confirm it.