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

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

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

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

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

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

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

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!

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

divi-2-6-logo

Divi 100 Day 32

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post How to Add Icons to the Divi Menu – Divi Nation Short appeared first on Elegant Themes Blog.

View @ ElegantThemes

Leave a Reply