How To Build Headers And Footers Using Elementor For FREE

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ก.ค. 2020
  • How To Build Headers and Footers using Elementor Free!
    If you're not using Elementor Pro you can feel a little lost when it comes to making your own custom headers and footers. Well, that's about to end with this tutorial on building your own custom headers and footers with Elementor Free and this free Elementor plugin.
    Let me take you through all the steps to creating your own custom header along with a custom call to action and more.
    Mobile menus? No problem.
    Slide-out menus? Sure, why not...
    Horizontal or vertical menus? Yup, I got you covered.
    Download the Elementor Header, Footer and Blocks plugin: wordpress.org/plugins/header-...
    Take your WordPress website and skills to the next level!
    ► THE TOOLS I LOVE ◄
    If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
    ► WORDPRESS VISUAL PAGE BUILDERS ◄
    ★ ELEMENTOR PRO: jo.my/1s0t2s2
    ★ Brizy Pro: bit.ly/2Ji97r8
    ★ WPBakery Page Builder (Formerly VISUAL COMPOSER): bit.ly/2NVbVNP
    ★ DIVI 3 Page Builder: bit.ly/2HiiDcE
    ► WORDPRESS THEMES ◄
    ★ GeneratePress Premium: bit.ly/2Ydn1SE
    ★ OCEANWP: bit.ly/2fRHBr0
    ★ DIVI Theme: bit.ly/2G8JMiA
    ★ Astra Pro: bit.ly/2zruoKn
    ► WORDPRESS TOOLS ◄
    ★ SMART SLIDER 3: bit.ly/2G0G1vB
    ★ CSSHERO: bit.ly/2qbrRl6
    ★ SLIDER REVOLUTION 6 - jo.my/sr6
    ► WORDPRESS PLUGINS ◄
    ★ SEOPress Pro: jo.my/seopress
    ► SUBSCRIBE ◄
    bit.ly/2rX7rhu
    ► LETS CONNECT: ◄
    / wptutz
    SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk
  • แนวปฏิบัติและการใช้ชีวิต

