Creating The Advanced Elegant Themes Dropdown Menu with Divi’s Theme Builder

[Music] [Music] [Music] [Music] [Music] hey definition thank you for joining us in this livestream today we'll show you how to recreate the elegant themes drop down menu in Divi so we'll use the Divi theme builder we'll also use the second free theme builder pack which you aren't able to access by clicking on the link in the description below and if you're not elegant themes Ovi make sure that you check out a doobie I've mentioned a link to the product page where you can go ahead and discover everything for yourself so without any further ado let's get to it all right so I just want to say hi to everyone on YouTube and on Facebook I'm excited for you guys to follow along and hopefully you learn from this tutorial and be able to set up something really beautiful now let's get started with it so over here I have a wordpress website going on and I've created the drop down menu that you can find on a lot of themes that come and over here we have the original so over here I'm on elegant themes website and if I hover this these menu items show up now on our end within our Divi website that'll be - sits over here you have an outcome of what you can expect and we have the exact same result on smaller screen sizes as well so if I click this I'll have these items appear and I can talk obtain the different items and the same goes for the elegant themes website we have the same kind of experience going on so we'll build this using Divis built in modules and we'll also combine it with a bit of code to place all of our modules that we built inside the WordPress menus so everything will create visually will be within the Divi builder and then in the next part of that tutorial so we'll use some code to place those items inside at the menu if you guys have any questions in the meantime make sure to leave a comment and I'll be checking on those and let's get to it alright so the first part of this tutorial it's dedicated to the menu over here we have a few menu items if I go to this website over here and go to the menu and the appearance settings you can see that I've set up a primary menu so go ahead and do that if you haven't done that already I'm working on a website that has the standard navigation going on at this point and the first part is adding some CSS classes to the menu items that you want to contain a drop down menu so we'll start off with three drop down menus that are at the end of this tutorial I'll also explain how you can create more than that now over here in the screen options at the top that I just saw gel's you'll have to make sure that these CSS classes are enabled now then you get to pick three menu items that you want to add the drop downs to so I'll just make it simple I'll add one to the Divi menu item products and contacts so I'll need to add two CSS classes the first one is first level and then the second one so I'll add a space between them and the second one is first level one now for the second item I'm just going to copy these two I'll add them and I'll change the one into two so these have to be consecutive and for the third one I'll change the last number to three all right now in the next part of this tutorial we'll build the global header inside the Divi theme builder and I'm just going to save my menu over here so very important that you do that before I'm moving on to the next part which is creating the custom header and for that I'm gonna go to the Divi theme builder so let me just wait for it to load and so over here we have this post template that's part of the second theme builder part that you are able to download for free and you can access it in the description below so there will be a link where you can go ahead and grab this theme bullet back and it works really well with the menu because it's also part of the design style of elegant themes alright so over here we are in the theme builder and you can choose whether you want to apply this technique on a custom header or a global header will apply to a global header here for instance so I'll start building the global header inside a template editor all right over here I have three options and I'm gonna start building from scratch now over here will need to be two rows one will be dedicated to the WordPress menu and let me just grab the preview really quick so one will be dedicated to the menu in general so we'll use a menu module for this and then a second row which will add later on it will be used to create the drop-down menu items so let's start with the first one and over here I have a section I'll need to make some changes through this section so I'll open these section settings and first of all I'm gonna add a white background color then I'll go to the design tab and I'm gonna remove all default top and bottom spacing by adding zero pixels to both options so top and bottom over here and then I'll go to the Inbox shadow options and this will just help us create a little bit of a difference between let me just grab the preview over here so we can switch between both to have just a little bit of a drop-down box shadow over there so let me just add a box shadow pretty subtle and they just changed this to fifty pixels for instance and also decrease the opacity so you're free to tweak these values however you want so again we're first creating the menu bar and now we can add our row so we'll need a one column only for a row and before adding any modules I'm going to open the row settings and in the sizing settings I'm going to enable custom gutter with I'll place this to one and I'm also increasing the max width of my row this all just allowed the row to take more place up on largest screen sizes and then in the spacing settings I'm going to add some custom top and bottom padding so I'll use ten pixels for both options over here so now that the UFO settings are in place I can add a menu module over here so let me just add a menu module let me just see if you guys are still following along I just want to check if the connections working properly seems like it is all right cool and over here you'll have to select the menu that you've modified in the first part of this tutorial so right now that's the correct ones for me I only have one menu on my website so it's automatically selecting that one and I'm also going to add a logo then I will go to the menu text settings over here in the design tab and I'm going to change the menu font into lotto I'll use a bond vault I mean menu font weight I'm gonna use something a little bit lighter for my mini text color I'm gonna make sure this is uppercase as well I'll shrink the size of my font a little bit and increase the letter spacing to 3 and I'll also make sure that the text alignment is set to right let me make this just a little bit darker it looks good and over here in the drop-down menu settings I'll need to make some changes as well and first of all I'm going to use a white background color for my drop-down and a completely transparent a lion color so this will just prevent your life from showing up at the top of the drop-down so if you're familiar with the menus inside Divi you'll know what I'm talking about if not you can just experiment with these colors but since we're recreating it the exact same menu we'll just use a completely transparent color there and let me just grab the color code for the mobile menu background color really quick so this is the one that we're using it's a kind of grayish color and we'll use a black menu text color along with a black drop-down menu text color over here alright so these are the settings that we need for the drop down menu and then we'll go to the icons settings and over here we'll use the color that comes kind of pinkish color that's typical to elegant themes let me grab the color code though and we'll also use a black color for the other two icons which aren't part of the menu but just we're just styling them in case any one of you guys would need them alright and over here in the sizing settings we're going to slightly shrink the size of our logo to 64 pixels so that looks better right there so we have a basic menu setup right now and now we can focus on the next part of just this tutorial which is creating the drop-down menus and as mentioned before we'll do that using Divis building modules mainly blurb modules and also a text module and then afterwards we'll use those blurb modules and place them within the menu item of our choice using some custom code which you just have to copy and paste so I do want to ask you guys if you're following along to you know go to the blog post in the description below and over there you know just keep it close by so you can read off some settings follow along so you understand the tutorial and also copy the code once we're there all right so now this part is finished as mentioned before I'm going to dedicate an entire new arrow to all of the drop-down elements now we're recreating three different drop-down menus so we'll use a row with three columns alright now before we add the modules I'm going to open the sizing settings of my row and I'll enable use custom gutter with place this to one modify the sizing and these are actually some settings that I'm using just to get a view on how my drop-down menus will looks so afterwards these will be taken out of their container in place within the menu but um it will give us a better view on the items because we'll place them next to each other so you'll notice as as we're moving further along this tutorial so over here in the row settings I'm also going to remove all default top and bottom padding that's included in this row so this row later on will be hidden entirely and that's why I'm you know making sure that the space that's taken up by this row is minimal by removing the top and bottom default padding for instance and then over here the Advanced tab I'm going to give my row a CSS class it says drop down menu row so again you can find that in the blog post as well if you're not sure if you're writing B CSS class exactly the way it should be written so you can always go back to the blog post and make sure that your classes are correct if something's not functioning and for each one of the different columns we'll also need to assign a CSS class the CSS class that will assign will be the same for each one of them drop down menu column and I also want to mention that you can find a free JSON file with some instructions on how to install it on your website in the blog post so you can just download the JSON file and get started with it but you'll have to go through some small steps to make it functional in your website as well but those are all mentions in the block-post all right now that we have the general settings in place we can start adding modules so this technique works on any kind of drop-down that you want to create right we're recreating the elegant themes drop-down menu we can use any kind of module you want you can place anything you want as long as you're limiting one drop down to one column so that's a very important part everything you want to fit within your drop-down has to be part of the one column so we are going to use blurb modules for this and I'll start by adding the first one and as soon as I finish the first one I'll also be able to reuse that module using DB's clone option and make some changes here and there and let me just add some copy over there so this is a copy that I'm adding I'm also using eight an icon instead of an image it doesn't really matter well I'll add here so you like you'll be able to modify these however you want and they will appear exactly that same way within your drop-down menu also don't forget to add a link to the blurb module and all the items you have so one blurb module present represents one menu item and you'll definitely have to change all of the links to the proper pages you want the menu item to redirect to alright now over here in the icon settings um I'm just gonna grab that color code really quick so it's a purple kind of color but I'll be using but again you're free to customize this however you want let me just face all the settings over here so this is the color code that we're using for the icon color we're also placing it on the left side side and we're using a custom font size which is 30 pixels then I'll go to the title text settings let me just grab this color code here and over here I'll make some changes I'll change the font to lotto so these settings are you know exactly almost exactly identical to the settings that are used within the elegant themes website but you're free to customize this however you want to make it unique to your own website over here I'll enable uppercase I'll use the same color for the title text I'll shrink the text size and I'll use two pixels for the title letter spacing and then the body text settings I'm gonna use a lotto as well and I also make sure that in the sizing settings the content width is set to 100% so that I'll just make sure that um it takes up the entire width of the container is placed in now over here in the spacing settings I'll just add some custom spacing values that are tweaked for different screen sizes so 15 pixels for top and bottom and 6% for left and right on desktop on hover were slightly changing this we're using 8% for the left and 4% for the right side and on tablet we're using 7 pixels for the top and bottom and 2% for the left and the right side and on mobile we're using 3% for the left and the right side so these are just values that work really well with with the different screen sizes and with the mobile experience that we have of the menus so over here this this change in hover is just allowing us to have this kind of effect on however if you can see it on the screen all right then we'll go to the animation settings and by default a blurb module has this kind of icon animation going on and we're just going to remove it to avoid having distractions and in the Advanced tab we'll also use a CSS class for the module so each and every module that you want to place within your drop-down will need the CSS classes says the drop-down menu item and this will just help with the code later on so it will help us detect what we want to place within the drop-down and since we're using a blurb module we're also changing the cursor into pointer that will just help people understand that they can click on a certain item in the drop-down menu and that's why we're changing the cursor alright so now that we have the first module in place we can clone it up to as many times as we want let me just use for it and of course you will need to modify the copy the icon and the link that's very important of each and every duplicate and you can also create something else so for instance over here we have a different kind of blur going on you can modify this however you want so we'll use of one cloned blurt module to make some changes over here you add a background color I'm also going to modify the feet colors of my icon let me just grab those colors really quick for you guys over here in the image and icon settings I'm gonna change the size of my icon as well to 22 pixels so these are kind of I wouldn't say less important but less highlighted I've also changed the color code into the following one on the screen but again you can find all of the color codes all of the settings the JSON file and the code maybe blog post mentioned in the description below so definitely check that out and I'm also going to match this with the title text color of my icon over here and I'll just slightly shrink the text size to 14 pixels and again make sure that you change all the contents and the links now over here let me just go back to the preview on smaller screen sizes if I just inspect the element over here you can notice that we have only four items so blurb items showing up in our menu and the reason for that is because we don't want to overwhelm the visitors on smaller screen sizes and you can easily hide an item on smaller screen sizes by going to the Advanced tab you feel the visibility settings and hiding them on both options okay so now you can reuse this as many times as you want again make sure that you change the contents and the links now the last module we're using over here is a text module and we're actually using this module as a button now the reason why we're using a text module instead of a button is because of the weight that the elements are structured so the HTML elements I believe in the in a button module you have a little bit more nesting going on with dips and in it's actually a text module you can easily adapt to a new environment so that's why we're using a text module instead he was gonna add some copy over here I'll just use a background color as well then in the design tab I'm gonna use a lot zone bolt for the font weight I'll enable uppercase I'll use a white text color 3 pixels for the letter spacing and also I also will align this to Center over here at the bottom of the feet settings and then in the spacing settings I'm going to add some top margin 20 pixels some bottom margin as well 20 pixels again 4 percent for the left and 4 percent for the right side and then I'll also add some top and bottom padding which is 15 pixels for both options then we'll add some rounded corners to our text module or in this case kind of looks more like a button module at this point so I'll just add 100 pixels to each one of the corners along with a box shadow let me grab those color codes really quick so we have this kind of hover effect going on so as soon as someone hovers it it's extra emphasized so we're using 14 pixels for the vertical position we're selecting the first option over here we're using a completely transparent shadow color and then a default state and we'll change the color to this color code on hover now over here in the preview you can also notice that this goes up a little bit to do that we'll just use the transform settings over here transform translate will enable the hover option well make sure that these two aren't linked and I'll place this 2-3 so if I switch between these you can see the effect happen and again we'll make sure that this has a CSS class so the same CSS class as the blurred modules drop-down menu item and in the main elements we're using cursor:pointer as well just to make sure that you know people are able to today to detect that they can click on something all right so now that we have the first column in place we can easily reuse this I'll just delete these two columns over here in my row and I'm going to clone all of them and now you can modify these new drop-down menus however you like so again these are all placed in one column so for each drop-down that you need you'll need a new column in the same row that column needs to contain the CSS class so it's the same CSS class for each and every column and they also need to be in order so if you want to add a drop-down to the first menu item that you've modified in the first part of this tutorial so the one that you've added the CSS classes - you'll have to place that and column one for the second one you'll have to place that in column two put a third and column three if that makes sense so we're following this kind of structure where everything gets automatically placed in the right place as long as you follow the Lord logical order if that makes sense alright so I'll just take a quick look to see if you guys have any questions so far and then I can continue with the next part of this tutorial so someone's asking what if I want to add custom drop-down sidebar menu on my blog post it should not continue on shall not replace the header menu so you can use a custom header for that so you don't have to go for a global header and you'll be able to use this technique but I will definitely make sure that I cover something similar with block categories or with I mean like e-commerce category drop-down menus in future tutorials so I'm I'm working on those and these will definitely be included on the blog very soon and hopefully with videos as well alright so I don't see any more questions I see people are following along please if you do have questions leave a comment on youtube are on Facebook alright so the next part is adding the code in to add the code we'll use a code module but you can place it inside of the Divi theme options as well I personally like to offer code modules because it helps me keep code organized where I'm working and over here I'll just add it to the first row and I'll start with the CSS code again you can find this in the blog post which is mentioned in the description below so over there you can just grab all of the settings first of all and then the CSS code which will work no matter what kind of drop down menu you're creating as long as you use the same CSS classes and follow the same order all right so here I'll just place the CSS code and I'm also going to grab the jQuery code so this jQuery code what this jQuery does is it takes all of these different modules and it creates a new container for them that we then place within the WordPress menu item of our choice and this happens automatically as long as you follow the order so this is really important for you to include this in a code module or just directly on your website and over here we're also going to enable a CSS class now let me just say this really quick and take a quick look at the preview over here also make sure that you save all theme builder changes so over here I had this previous menu and did you see that flickering effects we're going to get rid of it right away so via you can see all of the drop-down menus that we've created let me just switch over to smaller screen sizes for you guys to see that it works really well over here as well alright so to prevent that flickering from happening we are also going to enable a CSS class that's hidden in the code so I've made I've made sure that it's hidden before you're actually done notifying the menu items but I see that there are some questions and I just want to address it first hmm okay so someone's asking why not just the text module link instead of extra CSS code cursor:pointer I found it I mean you can go both ways I think it's for me it's it's better if I just add a link to the entire module as soon as you do that that doesn't automatically modify the cursor so that's why you use the CSS code but you can go the other way it and just use you know a link for the text that you're placing inside the module so someone's asking what is the code you can find it in the blog post which is mentioned in the description of this video that you're watching so you can go there and over there everything's also explained step by step and you can grab the CSS code or did Jake some file which you can use right away someone's asking if you show the codes after class what do you mean exactly this I'm not sure I understand all right not to prevent um the flickering from happening we're going to enable one CSS class and that CSS class is within the code that you were able to copy and paste so let me just open my header once again so everything's functional at this point we're just making sure that it doesn't load right away it just loads whenever it's time all right so let me just open the code module and I've placed it at the top of the code and it also has a comment that says enable class below once you're done editing the menu so first of all create the dropdowns and then afterwards you can enable the CSS class so to do that just remove these comments but you'll also see that the second row disappears so as soon as you want to make additional changes you can again you know hide comment out this CSS class for a while until you're done or you can just switch over to wireframe mode as well and over here you'll always be able to access all of the elements but because we're in a visual builder everything happens instantly so that's why we will save that part for last now if i refresh this with the drop-down menus don't appear anymore let me do it once more seeing it just appears once we need them which is you know obviously the user experience that we want and signal smaller screen sizes let me refresh this so someone else is asking if the CSS code is available you can find all of the code all of the steps in the blog post which is which is mentioned in the description below so it's the first link that you'll come across that's the tutorial there you can copy all of the CSS and jQuery code that you need and you can also go through everything step-by-step alright so over here again let me just refresh it doesn't show up until we need it to show up which is really cool so now we have this kind of functional drop down menu in place now what if you want to create more than three dropdowns so you have more items we can easily do that as well you'll just have to follow the structure that we've been taking care of up until now so that means that we have to go back to our menu in the appearance let me just save this all right and over here I'm just gonna copy the CSS classes so we have two one two three and then we can go to the fourth and just make sure that you change the number at the end of the fourth item you want to add a drop down to so instead of three we're using four now we're going to save this all right and then we'll go to the Divi theme builder I'm going to open the header again I'll disable the CSS class so I can work on the front end I'll just comment it out over here and then I'll switch over to visual builder and then I can just reuse one of my columns or you know place whatever I want in this new drop-down so now I have four of them two important things to mention the column CSS class has to be the same one and I mean the column has to contain you CSS class obviously and all of the modules within that column have to contain this CSS class all right now if I save this so I preview it for you guys alright one two three four we have four in total and again I'm going to enable the CSS class over here to make sure that there's no unnecessary loading when someone enters a page so here we go mmm that's how you add a fourth one as well and you can go on and on just like that just make sure that you follow the order in which you place them in all right here we go I'll just take one more final look to see if you guys have any questions someone's asking this Stephen I think it is does this work as a mega menu if so how many levels and columns are possible um in one of I mean I wouldn't say one of the next tutorials but I'm working on a tutorial where for instance we're going to take an entire row and place it inside a menu item so there are different ways to approach it and each one of them has you know a different technique that I can't just like explain right now so definitely keep an eye on the block and on the YouTube channel and we'll definitely go more in depth so you'll be able to add rows inside a certain menu item tweak them add whatever kind of modules you want inside that row and style these according to the different screen sizes and just have like this really good experience for you and for all of you know your visitors so if you guys don't have any more questions I don't think there are but um quite some people joined in I hope you guys enjoyed it thank you for watching if you liked it please give it a thumbs up and we hope that you're enjoying this on going through the design initiative where we try to put something extra into your design toolbox each and every week we'll hopefully see you next week with another use case livestream thank you for watching all right you

Channel: Elegant Themes

Views: 21,999

Keywords:

Id: Oc0D894-Qj4

Length: 41min 8sec (2468 seconds)

Published: Tue Jun 09 2020