[ad_1]

Welcome to Day 32 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


If I’ve learned one thing creating tutorials for Divi it’s that the community loves tinkering with the Divi Menus. As a staff, we are well aware of the desire for more Divi Menu options and look to expand upon the header/menu options we already provide in future updates. But in the meantime, we’re happy to offer little tips, tricks, and hacks that can be applied to the Divi header/menu area and today’s post is just that.

How to Add Icons to the Divi Menu – Divi Nation Short

[powerpress]

In this episode of Divi Nation our new Divi video tutorial specialist Augustine Mak shows you how you can add icons to Divi’s menus. This simple menu hack can be used in a number of creative ways to improve the appearance and user experience of your Divi website’s header/menu section. Enjoy!

Subscribe To Our Youtube Channel

All Subscription Options:

Summary: How to Add Icons to the Divi Menu

add-icon-to-divi-menu-00
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

In this tutorial we’re going to show you how to add an icon to a Divi menu. It may be easier than you think!

add-icon-to-divi-menu-01
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

The first thing you need to do is actually design or acquire an icon with a transparent background. If you’re creating the icon yourself, be sure to save it as a transparent png.

add-icon-to-divi-menu-02
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Next, add a new page to your website (keep it as a draft, do not publish). Upload the icon you’ve just created to that page and in the text tab, copy the embed code. Once you’ve copied the code delete that page draft and navigate to Appearance > Menus.

add-icon-to-divi-menu-03
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Add a custom link to your menu. Put whatever destination link you would like into the link area. In the text area, paste the image code you copied a moment earlier.

add-icon-to-divi-menu-04
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Add the new custom link to your menu and click save. You should now have a Divi menu with an icon in it.

add-icon-to-divi-menu-05
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Next Week on the Divi Nation Podcast

Next week on the Divi Nation podcast I will be interview another member of the Elegant Themes staff. This time, lead designer Mario Maruffi, the talent behind all of these amazing layout packs we’ve been giving away throughout Divi 100. More than that though, he’s been working hard to make Divi itself the most beautiful website builder in the world. We’ll talk about all that and a lot more on the next episode of Divi Nation. Stay tuned!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

[ad_2]

Source link