Make Awesome Headers With Elementor Pro's Flex Box Container Tutorial

Рет қаралды 86,901

Күн бұрын

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

Пікірлер: 120

@muneebanjamch 10 ай бұрын

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!

@vincentlockhart1 6 ай бұрын

This guy produces the BEST Word Press videos. Clear, precise and easy to follow. Thanks!

@alicjamichalik 11 ай бұрын

I'm sure you hear it all the time, but I gotta say once more: You're awesome. Thanks Ferdy!

@RohanGillett 6 ай бұрын

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.

@granitkallaba9212 9 ай бұрын

Thank you, Fredy. Your lessons are impressive!

@ricr8987 9 ай бұрын

Best tutorial about header on the internet, thank you!! :)

@julioignacioberriossmok6311 11 ай бұрын

thank you Ferdy, I changed almost everything on my website header!

@dimitrispappas2411 5 ай бұрын

Best Header tutorial on the internet !!!

@AluisioAffonso Жыл бұрын

Always the best tutorials!

@latifahshay674 9 ай бұрын

Thx Ferdy, super helpful!! (and I appreciate your sense of humor along the way 😊)

@MorisMEANJI 9 ай бұрын

Best tutorial so far! ❤

@user-gl8jr8sz3q Жыл бұрын

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.

@GiantLeapLife 10 ай бұрын

omg, it works! thank you for this tutorial!

@Nicole-io6vk 4 ай бұрын

I'm at 0:50 and already liked because you already dropped so much value in the intro that i didn't know before👏🏼

@elhilolatino 4 ай бұрын

Thank you Ferdy!!! My first header: beautiful and really working.... Great lesson!

@user-zr3gh2kc9y Жыл бұрын

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

@user-nb1nz7ye2x Жыл бұрын

I just purchased Elementor Pro expert plan from your link. Thank you.

@markbratton111 10 ай бұрын

Aren't containers great? Love it, keep these videos coming!

@daveswitzerland4442 10 ай бұрын

Ferdy lol "possible! Wow!" Lol, i Love your style, you are such a cool, positive, educative Person. Top!

@elisabethvismans 4 ай бұрын

Always love your tutorial Ferdy. My website needs a big overhaul. Will work on new headers tomorrow.

@morrison3599 Жыл бұрын

Well done Ferdy

@loudesigns1682 4 ай бұрын

Thank you ferdy!

@gordonmiller1 8 ай бұрын

You're the best! Thank you! Very helpful...

@chadgarber 11 ай бұрын

Wish I would have watched this video first! Great stuff!

@TwitterTwits 10 ай бұрын

👍👍👍🙏🙏 nice. After 5-6 videos i decided to watch this. Nice one

@zabihallahkhan9546 5 ай бұрын

love it bro thanks alot

@Vichion 3 ай бұрын

Dude, you scared me around 7:50, I was like, "THIS WAS THE TUTORIAL?!" I got bamboozled

@turktrektrekking-hikinglyc2095 Ай бұрын

great tutorials

@emmanouil1453 Жыл бұрын

Well done Ferdy! Looking forward for *Footer* and *Go to Top* button.

@aybhjm 8 ай бұрын

Dude You Saved My Life 🤷🏻‍♂️🤝🏼

@aroxstarpro8514 Жыл бұрын

very nice, great helping video

@tashuys 5 ай бұрын

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.

@surenlakshan Жыл бұрын

I’ve learned lot of things from you and Darrel Wilson. ❤❤ thanks for sharing your knowledge.

@ferdykorpershoek Жыл бұрын

You are welcome 😊

@theodorereid6129 Жыл бұрын

thank you!

@shawnbarnicle 8 ай бұрын

Big help Ferdy!

@AdaptifyLife 10 ай бұрын

Awesome video…

@wowindiatechnical 8 ай бұрын

Very nice bro

@wingsluxe Жыл бұрын

fabulous

@user-dt9mr3vo3s 9 ай бұрын

Thanx bro

@giojio301 Жыл бұрын

You are super!

@mahe82 Жыл бұрын

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.

@zerobambiro 5 ай бұрын

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.

@gitzah Жыл бұрын

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?

@TrollHunterxXx Жыл бұрын

More elementor pro broski ❤

@godswillisikpi Жыл бұрын

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.

@darreng1496 Жыл бұрын

Great video, how do you get the Elementor controls at the top?

@taeconsulting Жыл бұрын

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

@lavalandtours Жыл бұрын

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?

@javedobaid5926 9 ай бұрын

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

@RudaRdp 3 ай бұрын

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?

@bharatgami8093 5 ай бұрын

@ferdykorpershoek great tutorial, how do you make the active menu item underlined in a different color to the menu text color?

@chadgarber 11 ай бұрын

Would love this entire template. Been looking for this but couldn't find it.

@iVeals 3 ай бұрын

Good

@Claymore300 Жыл бұрын

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.

@NIIIIIIIIIIIIccccckk 5 ай бұрын

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

@georgelbeale Жыл бұрын

What is the name of the color picker extension were you using?

@chadgarber 11 ай бұрын

Can you provide this header template for us to use?

@Billionaire_shorts_sigma Жыл бұрын

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

@naeemtech8206 9 ай бұрын

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

@migielfrancissen695 10 ай бұрын

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.

@tobias7716 Жыл бұрын

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 ?

