How to Clone any Online Store with Divi and WooCommerce: Part 2 - Building the Header

all right guys you've done the biggest and hardest part so far which is building out the landing page for our site we're moving on to the global header and we're going to jump right into it and the global header of course is that piece if you look at the abercrombie and fit site it's staying here at the top of the page so we're going to show you our version of that and you're going to love it i know i'm loving it so let's do it all right getting into the back end of our divi site here we are gonna go ahead and go to divi theme boulder and yeah we're using the theme boulder for this it's one of the newer additions to the divi feature set which allows you to create some global styles that we're actually going to be using this quite a bit throughout this tutorial series in this one we're going to finish building out the header and the footer and in the next set we're going to be building out things like product pages and category pages we're just going to be doing a lot of cool stuff that was not previously possible so first thing we're going to do is we're going to click on add global header and then bold global header it's going to fire up it's going to think about it and it spits you out right here it already added a section here for us and what we need to do is go ahead and add a column a row section so what we're going to do we're going to use the two thirds one third layout so that's going to be this one right here oh actually no this one so we're going to click on that and then we need to change some of the section settings before we start dropping things in there so first thing we'll do is open up the section settings and we're gonna go ahead to the spacing options and within spacing we're just gonna set the top and bottom padding to be zero so we're gonna go zero we'll link them up and that'll take care of that and also we wanna make sure that this is going to be a sticky header and if we go to apple chromium fidget we can see that it stays at the top of the page there so let's go back to the theme builder we're going to go to the advanced section settings we're going to go down and we're going to go to scroll effects and here we say sticky position we're going to say stick to the top we don't need to change any of the other options here because they don't really apply to us but there's obviously a lot of different things that you can do here to change the way that it reacts to your site but we're just going to keep it this as is and next up we need to change some of the row settings now within the row settings of course one of the first things we want to do is change the sizing we are going to tell it to equalize the column heights of course which is this option we're going to set the width to be 100 because we want a header to span the entirety of the page and then of course also pull that max width slider to 2560 on my screen and uh save it that way um because it makes for width um stepping to spacing we want to make sure that it's not too wide at the top or bottom so we're going to set the padding for the top and the bottom to be zero pixels so we're going to go ahead and link those two and then for the left right padding we're gonna put five percent uh about five pixels but we want five percent to be on the left and right hand side because we don't want things to be too bunched up um and on the edge of the the the viewable screen space so that's gonna do that and then we've used this little bit of code before but we're gonna be reusing snippet number two here because what we want the second column to do is to center the modules inside of it vertically and when we get a little bit down into this you're going to see exactly why we want to do that so let me just go ahead and copy this from the blog post and i'm going to open up the row settings i'm going to go to column number two i'm going to go advanced custom css and in the main element i'm going to drop the css right there and there you see it again that align self center cool so now we've got the stage set it's time to add one of our menu modules so we're going to go here in the first section because if we look at abercrombie here we have the first section so let's go back to the theme builder we're going to type in menu and add the menu now we don't have any menus created yet and we're going to get to that in just a little bit as we start fleshing out this header menu um you know and and the reason for that is let's set the stage first and then we can go back and tweak and change things a little bit as need be so in the menu first thing we want to do is go ahead and set a logo now we have our logo uploaded already we set it into the end and in the divi settings as our logo so we can go ahead and select this but there's another way to do it we can actually go ahead and click on this data element which makes it dynamic and then we say site logo and it's actually going to go ahead and pull the logo that we inserted there earlier so now the reason we do this is that anywhere in the site where we use utilize the site logo and we apply it this way if we change the divi logo over here up at the top in the v theme settings it will dynamically change throughout your website so you don't have to go ahead and redo this this is a really cool thing this is not the newest feature in the v but it's one that you should be using if you want to build sites in the most efficient way possible now if we go to the logo link url um so we go to link here we're going to put that to just a forward slash because what that'll do is it's going to make when a user clicks that logo takes him to the root of your site and that makes it a little bit easier um than adding let's say a home link on your page that was all the rage back in the 2010s we're 2020 baby we're doing things a little bit differently now so that is for you to apply so let's go to design here and of course the logo size is just ridiculous at the moment and we will be addressing that in just a moment but for the time being let's work on this menu text so we go to text and then we're going to look at the menu text size is well firstly the color we want it to be the blue and then the menu text size is at 14. we'll make it a little bit bigger and don't mind the way that it looks on the page right now i know it looks horrible we're going to fix that by having obviously way less menu items in the future for menu letter spacing we're going to add 0.5 pixels and we came up with that by analyzing what the abercrombie and fitch site did we inspected those elements and we saw that they used that type of letter spacing the next thing we want to look at is the drop down menu and you know how when you have a drop down menu similar to this it makes that line there well we're going to add something similar here so drop down menu line color we're going to use the dark blue again that they utilize on the abercrombie and fit site and then lastly we're going to tackle this massive logo you see that it's not that big here on the abercrombie and fitch site so we're going to go to advanced custom css we'll scroll down to the menu logo and then what we're going to do is we're going to be adding snippet number eight and again if you guys missed it earlier it is listed in the blog post linked in the description of this video so i'm going to pull that i'm going to paste it and instantly everything has space to breathe now the logo looks much more similar than this one on the app acromion fits site so very easily you know and just to talk a little bit about what the css does it just says that this logo can have a maximum size well a size of 225 pixels super easy makes that quick impactful change now that this is done let's tackle this weird menu that we've got set up there but first good practice kind of save as you go through it so i'm saving that cool so let's go to the back end dashboard of a site so i'm going dashboard we need to create the menus that we'll be using now we're going to be using different menus for let's say in this example like a desktop menu right here we're going to want one for this area where we list just the base menu for desktop and on the right hand side we're going to have an indication for different menu items based on whether the user is logged in or not and then of course on mobile the menu is going to look a bit differently so we're going to address that as well so for each of these instances we need to create an actual menu so let's get to it to do that we're going to go to appearance menus and you'll see that we have no menus created right now because it says create your first menu below first menu that we'll create is going to be called our desktop main menu and it's not going to let us add anything now we first have to click the create menu button great now we'll start adding the different elements now if we look at the abercrombie and fetch site all that it has is its various categories here so we're going to go ahead and add those now we already have categories we talked about them earlier if we go here to products categories i'm going to open this in a new tab so we don't lose our spot here we have all of our different categories as well as its different subcategories which will actually end up being sub menu items so we're going to translate that over to our menu so let's come over here and we're going to add a custom link and first thing you need to put in here is the url so we find the url we're coming to our categories then we'll right click the view option and click copy link address come back and paste that right in there and we're also going to use the relative path so we'll delete the url out of that a menu category item and then all we'll say that this is men's and add it to the menu and then you see it popped in now we're going to do the same thing for women's we can use the same url because we already know that the woman category is just forward slash woman and we'll delete out that domain name out of there and then we'll just call it women's and add that to the menu now looking at the way they did it here that's similar but we will be switching around men and women so when we click back here click back here you can just drag woman above men seems kind of appropriate now doesn't it um okay so let's add all of the subcategories also so i'll show you how to do that so we're on woman right now that's the first one we're going to right click this one copy link address come back and then we're gonna go paste that in there just as before delete the base url and let's say this one was for shirts i believe hoodies hoodies so we'll just say hoodies and add to menu now to make this nested or a sub menu item of women's we just drag it up and you see how it indents here that means that it's going to be a subcategory of woman's and it actually lists it right there so we're going to complete this quickly for all the other steps we'll probably fast forward through this to not bore you too much but you get the concept so let's fast forward all right and there we have it we've got our woman's hoodies shirts men's hoodie shirts and then our accessories now all we do is we go ahead and we save this menu and once that's done it'll give us a little notification here that it's been saved okay desktop menu has been saved great so when we bounce back here to the theme boulder we're going to go ahead and save the page i know we did that earlier but this is just precaution and i'm going to go refresh the page reload it here we have it and when you go in you'll see everything again thinking about it there we go so again just to recap save this go back and this is the important step you want to save all the changes here since this is the first item we're adding and now when we go to the front end we'll refresh and boom you'll see that we have the new header with the new definition of the logo width and it's sticky at the top let's jump back in the theme boulder edit this and then what we're going to do is edit the menu module again and now we can say desktop main menu save that or it didn't take it there let's just go with select the menu and then we'll select the start main menu there we go save and save and now we can conveniently throw the refresh on the front end it's been updated with our new menu and as you can see there's that blue line hoodies shirts and accessories that go to the respective uh category pages but we still need a little area on the right hand side that has a cart that has our my account section as well as the search so let's add that in the menus right here for that all we need to do is create new menu great so now we're going to call this one let's just go with right menu logged in just so that this one is for logged in site visitors and create that and what we're going to add to this is we have the my account page here as they're logged in they'll need that we're going to add that and then what we can do is we're going to go and add a class to this because we want a nice little icon next to it that says my account you know so it's going to be a little silhouette now to add a class normally you'd be able to see it right here what you need to do to enable it because by default it's turned off you just go to screen options you click on css classes and you see that it instantly pops in right over here now the class that you add to this so that we can add that icon later on is d e icon dash menu just go ahead and save that menu so this menu has been saved now we need to create one for users that are not logged into the site so we're going to go again and click on create new menu we're going to call it very similarly right menu logged out oops out and create and now this might be a little counterintuitive but we're going to use my account yet again and add it in click that and now we can you see how we can change the navigation label here we're just going to call this login slash in slash register and then we're going to be utilizing that same class because we want the same icon to be added so d e icon dash menu and we'll be adding the code for that and not so long so that you can see the icons so there's that one let's save that and let's go ahead and add these things to the actual menu at this moment so let's go back to the theme builder now everything is saved in there so we can just refresh this it'll take us to this page we go to global header and i'll do its thinking again and it's loading the menu on that side and here we're just going to go ahead and add well actually you know let's do this let's just copy this one let's see if copy is working yet copy module and now it's working paste module now we don't want all that in there so we'll just go in here with logo we'll delete it and then with the actual content we'll select let's say the logged in menu option there you see my account now we're going to add some elements here we're going to add the shopping cart icon and you see it pop in right there i'm going to add the search icon you see that pop in right there let's change the color of those icons because they look terrible and here we have the option for shopping cart we'll go with the blue search icon and go with the blue and that looks great now you have some other options here like size and all that fun stuff you can mess around with that if it suits your needs in your site but we're going to do one more thing um over here which is setting up some of the conditional logic which is one of the newest features within divi we want this to only be shown when we have a person visiting the site that is logged into an account so we're going to go to conditions we're going to add a new condition and what we need to go and look for is the logged in status of the user we want to show it only if the user is logged in so that's cool you can give this a name but you know logged in we can call it if you want and we're going to enable the condition there we go so now we've got a logged in condition here and we can go ahead and save that now if you recall we just created two menus here we've got right menu logged in right menu logged out let's go ahead and set up a condition for the logged out one so let's come back here and you know for use we're going to copy this one duplicate it we're going to go in we're going to select the logged out menu the elements are going to remain the same the design is going to remain the same but the thing that's going to change is the condition because we don't want them both to show when the user is logged in so go back to conditions we can edit this condition we're going to say user is logged out we'll call this condition logged out and we'll enable it we're going to go ahead and save that we'll save the page and then we'll refresh the front then and you know what do you guys expect might happen we what are we going to see let's take a look let's refresh the page and there we have it we're logged in so it says that my account is accessible and if it were logged out it would say log in or register so that's perfect one thing i want to change though is i don't like this lowercase a so let me just come back here select the logged in menu select and i'm can click on this drop down and all i need to do is go and capitalize that a and save the menu and then on the front end it should have a capitalized a at this point there you go that was super easy to go ahead and do okay so now before we get too far ahead of ourselves let's finish building out some of the other menus we'll be using in the coming steps going back to our menus area right here we're going to set up the mobile menus to be used because they'll also display a little bit differently than the actual desktop ones do so essentially what we'll do is we'll recreate all the links that we did previously so i'm going to speed through this really quick and we'll fast forward through this so you don't have to go through it all but definitely pause if something comes up that looks a little different all right and there we go so this is up to the point that should feel pretty familiar now since this is the logged in menu we're going to go back to the actual pages we'll add the my account link and we'll do the same as we did with the other one we'll change that a to be capitalized and then we're not adding an icon for this one because on mobile i don't think it'll work as nicely and we're not going to add a card icon but we're going to add the cart page and the checkout page so we'll add those and then we'll nest the checkout inside a cart because if there's nothing in your cart you probably are not checking out out of anything so let's go ahead and save the logged in menu cool and guess what we're making one more and i promise this is the last one i know this is tedious we're going to create one more menu for the mobile menu logged out users again we'll speed through until things get a little bit different but you know it shouldn't we're just going to change that one my account page to say logged in register instead of my account so let's go to hyperspeed [Music] okay so now we've got the base lay down let's go back to the pages add my account card i'll check out and cart add my account at the top like we said we're going to rename this to be log in register just as we did with the desktop version and then we'll just go ahead and nest checkout inside of cart once again and we'll go ahead and save the menu okay right so let's head back to the theme boulder here so we've got a layout here that is going to be showing on the desktop to make sure that it only shows on desktop we're going to go ahead and look at the settings for the section there's two ways to do this you go to advanced visibility and then say okay well disable it on what devices here will disa disable it on phone and tablets and say okay but another way you just right click it and when you click on disable you see that it's disabled on phones and tablets and only visible on desktop but you can click these as you please and they'll do the same thing so we'll keep it as this and go ahead and save it for the time being and now we're going to refresh the page when this is done because we want to make sure that the menu data for the new menus that we created load into this page so let's refresh it we'll go into the header okay cool so now we're noticing also um that we don't have an icon here yet so let's start with that part now what we need to do is add a little bit of a snippet here which is going to be snippet 9 in our our blog post i'm copying and pasting that right now and where we're going to add this is where we've been adding a lot of the code here on the page where we have our product categories we're going to go to divi theme options scroll down and here below snippet 4 we'll just make a few spaces and we'll paste the code and what this is doing is telling us to use this de-icon menu class use the font family for the elegant theme modules and i will place a link in the description of this video how to find these content codes but these content codes actually go to different icons within this et themes uh font family and down here we just set the color of the actual icon and the size and then just a transition for it as it changes colors or maybe or something like that so save that and when we take a look at the front end let's refresh really quick and see what that does if this my account gains an icon or not and there he did we have a cool little silhouette user icon right there so that was super easy to do so we can hop back to the actual theme boulder now and we're gonna add some more modules for this now before actually before we do that we'll notice how this is still on the left-hand side here this menu is on the right that's where we want it to be all we need to do is add just a little bit of code once again and that's going to be snippet number 10 which is going to be super easy all we need to do is go into the advanced tab and then the custom css for this menu item so oops i clicked on the actual menu you see it works though um so we'll just go here or click on this and go advanced custom css main element and paste the code in there and see that it floated away but let's just do it to the other one as well do the same custom css main element paste that and you see that both end up up there on the top let's save that really quick it's good to do this and preview your work as you go because it gives you that instant gratification of the work that you're busy doing and then we see that it's on the right hand side it looks pretty great i think it works well and that works so now we've got the conditional logic in there already we're going to want to add one more thing we've got the search bar right here and you know that actually works pretty well um if you wanted to for example switch the order of the search bar and the card icon because sometimes the card icon tends to be on the right hand side we've included some css in the written tutorial that you'll find on the blog post that you can add to switch those arounds but we don't won't do that in this particular portion of the tutorial so let's just keep building and we want to start getting to the mobile menus so right now if we go to the back and we look at mobile we can see that this part is grayed out because it's not going to work on mobile so let's make that nice and big again and we've disabled the section on mobile devices so what we're going to do is we're going to duplicate the section and then we're gonna go ahead and get into the section settings and we're gonna tell it to not stick for the second one and we will just go here and advanced scroll effects stick to top we'll just say do not stick and then we'll go ahead and save that and now what we'll do is we're going to delete all of the modules in the right column which are these guys so bye bye bye bye and then all we need to do is go ahead and modify the menu here on the first left hand side and we're going to select mobile menu logged in and that looks good we and you know the conditional options would need to be set of course so let's just go to advanced additions at a condition and just as we did before we're going to look at the login status user is logged in we're going to go with logged enable the condition and we're going to save that and then we're going to save this and that's going to be good now we actually we're going to duplicate this one again we're going to go in and we're going to use the mobile menu logged out we're going to go advanced we're going to go conditions and now again we'll modify the condition to be user is logged out we'll just have the name reflect the same thing i'm going to save that and then we just have one more step to do we need to make sure that this section is only displayed on mobile devices so we're going to right click that we're going to say disable we're going to switch it from desktop and just put active on mobile devices now all we need to do is go ahead and save the page and when we go to mobile we'll see that these ones are being activated instead of the one at the top now a little hamburger icon here looks pretty terrible it's the wrong color so let's quickly fix that by just going back into the menu settings design and then it's going to be icons and here we've got the hamburger icon let's make it the blue and for the second one we'll do the same thing design icons hamburger menu icon make it blue and when we go and check out mobile now it's that nice blue color we'll go ahead and save that and now when i go here to the site and i refresh the front end we've got our icons right here that all looks and works fine but when we minimize this width of the screen you see here that we have a hamburger menu in the right color and it's got all the appropriate menu icons that we would expect to see so we can pull that right back out you see how it dynamically goes ahead and changes and adapts to what's happening on the screen and that ladies and gentlemen is your header for this part of the tutorial there's only one step left stick with me we're almost there when the home stretch

Channel: Divi Engine

Views: 231

Keywords: Divi, WooCommerce, Divi Engine, Online Store, Tutorial, How to, WooCommerce Course, Divi Course, Clone a Store, divi conditional display options

Id: Dvynr-Lx3gc

Length: 32min 25sec (1945 seconds)

Published: Thu Nov 11 2021