Divi Theme Header Design Tutorial | Create A Custom Header

Подписаться 1,2 млн

Просмотров 121 тыс.

50% 1

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!

Хобби

Опубликовано:

20 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 141

@TeeNoMore 2 года назад

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!

@HarigopalDasa Год назад

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.

@snoorman9189 2 года назад

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!

@HamzaNadeem1432 2 месяца назад

LOVE you from Pakistan Sir Ferdy Korpershoek. You are my Hero.

@johnravi3887 2 года назад

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.

@UndineDuke-Moreno 10 месяцев назад

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.

@bidyutkumersaha4302 2 года назад

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.

@shaidulislam3324 Год назад

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.

@devjesusc Год назад

Well.. yes! I had fun following these steps to make/improve a divi Header; thank you!

@patrickdeparcq5192 8 месяцев назад

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...

@davidflannery4680 2 года назад

I am having a blast with this. You always need to have fun while you work.

@smartrashed6838 2 года назад

Just WAW !! Thank you Ferdy

@zhyrelcabalatungan8609 Год назад

Awesome! Thank very much for this tutorial.

@seans2021 2 года назад

You the best Ferd. When all the other WP RU-vidrs 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!!! 👍

@jamesdavis8731 2 года назад

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.

@ghitaelmaimouni7198 2 года назад

Super great creative video im really impressed, allways helpful don't know how to thaaaank you keep going ❤❤❤

@gameplaybitr4te749 2 года назад

Out of tutorials out there this is the best one

@everglowsubs717 Год назад

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

@mr.corp. Год назад

a breath of fresh air. thanks, man. this was very helpful. all the best.

@Ouidbunny_ Год назад

Beautiful man, you're the only one who helped me

@nocodecreative Год назад

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!

@YasinNabi 2 года назад

You are awesome and this is one of the best Channel I found randomly .... thanks for the sharing :)--

@user-ir5er7dr4p 8 месяцев назад

Thanks for this video. Super helpful!

@agarddrxppy684 Год назад

Can i just say Thankyou for the way you explained tNice tutorials it made super confident on the journey of making soft.

@johndaniel9424 Год назад

I like almost any content you create for us

@bjornfag Год назад

Exactly what I was looking for. This really made my day. Thank you so much 😀

@charleskihungi8665 Год назад

TNice tutorials just made it so clear to thank you so much

@mitochondria1of1 2 года назад

Thank you for this tutorials. this is one of a kind. Sub!

@ulythecreator Год назад

Awesome tutorial!

@ridabrahim7604 2 года назад

Liked the video before started watching because i know it's a valuable video

@G-AUSTIN Год назад

Thank you!!! Greetings from Argentina!

@alexsoultanis Год назад

love your work keep going

@jyothishsukumaran3313 2 года назад

😃😃Thankzz. its really helpfull.

@ankushbaliyan8103 2 года назад

thanks sir 😌👍।।। Topic: This is very important for a website.

@notheories9012 Год назад

This is awesome, thanks! Is it possible to do that final 100% width effect on the button but keep the logo in place?

@mangefanatimothy 11 месяцев назад

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!

@XxRazeXx Год назад

What a great video! Straight to the point and perfectly explained. Thanks for uploading tNice tutorials!

@Jlcaswell 16 дней назад

Thank you very much!

@muhammadishaqyounussamdani6127 Год назад

My website looks awesome coz I've applied these steps 🚀

@websitelearninglab 2 года назад

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 😉

@highrollerph Год назад

I was amused and laughed when you sung "SO GOOD". Haha

@eleonorth4342 2 года назад

thanks for making it fun !!

@ferdykorpershoek 2 года назад

You are welcome 😊

@youniverseapparel539 Год назад

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

@ChristopherBaradi 24 дня назад

Thank you very much

@user-gb7ep7cu5h Год назад

thank you bro

@maxwellhamisi7340 Год назад

Thanks for tNice tutorials amazin tutorial! Such a helpful one

@millicentmurray-roberts8370 2 года назад

Excellent tutorial. ........... just what I need right now........ joking moments a bit nerdy but I know what you mean it must also be fun

@maciejdojdowski106 2 года назад

good job!

@RobMooreJR Год назад

12:06 Ok This is the exact reason! Spot on and Thanks!!

@victorpraiz4116 2 года назад

Thanks for this... I'm a curious person... Please what does the CSS property, flex do? Can you explain what happened?

@cruzitorespawn7529 2 года назад

thanks alot

@darndarn99 2 года назад

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?

@md.mirajulislam5244 Год назад

Your video is very helpful

@ArturoOliva 4 месяца назад

Thanks for tue tutorial, in the recent versions of divi you cannot put just "display:flex;" you have to do it as: " .selector {display: flex;}"

@muddassirahmad36 Месяц назад

Excellent

@jomu3531 2 года назад

Absolutely good video

@ferdykorpershoek Год назад

Thank you Jo!

@beardedrazorback Год назад

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.

@LeboAkatioVision Год назад

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?

@juanjosemolina5501 Год назад

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

@icristi-naDIY Год назад

Hallo Schatz, ich schätze deine Arbeit auf diesem Kanal. Deine Videos sind sehr interessant! Ich erwarte, dass Sie meine Videos auf RU-vid mögen. Vielen Dank! Ich warte darauf, dass du neue Videos postest!!

@FahadNazirRyk Год назад

Boss You Are Great 👍👍👍

@chad-cox Год назад

Nice tutorial but how do you keep dropdown and mobile menus visible when you set vertical overflow to hidden?

@archivosdvdvhs9615 Год назад

I am very glad that you save my money

@248mediauitgeverij 2 года назад

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

@nikoinvicta Год назад

Hi Ferdy, I like your video. I have one question. How to make dropdown menu in mobile view wider like full screen?

@darndarn99 2 года назад

I’m doing this for my own SEO website

@karmouz3 2 года назад

i like the magic that occurred at min 9:20

@ferdykorpershoek 2 года назад

Me too 😁

@omaracelys3217 2 года назад

thumbs up on your truly bad joke at the end "flearning" , really laughed though 🤣

@mudassarahmad9612 Год назад

Thanks

@ferdykorpershoek Год назад

You are welcome Ahmad 😊

@vinopower2023 Год назад

In the setup, appreciate the videos! Maybe a dumb question but is there a way to export content in mono in soft20?

@ferdykorpershoek Год назад

Thanks. I don't know the answer to your question 😊

@angelicalotus5305 2 года назад

Nice presentation..

@jahas9359 2 года назад

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.

@ferdykorpershoek 2 года назад

Hey Muhammed, yes! I will create something similar for Elementor this month! 😊

@41SuPa Год назад

hi ! thank you for your tutorial ! I follow it step by step but in responsive, the menu appears really badly :/ any idea please anyone ?

@rashaadhartley Год назад

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

@alpasc 2 года назад

Just great ! Thanks !

@BashirAhmed-uh9pp 2 года назад

Good video

@redchilli-ai 6 месяцев назад

good bro

@tsm9704 2 года назад

Great veiod

@rodneyblair3125 Год назад

I love this effect but I couldn't get it to work for me. The original logo remained partially visible after scrolling.

@moneymegazine Год назад

wow... what a display quality, what camera are you using for this video?

@ferdykorpershoek Год назад

Thanks! The Canon R6 and Canon 85mm 1.2 lens.

@adcentrances 11 месяцев назад

Is there a way of making the dropdown wider so it fills the mobile screen more

@richardwhipple8167 2 года назад

Hey Ferdy, you crack you up! LMAO. I think you need some friends, LOL. Keep up the great videos!

@MyDianix Год назад

Your jokes are glorious 😁

@PeterPannekoek1850 2 года назад

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.

@riamojica8512 Год назад

Super helpful!

@tanelkoiv369 Год назад

Hello When I make this for fullwidth header I cant change margin, how can I fix this problem? Please give some advice.

@juanjosemolina5501 Год назад

thanks , but i cant see the custom menu created on home page , is ready assigned to that page

@gauravtee 11 месяцев назад

How do we use/upload the header that you've linked in your description?

@AmirHamja-qx6kr 2 года назад

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.

@pinesajeti8884 2 года назад

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

@ziigns 2 года назад

If you go to scroll effects and select stick to top you should see it.

@pinesajeti8884 2 года назад

@@ziigns no I just had to update DIVI theme hahah

@cijohnbaby6885 Год назад

Hey bro want to full tutorial on 1 each & every step by step

@nasirkhanSE Год назад

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?

@Jezek2202 Год назад

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.

@mla4225 Год назад

everytNice tutorialng in soft soft myself!

@najmulhasan6995 2 года назад

❤️

@ferdykorpershoek 2 года назад

❤️

@smonnore7777 Год назад

Early on, You ntion a tutorial You've made, concerning the content setup. I can't seem to see it in Your description though?

@tanelkoiv369 Год назад

Hello! How to make this header for fullwidth header

@techtalkyourself Год назад

I have mp3 format s and i want to make it puncNice tutorialer plzz help buddy

@JoeGator23 2 года назад

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.

@patrickstavros7279 2 года назад

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.

@LocalLeadNL Год назад

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?