How to Easily Create a Divi Menu Button in Divi 4.0+

hey everyone tim striffler here with divi life and we are back with another devember tutorial all month long so far for november we've been running our devember campaign where we have been doing divi tutorials we've been giving away divi freebies we have been launching new features to some of our existing divi products as well as doing some special devember uh discounts essentially and this is all leading up to our insane black friday uh product release sale promotion whatever you want to call it that is happening on friday so stay tuned for that we're going to be launching some epic new products for divi as well as the biggest sale of the year so definitely stay tuned but today we're going to be doing a divi tutorial we're going to go ahead and dive right in and it is a simple one but super powerful and it's how to easily add a divi menu button to your header whether it's in uh your default header whether it's in a divi theme builder header it's super easy to do and then we also added some additional things to it so that you can really draw attention to your call to action button and so this is what it looks like here we've all seen it it's very common today to be able to have a menu and then have a button and so if you're using divi's default menu this tutorial is going to work if you're using a divi theme builder header that you created or using a template then this tutorial will still work because it's going after the native wordpress menu system and on that note too definitely check out the rest of our devember series yesterday or i'm sorry uh a couple days ago we gave gave away we didn't fully give away we practically gave away our header layout packs basically we gave 85 percent off uh normally they're they sell for 50 and we're selling them right now as a devember special for five bucks they've been flying off the shelves it's a really good deal so definitely don't miss out on that so you can check out what they look like here but this tutorial is not about the headers so just wanted to mention that so let's get back to our tutorial today how to add a call to action button to divi uh the first thing we're going to do is you're going to want to open up your menu so you go to appearance and let me just make sure that we can all see this i'm going to zoom out a little bit here okay that should be good so we're going to go to appearance and then we're going to go to menus and then what you're going to do is you need to go up into screen options which is the top right you're going to click on screen options and then you're going to make sure that the css classes is open or i'm sorry enabled so just make sure that box is checked and then that will make sure that you can add a css class to your menu item and then once you do that you can go ahead and add the class to the menu and so you're going to open it up here and you'll see this box css classes so i'm going to go back to the blog post here and we're going to use the css class you don't have to use this this is just makes it easy because we have the code that you can just copy and paste but you can call this whatever you want so i'm gonna go ahead and copy it and then i'm gonna come back to my menus i'm gonna go ahead and paste it just like that you don't want a a dot in front of it or anything like that oops that's coming later you just wanna make sure that it's just like this inside the menu and then what we're going to do is we're going to hit save so that in and of itself is not going to do anything we have to add the code to it and so i'm going to come over here to the blog post and i'm going to copy this code and then whoops copy the code here and then we're going to go to divi theme options now if you are using a child theme and you place all your code in the style.css file that's where you're used to putting custom css well then you can go ahead and add it there but otherwise and if you don't know what i'm talking about then go ahead and navigate to divi and theme options and then on the default tab just scroll all the way down until you see this custom css box here my head might be in the way but you can see it's custom css and they're going to paste that code just like that and then you're going to hit save so i'm going to go ahead and show you so this is what my menu looks like by default i have menu one minute two and join now just for demonstration purposes here but i'm gonna go ahead and refresh this now that we've added the css class now that we've added the custom css we're gonna as soon as this page reloads we're gonna have a nice call to action button for the join now link so you can see how it looks just like that so it's super simple and it looks great so we're super happy about that now you might be wondering okay well how does it look on mobile and so uh it actually looks really good so let me see if i can pop this open for you here i'm i'm over in safari so it might not work let me let me just open up here so we added some text to make it centered so when this decides so this is a local install here it goes into our hamburger menu just like that and so it's nice and centered inside of the hamburger menu so it'll look good now if you wanted to not have it on mobile and just have it on desktop then you would basically add a css media query in front of it so that it won't go it'll only load the max width that'll it'll load on or i'm saying the minimum width that will load on is 981 pixels so if you need help with that let us know in the comments and we'll give you the code so you can do that but that's not officially a part of today's tutorial here so that's it that's all you do so if you wanted to go in and you wanted to customize this uh you wanted to change the color okay well then you're just going to go ahead and change this background color here um where it says background color so pretty straight forward same thing the padding so the the top padding top bottom padding as well as the side padding you can change here and then if you wanted to make it not rounded corners you can just remove the border radius or you can adjust that just to make it fit the style of your other buttons and then same thing if you wanted it to be not all uppercase and you can just remove the text transform uppercase and if for some reason you wanted a color other than white for the text of the button so not the background but the text then you would change that here and then the text align center that only comes into play for for mobile it's going to be centered on desktop by default but if you remove that then it's going to be all funky on mobile so i won't remove that unless you're not going to have it on mobile so that's all you do now we added some a bonus part to this tutorial and so i'm going to come back here to my blog post so first of all we're all used to seeing this right here this is nothing new like every website that you go to for the most part it's gonna have some sort of call to action button and because users are so used to seeing it it's almost as if their brain filters that out it's it's called ad blindness it's like when you're uh you're driving uh and somewhere where there's a ton of billboard ads you your brain just kind of ignores it because you're so used to seeing them that it's no longer catching your attention uh same thing on websites you probably don't even notice banner ads anymore your brain's so used to seeing it so it filters it out and ignores it so it can focus on what you came there for which is the content the same thing goes with the call to action button users are used to seeing it and so they might not even notice it and i've actually been in that place where i'm looking for something my brain has ignored the call to action button and instead i'm looking for whatever i'm looking for in the main menu when it's right there in front of me and i think i can't find it and it's right there in the button all big and bold and uh you know like a button and so uh because of that there's some things that we can do to make our buttons stand out more and that is adding some animation now if you are watching my screen right now which you should be you should see this now this is a promo bar added with our divi bars plug-in you'll notice this learn more button it shakes or or it wiggles so to speak so that is a feature that we have built into the divi bars plugin where you can add these little what we call them attention grabbers so it'll grab the user's attention well we basically pulled that code out of divi bars and we made it part of this tutorial so you can add it to your menu called action button or anywhere on your site for that matter so it does a nice little shake there and so same thing with our our headers that i mentioned we added these headers uh let me go to the header layout the actual product page here and so you'll notice because these are on sale right now for 85 off we we make this text shake we don't want people to miss it so it's like right there you can't miss it uh so you might be thinking okay well i don't want to ignore my or i don't want to annoy my visitors i don't want them to be annoyed that i'm adding an attention grabber and that is definitely something to consider one thing though is we these attention grabbers aren't crazy so it's not like it's blowing up 300 percent or you know it's shaking constantly you know it does a little shake then it stops and then it's going to do another little shake and then it'll stop so it's not constantly shaking but again it's completely optional so you don't have to do it so um so let's let's show you how to actually add that so uh just like before so you can see here this is what the animations look like there's wiggle and there's breathing wiggle wiggles and the breathing kind of does like a breathing effect it's not again it's not constant it'll do a nice inhale and then a nice exhale and then it stops so you can add either one of those um and so all you do is you copy and paste the class actually i'm gonna let's do breathing and we're going to add this back over to our menu so go to appearance menus and we're going to add it to the join now button and we're going to add it after the divi live cta menu class but we just want to add a space there so you can see there's a space in between you want to make sure that there's a space there otherwise it's going to break everything and we'll go ahead and hit save menu now nothing's going to happen yet because again we have to add the corresponding css so we can just go and select all of this here we want to make sure we get all of it i'm just going to do a command oops it's not going to let me do a command a on it unfortunately okay normally i like to hit command and it selects everything so okay so that's all selected great so now we're going to go back over to our site go to divi theme options or wherever you place your css code and we're going to paste it below and we're going to hit save now that's the code for both the wiggle and the breathing so that way you can easily switch back and forth if you want to and so as soon as this refreshes our join now button which could be easily ignored is now going to have a nice subtle breathing effect which makes it a lot harder for someone to just completely overlook and so you can do the same thing with the wiggle obviously you would just add the css class for the wiggle and add it to the menu item i probably wouldn't recommend adding both that might be a little bit much so definitely just to choose now if you like this tutorial go ahead and subscribe to our email list here it says big button you can't miss it subscribe to divi life and never miss a tutorial free we probably should add a breathing effect to this button so that you don't miss it or overlook it and when you click that it's going to open up a pop-up with our plug-in divi overlays and then uh with the form where you can add your name and email and then when we add new divi tutorials new divi freebies uh new special offers whatever such as our five dollar header pack uh then you'll get notified and so as i mentioned we're leading up into big our big black friday sale it's the biggest sale of the year and it's also when we launch basically all the products that we've been working on uh all year long and so it's going to be a big deal uh so you definitely don't want to miss that and that is starting on friday so hopefully you enjoyed this tutorial um hopefully you found it helpful uh it might be something where you've done it before from a different tutorial but hopefully we added something extra with the attention grabbers let us know in the comments if you have any questions or if you have any requests for other tutorials other things that you'd like to learn that you'd like us to cover here on the blog so thanks everyone for tuning in until tomorrow take care bye

Channel: Divi Life

Views: 2,169

Keywords: Divi, Divi Theme, Divi Tutorial, Divi Menu Button, Divi Call to Action Button Menu, Divi Life, Elegant Themes, Tim Strifler, Divember

Id: cspZacNtH80

Length: 13min 52sec (832 seconds)

Published: Mon Nov 23 2020