@tobias7716 Жыл бұрын

solved - activated flexbox

@arhipandrei05 4 ай бұрын

how can I edit the container under the menu to look like yours, do you have a tutorial?v

@gireeshkottayam9972 9 ай бұрын

how to overlay menu on next element like hero slider ?

@m__link6499 3 ай бұрын

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!

@willcorzo2696 9 ай бұрын

Where can you find the tutorial on how to make the entire site?

@MDC885 Ай бұрын

How come the Mobile view in the editor doesn't match what I see on my phone? I'm working on the mobile header/menu. In the editor, it's properly placing the logo and hamburger menu on the same line (logo left and hamburger on the right) but on my actual phone, it's showing the logo in the center, and the hamburger on the right, but below the plane of the logo. I even reset the display settings on my phone to default text size. I followed your tutorial to the letter but can't get my phone to look like what I see in my web browser when I size it down. Frustrating =(

@SaimTravelogue 6 ай бұрын

It's very helpful & super easy to understand the way you explain good job.

@user-us7kh1nq4y 9 ай бұрын

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.

@rickymartinez4950 6 ай бұрын

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

@webdesignlondon 11 ай бұрын

how do I create space on the right of the hamburger menu as both padding and margin are having no effect?

@themotivationchronicles_ Жыл бұрын

Hey Ferdy, how do you edit your videos, very engaging!... thanks for your videos

@ferdykorpershoek Жыл бұрын

I use Adobe Premiere.

@ecomcoaches6897 Жыл бұрын

Exactly what I need. Good video how to create a header in elementor Thx a lot again

@themotivationchronicles_ Жыл бұрын

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

@nessamadigan7834 3 ай бұрын

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?

@ferdykorpershoek 3 ай бұрын

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.

@mrs3018 4 ай бұрын

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 👍🏼

@ferdykorpershoek 4 ай бұрын

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 😊

@ejalvin8286 Жыл бұрын

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!

@igentechnolabs Жыл бұрын

Hey make detailed video on Elementor AI which is not available on version 13.3 for free....

@iragenaheritier808 Жыл бұрын

Hi Ferdy, can you do more flexbox videos

@ferdykorpershoek Жыл бұрын

Yes! That is the plan 😊✅

@egidijusmailing9278 Жыл бұрын

Hey, why do I see different Elementor Ui in your video?

@3rdtwirl494 5 ай бұрын

i think i deleted my menu bar. how can i get it to show agai

@surenlakshan Жыл бұрын

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.

@ferdykorpershoek Жыл бұрын

Advanced Woo Search. Not sure if it is for blogposts.

@surenlakshan Жыл бұрын

@@ferdykorpershoek thnx I’ll try 👍🏻

@sangwanbimchannel 7 ай бұрын

❤

@xerofit1397 3 ай бұрын

Why does the effect offset doesnt work. it doesnt show the animation on the offset 😥

@sivhfhdcnd Жыл бұрын

hollo how create website movie similar imdb with elementor

@Autumncraftz Жыл бұрын

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.

@annette-in-vegas Жыл бұрын

I think he is using Blocksy.

@Autumncraftz Жыл бұрын

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

@annette-in-vegas Жыл бұрын

@@Autumncraftz Blocksy does have a free version (like in his video). It is an awesome theme!

@MrMairu555 Жыл бұрын

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

@OnlyPrinceJha Жыл бұрын

Please suggest a contact form -Multi step -Conditional formatting -Appointment booking All above features in one contact form

@SaurabhRawat-dm9qt Жыл бұрын

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

@ferdykorpershoek Жыл бұрын

Hey! Yes, go to the backend, Elementor, Settings, Features and activate every feature 😊

@SaurabhRawat-dm9qt Жыл бұрын

@@ferdykorpershoek Thanks, now I can work feature rich. 🍻

@AIGahan Жыл бұрын

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!

@mdlilurana9041 Жыл бұрын

😄 something wrong

@lushprod 2 ай бұрын

how can you change the header nav from singular to on every page?

@ferdykorpershoek 2 ай бұрын

Click on the arrow next to publish and change the conditions to "Include / Entire Website"

@lushprod 2 ай бұрын

@@ferdykorpershoek tnx! nice tutorials, anu idea why my header looks broken in Chrome and fine in safari?

@hrearning 7 ай бұрын

🙂

@fahadraee115 Жыл бұрын

Why you can't make videos on bricks theme builder which is very popular and very fast website builder then elementor .

@iwbowden Жыл бұрын

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?!

@call.memaybe Жыл бұрын

Hey Ferdy! Was trying to reach you via email. Do you accept any partnership invitations?

@ferdykorpershoek Жыл бұрын

Hey! I just replied 😊

@AndrewBDurand 10 ай бұрын

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

@TheStrategist314 Жыл бұрын

Jeeezus Ferdy, turn it DOWN mate. 34:10.

@lavalandtours Жыл бұрын

How to change "Publish" to go up like in your Elementor settings?

@ferdykorpershoek Жыл бұрын

Update to a beta version of Elementor. Or to the newest version of Elementor.

@lavalandtours Жыл бұрын

@@ferdykorpershoek Thank you!

@zerobambiro 5 ай бұрын

.sticky-header { top: -70px !important; z-index: -1; transition: top 1s ease !important; } .sticky-header.elementor-sticky--effects { top: 0 !important; }