Whats up party people! Creating custom headers and footers with the new flexbox can be a bit challenging, so in this video, ill cover how to build custom headers and footers from scratch with flexbox
You're the first TH-camr I found who is truly great at explaining the mechanics of a plugin. You're on a whole different level compared to everyone else. Keep it up, you're amazing! You made understanding header and footer flexbox easy for anyone. I'm currently staging my company's website, and your advice has been crucial. I really hope to see more Elementor tutorials on other topics. And if I could make a small request :) maybe one about Elementor and Smart Slider 3, focusing on shortcodes with gaps included. I never like or subscribe to unofficial channels, but for you, it's worth breaking my habit. A huge bravo from Rome, Italy. Cheers, Sergio!
Hey Sergio! Thanks a ton for the awesome feedback-it’s great to hear the tutorials are helping you with your site! More Elementor content is on the way, and I’ll definitely consider covering Smart Slider 3 with shortcodes. Big thanks from here to Rome-cheers! Feel free to drop your questions in the comments below!
@@darrelwilson Hey, thanks so much for the reply! The tutorials have been incredibly helpful for my site. I was wondering if you also offer consultations-I'd be interested in your help with optimizing the SEO (not creating it from scratch, just refining what's there) and with adjusting the responsiveness of my site for mobile and tablet. Let me know if that’s something we could discuss! Looking forward to more great Elementor content. Cheers from Rome! Sergio
If I were you I would created two containers rows : one for the top header (date and social icons), and another for the logo, menu and buttons. In this way, you can easily align the elements. In your case, the buttons on the right are not aligned with menu, because there are in another container. The other benefit it that it perfectly adapts to all screens, without having to change padding or margin.
Hey! Thanks for your comment! If you need any help, feel free to drop your questions in the comments. Also, take a look on my last tutorial here🔥: th-cam.com/video/C0m3hJTO1Bw/w-d-xo.htmlsi=w1QrlKGfXv1IRTEw
its a great video and very helpful. But i need one more info. I want to add filters to my main menu and add 2 menus on both sides as sticky sidebar for desktop but turns as hamburger menu for mobile . Is it posssible?
Hey! Glad you liked the video! Yes, it’s possible to add filters to your main menu and create sticky sidebars for desktop that transform into hamburger menus for mobile. You can achieve this using Elementor Pro’s custom positioning and responsive settings. Use the “Nav Menu” widget and tweak layout settings for each device. Sticky options can be found under "Advanced > Motion Effects." Feel free to drop your questions in the comments below!
Darrel, Please i need help I want the submenu indicator arrow to show only for mobile and not for desktop and tablet. Anytime i try adding to only mobile, it shows on both tablet and desktop. Any help, i can't find any video that teaches that.
hey , try this : 1. Select the submenu widget in your header. 2. Go to the Advanced tab in the Elementor panel. 3. Click on the Responsive icon (three stacked rectangles). 4. Choose the device type (mobile) where you want to show the submenu indicator arrow. 5. Adjust the visibility settings accordingly. 6. Save your changes. By adjusting the visibility settings for the submenu widget specifically for mobile devices, you should be able to achieve the desired result. If you encounter any issues, double-check your settings and ensure they are applied correctly.
Hi Darryl thanks for the tutorial I have a question Why did we use container inside another container for logo and menu in header, Was one container not enough as we added it in the same container? its at 10:35 in the video.
Darry has taken container inside container as he want to take a logo in one container to be aligned in horizontal direction with another container of WordPress Menu items to be aligned in horizontal direction when the direction is set to row i.e --------->
This tutorial is fab, but what I'm struggling with is where I go in the Elementor/Wordpress menu to apply these headers and footers once they've been made. Could you advise of point me in the direction of a tutorial which tells me how to do it?
Hey! Glad you enjoyed the tutorial! To apply the headers and footers you've created in Elementor, you need to navigate to Templates > Theme Builder in the WordPress dashboard. From there, you can assign your custom header and footer to specific parts of your site, like the entire site or specific pages. Feel free to drop your questions in the comments below.
Hi, why when I create footer always have a bottom gap and the footer in the center not always stick in the bottom like video when I click public and review
Hey! The gap you're seeing might be due to the section or container settings in Elementor. Ensure the footer section is set to stretch and align to the bottom of the page. You can also check if there's any margin or padding applied to the section. Adjusting these settings should help you get the footer to stick to the bottom as shown in the video. Feel free to drop your questions in the comments below.
@@darrelwilson I have got this on my watch list already, my question was not about a tutorial perse but rather a theme or a template kit for those building with tutor LMS? I've already asked you at your website and some guy said no, you're really missing out on not having a template kit for your education template kits to be working with tutor LMS plugin
Hey! Thanks for your comment! If you need any help, feel free to drop your questions in the comments. Also, take a look on my last tutorial here🔥: th-cam.com/video/C0m3hJTO1Bw/w-d-xo.htmlsi=w1QrlKGfXv1IRTEw
Hey, thanks for watching! To hide the standard WordPress menu, you can disable it in the WordPress Customizer under the "Menus" section. To make the Elementor header and footer appear on every page, make sure they are set as the default header and footer in the Elementor settings. Check your display terms to make sure they apply globally across your site. Hope this helps!
Tnks a lot for this video, but whats the orginal pix of the logo you used, on my site wil de logo not good seen?. i learn great things after check this video. greets from the netherlands
Hey ! I'm glad you found the tutorial helpful! For the original pixel dimensions of the logo used in the tutorial, it's typically recommended to use a high-resolution image. This ensures the logo appears crisp and clear on your website. You can adjust the size or resolution of the logo image to suit your needs. If you have any more questions or need further assistance, feel free to ask. Greetings from the Netherlands!
It sounds like there might be a layout or positioning issue with your header. Check the settings in Elementor to ensure that the header is set up consistently across all pages. Pay attention to any customizations or conditions that might be affecting its display. Additionally, review the styling of your header to ensure that it doesn't interfere with the content on other pages. If the problem persists, consider reaching out to Elementor support for further assistance.
To customize the hamburger icon in Elementor header, you'll typically need to access the settings for your header template. From there, you can usually find options to modify the size, color, and other styling properties of the hamburger icon. Look for settings related to the navigation menu or mobile menu in the header editing interface. If you're using a specific header template or Elementor addon, the exact steps might vary slightly, so refer to the documentation or support resources provided by the theme or plugin developer for detailed guidance.
Hey Darrel, Great video. Btw how can I make footer sticky to bottom. Whenever the content size is less, footer float up tight below the content. So how stick the footer to bottom?
Hey! Thanks for your comment! Still need help? Feel free to drop your questions in the comments. Also, check out my latest tutorial here 🔥: th-cam.com/video/C0m3hJTO1Bw/w-d-xo.htmlsi=w1QrlKGfXv1IRTEw
To make your header transparent in Elementor, follow these steps: 1. Edit your header section in Elementor by clicking on it. 2. Look for the settings related to the header's background color or style. 3. Set the background color to transparent or adjust the opacity slider to make it transparent. 4. Save your changes and preview the page to see the transparent header in action. If your theme's header doesn't have built-in options for transparency, you may need to use custom CSS to achieve the effect. Let me know if you need further assistance or specific instructions for your theme!
I can make the container transparent, but when I went to my website I found out that it won't help me unless the header is on top of the image at the top of the page. The container that has the image is below the header section. I'm starting to realize that headers are different from the content on the page and it's probably an advanced skill to be able to have your header show up on your image with no background. Hope that makes sense. Thanks so much for replying to me.🙂
Hey! Thanks for your comment! Still need help? Feel free to drop your questions in the comments. Also, check out my latest tutorial here 🔥: th-cam.com/video/C0m3hJTO1Bw/w-d-xo.htmlsi=w1QrlKGfXv1IRTEw
Hey! Thanks for your comment! If you need any help, feel free to drop your questions in the comments. Also, check out our latest resources here🔥: darrelwilson.com
Hey! Thanks for your comment! If you need any help, feel free to drop your questions in the comments. Also, take a look on my last tutorial here🔥: th-cam.com/video/C0m3hJTO1Bw/w-d-xo.htmlsi=w1QrlKGfXv1IRTEw
Happy you clarified that "release candidate" mistake /s. Release candidate ≠ Stable release It's no surprise though, because I think you're from USA. Over there, many people seem to think that medicine is safe if it's "FDA submitted". I'm still enjoying the tutorial though 😅 thank you for sharing!❤ Hope you have a great year
Hey! Thanks for your comment! Still need help? Feel free to drop your questions in the comments. Also, check out my latest tutorial here 🔥: th-cam.com/video/C0m3hJTO1Bw/w-d-xo.htmlsi=w1QrlKGfXv1IRTEw
Hey! Thanks for your comment! If you need any help, feel free to drop your questions in the comments. Also, check out our latest resources here🔥: darrelwilson.com
@@darrelwilson not to sound too cynical, but it's starting to seem like you've abandoned the part of your audience that uses Divi. I originally subsribed for your web design content in general, and your Divi content in particular. There hasn't been a Divi related video on your channel in at least 9 months. I get that Elementor is trending because they are poking around with AI and that is also trending, and you need to follow whatever search analytics tools are telling you to get the views and earn the bank and and make a living. I just hope you give Divi 5.0 the same level of attention on its release because it's been Elementor almost exclusively.
always ensure you state clearly what you are referring to, dont start designs from secretly designed themes and then act as though you are a beginner. SMH
Really informative video but I think this topic is getting boring day by day. It would really be great if you could make videos on different topics apart from Elementor and WordPress.
Well i had to mention how to use flexbox with headers and footers because its more of a new feature. But will work on some newer style content this week with chat gpt
Whats up party people! Creating custom headers and footers with the new flexbox can be a bit challenging, so in this video, ill cover how to build custom headers and footers from scratch with flexbox
How to create website for buy iptv please
Background colour code Plz
You're the first TH-camr I found who is truly great at explaining the mechanics of a plugin. You're on a whole different level compared to everyone else. Keep it up, you're amazing! You made understanding header and footer flexbox easy for anyone. I'm currently staging my company's website, and your advice has been crucial. I really hope to see more Elementor tutorials on other topics. And if I could make a small request :) maybe one about Elementor and Smart Slider 3, focusing on shortcodes with gaps included. I never like or subscribe to unofficial channels, but for you, it's worth breaking my habit. A huge bravo from Rome, Italy. Cheers, Sergio!
Hey Sergio! Thanks a ton for the awesome feedback-it’s great to hear the tutorials are helping you with your site! More Elementor content is on the way, and I’ll definitely consider covering Smart Slider 3 with shortcodes. Big thanks from here to Rome-cheers! Feel free to drop your questions in the comments below!
@@darrelwilson Hey, thanks so much for the reply! The tutorials have been incredibly helpful for my site. I was wondering if you also offer consultations-I'd be interested in your help with optimizing the SEO (not creating it from scratch, just refining what's there) and with adjusting the responsiveness of my site for mobile and tablet. Let me know if that’s something we could discuss! Looking forward to more great Elementor content. Cheers from Rome! Sergio
I searched a lot of videos but this is the most valuable video for me. Thanks!
Enjoy :) If you need help feel free to drop your questions in the comments below .
If I were you I would created two containers rows : one for the top header (date and social icons), and another for the logo, menu and buttons. In this way, you can easily align the elements. In your case, the buttons on the right are not aligned with menu, because there are in another container. The other benefit it that it perfectly adapts to all screens, without having to change padding or margin.
Its so much helpful. Its better than i ever seen about elementor videos.
Enjoy :)
if you need help feel free to drop your questions in the comments below .
Hi Darrel what if don't put the container in a container and directly put a logo and a menu in a one container....?
Great Video on headers and footers. The mysteries have been solved.
Enjoy :)
if you need help feel free to drop your questions in the comments below .
Great tutorial. Thanks Darrel!
anytime :) if you need help feel free to ask .
Great video Darrel!
Hey! Thanks for your comment!
If you need any help, feel free to drop your questions in the comments. Also, take a look on my last tutorial here🔥: th-cam.com/video/C0m3hJTO1Bw/w-d-xo.htmlsi=w1QrlKGfXv1IRTEw
its a great video and very helpful. But i need one more info. I want to add filters to my main menu and add 2 menus on both sides as sticky sidebar for desktop but turns as hamburger menu for mobile
. Is it posssible?
Hey! Glad you liked the video! Yes, it’s possible to add filters to your main menu and create sticky sidebars for desktop that transform into hamburger menus for mobile. You can achieve this using Elementor Pro’s custom positioning and responsive settings. Use the “Nav Menu” widget and tweak layout settings for each device. Sticky options can be found under "Advanced > Motion Effects." Feel free to drop your questions in the comments below!
Hey Party people Fantastic video 😊
Thank you so much 😀
Darrel, Please i need help
I want the submenu indicator arrow to show only for mobile and not for desktop and tablet.
Anytime i try adding to only mobile, it shows on both tablet and desktop.
Any help, i can't find any video that teaches that.
hey , try this :
1. Select the submenu widget in your header.
2. Go to the Advanced tab in the Elementor panel.
3. Click on the Responsive icon (three stacked rectangles).
4. Choose the device type (mobile) where you want to show the submenu indicator arrow.
5. Adjust the visibility settings accordingly.
6. Save your changes.
By adjusting the visibility settings for the submenu widget specifically for mobile devices, you should be able to achieve the desired result. If you encounter any issues, double-check your settings and ensure they are applied correctly.
@@darrelwilson It did not work out, but thanks anyway
@@darrelwilson Issue solved
th-cam.com/video/qx1KtyVMu4U/w-d-xo.html
Hi Darryl thanks for the tutorial I have a question Why did we use container inside another container for logo and menu in header, Was one container not enough as we added it in the same container? its at 10:35 in the video.
Darry has taken container inside container as he want to take a logo in one container to be aligned in horizontal direction with another container of WordPress Menu items to be aligned in horizontal direction when the direction is set to row i.e --------->
so what are we missing if when you click the hamburger on mobile, the menu doesn't expand?
Just to clarify, these features are only available on the "paid" version of Elementor, correct?
Hey! Yes, these features are exclusive to the paid version of Elementor (Elementor Pro). Feel free to drop your questions in the comments below!
This tutorial is fab, but what I'm struggling with is where I go in the Elementor/Wordpress menu to apply these headers and footers once they've been made. Could you advise of point me in the direction of a tutorial which tells me how to do it?
Hey! Glad you enjoyed the tutorial! To apply the headers and footers you've created in Elementor, you need to navigate to Templates > Theme Builder in the WordPress dashboard. From there, you can assign your custom header and footer to specific parts of your site, like the entire site or specific pages.
Feel free to drop your questions in the comments below.
Hi, why when I create footer always have a bottom gap and the footer in the center not always stick in the bottom like video when I click public and review
Hey! The gap you're seeing might be due to the section or container settings in Elementor. Ensure the footer section is set to stretch and align to the bottom of the page. You can also check if there's any margin or padding applied to the section. Adjusting these settings should help you get the footer to stick to the bottom as shown in the video. Feel free to drop your questions in the comments below.
Do you have a tutor lms/elementor theme on your website?
hey , sure here is a full tutorial : th-cam.com/video/kMIIfC6ddHY/w-d-xo.htmlsi=8hcDcH4ym7i3u2bd
@@darrelwilson I have got this on my watch list already, my question was not about a tutorial perse but rather a theme or a template kit for those building with tutor LMS? I've already asked you at your website and some guy said no, you're really missing out on not having a template kit for your education template kits to be working with tutor LMS plugin
Is that possible to activate the flex box in middle of project , which is built using normal elementor sections??? Help me bro.
This is really nice 👍🏾
Thanks bro
It's been there days of making this same website but it's not showing on my Mobile Screen it's completely Blank!!!
Hey! Thanks for your comment!
If you need any help, feel free to drop your questions in the comments. Also, take a look on my last tutorial here🔥: th-cam.com/video/C0m3hJTO1Bw/w-d-xo.htmlsi=w1QrlKGfXv1IRTEw
Hey, great job so a couple of thing is one.How do you make the stanwordpress menu disappear?And how do you make this appear on every page
Hey, thanks for watching!
To hide the standard WordPress menu, you can disable it in the WordPress Customizer under the "Menus" section. To make the Elementor header and footer appear on every page, make sure they are set as the default header and footer in the Elementor settings. Check your display terms to make sure they apply globally across your site. Hope this helps!
Tnks a lot for this video, but whats the orginal pix of the logo you used, on my site wil de logo not good seen?. i learn great things after check this video. greets from the netherlands
Hey ! I'm glad you found the tutorial helpful! For the original pixel dimensions of the logo used in the tutorial, it's typically recommended to use a high-resolution image. This ensures the logo appears crisp and clear on your website. You can adjust the size or resolution of the logo image to suit your needs. If you have any more questions or need further assistance, feel free to ask. Greetings from the Netherlands!
Thank you!! Very helpful. However, my footer is showing up everywhere but my homepage - does anyone know how to fix?
Go to theme builder. Select your footer. Then select: display conditions and choose ENTIRE site
@@brianholt6083 it’s not working 😢
That's a great tutorial.
Enjoy :)
if you need help feel free to drop your questions in the comments below .
Not certain why, but my header gets in the way of everything on all pages except my home page?
It sounds like there might be a layout or positioning issue with your header. Check the settings in Elementor to ensure that the header is set up consistently across all pages. Pay attention to any customizations or conditions that might be affecting its display. Additionally, review the styling of your header to ensure that it doesn't interfere with the content on other pages. If the problem persists, consider reaching out to Elementor support for further assistance.
Very useful information!
Thanks for upload this video
It's my pleasure
Very well explained thanks for great videos
you are welcome!
This is great ! Very helpful !!!
Glad it was helpful!
How can we customize the hamburger icon of the header, for instance modify the size, the color, and so on...I can't find how to do it. Thanks dude!
To customize the hamburger icon in Elementor header, you'll typically need to access the settings for your header template. From there, you can usually find options to modify the size, color, and other styling properties of the hamburger icon. Look for settings related to the navigation menu or mobile menu in the header editing interface. If you're using a specific header template or Elementor addon, the exact steps might vary slightly, so refer to the documentation or support resources provided by the theme or plugin developer for detailed guidance.
When nesting containers, do you not add code contributing to code-bloat?
Why nest containers?
Hey Darrel, Great video. Btw how can I make footer sticky to bottom. Whenever the content size is less, footer float up tight below the content. So how stick the footer to bottom?
Thank you so much!
anytime! if you need help feel free to ask .
Hey If I start using Elementor can I just make edits or will I have to redesign the whole site?
Helpful video ❤
Hey! Thanks for your comment!
Still need help? Feel free to drop your questions in the comments. Also, check out my latest tutorial here 🔥: th-cam.com/video/C0m3hJTO1Bw/w-d-xo.htmlsi=w1QrlKGfXv1IRTEw
Hello sir , do i have the permission to include you on my CV? because i learnt all from you
Thank you for this video! On the demo site, how did you make the bottom menu part alone sticky with the fade transition?
its called the trending post addon, turn it on in the blocksy settings
How do you make your header transparent?
To make your header transparent in Elementor, follow these steps:
1. Edit your header section in Elementor by clicking on it.
2. Look for the settings related to the header's background color or style.
3. Set the background color to transparent or adjust the opacity slider to make it transparent.
4. Save your changes and preview the page to see the transparent header in action.
If your theme's header doesn't have built-in options for transparency, you may need to use custom CSS to achieve the effect. Let me know if you need further assistance or specific instructions for your theme!
I can make the container transparent, but when I went to my website I found out that it won't help me unless the header is on top of the image at the top of the page. The container that has the image is below the header section. I'm starting to realize that headers are different from the content on the page and it's probably an advanced skill to be able to have your header show up on your image with no background. Hope that makes sense. Thanks so much for replying to me.🙂
no header id after using custom header and footer how to fix it?
Hey! Thanks for your comment!
Still need help? Feel free to drop your questions in the comments. Also, check out my latest tutorial here 🔥: th-cam.com/video/C0m3hJTO1Bw/w-d-xo.htmlsi=w1QrlKGfXv1IRTEw
❤ Excellent
where is the video for pop up menu? can anyone send the link? thanks.
Hey! Thanks for your comment!
If you need any help, feel free to drop your questions in the comments. Also, check out our latest resources here🔥: darrelwilson.com
Which screen recorder software do you use sir ??
Thank you very clear
Hey! Thanks for your comment!
If you need any help, feel free to drop your questions in the comments. Also, take a look on my last tutorial here🔥: th-cam.com/video/C0m3hJTO1Bw/w-d-xo.htmlsi=w1QrlKGfXv1IRTEw
Nice ❤
thank you kup
Happy you clarified that "release candidate" mistake /s.
Release candidate ≠ Stable release
It's no surprise though, because I think you're from USA. Over there, many people seem to think that medicine is safe if it's "FDA submitted".
I'm still enjoying the tutorial though 😅 thank you for sharing!❤ Hope you have a great year
Hey! Thanks for your comment!
Still need help? Feel free to drop your questions in the comments. Also, check out my latest tutorial here 🔥: th-cam.com/video/C0m3hJTO1Bw/w-d-xo.htmlsi=w1QrlKGfXv1IRTEw
Awsome❤
thank you
anytime :) if you need help feel free to ask .
So what happened to the old menu? You just delete it?
Hey! Thanks for your comment!
If you need any help, feel free to drop your questions in the comments. Also, check out our latest resources here🔥: darrelwilson.com
I have a question, how do you redirect your logo to the homepage?
Put home page link on logo link text...
I have problem i doing same but header is not showing on pages.. what is the problem??
hey , Has the problem been solved? If not, please let me know how I can help.
but elementor makes a url name, how can i change it?
for which part?
@@darrelwilson just when i create a new page using elementor it changes the url name adding "elementor" in it :c
We need how to create best website iptv complete
Oh look. Another Elementor video.
Well it’s trending. What other topics you got in mind?
@@darrelwilson not to sound too cynical, but it's starting to seem like you've abandoned the part of your audience that uses Divi. I originally subsribed for your web design content in general, and your Divi content in particular. There hasn't been a Divi related video on your channel in at least 9 months. I get that Elementor is trending because they are poking around with AI and that is also trending, and you need to follow whatever search analytics tools are telling you to get the views and earn the bank and and make a living. I just hope you give Divi 5.0 the same level of attention on its release because it's been Elementor almost exclusively.
Ok lang pretty good
thanks !
feel free to drop your question in the comments :)
top
always ensure you state clearly what you are referring to, dont start designs from secretly designed themes and then act as though you are a beginner. SMH
hey thanks for your comments , if you need help feel free to drop your questions in the comments .
Elementor WordPress ai chat bot flex box
thanks for your comment !
feel free to drop your question in the comments :)
nothing new ..
have some new videos lined up this week, stay tuned
Really informative video but I think this topic is getting boring day by day. It would really be great if you could make videos on different topics apart from Elementor and WordPress.
Well i had to mention how to use flexbox with headers and footers because its more of a new feature. But will work on some newer style content this week with chat gpt
I like it!
You've made a lot of mistakes. But that's okay you're just human. Unlike me.
hey
if you need help feel free to drop your questions in the comments below .