How To Create Custom Headers & Footers With Elementor For WordPress With This Tutorial
HTML-код
- Опубликовано: 28 сен 2024
- Learn how to create amazing custom headers/footers for Elementor using their newly released nav menu widget.
Here are the links to everything from the video:
Elementor: www.wpcrafter....
Astra: www.wpcrafter....
GeneratePress: www.wpcrafter....
OceanWP: www.wpcrafter....
Plugin: wordpress.org/...
For your developer: github.com/Nik...
How To Create Custom Headers & Footers With Elementor For WordPress With This Tutorial
EXCLUSIVE WORDPRESS DEALS 2023
🟡 SureCart -- www.wpcrafter.... (SAVE 50% Auto Applied)
🟡 SureMembers -- www.wpcrafter.... (SAVE 50% Auto Applied)
🟡 Presto Player -- www.wpcrafter.... (SAVE 33% Auto Applied)
🟡 Astra Theme -- www.wpcrafter.... (SAVE 10% Coupon WPCRAFTER)
🟡 CartFlows -- www.wpcrafter.... (SAVE 40% Auto Applied)
🟡 Cloudways -- www.wpcrafter.... (SAVE 20% Coupon WPCRAFTER)
🟡 BuddyBoss -- www.wpcrafter.... (SAVE 10%)
* Want to offer a discount to WPCrafter subscribers, contact me on my website
BEST WORDPRESS PAGE BUILDERS
🟡 Spectra -- www.wpcrafter....
🟡 Elementor -- www.wpcrafter....
🟡 Beaver Builder -- www.wpcrafter....
🟡 Divi -- www.wpcrafter.... (SAVE 20%)
BEST WORDPRESS HOSTING
🟡 Full List -- www.wpcrafter....
🟡 Cloudways -- www.wpcrafter.... (SAVE 20% Coupon WPCRAFTER)
🟡 Hostinger -- www.wpcrafter.... (SAVE 75%)
🟡 NameHero -- www.wpcrafter.... (SAVE 70%)
🟡 SiteGround -- www.wpcrafter.... (SAVE 70%)
CONTACT WPCRAFTER
☑ Website -- www.wpcrafter.com
☑ Facebook Group -- / wpcrafter
☑ Twitter -- / wpcrafter
☑ Twitter -- / adampreiser
All of the opinions expressed in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is a referral program available, please assume that you are clicking on a referral link.
It would be really cool to see an updated 2020 version of this. :-)
I was waiting for this menu widget to come out. Thank you for showing us the plugin we need to make it work. Now I am going to make some testings and replace it for the one I am using with the GeneratePress Theme. I wish you the best :)
Would love to see what you come up with.
You gotta' mention your Elementor free course deal in the beginning of the video!!! I bought Elementor because I liked your videos so much, and as per your recommendation, but didn't know about the deal until now. Mention it in the beginning cause then I would have used your links. Love your vids. Don't ever change. Although, your courses are over priced. I'd pay $30 or you should hook up with Lynda because your teaching level is great and up there with the Lynda people if not better. You explain everything so clearly.
Yes when I do it that way people get mad at me they think I'm just about promoting something so it's a an awkward balance for sure.
Thankyou! Took me ages to finally find someone who could show me how to do this!
Nice video Adam, thanks 👍
Just a quick heads up: the responsive show and hide of elements only kicks in when in actual preview mode for the given device size. This way, when in edit mode, you still see all elements regardless of the set show and hide, so you can access them each for editing 😀
Also, Anywhere Elementor gives the same control for custom headers and footers along with any other position, complete with conditional control 😉 and theme Independent 😁
Yea I have been deep into using Thrive Architect, which is a competing page builder, this is what caused my confusion, :-(
Josh Allen It's does the same job, but with more control and beyond just headers and footers 😉👍
I was struggling with exactly the thing your video was made for. Thank you for saving me from further frustration! Upgrading to Pro today!
I'm glad this was helpful ColonelK0rn and thanks for watching.
This is too good to be true, awesome... thanks for the run-through demo.
Just wait for what comes next with this page builder. My guess is full header and footer creation.
I need to remove the elementor header from some specific pages on my site, but I am unable to find and set specific pages in display conditions while saving the header ( it does not let us select the exact page name to remove the header from ). Can you kindly help me with that, please?
great video but facecam hides some details like logo size etc. i would recommend turning facecam off during screen recording.
The size of the logo that I was using doesn't have any bearing at all on the tutorial. The sizes more controled by the container that the image is in.
What a whiz-bang plug-in! Thanks for sharing that. I'm sold
Thank you so much Lord Varys! Much helpful information :)
Haha! Thats right! #GOT
I have OceanWP theme and I dont' have any option of navigation menu that you have. I can just pick the existing menu and can't change anything.
Thank you for your answer. I used google search and looked at you on the channel but did not find how to link the pages to elementor. In the wordpress I have linked but in the elemtor I do not come to the pages.Hi, thanks for the nice video. How can I link the menu to the pages in elemtor? Can you please explain that in the video?
greetings
.
I have a video on this. Just do a Google search for how to create on page links.
@@WPCrafter TThank you for your answer. I used google search and looked at you on the channel but did not find how to link the pages to elementor. In the wordpress I have linked but in the elemtor I do not come to the pages.
@@ivicasacer ruclips.net/video/CivIs8O7cUE/видео.html
@@WPCrafter
Thank you, got it now. I had a mistake.
Hi Adam! So I created my own header with Elementor Pro but when I go to Visit Site it still has Astra header. What do I have to do, to remove Astra header and replace it with my own header? Many thanks!
So you are using the Astra Theme and you're using what tool to replace the header with what you created in Elementor? Are you using the set up I talked about in this video? Also if you're using any caching plug-ins you might need to flush your cache.
You need to go into Design>Customizer and turn off Navigation via the dropdown.
I don't know if it's because of version difference or what, but I am struggling with 2 things while using the header, footer plugin now.
1. I can't resize the columns, like making the one with the logo small.
2. When I add a nav menu it shows a hamburger icon and not like how it's being displayed in this tutorial.
Will really appreciate any help to solve this.
So let me understand this I can not build another Header Menu with Elemantor(free version) But I can with Wordpress?
Great tutorial as always Adam:) when is video tutorial elementor with woocomerce coming?
I really want to make it based upon the Astra Theme, let me touch base with them to see when they anticipate additional WooCommerce integration to be available.
Hello Adam, quick question: which is the preferred workflow for designing headers & footers using Astra Pro? a) Astra custom headers, b) Beaver Themer, or c) header / footer elementor? Thanks, man, and happy thanksgiving!
I still like to have the theme do the header. If you are using Astra you don’t need that header footer plugin.
Hey, is there a way to build a custom header without the header/footer plugin? I'm just wondering if Elementor Pro has an internal option
None of the "astra sites" show up? On your screen you have an extra tab under theme "Appearance>Astra" I only have the "Welcome" tab. so basically I have none of the pre-built pages for the astra theme. Any ideas why? Thanks!
This is because they moved it. It's now underneath appearance.
Thanks! I didn't realize I had to go download "Astra Sites" from plugins.
hi sir, your videos are really helpful.. I have a doubt in nav menu in elementor. my nav menu option is not properly working when i drag into the column it shows only the menu "names" not showing in menu style format.Please help me with fixing this.
Thank you
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
How can you remove the header and footer from original astra? In addition I think now you can select the directly the block footer right? thanks
A great video as always, Adam. A quick question from me: How can you change the background of the active page? I chose the framed pointer with the corners animation and never set a colour for the background of the active page, but it shows up as blue by default.
There is an option in there for changing the color of an active menu item. I know Elementor recently released a full tutorial on all of the options available in the new menu module.
Could you please show us how we design the footer menu end the website?
Do you have a preference for using Astra to style headers or Elementor?
Hi Adam! Thank you for video. I try to create header with Elementor Header & Footer Builder plugin. I need to add boton in menu, but a boton disappeared. How to fix that?
As always, wonderful content! Thank you, Adam.
Does this header/footer plugin allow you to add certain headers or footers to certain pages or page/post types using elementor?
It's sitewide. If you have the theme they make, Astra Theme, then you can do that.
well there ya go. We just bought the astra agency lifetime. I'll have to check that out. We're currently avid BB users but elementor's form builder and just cool factor is really getting me interested. If nothing else maybe just start using it to mix things up a bit.
Oh, in that case, you don't even need the plugin. In Astra Pro you would enable the custom layouts extension, then go to make a custom layout > set it to header > design it with your page builder > then enable it on the exact content you want. It works great. And yea, Elementor has a few things like that which make it irresistible. For me its forms, the search element, and a few others.
How do you create a transparent header without using a theme? I just wanna use Elementor. Please help!
I made a header but now when i enter elementor front page i dont see the header i just made.. And when i go to header and footer builder in elementor, i can see the header..
What is going wrong?
I wish you could have shown the search for this plugin. I’m not sure if I’m finding the correct one
Hello Adam,
Thanks for your videos they are great. I like your tutorials. Here is a question ? In WP, when we publish post we choose to show a summary of the post and/or add a read more tag. This way, the article will show up as a summary. However, this is not possible to don with page builders (Elementor, siteorgin, have not tried Divi yet). Is there a way to do this within page builders.
Cheers
You can just leave an excerpt.
i had made website with wordpress not with elementor but i want to insert a elementor footer block to my existing pages of website how to do this??
Adam can you create a menu with line separator on the header?
Great to see, how easy everything is.Is there an easy way to "display" the menu name given in the WordPress backend above the elementor navigation menu?
Im using Elementor Pro and there are really a lot of bugs in it. When I insert a footer via Elementor Template, my Sydney Theme header disappears.
'Nav Menu' is only for PRO (paid), just to be clear.
This is awesome ... thank you for the update and tutorial. This is what I wanted header / footer woo great makes my life easier and better... with all my cognitive stuff all the hoopla with other page builders is such a waste of time ... it takes me even longer to do, Not complaining just that simple is so much better. Life is so complicated as it is. anyways Adam great work. I am thinking how to emprove You said it I hope they listen... go guy I learn so much from you. I wonder if elememtor works with brain injuryed people like myself... I takes a lot for me to love something this much on blogging / websites building and my occupational therapist will hear about it at some point.
oh also too bad they do not do affiliate you deserve it. blessings
Yes this is what I love about Elementor, you just learn the 1 interface and settings, then when they release new stuff, you instantly know how to use it.
This new menu widget for elementor looks fantastic!! Are there free options for the free version of elementor?
I only have one website so maybe now I can go for elementor pro.
This module is only for the pro version.
Hmm, I have a question. Elementor have beautifull menu module, but I love to use beaver more. So, can we use Elementor to create menu and Beaver to design? Do you think it make site load heavy? :) Thank you.
Or you can use ultimate add-ons for Beaver Builder which also has a menu module.
Yes, I know it. But UBBA can't flexible like elementor :) So hard to choose :P Finally, I use UBBA + BB + Ocean WP theme + Power pack BB + Toolset. That's all.
That quite a stack of tools.
It doesn't say in the video, unless I missed it, how to assign the header to show up on each page??
It was in there, when you create the header or footer there is an option on that page to assign it to the header or footer, when you do that it will be used for the website.
yea I got that part, that isn't what I am talking about. I am talking about that when you are trying to tell your page to use the header/footer template instead of using what is on the page or the theme's header. Then I asked in some forums and people are saying that this plugin won't work with elementor? Which is weird as you seem to be doing so in the video? I can't post a screen shot, but it seems to be something to do with selecting the page template maybe, but none of those work and when I change it , it shows an extra phantom menu underneath this menu. I am using generatepress (free)
Wow, that's all pretty strange. It should work just like I showed you. Surprised anyone would say it doesn't work with Elementor.
hello again!!!. I have a question about astra sticky nav. is working fine but, when I click and item it does not stay mark as active (the color of the active link does not change to the active link color seletec. Thanks --- IS A ONE PAGE SITE...
That's interesting, I would suggest asking the developers of Astra. It must be because the link takes someone to a different area on the same page.
I ask this question in a ASTRA facebook group.. i'm waiting for response... thanks... facebook.com/groups/227391647730107/permalink/302186720250599/
I am in need of the newbie friendly hook video if it is out already. I am looking to replace my Elementor created nav menu with the Astra
base menu. I have no idea what a hook is. Any help would greatly be appreciated. Thanks. Great content Adam.
Great video thanks, I am looking to get Elementor, however, I use thrive architecture for my landing page. Are both plugins compatible? What woo commerce themes work well with elementor? Thanks
Yes they both will work perfectly fine in harmony on the same website.
Hi Adam thank you for this! It really helped me. Everything is perfect with the header however I can still see my theme's original nav bar, how do I take that out? I'm using the generatepress theme. Also is there a way to have the menu/navbar fixed or sticky so that when I scroll down I can still see the nav bar?
You would unassign the menu you have assigned to the header.
Thanks adam for the response, I really appreciate it. I have figured it out!
Hey I have GeneratePress and ElementorPro, with the point you mention about not needing the Header Footer Elementor plugin in the future at 7:45 minute mark, has this been released or no?
We will be seeing this around February 2018.
Very good , Thanks you
You're welcome Thiên Minh Medical! Thanks for watching.
Any idea how to do this with a transparent header for hero image on the home page?
It will be a bit difficult because Elementor is not aware if it is on a page that has a transparent header or not.
How can I change the Position of the header after I created it?
For example my setting was ,,entire site‘‘ but know I want to exclude the header on one page
Great Video :) Please I have a question? how did you do the moving words in green, at the beginning of your video the one saying CONFIDENTLY CREATE . can you please point me to the right direction. and thank you for the video
That is a feature with the page builder that I'm using. There is a similar feature in Elementor Pro.
Thanks for your reply, can i get it if i am not using elementor pro , like a plugin for elementor ?
Great video and tutorial. Thanks. Is it possible to have a different footer for the blog at all?
I followed your steps but after publishing and viewing my site the changes don’t show .
Hey, is it possible to add in this menu woocommerce bakset?
I have tried installing elementor and some of your prescribed plugins on some of my wordpress sites but kept getting this message when i activate them "
Parse error: syntax error, unexpected T_FUNCTION in /home/www/familyissuesmc.org/wp-content/plugins/elementor/elementor.php on line 55"
what am i doing wrong?
Most likely you are running a very old version of PHP. Update it to version 7.
I did follow the exact way for my footer but it did not work. I do not understand why? I have completed my footer in the elementor but it is not visible on the website. Can You guide me what could be the possible reason?
Does it allow you to change the location of your header logo? I've always thought this was the lamest part of wordpress. some menus have center logos or the logo will be in a "pre-header" location above the menu.
Nevermind I could go three columns and make 2 menus. Assign menu 1 to column 1, Logo column 2, and menu 2 column three. super cool
Thanks for watching CMH Services!
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 made a custom footer bar after watching your video. After saving the template I cannot find any copyright text that used to appear before. How to write copyright text after creating a footer bar template?
Thanks for this quick tutorial. I have been wondering why my menu shows 'squashed together' on mobile.
So super video thank you sir
All videos helpful sir
Singup login
Thanks for watching Dada Peer!
I just started using elementor Pro and I am trying to figure out how to get my custom navigation/header to align on all pages without having to recreate it on each page. Is there a quicker and accurate way?
You can set it as a global widget. It's better to use your theme's header though.
Hello , I have trying to add header and footer builder on my newspaper theme with elementor builder but can't success, It's showing me a warning "Hey, your current theme is not supported by Header Footer Elementor, click here to check out the supported themes." Maybe i can not install generatePress plugin , i don't found this plugin to install , just see generatePress is a WordPress theme. but i have found somethings which work mybe as like generatePress which "Hooks Visualizer" but don't work correctly . I have install header and footer builder plugin and make header by elementor but not success to set this design as my header . Can you help me please . I have found more flexibility with your other video and really easy to understanding . But this tutorial is also easy that's i have see past 3 days . Just i can not install generatePress plugin , i don't see generatePress facebook group to download it.
Well if you look at the plug-in, it says it only supports certain themes. It does not support the newspaper theme unfortunately.
Yes, i see. But here is a documentation that's how it is possible to active every theme. Can you have a look to this documentation. Here: github.com/Nikschavan/header-footer-elementor/wiki/Adding-Header-Footer-Elementor-support-for-your-theme
This documentation is conflicted to myself. I will happy if you make a video on how to active this plugin for every theme.
Thanks
Safar
Making it compatible with other themes is not something that I am able to do myself. It's something you would need to contact the theme developer and see if they are interested in adding it.
Excellent Video Adam, Followed your instructions. Can you tell me what setting in Elementor Pro do I turn on to make this my global header? I allready have a header and I would like to swap it out my new Elementor Pro header. Thanks again for the informative videos:)
Could you please tell me if there is a way to use a custom Elementor header if I already have the WP header in place? I'd hate to have to redo the whole site and I really don't want to use another plugin or have to do some CSS codeing :) Thank you, John
You can if your theme supports it.
Is Astra still relevant? Elementor takes care of everything now. Can't we just use a blank slate theme now?
Of course it is, there is so much that you still need a theme for. But I get your point.
WPCrafter.com WordPress For Non-Techies
Elementor should just come out with their own theme
But if they did that then it would split their focus. Look at Beaver Builder, I think them having a theme is part of their development problem.
Sir please tell me how we can make a custom website in wordpress without using any plugin
Hi Adam. Awesome tutorial! Need little help tho. Just created a header using Header & Footer builder for my Astra Theme website, how to assign it as when I try to refresh the page it doest appear.
Hope to hear from you. Thanks
Wow thanks for sharing
hey Adam, i downloaded safari but i cant get to there developer tool. can you guide me or anyone on how to get to them? i downloaded it on windows. i have windows platform
Can you also make a vertical nav with this?
Yes you can, it's really powerful.
When using this plugin, how do we make the header sticky?
Hi Adam, Great tutorial. I would like to implement the same header (two menus) as your site have. How can I do that?
Great tutorial. If I want to purchase elementor how do I do it from you?
You can visit www.wpcrafter.com/elementor and the bonuses I offer are listed there as well.
Hi, thanks for a great video!
Do you know if it is possible to have a custom header being transparent?
Nice tutorial! Is there a way to create the same Nav Menu widget but without menu link (only fake links)? This is because I'm in a 'staging' host and I don't want to display links to other pages that I'm working on. Thanks so much
Hi, Thanks for this video. Actually I am creating a website for my client using Ocean WP theme and elementor pro. Could you please help in customized header. Actually, There is a video on the whole page. My clients want header to be appear once video finish playing. Could please tell me that how can i achieve this using customized header. How i can give timer to header, so it appears after video finish.
hey, great content. can you tell me how to use this for a multilingual website? because when the website changes the language, the header remains still
What theme are you using there in this demo?
Most likely the Astra theme. I use it on my website an in all of my videos.
great video sir, it really helped me a lot. I am also facing the same problem when it coming to mobile device button doesn't hide on the preview.
Such a great help! Thank you
Hi... would you be kind enough to tell me where to put Google Analytics tracking code when using Elementor Theme Builder custom header and Ashe template? I believe Ashe is a BDthemes template, like Astra. I think :)
How can I apply this in my about page???
Thank you very much!!!
Why is my logo become smaller on other pages except HOME ?
Hello Adam, Thanks for the great tutorials! Is there a video that explains how to use Astra / Elementor to edit existing content that was imported into WordPress from a Joomla website?
You are my favorite!! xoxo
Thank you!!!!
can twenty Seventeen theme support header footer elementor? if not then how can we create custom header in 20-17?
No it can't. I wouldn't recommend using that theme.
i like that image parallax scrolling in 20-17... any other theme with same effect?
Yes you would be doing that with a page builder, and most have that option.
I have created a header thanks to this video. You didn't add the part where we will assign this header to our website.
gr8 . tnx
8:40 - For my reference.
can i used this in hestia theme ?
I'm not sure but I would think that it's compatible.
its not, but i used your other tutorial "real time replace" thanks!
Hello #Adam Please make a video how to add search box in my wordpress website ( Like your website search box )
Right now I am just using the native WordPress widget. However I personally don't like how it looks.
Thnkx
Is $199 worth spending for unlimited sites?
I can now see the new header I made, but it also automatically show same nav menu below that I cannot remove? How to remove it so I only see the new header I made with navs?
See here how it looks, I want to remove the lower navbar and keep the new header with navs ontop only? www.screencast.com/t/OgF2ggdn
This is most likely because you have GeneratePress configured to show the navigation bar underneath the header. If you change this setting in the customizer you will be fine.
Need help! i am using free elementor for oceanwp theme. I Created the header, footer, mid on one template. The problem is how to apply now. I imported as well but no idea how to apply by going to custom header. That file is not showing there.
hi , great tutorial , i have concern , i used astra theme and create header by following your tutorial .
I also put the following code (remove_action( 'astra_header', 'astra_header_markup' );
to disable the header but i can still see the default header from the theme which i dont want, please guide me what mistake i have done.
here is the demo site where i am trying to do that. you can still see the white header above the header i have created. Waiting for your help. thanks
I installed and activated, but the Header/Footer menu item isn't in my Appearance menu. Is there a step I missed?
Seriously, if you need the pro version to complete a tutorial, you should let people know in the title, or at least at the start of the video.
I don't believe anything in this video required the Pro version of anything.
@@WPCrafter The Nav Menu element is in Elementor Pro only
@@kevinmackey3166 You can just as easily make one manually or use a free plugin to add a menu.
@@WPCrafter not as nice as this one
@@thisBLUEsweater Then buy the pro version.