Divi Theme Header Design Tutorial | Create A Custom Header
Vložit
- čas přidán 30. 07. 2024
- earn how to create a custom header in the Divi theme. With a different logo on scroll, different sizing on scroll, and different colors on scroll.
Get The Divi Theme: ferdykorp.com/divi
Download the header: divi.ferdykorp.com
thanks to the Theme builder within the Divi theme we can create custom headers using the Divi layout editor and place those headers anywhere on the website.
I will show you how to make use of the image module, menu module, and button module and change the settings when you scroll.
Of course, we will optimize our Divi header for all devices.
Overview with timestamps:
00:00 Introduction
00:44 Create A Custom Header In The Theme Builder
02:13 Make The Header Sticky
05:47 Change The Logo When Scrolling
13:45 Create The Menu
17:40 Create The Button
22:34 Optimize The Header For All Devices
34:37 Adjust the sizing and spacing in your Divi Header
Please like the video, comment, and subscribe for more upcoming videos! - Jak na to + styl
Thank you so much for this and other tutorials. I have been using Divi for a few years now, and have watched many tutorials on various procedures from a variety of individuals. I find that I really enjoy the style in which you present the information, the intricate details you include, and your great sense of humor, which makes watching the tutorials enjoyable while learning. I look forward to other tutorials from you regarding Divi and the awesome things you can accomplish applying it. Thank you!
Hi Ferdy, I can’t thank you enough. You are such a good teacher. Very grateful the wonderful work you are doing in developing these tutorials for the Wordpress and DIVI community. And of course your sense of humour to keep things light. Keep up the great work and would ever be grateful. Thank you.
thanks man, you really made my day with this tutorial. all those tips en tricks, it's fantastic. I always struggled with making headers, but with the help of this tutorial the sky is the limit!
I am absolutely loving your style of delivery and also the insights on how to use some of these divi functionalities. You had me rolling with laughter especially when you broke out in song, reminded me of myself....lol. Thank you for sharing and keep up the good work.
Hi Ferdy,
It was a great video! Some of my friends are new to Divi. I think this video will be a great help for them. I really appreciate you sharing this tutorial. Thanks a lot for sharing this method about the custom header. It was a great help, and I will definitely share this within my network. I loved how you keep the whole process simple to understand. It will be easy to understand for many viewers.
you deserve more than a like. You're putting so much of your time, energy and efforts. Thank you for such unbelievable tutorials. Thanks again.
You are awesome and this is one of the best Channel I found randomly .... thanks for the sharing :)--
Just WAW !! Thank you Ferdy
Well.. yes! I had fun following these steps to make/improve a divi Header; thank you!
I am having a blast with this. You always need to have fun while you work.
Really an awesome and heart-touching tutorial. It would be a performance multiplier for newbies like us if you kindly share resources like images, and logos used in the tutorials with us. Thanks a lot.
I just saw the first images of your video and the professionalism and care with which you present your video and I said to myself directly "this guy makes a real effort to present his videos" so I thought I would find the same responsibility with your content and that was the case!!! Thank you for your efforts !!!
P.S.: I liked and subscribed even before seeing your video...
You the best Ferd. When all the other WP CZcamsrs have started to get lazy (some exceptions like WPTuts) you've been busting out great & helpful content over and over again. Love the Divi content, as someone who prefers Divi over Elementor. I have also been looking into Gutenberg lately but it still isn't quite up to snuff for the average user experience. Zion builder has piqued my interest as well, tho it is early in dev and still has some kinks to work out. Anyway, I digress, keep up the great work sir!!! 👍
Check out Thrive Architect. As someone that builds sites on Elementor, DIVI, and Thrive Architect - TA is clearly the best for me. The issue most people have is its cost. There is no FREE version. But Thrive Architect is sensational.
I love to learn, so this tutorial taught me a couple of things - thanks Ferdy - but so much of what is done in this video can be much more easily accomplished in Thrive Architect. Don't get me wrong, I like DIVI - although it is a pain in the ass at times because it is not intuitive and VERY glitchy.
Well done video here.
Awesome! Thank very much for this tutorial.
Beautiful man, you're the only one who helped me
Out of tutorials out there this is the best one
a breath of fresh air. thanks, man. this was very helpful. all the best.
LOVE you from Pakistan Sir Ferdy Korpershoek. You are my Hero.
Super great creative video im really impressed, allways helpful don't know how to thaaaank you keep going ❤❤❤
Thank you for this tutorials. this is one of a kind. Sub!
Thanks for this video. Super helpful!
I like almost any content you create for us
Awesome tutorial!
love your work keep going
Exactly what I was looking for. This really made my day. Thank you so much 😀
Hi Ferdy, this is great, thanks for uploading. I've noticed on your tutorials that you are very good at showing how to do something, but some extra context would be even better, for example, you change the position of something to absolute, but no explanation of what setting something to absolute actually does, so I don't know when to use it moving forward, with more details, I'd learn more and your videos would be even better! Hope this helps!
TNice tutorials just made it so clear to thank you so much
Liked the video before started watching because i know it's a valuable video
Thank you!!! Greetings from Argentina!
TNice tutorials man is so good at explanation ...since I have been watcNice tutorialng soft soft tutorials , tNice tutorials is my first ti to really understand it . I love soft
I was amused and laughed when you sung "SO GOOD". Haha
thanks for making it fun !!
You are welcome 😊
😃😃Thankzz. its really helpfull.
Can i just say Thankyou for the way you explained tNice tutorials it made super confident on the journey of making soft.
What a great video! Straight to the point and perfectly explained. Thanks for uploading tNice tutorials!
Thank you very much!
Thank you very much
good job!
Absolutely good video
Thank you Jo!
thanks sir 😌👍।।। Topic: This is very important for a website.
12:06 Ok This is the exact reason! Spot on and Thanks!!
Wanted to say that that way you speak English really has approved a lot 👍 I know it can be hard as a fellow Dutch guy 😉
Excellent tutorial. ........... just what I need right now........ joking moments a bit nerdy but I know what you mean it must also be fun
TNice tutorialS IS WHAT I NEEDED BRO, thank you for taking the ti and doing tNice tutorials for most of that are starting with tNice tutorials beautiful tNice tutorialng called
thank you bro
Your video is very helpful
Dank voor je uitleg. Hoe maak je een header voor een specifieke pagina met aparte logo en aparte menu? Dus eigenlijk een website in een website
Hoi Ferdy, ik heb een korte vraag.(Niet relevant op deze video) Is het mogelijk om een boekingsysteem voor een kamerappartement te maken voor bepaalde datumarrangementen: Bijv: Weekarrangement, midweekarrangement, weekeindarrangement. Ik kan de optie niet vinden in Crocoblocks Jetplugins.
Boss You Are Great 👍👍👍
thumbs up on your truly bad joke at the end "flearning" , really laughed though 🤣
Thanks for this... I'm a curious person... Please what does the CSS property, flex do? Can you explain what happened?
Hi Freddy, your best fan here Fana Mange in Swaziland. Thanks brother the good work your doing. I'm your subscriber and I am using your affiliate links. Wish you millions of subscribers. All the best my brother!
Hi Fredy! Thank you so much for this tutorial. But I can't find the sticky icon when I go to section settings and background? All other icons pops up when I hover over it, but not the sticky Icon. Any solution?
Excellent
thanks alot
I am very glad that you save my money
Hello When I make this for fullwidth header I cant change margin, how can I fix this problem? Please give some advice.
Hey Ferdy, als ik mijn header wil gaan maken dan staat in de builder mijn huidige header (die niet met divi is gemaakt) al in de builder. Deze kan ik ook niet verwijderen. Weet jij misschien wat er mis gaat?
Thanks for tNice tutorials amazin tutorial! Such a helpful one
I can't get my sticky header to disable on tablet. I even deleted it and rebuilt it after clearing the cache and for some reason, the section visibility isn't working for tablet. It's fine for mobile. Any help would be appreciated.
Great Tutorial so far, but when I go to vertically/horizontally hidden overflow My 2nd image/logo never appears again. I have watched it several times thinking I did something wrong, but cannot figure out what I did.
I'm facing a problem in header plz anyone.
When I add a row of three columns into the header single section then instead of showing the column items in horizontal direction Like (Logo ... Button....Menu) , instead it shows them in vertical direction and sticked to the lest of the screen inside the header section Like
(Logo.
Button
Menu.)
what is wrong plz?
Nice presentation..
Good morning ferdy, thank you for the download you have provided. I have set up my site using divi and also set it up to use a blank child theme. When installing your advantage website will this become the child theme?
This is awesome, thanks! Is it possible to do that final 100% width effect on the button but keep the logo in place?
Hallo Schatz, ich schätze deine Arbeit auf diesem Kanal. Deine Videos sind sehr interessant!
Ich erwarte, dass Sie meine Videos auf CZcams mögen. Vielen Dank! Ich warte darauf, dass du neue Videos postest!!
Thanks
You are welcome Ahmad 😊
hi ! thank you for your tutorial ! I follow it step by step but in responsive, the menu appears really badly :/ any idea please anyone ?
New to divi, actually looking for an alternative to purchasing the header packs ... I need a offcanvas responsive menu but only see 1 option with divi default menu module ... do you have any videos on that
Is there a way of making the dropdown wider so it fills the mobile screen more
good bro
Good video
Nice tutorial but how do you keep dropdown and mobile menus visible when you set vertical overflow to hidden?
HI Ferdy thank you so much.... can we put the button inside the hamburger menu in mobile...
Super helpful!
thanks for video , how is possible get a boxed menu? , giving space on two sides of menu , this give a better floating effect when scrolling
In the setup, appreciate the videos! Maybe a dumb question but is there a way to export content in mono in soft20?
Thanks. I don't know the answer to your question 😊
My website looks awesome coz I've applied these steps 🚀
Hey Ferdy, you crack you up! LMAO. I think you need some friends, LOL. Keep up the great videos!
How you make login, register, forget password and my profile or my account page for e-commerce amd other websites. please make details Video. So that we can change and design.
thanks , but i cant see the custom menu created on home page , is ready assigned to that page
Hoi Ferdy, Ik heb je 2 keer gemaild maar denk dat je email adres niet klopt of dat je die gewoon niet checked. Ik had een simpele vraag over Learn Dash. Kan je hier ook Tekst cursussen mee maken dus geen Video's maar PDF's ? Das alles bedankt voor je antwoord. Grt Lam
Ha Lam, ik heb gereageerd. Tenzij dat via mijn telefoon was. Die kan geen uitgaande mails sturen. Maar het antwoord is "ja, dat kan ook" 😊
@@ferdycom hahaha super man , thanks :) en bedankt voor de mooie tutorial
I love this effect but I couldn't get it to work for me. The original logo remained partially visible after scrolling.
Great veiod
How do we use/upload the header that you've linked in your description?
Just great ! Thanks !
Your jokes are glorious 😁
Hello! How to make this header for fullwidth header
Hi Ferdy, I like your video. I have one question. How to make dropdown menu in mobile view wider like full screen?
CSS doesn’t work in current version
Nice Video. For some reasons I dont see that sticky position on the settings. any idea why is that happening to me. I worked on other website and they all had this option but the one I am currently working on doesn't have that
If you go to scroll effects and select stick to top you should see it.
@@ziigns no I just had to update DIVI theme hahah
I have mp3 format s and i want to make it puncNice tutorialer plzz help buddy
This is Great Ferdy🤩👏 Can You Plan Something like this with Elementor with inbuilt tools. Is that possible ? I didn't find a good example no where near this with elementor on youtube.
Hey Muhammed, yes! I will create something similar for Elementor this month! 😊
jajaja you are nice!
I’m doing this for my own SEO website
beste Ferdi mijn header is niet zichtbaar, hoe kan ik dit verhelpen?
Do you make any videos using the FSE Gutenberg and GeneratePress/Blocks/Kadence type builds? I am making demos that smoke any page builder on pagespeedinsights. But no one seems to be preparing tutorials for the future of these great web tools that are easier to use without bloat and fluff left behind by a page builder.
Though not perfected, Gutenberg FSE is 100 percent the future; you may as well start teaching and advancing us now. Clients are going to start asking for it by name because they are already using FSE and older editions.
Thanks for the video.
If you are making demos that smoke any page builder why are you watching a divi builder tutorial? I mean you just stated your demos smoke anything page builder can do.
I do not have the theme builder submenu under Divi... what do I do?
Reach out to their support. Their support is amazing!
I've been asked to add a meta tag in the header is this possible ?
Yes, that is possible.
wow... what a display quality, what camera are you using for this video?
Thanks! The Canon R6 and Canon 85mm 1.2 lens.