Thanks Dave - not just just for another very useful tutorial - but also for reminding us that "just because you can doesn't always mean you should"! I saved myself a lot of time and effort by going back over what the General Press theme actually has to offer in terms of sticky navigation etc and found I could achieve everything I wanted to just by using that!
After looking at quite a few tutorials on the same subject and getting more confused than anything else, your tutorial finally helped sort out everything to do with Headers and Footers in less than 30 minutes. Thank you thank you thank you. God Bless!
Slowly freeing my time to do this. But just to mention: you are such a relief. Keep on with putting out this superb easy to follow (anxiety-free) very clean and appealing courses. Glad I found you, just the right time!
OK...sorted...it was the Elementor update today that got me confused about stuff, I went to their blog and got the changes explained. Super video...now I'm off to create a footer!!!!! Thanks.
I'm learning a ton from your videos but Elementor update has just confused me. I have to figure out how to do the things in the video translated into the updated version. The bottom menu in the Elementor sidebar has changed, now 'Update' with an up arrow instead of 'Save', the template file isn't down there anymore, you just find your saved templates on the main page 'Add Template', which was always there but I don't think that's where I went to just check out the templates, or just did't pay attention to that ...happens all the time anyway when you great guys have put a lot of work into a tute and then the program changes. You have to click on the upper left 'Default' menu to find the 'Exit to Dashboard'...it's no longer in a pop up from the bottom menu. The little cog 'Settings' icon in the lower left brings up a Document Settings which I'm sure I never saw before...but is good, you can change to the Elementor canvas (something I learned from you, thanks). When I made the Footer it went onto the same page as the Header I built...on that page but not in any of the other pages so I'm still wrestling with how to get it to go on all the pages in a site as the Header did, and I guess I have to put it on last as I don't see how can 'Add Section' in between the footer and header...I need to learn how to now use the Header and Footer in a site to create a consistent 'theme' page that is throughout a site. I'm working in Astra and love just working with a blank canvas. Elementor has shifted stuff around that needs getting used to.Thanks for asking, Dave.
Yes - these are the perils of software developers making big UI changes. It confuses everyone at first AND it also makes tutorials out of date very quickly! :) That's great insight into what you're struggling with. Regarding your footer - what method did you use to display your header on all pages? Did you use the same method for your footer too?
Awesome Video!!! I've been using Elementor for a while now. And I always wanted to build my own Header and Footer.And this is Exactly what I needed.Thanks for the Tutorial.
Dave, first allow me to say how much I have enjoyed watching your video's. You go above and beyond in the way you explain each of these elements. I have recently purchased and installed the GP Extender plugin. However, I have yet to fully figure out to make it pull a custom Elementor Pro Header to display on single posts and certain pages. I know I would greatly appreciate if you would ever entertain doing a video like that! Keep up the amazing work!
Thanks for the tutorial. It helped a lot. I am just getting into WP, as well as Elementor. And just chose OceanWP as my them. So a lot of digging for tutorials at the moment, lol. Middle aged and thankful for the pause button.
thank you for an awesome video - I'm useless at this website stuff, but you have helped make it easier to design what I want without any of the knowledge or understanding of website talk. So thank you very much.
Thank you Ray. Very good of you to say. I've only been making videos for 3 months. They've gone from being mind-meltingly hard to a bit easier these days. I learn a little something every time. :)
It took a while to go through the whole process and I probably still have some learning to do before I get the most out of Elementor, but this video was INCREDIBLY useful in a moment when I was a bit lost and losing hope to get things done. I can't thank you enough for this video!
@@DaveFoy Dave I have created 2, well 1 1/2 websites with you help in elementor, I am having a problem with my header having on both sites block of white above... What am I missing? The completed site is bonnieglencairns.com. Thanks in advance for your help regarding this matter.
This video has saved me a TON of time, thanks Dave! Just subscribed and joined your mailing list. Looking forward to going through the rest of your videos :)
Another amazing video David!! Despite the accent (he he he - just ribbing you) your videos are super easy to follow and marvelously well put together. Keep 'em coming!!
Yes, it's a little more advanced than some of my other videos, but as I say, it's a question I get asked a LOT. It gets a little trickier because people use different themes. If you have any questions, give me a shout. Very happy to help. Good luck Susan!
You should create more tutorials. This video here is very clear! I'm learning Elementor(free version) and this is the first video I watched and I learned a lot in terms of header. I tried to create another page with only just a container and a background image, but the header we just created is not appearing on that page. Any explanation why? Thank you so much!
very informative - thanks for the link to all your other videos as well...I like the fact that you keep everything as 'native' as possible. That really helps. Should do this in a child theme as well, correct?
No you don't need a child theme for this Greg. Arguably you don't need a child theme at all, if you put all CSS in the Additional CSS section in the Customizer and use the Code Snippets plugin to add any PHP filters/functions you might need.
BEER! :-) But seriously, awesome video. Again. I learned a lot from this one. You should consider doing payed courses. This is golden. Ps. smart move to already use the new Elementor interface. Cheers.
Thanks so much my friend! That means a great deal to me. Definitely considering a comprehensive, step-by-step course... LOTS of ideas. And yes... BEER! Cheers! ;)
Thanks David! I like to make life harder for myself. Just had to create a header for myself lol The only problem is that when you use a drop down menu it layers under anything that's under the menu so you can't see what's in the drop down menu. If I need to look at the coding I will just go back to using the them.
Ah yes. That depends on what you have under the menu I think. You might need a few small CSS tweaks (it'll be 'z-index' - this sets which order different layers on the page should be stacked). Actually in the new version of Elementor coming very soon you can adjust the z-index value for Elementor elements, so that may well help.
Design Build Web - For Non-Coder Graphic Designers thanks for responding so quickly. I will just wait til the new changes come with elementor. Really grateful for your RU-vid channel
Tks for the quick and effective way to use Elementor to create header, very helpful...Question to you and the community...What's the best theme to use with Elementor...? Astra or GeneratePress...Other suggestions...? I want it to be lightweight and fast but include most important features like SEO friendly, etc.
Thank you! I personally prefer GP, by a long way. I wrote about it here: www.designbuildweb.co/best-wordpress-theme-non-coder-graphic-designers/ I do hear great thing about Astra but I haven't tried it yet. I prefer not to switch tools, better to really master one theme I think. I'm not ultra keen on OceanWP, but again, lots of people really like it. Really best to give them a try and see which best suits your needs.
After creating a header using GeneratePress and doing everything else in Elementor...the watching this video a couple of times...it seems that the key thing here is: Just because you can does not necessarily mean you should.
you are the best.. I have been looking all night on how to replace my current themes header with elementor and NADA. You got yourself a sub :D Just a question though, how did you get your header to overlay the image?
AWESOME!!!! Thanks, Dave... It really helps to build a header for a website. Once question tho; How do I stick the menu to always remain visible and not just disappear when browsing down?
You are the ONLY ONE (!!) who mentions the switch from a page edited with WordPress into Elementor! Thank you for that! :-) Gee, is it THAT uncommon?? However, now that I was starting to follow your information, you lost me at 5:03 since you don't show HOW one gets to "My Library" :-((( And I have searched for it too, but in vain. So sad, I felt I was going to get an answer to my problem.
This video is really old. My Library is now under the Templates menu in WP (directly under Elementor)) then Saved Templates. Same exact thing. Sorry for late reply.
Hello, Dave What a nice overview is this. Good voice, wich explains everything very nice. Keep it ip ! I like to make a sticky header with the free version of Elementor, but somehow the header isn't sticky at all. Iám using Generatepress as theme. Could you give me a hand ? Again, nice work
Hello Dave! First of all thank you very much for your great videos and all the effort. Is there a way to make the header fixed? Or even add a shrink effect?
Thanks Petra! The easiest way I know to make the header fixed is this plugin: wordpress.org/plugins/sticky-menu-or-anything-on-scroll/. It doesn't shrink it though, I don't think? I've got it on my list to research this further and maybe do a follow up tutorial.
I´am very thankful for your hard work on this video. I'm new to wordpress and I would really appreciate it if you can tell me the last step, where you put the background image Thank you very much! (Sorry for my English)
The background image is in the Section settings. You click the little section icon in the middle of the section in Elementor. Then the Style tab. And then set the background image there.
Very nice and informative video, i just created mine. But can't remove it and make it default. I would be highly grateful if you could tell me how to remove it and revert it to default one
I followed your tut and it really works for me man, thanks! One question; I have a difficulty with putting the menu in the centre on mobile and tablet. Marking the center alignment already... what can I do? Gr Jelmer
Thanks Doug. I typically try to use my theme (GeneratePress) header as much as humanly possible. Even to the point of changing the design/layout idea to accommodate. A theme like GP just has all the pitfalls, responsiveness, etc already worked out. I'd personally only use this method if the design really couldn't be created otherwise.
Saving my work is a big issue as the save button does't respond. What can i do as i spend hours trying to get a a page to save. Great tutorials by the way.
Great video! Helped me alot! I have a question for anyone seeing this: The white space above the header follows into my website and i am having a hard time trying to figure out how to do remove it. If anyone has an idea i will be very grateful - have a great day regardless.
where do I place the click magic tracking pixels on a word press site (javascript)? in click funnels I placed it in the footer but I now build my funnels in elementor
Brilliant tutorial. is there a way to make the headers sticky? Also it would be nice to see elementor being used with a fast stripped down theme like twentyseventeen with a custom header footer, maybe a tutorial idea? I think most of these super themes or specifically designed themes are still bulky and overkill with most features being redundant and causing epic mobile site loading issues. sure they look great on a desktop but when a sites typical weight should be 100-200k for optimal loading speeds on a mobile that changes a lot.
The only way I know to make a custom header sticky right now is a plugin: wordpress.org/plugins/sticky-menu-or-anything-on-scroll/ One reason it's better to use your theme's header controls if you can, usually got way more features/flexibility. The theme I use here is GeneratePress which is very very lightweight. Not bulky at all, and it's design is very very simple. Twenty Seventeen, I find, is so light on *anything* that it's almost useless for any real websites, with a lot of specific design decisions you actually have to override if you want any design control.
Truly wonderful job! You get me started and going! I want to build a website using Elementor Pro with e.g. with 3 columns. Left most will have menu and Right one will be static. The middle one will change as the menu in left column is selected. I would like to pull only middle column from server and do not want to upload whole page when menu in left column is browsed. May you please guide me what all I need to learn. So far I have seen only your tutorial and I am extremely eager to get going. I think I have drive into HTML, CSS and AJAX... right what else? Any book that you like to suggest?
This is great information. I'm having an issue with the mobile portion of my menu. I am unable to get the "hamburger" icon, instead i have just a empty square/rectangle. Any thoughts on how to get the hamburger back in?
Hi Dave, thanks for the great video, it's helped a lot with my header design. I do have one question, I've used the Header Footer Elementor plugin to design my header but it's not showing up on the site. Any ideas?
Thanks! It's really hard to say without seeing the site. You've selected 'header' from the dropdown on the template's settings? Are you using a compatible theme? I know OceanWP isn't, for example.
Hi David, can you explain how to put the header over other content like you in the end ot this How to ? I'm using the z-index and negative margins, but something is wrong when the hamburger menu is expanded, the content gets push down, and white space appears... Many thanks !
Thank you for the tutorial! As I was following your steps, I got stuck at 10:12. When I resize my header into "tablet" or "phone" mode, my menu turns into mobile toggle menu, which I don't want. How do you disable that toggle so I have a normal navigation menu every time I resize my header into phone or tablet mode? Many thanks.
Thanks for the great tutorial! Subscribed! How do I use the standard OceaWP header when I also have elementor pro? The oceanWP theme header works on all the blog pages but is broken on the single pages? I can't seem to find how to tell the pages to use the Themes header.
Really great and informative, thank you! But I am coming to the question: how can I replace the new header (= as it is a new template) to a page in the menu (which is defined as a general page of my menu)? In my theme there is always one same header and I want to costumize each page on my menu. I think this is the main sense of your video. But I still didn't get it ;) So can I replace my menu-page with a whole "template-page" where I save my header how you explained? Thanks a lot for an answer!
Thanks, great video and easy to create a nice footer (made it in AE templates to get the short code and then use GP hooks). BUT now I’ve a big problem when trying to do the same for header. I manage to make the header in just 5 minutes but after 25 hours my site header is still a mess.. Even thou, I made it simple, just logo, menu and language swap. First I got it nice but wanted to narrow the container and after adjustment I got double menu and now much later I still have the old menu/header (above the new header). I have tried to remove/delete the old one, I’ve tried simple css: #site-header { display: none } or just #header{.., I have tried different way to add on the new header ..and it works but the old menu or the full header is still there as a ghost (I’m using generatepress/statement and elementor, AE templates, GP hooks). Is there any way to remove or delete customize settings for my old header? I have no problem to upgrade any plug-in but not sure if it helps…? Hope anyone could advice what to do.. //Thanks
Maybe easier to just use the Header Footer Elementor plugin. Remove your hook first. Then in the plugin settings, add a new template. Assign it as 'Header'. Set it to be Elementor canvas template. Then Edit with Elementor. 'Add Template' - choose the header template you already made. You 'might' have to set it to be full width (Section > Layout). Then save. And that should replace your GP header with the Elementor header. Does that work? Let me know. ;)
Okay thanks for your advise, in meantime after several try and error, I finally solved the "bug" and now I've header by Elementor and GPhooks :) ...the problem was wrong settings in "Apperance/customizer" and I believe difference (when I made the footer previously with excellent help of your video and now for the new header) was a new version of Generatepress. However, solution and the magic click was: Apperance/customizer/Layout/Prim.navigation: Navigation location-> "No Navigation" (the problem was created by setting: "Below navigation" - I don't know if this is default setting or if I changed it by my self when try and error...).
Dave, thank you for all tutorials you make. I like the way you teach.. Looks like I need elementor pro to do this ..? I tried this with elementor free version dropping wordpress custom menu element into nav section. Once done, i saved and published it.. but for some reason the header is not showing up in the website.. any ideas why it might be so..
