Make Awesome Headers With Elementor Pro's Flex Box Container Tutorial
ฝัง
- เผยแพร่เมื่อ 1 มิ.ย. 2024
- Learn how to create a simple or advanced header using Elementor Pro. Elementor Pro gives you so much flexibility when it comes to creating headers for your WordPress website. In this tutorial, I show you how to get the best out of your headers in Elementor Pro.
Get Elementor Pro:
ferdykorp.com/elementor
Timestamps:
00:00 Intro
00:58 Install Elementor Pro
02:54 Create A Custom Header
10:58 Work With Nested Containers
14:18 Design The Menu
21:22 Make Your Header Sticky
22:39 Make Your Header Responsive
27:25 Create A Top Bar
35:23 Adjust The Breakpoints
37:35 Conditional Logic
45:03 Show Another Header While Scrolling
52:53 Thank You - แนวปฏิบัติและการใช้ชีวิต
To be honest, I used to get quite frustrated with your tutorials. But I didn't understand how you were teaching. You showed how various things could be done sometimes in different ways. Whereas I was always looking for one specific answer. Obviously, I wasn't approaching your videos in the correct way. Now I realize, I need to go slowly through your lessons because you are teaching many people, not just me! So, great stuff! You do teach exactly what I want to know! Timestamping is such a helpful teaching tool.
Best tutorial so far. Have tried numerous other tutorials that left me with frustrating errors, yours stood out as straightforward and effective-no unnecessary complications.
Thank you for this comprehensive tutorial!
This guy produces the BEST Word Press videos. Clear, precise and easy to follow. Thanks!
I'm sure you hear it all the time, but I gotta say once more: You're awesome. Thanks Ferdy!
Thank you, Fredy. Your lessons are impressive!
Best tutorial about header on the internet, thank you!! :)
thank you Ferdy, I changed almost everything on my website header!
hey ferdy. thank you for existing. i just used your link to buy blocksy. also used discount coupòn. all smooth . keep existing. love u.
Thx Ferdy, super helpful!! (and I appreciate your sense of humor along the way 😊)
Always the best tutorials!
Best Header tutorial on the internet !!!
omg, it works! thank you for this tutorial!
I'm at 0:50 and already liked because you already dropped so much value in the intro that i didn't know before👏🏼
Always love your tutorial Ferdy. My website needs a big overhaul. Will work on new headers tomorrow.
Best tutorial so far! ❤
Thank you Ferdy!!! My first header: beautiful and really working.... Great lesson!
Aren't containers great? Love it, keep these videos coming!
I just purchased Elementor Pro expert plan from your link. Thank you.
Well done Ferdy
Ferdy lol "possible! Wow!" Lol, i Love your style, you are such a cool, positive, educative Person. Top!
Dude, you scared me around 7:50, I was like, "THIS WAS THE TUTORIAL?!"
I got bamboozled
Wish I would have watched this video first! Great stuff!
You're the best! Thank you! Very helpful...
👍👍👍🙏🙏 nice. After 5-6 videos i decided to watch this. Nice one
He cheff, top video weer. Ben langzaam aan het beginnen met het bouwen van een site dankzij jou content. Biet alles lukt nog met het gemak waarmee jij het doet...maar begin is er. Bedankt en je hebt er een vaste volger bij......
I’ve learned lot of things from you and Darrel Wilson. ❤❤ thanks for sharing your knowledge.
You are welcome 😊
Thank you ferdy!
Well done Ferdy!
Looking forward for *Footer* and *Go to Top* button.
Oh Ferdy, where have you been all my life! Thank you for this informative and well structured lesson. You're a very good instructor (I just wishlisted your courses on Udemy), and this is simultaneously a masterclass in teaching.
very nice, great helping video
love it bro thanks alot
great tutorials
Dude You Saved My Life 🤷🏻♂️🤝🏼
Big help Ferdy!
Nice! Only comment on the expanded mobile menu is that with opening and closing the characters are being squeezed, which I don't particularly like. Is there a workaround for this to avoid?
Hey Ferdy
Thank you for the tutorial.
Do you know a tweak to "remove/hide" a container after some seconds? I tried out with the custom CSS with the "Code with AI", but it has not worked.
Great video, how do you get the Elementor controls at the top?
Hello, Big thanks for video! Do you have any tutorial/to do list how to set elementor pro for best performance. For example I needed to activate Flex Box before working with this tutorial. And can you recommend please all plugins I need to instal for elementor extra performance?
Awesome video…
It was nearly the perfect video about Headers. I just missed the new mega menu option from elementor or with the help from other tools like you have on your website.
Hi,
Thanks for the tutorial, it's cool!
I would like to create a drop-down menu but which is displayed in a rectangle and where it is possible to list the menus in a column.
What is this style of menu called and how do I do it please?
Thanks
Hello Ferdy, First off, thank you for give so much value for free, I realy do appreciate.
I have been trying to change edit the gradient colour of a section on my Divi website but there are no option for that.
And this is also the same issue for other sections and rows.
What do I do.
Very nice bro
thank you!
Hi Fredy, great job making it easier for the beginners and pro as well,
wondering if you can have a tutorial for the portfolio page similar to behance portfolio, which is much easier and user friendly, it might be up their (if it is please provide the link) if not it would be a great help if you have considering create tutorial! regards
thank you for such a great video tutorial.....i'm pretty new, 1 question. when on mobile, how to show button inside the humburger menu?
More elementor pro broski ❤
fabulous
Great video! in the part about Nested Containers, why you use another container to move the menu? Can't you just choose Item Position -> End? You don't need an extra container, it improves site speed
Hello great video, I have a question, the presentation and colors of your wordpress back office are different from mine, yours is more practical! how to get the same? THANKS.
You are super!
Thanx bro
hey ferdy i am from Bangladesh and i have learned WordPress from your tutorial, plz make a video on e commerce header, specially on side category menu as like big e commerce header. plz make a vdo on it ❤❤❤
@ferdykorpershoek great tutorial, how do you make the active menu item underlined in a different color to the menu text color?
Hi Ferdy, at 4:47 - select your structure your tut shows 2 structures with each an arrow ( one pointing down, one right. In my pro version (updated right now) those structures dont exist. Where do i get them ?
solved - activated flexbox
Would love this entire template. Been looking for this but couldn't find it.
Good
Hello Fredy
I want to know how to make a website from templately feature of packs in which they give us a bundle of 5 or 6 pages.i am getting confused about how to link all that pages to make a website. please reply me soon.
thank you
What is the name of the color picker extension were you using?
Hoi Freddy, mooie tutorial maar ik heb een klein probleempje. Wanneer ik de headers dupliceer (in the themebuilder) verschijnen ze onder elkaar en niet over elkaar heen. Ik kan het niet vinden waar dit in zit. Hoor graag van je.
How can we customize the hamburger menu of the header, for instance change the size, the color, ...? I can't find the way to do it. Thank you sir!
It's very helpful & super easy to understand the way you explain good job.
Hi Ferdy,
Is it possible to make the "services" page in the menu so it isn't a active link? I would like the dropdown which says services, but only links on the dropdowns.
on your wordpress dashboard go to appearance>menu>custom links>type # on the URL section> type "Services" in link text section>add to menu>delete the service page you already had>drag your services under the new custom link you created
Can I ask …. May seem like a silly question but is it worth having elementor pro and also blocksy pro ? I see that you have tutorials for building headers for both so I’m kinda confused.
Thanks and looking forward to a reply 👍🏼
Great question! In my opinion you don't need both. With Elementor Pro you can create your whole website without using Blocksy, but its a bit harder. I prefer to get the best from both free versions 😊
how can I edit the container under the menu to look like yours, do you have a tutorial?v
how do I create space on the right of the hamburger menu as both padding and margin are having no effect?
Where can you find the tutorial on how to make the entire site?
Hey Ferdy, how do you edit your videos, very engaging!... thanks for your videos
I use Adobe Premiere.
Exactly what I need. Good video how to create a header in elementor Thx a lot again
@@ferdykorpershoek woaw beautiful. Grateful for your videos. Any tips on how to land design clients in my country - Ghana. Hope you can share some general tips...
Can you provide this header template for us to use?
I’m not sure what I’ve got to do, but if I can develop the skills to be as good as you at this, I can absolutely dominate my local market for sure!
Hey make detailed video on Elementor AI which is not available on version 13.3 for free....
how to overlay menu on next element like hero slider ?
Hi Ferdy, I am using your header tutorial. The text of my menu has changed and looks like its faded and the same has happened on my contact form on another page which i hadn't edited. Any ideas what I may have incorrectly done?
It could have something to do with the z-index. That is a layer in WordPress. You can go to the container or elekent, advanced and fill in a positive or negative z-index in order to get the right elements in front of others.
I need to know how to add ajax search bar in the header optimized for all devices. I tried lot of free plugins but didn’t satisfy my expectations. Any suggestions?? Please let me know.
Advanced Woo Search. Not sure if it is for blogposts.
@@ferdykorpershoek thnx I’ll try 👍🏻
Hi Ferdy, can you do more flexbox videos
Yes! That is the plan 😊✅
Hey, why do I see different Elementor Ui in your video?
Please suggest a contact form
-Multi step
-Conditional formatting
-Appointment booking
All above features in one contact form
Why does the effect offset doesnt work. it doesnt show the animation on the offset 😥
i think i deleted my menu bar. how can i get it to show agai
Hey fredy, I can see some of the options are not present in my plan.
Can you clarify why this is happening ? I too have pro plan
Hey! Yes, go to the backend, Elementor, Settings, Features and activate every feature 😊
@@ferdykorpershoek Thanks, now I can work feature rich. 🍻
❤
Ferdi, I don't know why you use the dark interface for your videos it's so difficult to see the texts when you are doing the tutorial!
😄 something wrong
Hi Ferdy, can I ask what theme you are using in this tutorial ? I have Astra Pro and the main theme builder looks nothing like the one you are using and when I create the page I don’t have the option to have one panel and insert various items ie… image, menu and button in one panel I have to choose 3 sections. Hope that makes sense.
I think he is using Blocksy.
@@annette-in-vegas Thank you Annette, I bought Astra on his recommendation and now he has changed lol. Although that’s how they make an income. They can’t stick with the same thing or they would never earn anything. Thanks for your help.
@@Autumncraftz Blocksy does have a free version (like in his video). It is an awesome theme!
@@annette-in-vegas I'll second that. Loads of features in Blocksy (free) that you would normally pay for with other themes. Ferdy advocated it in his 4hr Flexbox Container tutorial.
how can you change the header nav from singular to on every page?
Click on the arrow next to publish and change the conditions to "Include / Entire Website"
@@ferdykorpershoek tnx! nice tutorials, anu idea why my header looks broken in Chrome and fine in safari?
Why you can't make videos on bricks theme builder which is very popular and very fast website builder then elementor .
If you were Ferdy and you made a substantial part of your living creating instructional YT videos, would you produce them for an audience of a few thousand (Bricks) or a few million (Elementor) users?!
hollo how create website movie similar imdb with elementor
Hey Ferdy love your videos. Great content and good tutorials, but the amount of ads is making it very difficult to watch... 30 seconds of ads at the start + 15 seconds of ads whenever you skip around and then a few more ads during content, its overwhelming despite the quality content
Jeeezus Ferdy, turn it DOWN mate. 34:10.
🙂
Hey Ferdy! Was trying to reach you via email. Do you accept any partnership invitations?
Hey! I just replied 😊
How to change "Publish" to go up like in your Elementor settings?
Update to a beta version of Elementor. Or to the newest version of Elementor.
@@ferdykorpershoek Thank you!
.sticky-header {
top: -70px !important;
z-index: -1;
transition: top 1s ease !important;
}
.sticky-header.elementor-sticky--effects {
top: 0 !important;
}
Greetings sir
Please how can I contact you
I need a website 🙏
I need a monetized blog website