what is up guys I'm your real Soto and in this video I'm gonna be showing you guys how to make a e-commerce header which is basically just adding a menu card icon to your header now this is the default header on my website so this won't be the header that we'll be creating but if you are interested in creating a website just like this feel free to look back to one of my videos and I should have it in there or if I don't already it will probably be uploaded very soon so let's just dive right in so the first thing that you're gonna need to do is head over to your plugins and you're you know one that want to install probably just you basically just need two plugins you might even need a third one in case you just don't really want to create the header template yourself you just want to use a template then you're gonna want to use elements kits so the two plugins that you mainly need are element or header footer and blocks and the most important one is is this one right here BEW menu card so this one right here you're gonna need and this one right here you're gonna need and also elements kit light I'm not really gonna go into installing plugins I mean I'm sure all you guys know how to install plugins so after you have installed those we're gonna work you're just gonna go ahead and go into our appearance and go into header footer builder and as you can tell I do have some some footers here from my last video if you I'm not really gonna dive too into creating a header because I do have two videos on that that you can go ahead and look at I am gonna be focusing more on adding the the menu cart so if you feel like I didn't explain things that much you can go ahead and watch my previous video on creating a header in in Elementor so what you're going to need to do is click add new and then select header and then select if you just wants us intend on the entire website let's say you just you want a specific page you can do that as well you can go over here specific pages and then just select a page but we are going to be doing all pages or entire website and let's just leave that how it is and let's just give this a name let's call this header click publish and let's go ahead and create our header okay so now what I'm gonna do is I'm not gonna go and create a header from scratch I'm just gonna grab a template that I already have using the elements kit it's a free plug-in and you can install so you're gonna head over here and then go into headers and then we're just gonna select the header here and some of these are are in the pro version but we're just gonna be using the free version and I'm gonna go ahead and grab this one and then I'm gonna just add a menu here at menu one okay and let's just save this and I'm gonna go ahead and try and make this header look more like my website just so that I can have the right colors in good as you can tell this doesn't really go with my website so I'm gonna go ahead and just grab this color green here and if you're wondering what this extension is it's called the eyedropper color picker you can go ahead and grab that in the Chrome extension store so I head back to your store here and then we're just gonna want to make this probably green now it does not actually look that great so let's go ahead and make this white make the icons white and you can do you can change this up however you like I just want to kind of I just kind of want it to go with my website as well so just gonna move this over here down the right one you should click this properly okay so that is gonna take way too long but let's just go ahead and do that real quick I'm actually just gonna delete these and I'm just gonna edit this last one all right and now we're just wanna maybe if you did want to add a different logo I'm gonna leave this logo but if you did just go ahead and click on this and add your logo there so let's go ahead and move this to the to the right you see how it's Center right now let's move it to the right okay I do like this search bar so I'm gonna leave it I'm gonna leave that here but if you did want to you can remove that and then add the car icon menu here instead but I am gonna actually change the color of this to green to a green color okay so now that we have that set up it's now for the most important part which is adding our menu parts so now that you have it in here it does work with Elementor so you're just gonna want to type in cart and it's gonna be this one right here it's called the rule menu cart light so you don't want to grab that and you know what let's go ahead and actually add a column so let's add a new column and now it is gonna move everything over you know my shift things around a bit but we just wanna just want to kind of move it around and make it seem like it's make it look like it's um it's uh it's looking good so probably want to move this a little bit over here and just make sure that everything is in line so with each other okay all right so let's go ahead and grab that cart again let's look for us or that didn't cap let's look for the car the cart and then we're gonna want to just drop it in there and you're gonna notice that it's kind of a little bit off right I mean it is a free plugin so it's not going to be perfect so what we're gonna want to do is make sure you click on it and go into the advanced settings and we're gonna want to fix it up with our margins so the first you know we're gonna want to do is from from the left we're gonna want to go we're just gonna want to bring it down to the negatives until we get it pretty centered where we want it I don't want to drag this too much so let's just let's make it like this this should be pretty good so with this over a bit okay so that looks like a good spot now let's just bring it down fro from the bottom I think it should be negative no you know what see here let's click on this section here and then make sure that you have this to set to middle and then we're gonna want to bring this down to negative okay and then also bring it down to to the bottom negative as well until you reach the middle maybe bring this over a bit and then I kind of want to make this cart quantity icon want to make that into red so go ahead and click on the the cart and head over to your style cart quantity background let's make this tool red but let's not make this a really bright red let's make it a lighter red and notice that it looks a lot better with that and then that's the cart icon instead of gray we can make it really black or we can grayed out us as well just make it a little bit darker gray so now the only thing is that our colors are off so we want to make this into a green color so so what you're going to do is you're gonna click on heat on the cart and then you're going to go into the cart drop down and then we're gonna want to change the background color so this is this is a checkout button so right here we're gonna want to make this that green color that we chose and we should save this green color just in case we want to use it again and let's check that out okay now that is looking really good but we have a hover effect which is green which is not what we want so let's go in here and let's go into the hover and this would be the amount cart let's see here cu cart I'm wondering if we can change that if not well then let's see if there's a porter type of solid let's see what's going on here okay so that would be for the box itself just go ahead and actually remove this so we have a checkout button okay we can't add a hover to that but I'm trying to I'm trying to change the color of the border and let's see if there's a difference here see if that was it right there that was not it okay see maybe if we add a one okay so sometimes like I said with these free plugins you tend to get little issues like this so it looks like we're not able to edit that that um that little my little border hover here just kind of a shame but um that's something that you're gonna need adjust adjust with CSS if you want to fix that as well but regardless I don't think it's not noticeable to be honest and it is a free plugin um and and it honestly looks pretty great you know so I honestly wouldn't really complain about that so let's just make sure that it looks good on the website here let's go ahead and over to our home page and as you can't I did add a product here but let me just go ahead and add this product now these are just sample products keep in mind okay now look at that look how look how clean that looks this looks really clean right looks and it honestly looks way better than the menu that I had before that they fault menu on this website so you can go ahead and add your logo here and really set this up how you want this to look like so and you can even do this on the pro version as well but on the pro version it would be the same thing you just grab there a cart that they already have by default same exact thing so let's just make sure that this looks good on mobile as well so as you can tell there are some little issues here that we do need to adjust so what I'm gonna do is probably shift this one over just like so that's fine and then let's go ahead and shift this logo as well the section of the logo and that's probably shifted to about you know what it will place just over here don't why star on this side as well right here so then we're going to move this over just about this so if there's any background noise okay and then we're gonna move this over a bit here and we're gonna save that cuz that is good and then let's just adjust a mobile version of this and I honestly usually do not like having a large button oops let me just remove that okay so I usually don't have like having a large button so I'm just gonna I'm just gonna make this section invisible on on more on mobile so let's just put that to hide and then let's go ahead and shrink this logo here at least adjust a column over and this one as well this will probably be at 10 maybe we can shift it over a bit as well and then maybe a shift is call them a bit more and set it up just like that that is good there that honestly like everything works perfectly I know that the search kind of looks like it's too much so if you wanted to remove the search bar I would just go to responsive and hide the search bar and then also just move it over as well just seems like you have we have like way too much going on you know so yeah maybe shift this over a bit like I said shift is over yeah there we go so we can shift it over about that and I don't I don't like how the top bar it seems like that's really close up so you know what I'm gonna do I'm actually gonna go ahead and hide this section here I think the top bar is way too large and I'm gonna add some spacing as well to this so I'm gonna click on this section here go to advanced go to pixels and from the top I'm just going to bring it down a bit actually you know what I'm instead of margin let's go ahead I like to do padding instead let's do some padding here and let's from the left as well as shifted over as well and let's do the same thing for the right okay now that looks pretty darn good oops you know what okay now as you can tell you can see that oh the menu isn't showing right now it's just glitching out but believe me it does work so I'm gonna actually show you I know that it doesn't want to show here let's go in here and then let me show you how this would look like so let's go in to inspect and as you can tell everything works properly as well so oops that's just cuz I zoomed in so let me go back over here and if you didn't want to hit this cart I would already suggest move removing this logo but you can add a logo if you wanted to so that would just be the logo up here but I usually remove it it's up to you how you want to go about doing that when I click update and there you guys have it let me let it load let such we go to though the whole page okay alright so that is that is it if you did want to learn how to make this into a sticky header feel free to watch one of my other videos I go through that if the video did help you guys out make sure to subscribe and like the video so you can catch up on the next videos that I upload to this channel and if you do need any help if you have any questions on WordPress in general or Elementor or WooCommerce feel free to reach out to me and I can go ahead and help you guys out thanks for watching and I'll catch you guys in the next video .
🤑 How To Make A Website Under $35 And Sale For Over $2,000 (Free Masterclass):
😎 Join Our Free Facebook Group – Websites & Sales
PRODUCTS I USE FOR MY WEBSITES ⤵️
🔥 My Hosting Provider – Try Siteground [Save 40%]
Welcome back! In this video, I show you how to make a menu cart for your ecommerce website on WordPress.
Connect With Me On Other Platforms: