How to Create a Custom eCommerce Mega Menu with Divi’s Theme Builder

so [Music] so [Music] my [Music] so uh [Music] hey divination thank you for joining us in this live stream today we'll show you how to create an e-commerce mega menu with divi in the theme builder so if you haven't checked out divi yet make sure that you do i've mentioned a link in the description below where you can go ahead and discover everything for yourself so without any further ado let's get to it all right so i want to say hi to everyone on youtube and on facebook if you guys have any questions make sure that you leave a comment and i'll be checking on the comments quite frequently just to be able to answer you guys's questions so let's get started with the tutorial and the preview of it so what we'll create within this live stream tutorial is an e-commerce mega menu which is completely customized using divi so all of the elements that you'll be able to see within this mega menu are made with tv so they're all tv modules the viewer rows and sections and they're placed inside the menu module so as drop downs so for instance over here you can notice that i have three menu items one being clothing shoes and accessories now if i hover one of these items a drop down appears and these are all unique so you can customize each one of the drop downs using the db built-in modules and as soon as you unhover it it goes away so we'll achieve this using the divi theme builder and we also have a very nice alternative on smaller screen sizes so on smaller screen sizes we have a slightly less overwhelming design if that makes sense if i click on this hamburger icon over here and if i toggle one of the options um all of the different product categories will show up but we're hiding the you know over here if i hover this we're hiding the third and fourth column so the images and also it doesn't become too overwhelming on mobile and people can just search through product categories so if i click this the other one closes um and so on and so forth uh so this is what we'll recreate within this live stream tutorial i also want to mention that you will be able to download this entire global header so it's a global header inside the divi theme builder and you'll be able to download it in the blog post which is mentioned in the description below so i would definitely recommend that you guys grab that blog post first so go there because we'll be going back to that blog post for the code for instance that will use to place all of the divi build modules and elements inside the menu so definitely keep that blog post close by and over there you will also be able to follow everything step by step all right so let's get started with the recreation process now um over here i have a page that doesn't have the mega menu on it so we just have the regular standard divi um header that's enabled on it and we're going to replace this throughout the tutorial step by step by recreating the mega menu and now the first part before actually diving into divi itself um you will need to create your menu obviously in the wordpress backend and you will need to add some css classes to the menu items that you want to contain a drop down so let me just go to appearance menus over here and to be able to add css classes to menu items you need to toggle these screen options at the top over here and make sure that the css classes option here is enabled which it is in my case because i'm working on this particular website now over here if you haven't created a menu yet for your e-commerce website that you're working on go ahead and do that out of the pages um and then decide which menu items you want to add a drop down to so for instance i want to add a drop down to each one of these and to be able to pull that off i'll need to add two css classes to each one of the menu items so the first one remains the same for each item and it's first dash level so this is just a global css class that we'll use throughout the tutorial but then for each different menu item we'll also need to use consecutive css classes so the second css class is a consecutive css class so the first one is first dash level dash one and then the second one is first dash level dash two and the third first dash level dash three and you can create as many drop downs as you will by following this method so if you were to add another drop down to another menu item you use a css class that says first dash level dash four all right so this is the first part of the tutorial without these css classes we won't be able to place all of the dropdowns inside the proper menu item so this is very important before you move on to the divi part of the tutorial and that will all happen within the divi theme builder so go ahead and go to divi theme builder all right so over here in the divi theme builder you can notice i have a global header um which is the one that i've shown you guys in the first part of the tutorial so this is a global header that i've built but i've also created a separate template for the use case page over here that still has the standard navigation going on so i'm gonna recreate this within this new template if that makes sense so to do that i'm gonna click on add custom header and build custom header when entering the template editor you will get three options you can start building from scratch use a pre-made layout or clone an existing page we're going to browse everything we're going to create everything from scratch so i'll choose the first option but if you want to use the json instead so the json file is that which you're able to download by going to the blog post in the description below you will choose the second option after uploading the json file so let me just start building from scratch over here so we already have a section over here and this will be dedicated to you know the header over here at the top so before adding any elements i'm going to open the section settings and make some changes here first i'm going to remove all default top and bottom padding by adding 0 pixels to both options in the spacing settings and i'm also going to hide this entire section on smaller screen sizes in the visibility settings okay so phone and tablet are you know disabled and the reason why we're doing that is just to make sure that it doesn't become too overwhelming on mobile so it's definitely something that you'll often see with e-commerce menus specifically the menus and elements are almost always completely different on desktop and on mobile because you still want to you you still want that navigation experience to be easy even though you know you might be missing out on some important copy or whatever um it still isn't as important as having a flawless navigation so that's the reason why we're hiding um the entire section so the one that's dedicated to the top bar over here with the logo in the three text modules okay so now that we have the section settings in place we can add a row and we're using a row with four columns now before adding any modules i'm going to open the row settings and over here in the sizing settings i'm going to use custom gutter width i'll put this to 1 i'm also going to equalize the column heights i'm using a width of 95 percent and a max width of 100 so this will just allow us to take almost the entire width of the section container um and then in the spacing settings we're going to remove the default top and bottom padding that's assigned to the row by adding 0 pixels to both options and now we can add modules starting with an image module in column one and this image module will be dedicated to our logo so let me just grab a logo but um so this will just be dedicated on desktop on smaller screen sizes we'll place the logo inside the menu module which you'll be able to see later on so all right you can also add some spacing center so you can style this however you want obviously and you won't be needing to modify the responsive values because this entire section is hidden on smaller screen sizes so we're just modifying this as we go and now we're gonna add a text module in column two so we're using text modules to display all of these ordering benefits i guess you can call them and let me just grab the copy so we're using a span for the first part of the copy so i've toggled the text editor and we're using a different color for the first word over here but you can modify this however you want and then we'll go to the text settings and we're going to use so the font that we're using throughout this tutorial is called oswald we're using a medium font weight we're enabling uppercase as well a black text color and 19 pixels for the text size and then in the spacing settings we're going to add some top and bottom margins so that'll be five percent for both options so just to create a little bit of space at the top and at the bottom so once you've completed the first text module you can clone it twice i'm just going to clone it once place it in the third column of the row and then clone it again and place it in the last column of the row so obviously you will need to change the copy for each one of these and up next we have the second section and this one's dedicated to the menu over here so we'll add a menu module to this section but before we do that we'll need to modify some section settings so i'll just use a regular section and i'm going to remove all default top and bottom padding by adding zero pixels to both options in the spacing settings so that will just remove the space so we can control it a little bit better and we'll add a new row with a one column so again we'll want to you know stretch this row make it touch almost both sides of the section container so to do that we'll go to the sizing settings of the row setting of the row itself um we'll enable we'll enable use custom gutter width place this to one we'll use 100 for the width and 100 for the max width and we're also enabling i mean removing the default top and bottom padding by adding zero pixels to both options over here now over here you can notice that we have these kind of top and bottom borders um these have been applied to the row itself so we're using two pixels for that for the top in the border settings over here in the design tab so two pixels let me just add the color code and two pixels here as well top and bottom both have two pixels but on tablet and phone we're removing this so we don't have them so we don't have that top border on smaller screen sizes by bringing this to zero so i've enabled the responsive option and i brought this back to zero on tablet and on phone all right now that we have the row container in place i'll add a menu module and over here you will be able to select the menu that you've created in the first part of this tutorial so these menu items have those two css classes assigned to them very important that you choose that menu because that's where we'll place all of the drop-downs later on the tutorial now on desktop you can notice that we don't have a logo because we've placed it in the first section but on smaller screen sizes we've hidden the first section so we still need our logo somewhere and to do to add that logo on smaller screen sizes we're just gonna enable the responsive option over here we'll switch over to tablet and we're going to select that same logo and this will automatically be inherited on phone as well but uh on desktop as you can see we don't have that duplicate logo and then we'll go to the elements since this is going to be in a mega menu for an e-commerce website we'll need to enable definitely the shopping cart icon you can also enable the search icon if you want and we'll do that over here and next we'll style the items in the design tab so the menu text settings um let me just take oswald again we'll enable uppercase we're using a black text color 19 pixels for the text size and in the drop down menu align in the drop down menu settings we're using a white line color then we have the icon settings so we'll match this with that same orangey color that we've been using up until now but you're free to modify anything however you want style it however you want use it for any kind of e-commerce website you're building and you can find all of the steps written down in the blog post which is mentioned in the description below and you can also download the json file for free there and use it right away and now that we have the general menu settings in place we'll still need to add a css class and this css class will just help us add the drop downs later on so as mentioned at the beginning of this tutorial we're adding um divi builds drop down so we'll build the drop downs in db and then use some code to place them in each separate menu items so to create your first drop down you will need to add a new section so one section below the section containing the menu equals a drop down so here's where all the items will show up so we'll add them style them using divi and we'll start by opening the section settings over here go to the sizing settings and it's very important that you enable that you make sure that the width and the max width are 100 because later on using the code will turn this drop down into an absolute position element and for that it's very important that you have these width values set up so make sure definitely make sure that you have these in place so 100 for the width and the max width and we're also removing the default top and bottom padding by adding zero pixels to both options now this entire section will be dedicated to the first drop down menu so this will belong to the clothing menu item so we've added first dash level dash 1 to this clothing menu item as a css class and over here we're using two css classes for the section that's dedicated to this menu item the first one being drop down dash menu which will be the case for each one of the drop downs and then the second css class is called drop down dash menu dash one so this number at the end um will always be the same as the one for the menu item so this is first dash level dash one and if you want this particular section to be part of the menu item as a drop down the number at the end must be the same so very important to keep that consecutive order going on all right um now that we have the section settings in place we can add a new row so to create this drop down we're using four columns so one two three four let me just grab it over here for um before adding modules we're going to open the sizing setting the row settings and add a white background first and we're going to modify the sizing settings to allow the row to reach the size of the section container so to do that we'll enable custom gutter width put this to one we're also equalizing the column heights um we're using 100 for the width and 100 for the max width so the row containers width is the same as the section containers with if that makes sense so the row is touching both sides of the section container but we just have an extra container there being the section one and you can make all modifications to the row sizing settings however you want not only the row sizing everything you want to customize within this drop down menu section you can do so you can customize it however you want use any kind of style place any kind of module the one that we're creating over here is kind of a basic ecommerce mega menu structure i would think so we have some product categories here and then we have some visuals but you can place anything you want if you want to keep um learning how to create this particular mega menu that'll be what we'll handle within the next part of this tutorial but know that you can just skip the design part and just use the code which we'll handle later on the tutorial and create any kind of drop down menu you want so now that we have the sizing settings in place we're going to remove all default top and bottom padding so that will just make sure that over here if i go back to the preview you can notice that column 3 and 4 are touching the top and the bottom and to make sure that we can do that we'll need to remove the default top and bottom padding of the row itself all right and someone let me i'm just keeping an eye on the comments uh i see a lot of people joining in i see joan [Music] and karen has a question with that css code be wiped out on updates if you're not using a child thing i don't see any reason why it would be wiped out especially considering the fact that we're building this inside a template so it's it's not just inside of the theme options so nothing will overwrite the templates that you build or the global header or footer templates so i i don't see that being a problem but you can definitely add it to a child theme if you want to um the css code and the jquery code will still apply to your menu so you can place that wherever you want um all right so now we've removed the top and bottom default padding we can go to the border settings over here if i hover this again i like to show you guys a preview when i'm doing something so you guys know why i'm doing it so at the bottom over here of the section of the drop down you can notice a border and we'll add that border over here to the row 2 pixels and that same orange color and now that we have the default row settings in place we're going to make some changes to the columns as well so starting with column one and two um we're gonna use some spacing settings that are the same and main element css that are the same for both columns so the first being the spacing settings so let me just open the column settings over here and i'm gonna add 10 percent to the top and the bottom and five percent to the left and the right so what i'll just do is i'll i'll create the column one setting so i'll put everything in place and then reuse this column so we have some different values on smaller screen sizes for that i'm going to enable the responsive options um so the top and bottom padding on smaller screen sizes is five percent just to make sure that we don't take too much place up with the padding you can notice that here let me just go back so if i click this you can see that the top is this is five percent bottom is also five percent we don't need that to be ten percent and in the main elements of my column over here i'm going to enable the responsive option and add a width of 50 so we'll make sure that this is important so this will just force the two columns to appear next to each other as you can see over here we're making sure that the width remains 50 on tablet and phone so these are the settings that we need for both columns let me just remove the second column over here and clone the first one so now both the first and second column have the spacing settings and the 50 with css property on to the third column so over here um we have a gradient background and a background image so let me just add that really quick or in the if i'm correct we're in the third column over here yep let me just add a gradient background the first color is transparent still has some color to it but it's zero 0.08 color to it so 92 transparency and this is the second color code you can find all of these color codes and all of the settings in the blog post if you want to recreate this exact thing or you can download the json file with this exact design that you can use right away and i'm going to make sure that i place the gradient above the background image next i'll upload a background image of my choice let me just grab this one over here and i'm going to add some right margin 10 pixels so to create a little bit of space as you can notice over here so that white space between column 3 and 4 is the 10 pixels of right margin and let me just hide this on smaller screen sizes as well so phone and tablet need to be disabled because we don't want to create an overwhelming experience as you can notice over here and all right so the settings for the fourth column are almost exactly the same i'm going to remove the fourth column and clone the third one i'm gonna open these settings over here and i'm gonna remove that right margin value because we don't need that and this will need to be hidden on phone as well and on tablet and let me just change the background image here too so you can customize this however you want all right so now that we have the containers in place it's modules starting with a text module in column one so we'll use text modules to place our product categories inside the dropdown so let me just add some copy new in it says you can add anything you want make sure that you add a proper link as well then i'm going to go to the text settings in the design tab and i'm going to style this using the dtv options so the building options it allows you to visually see what you're building and you know later on place it within the menu item of your choice so this menu over here that you can notice will still have some spacing later on when we add the code as well i'm using a black text color 22 pixels for desktop and 18 pixels for tablet and 16 pixels for phone i'm adding some negative letter spacing minus 0.6 pixels i can also increase the line height to 2.4 so you can definitely notice how much freedom you have with the design that you create and also all of the built-in responsive options with divi help you customize it according to the different screen sizes so you're really free to do anything you want and place any kind of module you want inside this drop down section here over here in the border settings if i hover this and if i hover the item you can see a border appears so people know they're hovering that particular item to add that we'll just add two pixels of bottom border and we'll enable the hover option on the border color so not on the border with the reason why we're not modifying the border with is because if i were to you know add zero pixels of border width in a default state and add two pixels on hover the container size would change and you could you know you could see the container size change here so this would become smaller on it in a default stage and larger on hover so that's why we're just playing around with the border color itself so we'll make the border color transparent and add the orange color on hover so that will just so technically in a default state the border is there but you just can't see it if that makes sense and you can use this you can use this module for all the product categories that you want to show up inside your drop down let me just remove the second column and clone the first column [Music] to create a duplicate with all the menu items so of course you can modify all of the content along with the links to make any kind of product category show up or any kind of content you want so this is the basic you know structure of the first and the second column where we have all of the different product categories and up next we have some text modules in the third and fourth column these are absolute positions so let me add a new text module to the third column and i'm just gonna add some content so this will probably also be a product category or just a landing page could be a landing page as well make sure that you add a link as well in the text settings i'm going to use oswald again a bold font weight i'm going to enable uppercase i'm using 3.4 vw for the text size uh 1em for the line height and i'm using a white text color and i'm going to absolutely position this module in the bottom left corner by going to the advanced tab position put this to absolute we'll select the bottom left corner and we're you know creating some offset using two percent for both options just so the text has some space to breathe and now i can clone this entire module and place the duplicating column right in column four so as soon as you i knew this but i was just like a little confused right now if you clone this it will just appear on the same exact spot as the previous one so now i have like two text modules above each other now it's one here and one here so as soon as you'll clone it it will look like it isn't cloned because the position is absolute um so don't be fooled and of course you will need to modify the copy and the link accordingly now if you want to create um a drop down for the second and the third menu item that you've assigned a css class to you can just clone this entire section let us just clone this twice and you will need to add change the css classes of the duplicate sections so starting with the second one as mentioned before it's very important that you follow a consecutive order the number at the end will be two for the second section and three for the third section and so forth and so on so just make sure that you follow that order and you can create up to as many drop downs as you want and place them inside the menu item of your choice as soon as you've added the css classes to the menu items as well so now that we have the general structure in place it's time to add the code and we'll add the code to a code module which will place above the menu module in the second section so let me just drag this but you can place this code anywhere you want you can place this in your child theme as someone asked in the chat on youtube you can place this in the dv theme options i prefer to centrally keep the code inside my global header just so i can share the file with you guys and you can immediately put it to practice but you can place this anywhere you want whatever your preferred method is and you can find the code that we're using um in the blog post which is mentioned in the description below as well as the json file which you are able to upload and that json file contains all of the code as well so we'll add the css code first let me just grab the code you can place these in separate modules if you wanna but um i'm just gonna place them together so i've just added the css code and i'm also going to add the jquery code so the jquery code takes all of the different sections that are dedicated to a drop down menu and places them as drop downs inside the menu item inside the menu module and it also enables this different kind of approach on smaller screen sizes where we have the toggling option where as soon as you open a new drop down at the previous one closes so i've placed it in a code module together the css code and the jquery code now as soon as you've finished the design of each one of the drop-downs it's important that you enable the css class at the top and this will just prevent a loading um effect so where you you will be able to see the drop downs when you load a page and enabling the css class by removing these two characters um at the top and the bottom will just place you know this entire section so all of these drop down sections to hidden right away so they won't load they won't flicker they won't show up unless someone hovers the item right away so make sure that you enable that css class but um be aware as soon as you have enabled the css class um let me just do that as soon as you enable enable it they will disappear from your global header but you will still be able to access them through the layer view or the wire frame mode so if i go to wireframe you will still have all of the drop-down sections and you can disable the css class if you're still modifying certain things inside your menu so once that's done you can just save the entire global header let me just save it and then take a quick look at the preview so make sure that you save all divi theme builder as well theme builder changes as well and so over here we have the use case page which we've created the header for let me just refresh it here we have our new global header and if i hover it you can see the drop down menu and you can use any kind of design style you want modify this however you want all right so i'm just going to take one more last look at the comment section just to see if you guys have any more questions um i don't know if i'm pronouncing this correct i'm just trying my hardest um the stream can be watched later right yes this will be available on the elegant themes youtube channel or on facebook so you'll be able to rewatch this i don't see any more questions um well all right that was it so that was it for this live stream if you liked it please give it a thumbs up and we hope that you're enjoying this ongoing tv design initiative where we try to put something extra into your design toolbox each and every week thank you for watching and we look forward to seeing you in the next one bye

Channel: Elegant Themes

Views: 8,869

Keywords:

Id: FY0-M9myxw0

Length: 38min 53sec (2333 seconds)

Published: Tue Aug 25 2020