ความคิดเห็น • 211

  • @anaclaraotoni
    @anaclaraotoni 3 ปีที่แล้ว +13

    Thank you so much for this video! I've been looking for a solution to change my menu font size for a week, and this came along great! People told me to use a custom CSS but I have very limited knowledge of that. Others tried to pursue me to pay for Elementor PRO. This plug-in and your video were life savers! Thank you for doing the work you are doing!

  • @justwalkinit
    @justwalkinit 3 ปีที่แล้ว +35

    YOU, my dear Sir…… are a life saver!!! I’m 52 and know nothing about building a website and I needed to include my header on all of my pages. I was becoming frustrated and ready to give up when I found your video. Your instructions were VERY SIMPLE and TO THE POINT. My headers are perfect! Thank you so much!!!

    • @natgq7242
      @natgq7242 3 ปีที่แล้ว +5

      funny things is that you n I had the same problem but I'm 27... Perspective

    • @dineshjadhav3996
      @dineshjadhav3996 3 ปีที่แล้ว +2

      @@natgq7242 same goes with me hahah

    • @axlyosef4960
      @axlyosef4960 2 ปีที่แล้ว

      @Louie Hudson Instablaster :)

    • @louiehudson9466
      @louiehudson9466 2 ปีที่แล้ว

      @Axl Yosef I really appreciate your reply. I got to the site on google and Im waiting for the hacking stuff atm.
      Takes a while so I will get back to you later when my account password hopefully is recovered.

  • @GarySchiltz
    @GarySchiltz ปีที่แล้ว

    The clearest demonstration of how this plugin works, without the hype. Thanks!

  • @rozzvillemansion
    @rozzvillemansion ปีที่แล้ว +1

    Thank you. This was what I've been looking for. Direct to the basics. Thank you.

  • @allandutch9792
    @allandutch9792 ปีที่แล้ว

    Love the content. Love the presentation. Very clear and enough info to begin using this without hesitation. Thank you! Look forward to seeing much more from you.

  • @BuffyCrosby
    @BuffyCrosby 3 ปีที่แล้ว +2

    This is great! Thanks for this video! Love Elementor so learning all I can about it.

  • @christiankreil209
    @christiankreil209 3 ปีที่แล้ว +2

    VERY WELL EXPLAINED, best video I have seen about this issue, thank you

  • @nw6091
    @nw6091 3 ปีที่แล้ว +6

    Talk about synchronicity! This is just what I was looking at this time. Wonderful presentation too. This is why I subscribe to your channel. Great job.

  • @espedale
    @espedale 3 ปีที่แล้ว +2

    Excellent. Thank you for making this!

  • @aqdesignz
    @aqdesignz ปีที่แล้ว +1

    THIS WAS AWESOME- I rather build a theme from scratch than to use a bad coded theme!!! YOU ROCK!!!

  • @id104335409
    @id104335409 2 ปีที่แล้ว +1

    Very nicely explained just at my speed. I normally have to speed up or pause videos to follow along and I hate it when the presenter wastes our time with anything but the information we came to see. This has just the right amount of words. And thank God - none of the (go ahead and) speech parasites. At least I didn't even noticed any.
    Thumbs up for this video! Will definetely check the others as well.

  • @MosesChijioke-yr9dd
    @MosesChijioke-yr9dd ปีที่แล้ว

    Just watched and listened to your teaching, very simple, clear and well understandable. i realy followed up. I am highly impressed. Thanks so much.

  • @artjomraznjak8388
    @artjomraznjak8388 3 ปีที่แล้ว +2

    Great! Thank you for this amazing video!

  • @watabeorenji5867
    @watabeorenji5867 2 ปีที่แล้ว +2

    Thanks alot for your solution, I've been search for how to custom header at wordpress, and you show it, that very usefull :)

  • @CocoM2023
    @CocoM2023 ปีที่แล้ว

    Thank you so much; it's been a mini nightmare finding a good example to follow!

  • @martinhermann
    @martinhermann 3 ปีที่แล้ว +2

    Thx very much! This plugin is very useful!

  • @qaiserman
    @qaiserman 3 ปีที่แล้ว +2

    Great stuff. thanks for posting this video.

  • @flookjunmanee6962
    @flookjunmanee6962 3 ปีที่แล้ว +1

    Thank for toturials from Thailand.

  • @fernandoroosterbear871
    @fernandoroosterbear871 3 ปีที่แล้ว +2

    Excellent!, very clean explanation, thank you very much!!

  • @ritavanderaa7473
    @ritavanderaa7473 3 ปีที่แล้ว +3

    Thank you! Another very helpful video! Would also love to know how to have the header be responsive to scrolling, e.g. logo centered above menu moves to side of menu once scrolling down on page... 🙏

  • @francoanzalone4061
    @francoanzalone4061 3 ปีที่แล้ว +1

    Awesome tutorial !

  • @MiMi-dc9qs
    @MiMi-dc9qs 2 ปีที่แล้ว +1

    Great video. I needed help with creating a footer that will include Privacy Policy etc Thank you ever so much :)

  • @m.m.1960
    @m.m.1960 3 ปีที่แล้ว +1

    Thank you Sir for this video. Great explanation. You helped me :)

  • @Qisata
    @Qisata 3 ปีที่แล้ว +1

    Thanks a million, you saved my day.

  • @vidhiagrawal3
    @vidhiagrawal3 3 ปีที่แล้ว +1

    So useful!! Thanks a lot!

  • @anonymousppl4528
    @anonymousppl4528 3 ปีที่แล้ว +1

    Thanks man. This was helpful.

  • @ChanSiewWei
    @ChanSiewWei ปีที่แล้ว

    Thanks. This is what I have been looking for.

  • @DarkSwaida
    @DarkSwaida ปีที่แล้ว +1

    Great Tutorial, thank you!

  • @azradrapic3465
    @azradrapic3465 2 ปีที่แล้ว

    Finally! Thank you a lot! :)

  • @DhanushkaLankeshwara
    @DhanushkaLankeshwara 5 หลายเดือนก่อน +1

    You made my day, thank you so much!

  • @jespergreve6020
    @jespergreve6020 2 ปีที่แล้ว

    great and easy to follow tutorial, thx

  • @johnquinn3051
    @johnquinn3051 3 ปีที่แล้ว +1

    THANK YOU! I was getting very frustrated trying to figure out how to edit these footers

  • @jvitorcarvalhomg
    @jvitorcarvalhomg 3 ปีที่แล้ว +1

    Really thanks for the tips

  • @antonio0000x
    @antonio0000x 3 ปีที่แล้ว

    Excellent!! Thank you!!

  • @emanuelbagirathi4750
    @emanuelbagirathi4750 3 ปีที่แล้ว

    Great Video. Very helpful!!!

  • @bx5815
    @bx5815 ปีที่แล้ว

    Thank you for this boss. You deserve the best!!

  • @avolusivirtualtour9677
    @avolusivirtualtour9677 2 ปีที่แล้ว +1

    It works and thank you 🙏🏻

  • @christinamichael7544
    @christinamichael7544 2 ปีที่แล้ว

    Thank you SO MUCH!! EXCELLENT VIDEO!

  • @daniel91503
    @daniel91503 2 ปีที่แล้ว +1

    Thank you so much! I used the default header of WordPress and organized it for being responsive was a mess!

  • @endrekovacs8516
    @endrekovacs8516 2 ปีที่แล้ว +1

    Love to see the steps to how add a top menu in addition to keeping primary main menu

  • @SalimAlRashdi
    @SalimAlRashdi 3 ปีที่แล้ว +2

    Thank you so much for your useful videos.. You are the best.
    How do I add a sticky header with this?

  • @abdulgafarsalawudeen5223
    @abdulgafarsalawudeen5223 3 ปีที่แล้ว

    this video was very useful thank u so much

  • @husseinbdeir9214
    @husseinbdeir9214 ปีที่แล้ว

    Very Nice!

  • @moyasvidomist
    @moyasvidomist 2 ปีที่แล้ว

    You dolce my problem Man! Thanks

  • @foxmobile239
    @foxmobile239 2 ปีที่แล้ว +1

    Thank you! Very nice plugin and very good tutorial how to use it. I am using this plugin, but after the last updates one problem appeared. The menu doesn`t work in the case of anchor menu. If menu is bringing to another page - everything is ok. But if we would like to navigate in the range of the same page using the anchor menu - it doesn`t work. Any idea to fix it ?

  • @lincolndachane1484
    @lincolndachane1484 3 ปีที่แล้ว +1

    Really good.

  • @paulkozar7454
    @paulkozar7454 2 ปีที่แล้ว

    Thank you!

  • @user-df3vl4cs3h
    @user-df3vl4cs3h 10 หลายเดือนก่อน

    Very helpful video

  • @marshwoodvale4367
    @marshwoodvale4367 2 ปีที่แล้ว

    Brilliant, thanks..

  • @Willskull
    @Willskull 3 ปีที่แล้ว

    Thank you very much!

  • @Rodrigomendesdf
    @Rodrigomendesdf 2 ปีที่แล้ว

    Great, thanks!

  • @stephenhill6791
    @stephenhill6791 3 ปีที่แล้ว

    Ah ha! now I get it! :) Thanks!

  • @tobiasbrauch8791
    @tobiasbrauch8791 3 ปีที่แล้ว +1

    First thanks so much ! This video prevented me from going completely nuts !!! Everything worked perfectly fine but one last question. My header has some space to the left and right side of the screen. Is it possible to adjust it to real full width of the screen and how ? Would be happy to get some advice about it :)

  • @mortenengelundlarsentrads8294
    @mortenengelundlarsentrads8294 3 ปีที่แล้ว +1

    Hi Paul, Great tutorial. I miss the below header placement option. If you would add a sub header to the current header showing USP for instance, that seems not to be possible, other than adding the subheader on all pages manually, or di you have a trick?

  • @dawnbradley-fromstresstobl920
    @dawnbradley-fromstresstobl920 3 ปีที่แล้ว +1

    LIFE SAVERRRRRR! THANK YOUUUUUUUUUUUUUUUUU

  • @md.feroziqbal7614
    @md.feroziqbal7614 3 ปีที่แล้ว

    Thanks a lot!!!

  • @Kevemv
    @Kevemv ปีที่แล้ว

    Thanks!

  • @aledianin
    @aledianin 3 ปีที่แล้ว +1

    Amazing tutorial! Do i need to disable anything on Astra or Wordpress? The menu is still showing up for me...Thanks again, I love your videos. Cheers

    • @TheKiwiCoder
      @TheKiwiCoder 3 ปีที่แล้ว

      I forgot to press 'update' after setting the 'entire website' option. Make sure to press update (button on the right) after editing otherwise the changes will be lost.

  • @booksidi2229
    @booksidi2229 3 ปีที่แล้ว +1

    thank you very much for the great content, i have a problem
    the header work fine on desktop but on mobile and tablet the menue hamberger appear but i cant reach the menue because it shows behind the first section of the page
    i hope you understand if you dont try to see if the header work on mobile
    thanks.

  • @feuillemortes
    @feuillemortes 3 ปีที่แล้ว +1

    Hello Paul, thank you for the detailed explanation of how to work the menu. Does your 'services' have a page or this is just a placeholder to create a dropdown box? I need to create a menu "Area of Service" (just text, not a page) with a drop down menu. I have elementor pro, however I'm struggling to find the right way to do this. Can you help?

  • @EasyCookVideos
    @EasyCookVideos 2 ปีที่แล้ว

    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.

  • @exterminatic
    @exterminatic 2 ปีที่แล้ว

    Thank you =)

  • @cariva_santos_Togo
    @cariva_santos_Togo 3 ปีที่แล้ว

    THANK you sir

  • @HusamZaki
    @HusamZaki 3 ปีที่แล้ว

    Thank you for the valuable info, sir !
    I have a question tho, what does make a faster page using elementor blocks or wordpress widgets for headers and footers?

  • @ctashlambert6814
    @ctashlambert6814 2 ปีที่แล้ว +2

    Hi, just curious my Layout option- Dropdown, Horizontal, Vertical, no Flyout or Expanded, what could possibly be the reason/ what is wrong? Appreciate the input, thanks =D Also since you are using Elementor to build the header, would you recommend to still use Astra theme?

  • @willysilcock447
    @willysilcock447 2 ปีที่แล้ว +1

    Mate, This is an excellent video much appreciated. I have been trying to find if there is a way to use this tool and have a transparent background for your menu so you can still see the information below? Is this something you can direct me towards?

  • @mirko4568
    @mirko4568 ปีที่แล้ว

    Thanks, great video.
    One question, how do I make the new header stick to the top?

  • @KevsGuide
    @KevsGuide 2 ปีที่แล้ว

    awesome info, liked and subed
    i was confused about the header and header menu in WP vs elementor.
    I kept getting this header that i figured was from WP and i could work out how to get rid of it. although i chose elementor canvas it disapeared.
    And then the setup differences between the page and a post. it seems to me a lot of the times i am searching for answers to basic things and cant find the info. maybe its too basic😂😂

  • @matchstickdesignco
    @matchstickdesignco 2 ปีที่แล้ว +1

    Great video and very well explained! Thank you. I have one question, though: I wanted to have the NavMenu layout set to "Horizontal" for Desktop, and "Flyout" w/"Push" for Mobile, but there doesn't seem to be an option to do that. Am I missing something, or does the layout really only have a single option for all resolutions?

  • @cke11y
    @cke11y 3 ปีที่แล้ว

    great video thanks, any idea how to make it sticky, and transparennt???

  • @magicyvan
    @magicyvan 3 ปีที่แล้ว +1

    Great video ! Thanks ! Love the way you explain ! PS: Could you please give me an advice ? I'd love to offer an private access to video classes to people who bought the course. IS there any tuto of yours you could recommend to do this ? thanks a lot ;) I'll subscribe to your channel now ;)

  • @havenmusic8298
    @havenmusic8298 3 ปีที่แล้ว

    I install the plugin and create a custom header but i got a problem my header are not in sticky is it possible to make my header sticky i try custom CSS and js but they ist working

  • @hostgatorbros405
    @hostgatorbros405 3 ปีที่แล้ว +2

    Thanks so much! One question, I am trying to add a footer with a contact form like: Send Us a Message. I added a block template with that message option. But after adding the block to my website, the configuration of the messenger part changes, and actually disappears. Now it is asking me for a shortcode. Is it that I have to create that part of the block myself? Thanks.!!

  • @vishavaroraYT
    @vishavaroraYT 2 ปีที่แล้ว

    thanks

  • @bySterling
    @bySterling 3 ปีที่แล้ว +1

    Very cool indeed. I have Pro and the menu PopUp styles are great but here just curious if there is a variety of mobile menu slide out options/animations?

    • @WPTuts
      @WPTuts  3 ปีที่แล้ว

      Sadly not. It's pretty limited in that respect.

  • @lorna274
    @lorna274 3 ปีที่แล้ว

    Thank Goodness I found this

  • @thebuildreview
    @thebuildreview 2 ปีที่แล้ว +1

    Hi, Can you use this plugin for sticky footers like the Elementor Pro version does? Thanks.

  • @mediaiweb
    @mediaiweb 3 ปีที่แล้ว

    Thank you for this tutorial i did follow your process but for some reason when i linked it and press them they won't work could kindly tell me what i can doing wrong pls . how do u link these menu to makit work pls .

  • @richardkaringuri5557
    @richardkaringuri5557 9 หลายเดือนก่อน

    Greetings from Kenya.
    Great content bro. Is there a way I can create a header with a top bar using this Elementor plugin?

  • @shivutteshoyabutr595
    @shivutteshoyabutr595 2 ปีที่แล้ว

    Thank you for your clearly explanation, but could you help me a fever please? How to create the footer with multilanguage and a footer have to appear to each language?
    Thanks for advance.

  • @bananaiScream
    @bananaiScream 2 ปีที่แล้ว +1

    Awesome! This almost feels illegal hahaha

  • @thepuldarshana9056
    @thepuldarshana9056 3 ปีที่แล้ว +1

    Wow i always needed that last button option. But all tutorials showed css . But i hate coding. Here it is a push of button. Thank so much for bring it up to us

  • @richardc8129
    @richardc8129 2 ปีที่แล้ว

    This is fine for those who do NOT have E Pro. However, do you have a video for those of us who DO have E Pro, and in Elementor/Settings/Experiments/Stable want to more more precisely what we are getting ourselves into (or out of...) by turNing on the HELLO THEME HEADER AND FOOTER OPTION?

  • @RidwanKadri123
    @RidwanKadri123 3 ปีที่แล้ว +1

    how do you get the mobile menu sitting on the same line with the logo?

  • @Bertthemovieguy
    @Bertthemovieguy 6 หลายเดือนก่อน

    Will this also make the header sticky? Also if I'm in a full width temple with my default menu and footers turned off will this still work.

  • @blandinelefebvre
    @blandinelefebvre ปีที่แล้ว

    Many thanks for this video... I couldn't find anywhere else these explanations. Thus, one question: My Elementor-made footer does not appear with FF and Chrome... Any idea why? Many thanks in advance.

  • @23Francesca23
    @23Francesca23 11 หลายเดือนก่อน

    Thank you. I am trying to add a secondary menu but it doesn't work on mobile - it is a mess-. How can I fix it? thanks

  • @akorahmaniazar
    @akorahmaniazar ปีที่แล้ว

    Thank you. I followed the steps and built my own header footer. Now I see search console has put them in "not-indexed" grey spot. Should I request indexing for them? Thanks

  • @shotasamkharadze7764
    @shotasamkharadze7764 2 ปีที่แล้ว

    Hi! Thank you for video. I try to create header, but a boton disappeared. How to fix that?

  • @luziasousa436
    @luziasousa436 ปีที่แล้ว

    Hi, what an amazing video. But, how would I do that with Elementor Pro? I can't find the option to make button the last word in the menu. In fact, how do I put a button that I added in the Menu inside the mobile menu?

  • @himanshukarmi2297
    @himanshukarmi2297 2 ปีที่แล้ว

    Great

  • @winnersknowhow
    @winnersknowhow ปีที่แล้ว

    Thank you! And is it possible to make the menu in the footer to be not a hamburger on a mobile? Regards

  • @JohnScheersDewmuffins
    @JohnScheersDewmuffins 3 ปีที่แล้ว

    I can't get this to work with Astra's Header Transparent function. It's odd since the plugin is created by the same developer. As soon as I add the menu to my site it disables all of the Astra Header Transparent settings. I have not found a work-around yet. Otherwise, it works well.

  • @bestfriendfhn
    @bestfriendfhn 3 ปีที่แล้ว +1

    Hello,
    How can I make the header sticky?

  • @Abdulkalam-zg3bk
    @Abdulkalam-zg3bk 3 ปีที่แล้ว

    I want to know, Can I change the sub menu indicator in elementor to upward direction and display the sub menu in upward direction

  • @christiankreil209
    @christiankreil209 3 ปีที่แล้ว

    Dear @WPTuts , I followed the steps on zour Header building video. I am using Elementor for free. The problem I have is that the built header doe not appear on some websites or does look different on other pages (i.e "about", ""home" etc). I also cleared the cache with "WP fastest cache"... can zou give me a hint what I am doing wrong? thank zou verz much in advance

  • @tranquilpathways
    @tranquilpathways ปีที่แล้ว

    Elementor Header & Footer Builder
    I created a new footer with this plugin but it keeps covering the lower part of my website. How do I resolve this

  • @garynorth5616
    @garynorth5616 ปีที่แล้ว +1

    The new header has merged with my old header adn I can't change either of the now. Can you help me please?

  • @bohemiasideas8818
    @bohemiasideas8818 ปีที่แล้ว

    Hello! Greetings from Argentina! Does the plugin let you stick the header you created with it? I'm looking for a plugin that let's ypu stick the header in some pages but not others, and stick the header at home page but unstick it once you reack a breakpoint. Do you know a plugin like that? Thanks!!

  • @ylyaskudratullayev
    @ylyaskudratullayev 2 ปีที่แล้ว +2

    Thank you very much for the lessons, you helped me out a lot of times. But here everything that I could have tried does not help, after adding an Elementor header and footer to my site, on the mobile version, fields remain empty on the sides. I also tried to install other plugins for creating a header in Elementor. But also empty sides come out. Looking forward to hear from you, please. Kind Regards!

    • @gospels.of.pain1
      @gospels.of.pain1 ปีที่แล้ว

      i have the same bro did u find a fix?

    • @ylyaskudratullayev
      @ylyaskudratullayev ปีที่แล้ว +1

      @@gospels.of.pain1 hello! add this to styles
      html,body {
      overflow-x: hidden;
      }

    • @gospels.of.pain1
      @gospels.of.pain1 ปีที่แล้ว

      @@ylyaskudratullayev ty G