Elementor Header Tutorial: 100% FREE Method
HTML-код
- Опубликовано: 28 июл 2024
- Over the last 10 years I’ve had the privilege of working on hundreds of small business client websites. I’ve had every tool, widget and plug-in at my disposal. But maybe you don’t - which is completely OK! This is why I’d like to help those beginners with this super simple tutorial to make a stunning website without breaking the bank on extra features.
Well the good news is, in today’s video I’ll show you how to get the best of both worlds. Just follow this Elementor header tutorial and you will have a fully functional header that works on desktop and mobile. Check this out!
👉 Want Wes' 1-on-1 help with your website, or with your digital marketing? Schedule a 30 minute kickstart meeting here: wesmcdowell.com/private-coach...
🎬 Register for the FREE On-demand video masterclass training, "The Automated Clients-on-Demand Website Blueprint for Service Businesses" Just go to: wesmcdowell.com/training
🤑 Need website hosting? Grab my exclusive affiliate discount and save up to 80% off normal hosting price: wesmcdowell.com/hosting
Finally!! Someone who I can understand and teaches very clearly and not in massive detail with changing to 700 colors etc.. Thank you!!!!
Wow, thank you Brenda! 👍😊
Big thumbs up for your video. You clearly and easily solved a problem I had been having to change my header tab names in the first 2 minutes of your video! I had spent 2 hours trying to figure it out - thanks!! 😁👍
Glad it helped!
Amazing i am looking from last 5 days how to make header and footer but i did t get any good result but now i got something that i can call you are the best❤️❤️
Thanks Wes! For those who, like me, can't see any change on their website (the menu and footer just won't show). I manage to make it appear going in my page > edit with elementor > elementor burger menu > site settings > layout > default Page layout, select "Theme". In my case, it was on elementor canvas I think (which is something advised by other youtubers). But be careful, i'm no pro, i'm have no idea why this worked... I just know it did in my case...
Hey, thats great to know!
Helped me real quick. Thanks!
Thanks! I was also struggling and this saved me.
Thanks, Wes I have just followed this video through and created a great new header and footer for my site- easy to follow the guide, keep up the great work.
You're welcome! Glad it helped and nice work! :)
This is the third video in 2 days where I end up on your channel to find the solution that works best for me. You earned a sub!
Welcome aboard! 👋 Glad to have you Eddy 😃
WHAT AN AMAZING video!!!! I took my time and follow you through out and it was so EASY! I AM NOT a web or graphic designer. So Thank you!!!
Glad it was helpful! Fantastic! 😊
Absolutely badass, thank you. This saves so much effort and gives you a lot more options in your design rather than having to work with the often finicky and difficult Wordpress nav menu/header, which depends on the theme, template, can't be moved around to different parts of the page easily-- any way like this that you can use a global element and also keep everything designed basically directly within Elementor is ideal! Thanks again. Subscribed just for this vid, keep it up!
You are so welcome Jordan! 🙌😎
I watched other how to/tutorial videos, however.. yours was so easy to fallow. Excellent job.
Glad to hear that Stanislav! Appreciate it. Thanks for watching!
Thanks, Wes. Great video and easy to follow.
Thank you. Watched 3 vids before this but you explained the footer menu well.
Glad that it was helpful! Good luck!
We can thank you enough for this. Amazing tutorial, thank you for tanking the time to do this.
My pleasure! I'm glad you enjoyed it! 🙌
Excellent tutorial. Covering every element! Thank you.
Glad it was helpful Angelo!
Huge help, thank you 🙌🏻🙌🏻🙌🏻 highly recommend… I have 7 days of elementor experience and this video was incredibly helpful
Glad to know that it helped Grant. Thanks for watching!
If anybody is having an issue where the header and footer are not showing up when you preview your site, make sure your pages templates are set to "Elementor Canvas". You can do this by going to your dashboard > pages > then hit edit under the page. Then, on the right side of page, youll see "Template".
Thanks for that clarification Eddy 😀👍
Clutch, thank you! : )
I had the opposite issue as soon as i did that the header disappeared from my menu
And also you have to specify "Type of template" again... and I don't know why, because that step was done at the beginning in the creation of the footer and header.
Wow... Thats just awesome.. The simple things that makes it work yet extremely difficult to find. Thanks man
Thank you! That was just what I was looking for!
My pleasure Robert! Glad I could help! 😊
Yay! Can't wait to try this. Thank you for the tutorial.
You are so welcome Juliana!
Thanks so much! I really appreciate this type of workaround when I'm building my site on a tight budget.
Glad it was helpful! 😊
This guy is amazing. Thank you so much for all your help and detailed tutorials.
My pleasure! 🙌 Thanks for watching
how do i make my header background transparent ?, there is always a white block around
Here's the best way I've found (but if someone knows the "right" way, please educate me)
When you are on the Elementor page where you can edit layout, logo, menu, etc., use the navigator to make the changes you are picking apply to the ENTIRE three-section "container".
Pick "Style", expand the "Background" menu. Where it asks you to choose "background type", click "classic" (the paintbrush icon). That will pop up a the "Color Picker" menu. Under the color swatch, you will see a slider that allows you to pick color. Under that is a transparency slider. You can take that all the way to the left which makes the opacity 0%.
Follow all the other steps and your header will appear everywhere you decided it will -AND- will be transparent.
I love your video so much!!! You have helped me to move away a big stone in front me, but it looks so easy from your video, I want to say many many thanks to you
Thank you and you got this! 👍😊
great explanation of the topic...very well done sir I was searching for some time and I found this video to solve my menu problems...💗
You are most welcome Abrar and so glad it helped! 👏
Dude you are genuinely underrated, amazing work !!!
I appreciate that Waseem!
Wes, thank you very much for this tutorial. I did it, step by step, I worked perfectly with what I was looking for. Thanks.
Fantastic! Glad it worked out well for you, Gustavo. Thanks for Watching my Video! :)
@@WesMcDowellInc Again, thank you for this video. I keep trying to put my website online and I reached again this video. However, I have a question: how I put different headers in the same website? I'm trying to put a header for the Landing Page, with buttons with the landing page information only, and keep other header for the rest of the website. Thanks in advance.
For me this is master class my friend especially impressed about way of explaining appropriate love from spain 🇪🇸 and I subscribed your channel is well
Wow, thank you! 😊
Perfect! The column adjustment helped! It was hard to edit mobile without ruining the desktop version. Is there a way to edit separately in elementor free without changes happening to desktop?
What a great tutorial. I don't understand why it's so hard for some people to simply add (Pro version) to their videos. Literally seen 3-4 complete videos, just to realize in the end that I wouldn't be able to use a certain feature (needed for the assignment) unless I had pro version.
Okay, a (late) question here: If I want to do the more modern type of menu, in the centered header with a link/ menupage - a logo - link/ menupage, how would I ever be able to do so? I dont know if it makes sense - but I'd like to have a menupage on left centered side, the logo/ link for home-page, and on the right side of the logo have another menupage. But, to do that, I've made two separate menus, but that doesn't exactly look good while using mobile as it adds two burger menus :D .. Hope you can help :D
Great tutorial but it doesnt appear to be a sticky menu. Even in you demo at the end, the menu didnt appear to be static.
Thank you. Great step by step instruction that stopped me from having to spend more money on upgrades.
Great to hear! 👍
Thank you for the end part of the video, solved my problem
Glad it was helpful Vicki! 😊
You are a great guide - you know your audience , right on target sir
Thank you Scott!
amazing.. this is the best video tutorial I've been looking for.. THANK YOU!!!!!
Thanks for the compliment. Feel free to enjoy more of my videos.
Thanks for posting this video! I had downloaded the plugin, but wasn't getting the results I needed, and now it looks great! My only problem is that my header is no longer transparent. I See the "Enable" section, which is activated, but still no joy. Is there another place to look?
I know you already now this but, you're saving my life right now! Thanks so much!
Happy to help Michelle! 😊
Great video. It has helped tremendously. Question... When I went to make an adjustment to my phone view, it shifted my desktop view. Is there a way to avoid this?
thanks man, you are a great teacher. i love it
You're very welcome! 😀👍
Hi Wes, I did everything exactly as described, however when I launch the website it doesn't let me go to other pages from the menu and simply doesn't do anything. Do you know what might be the reason?
Amazing tutorial dude!! Thank you so much.
Glad it helped Tomás! 😃
Thank you, this is great.
You're very welcome! Glad you liked it! 😊
Thank you for the good job you are doing. Cheers
Hello! Wes, great video tutorial. Thanks! I've been following for a while. I have a question about privacy and terms of use for a new site for a management consulting startup. I don't have clients yet. Should I get it done through a lawyer, or is there a workaround? Please advise.Thx Raul
this was very helpful, i almost wanted to pay but this was really easy i'm so happy rn
Glad you liked it, Nicole! Thanks for watching! 😊
Great video! I unfortunately have a problem with the logotype being blurry and not having any color. I try to change different background color but it just takes over the logotype. Does it have anything to do with the filetype or something? I Followed your instructions very precisely.
Best explanation on RUclips! Thank you
Wow, thanks Maria! 👏
Fabulous video. Thank you very much!
Glad you liked it, Manuel! Thanks for watching! 😉
just found you and one of the best tuts on YT thnx
Thanks, Tracee! 😊
Thank you very very much this 20 min was very important class for me
Glad to hear that Abdullah 👏😃
Great video. The 'edit header' orange tab has disappeared from my header and I can't select it to edit it. Any idea how to fix that? Thanks.
What if we want to animate the submenu indicator icon as well? For example, it's generally facing downward, and once you hover over it, the submenu opens. With that, I want to animate the submenu indicator icon facing (^) upward now. I think with this, the audience can have a better UI experience. Hope you understand what I'm asking.
bro... you are a life saver. MUCH appreciated. God Bless
Glad to help Barry - cheers! 😊👍
Thanks, this helped. The default Gutenberg editor is absolutely horrendous to edit nav menus with for mobile.
Hello, thank you. How can I custom each item of the submenu ? I would like different colors for each blocks
This was so helpful thank you
Glad it was helpful! Thanks too! This means so much... 😊
Really great tutorial
This also helps for who search online for queries "logo and menu not showing wordpress pages"
Thanks Brother
You're most welcome Reshma 👏
Thank you so so much bro for this wonderful video..
Thanks a lot again from India...
Glad you liked it!
Thank you so much for your help. Your rock.
You bet! Glad it helped!
Great tutorial, man! Thanks!
No problem Alejandro! 🙌 cheers!
thank you so much sir!!
Great Lessons Thanks to share your experience
Thanks Abid for watching.
Thanks for the help. God bless!
You're welcome! 😀 👏
Hi Wes, great video! Is there away to put the header in front of the hero image?
thank you for this! Just one question, my starter template already came with a header and footer, and will that one automatically be disabled when I published my new one? Because I can't find any settings to disable the original header. When I deleted the original header in the 'customise' section - the new Elementor header also disappeared.
Not all hero's wear capes! Thank you!
Thanks Jae 😎!
I want to know, Can I change the sub menu indicator in elementor to upward direction and display the sub menu in upward direction
Great tutorial, thanks!
Glad it was helpful! 😀
Thank you for this vid! I'm just wondering, I'm not able to do full width of the page. There's a space on both sides of the page and I'm not sure why even if I chose full width on the layout settings of the container.
Simply Superb
Thanks a lot! 😊
Ok but how do I make a drop down for the menu I added one the classic way in menus under appearance but all I see is an arrow for the drop down it changes directions when I press it but the page doesn’t appear
Just what O was looking for ❤️
glad to hear that!
Liked and subscribed! amazing tut
Awesome, thank you and welcome aboard Pam! Stay tuned for more helpful contents 😊
Is there a way to move the header down into the picture below it? Basically so it overlaps whatever page you're on, and there's no white block.
Hi! Although I have created pages, in the pages menu, they do not appear available to me, for the menus, on the appearance page. It says that there are no items. What could be the error? Thank you for your help!! :)
Hi Wes! How can I make a submenu from this menu that you have created? Thank you!
hi! amazing video thank you! How can i block the header menu? is it possible?
Great but how do I apply the header and footer to my actual website pages? after I did all this I dont know how to use them no :(
Love this
thanks bro this helped out a lot
Glad to hear it!
Thanks very good video!
Glad you liked it! Thanks for watching! :)
This was awesome, thanks. I am a beginner and something went wrong with my elementor templates headers so I have recreated one as you suggest here. Problem is I cant seem to connect this as my primary header afte deleting the one that went wrong. How do I do this?
Would like to know how to do this too
thanks for the amazing video
Glad you liked it! 👏
....any other video about how to link and previously creat, these MENUS -About Us-Pricings-Testimonials etc..in order to appear and be able to select them?btw whats ur opinion about Themify Ultra?thanks in advance , a spanish fan
You made this easy. 👍
Glad to hear that Labaik! 😀
thanks for the video i have small peoblem when i add menu automatically i have underline my menu i choose none but its still show how i can remove it please???
Oh my gosh... i was having trouble finding the right menu widget. I was using the WP nav menu widget that came with the free Elementor and it didn't load any styles, it just appeared as a bullet list.
You really are the man!
Thanks Mike!
great video mate. you could show linking contacts at the footer, for people dont know how
Good idea! Thanks Deniz! :)
I used your video to make my header and footer, but it seems like there are some limitations because I do not have the elementor pro version (setting up an email subscription on the footer). For some odd reason, when I go on my phone to check my website, it has not applied updates to the header and footer on all of my website pages. When I view it in the elementor header/footer application on the computer and switch through web, iPad, and mobile, they look perfect. Do you have any suggestions for me?? Thanks!
Awesome video! Quick question, how does it stay floating on the page? I got both header and footer set up and all works great except that the header is not sticky, it moves while scrolling.
Thanks Linz for watching! I found this on Elementor's help page: elementor.com/help/change-sticky-header-color-scroll/
Great tutorial, Btw how can I make the footer sticky to bottom?
Thanks a lot for the video !! how can I add new elements to the header like "blog" or "shop" ...?
Hey Afaf, thank you for watching! Check out this video for more info about editing your header: ruclips.net/video/vUC6plBN6iY/видео.html
Nice work again... I wish you would do a video on creating dropdowns for header and footer.....:)
Thanks and thats a good idea for a future video. 😀👍
I wanna know, what kind of template are you using for this tutorial ?
Way to few views for such great content. Helped me a lot. Thanks!
Great to hear! Thanks so much too Swen! 😊
nice one thanksa Wes . i am i bit confused because i dont have and header footer pluging, and yet i somehow made some headers althout they are moslty turned off becuase i dont like their layout and i dont know how to change them lol.
could have been done with the free elementor or the classic editor
But how do you apply them to be used as a theme? No idea wtf I'm doing wrong I feel like such a newbie. 🤣
I do love Elementor though. Still learning a lot as I only recently started using it after decades of website development and design. The most confusing part to me is how it works with WordPress and the standard WordPress themes. Still learning my way around the ins and outs there.
Great video!
Need saving here :D I used your tutorial, and it is amazing, but from the beginning I have a problem. When I drop the navigation menu widget, it doesn't appear like yours - with words, instead I have the hamburger icon and a dropdown menu from which I can't get rid of. Please send help :D
dear Wes, thank you so much for your content. Please let me ask you about responsive desing.... when i finish desktop header edition, next step is edit mobile edition, right? okay but when i finish mobile header edition, unfortunately the desktop header went totally disconfigured (keeps the mobile edition but bigger).... how can i solve this? how can i separate mobile version edit between desktop and even tablet? thank you so much
You are the GOAT!
great video!
Thanks for the visit Rodrigo! And I'm glad you liked it! 😁
the header and footer works the whole website or just appear on the homepage?