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
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.
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.
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.
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!
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 --------->
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!
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?
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
@@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
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.
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 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.🙂
@@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
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 Darrel!
Great tutorial. Thanks Darrel!
anytime :) if you need help feel free to ask .
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
ruclips.net/video/qx1KtyVMu4U/видео.html
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.
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!
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 --------->
Thank you so much!
anytime! if you need help feel free to ask .
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!
so what are we missing if when you click the hamburger on mobile, the menu doesn't expand?
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.
Hey Party people Fantastic video 😊
Thank you so much 😀
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?
Is that possible to activate the flex box in middle of project , which is built using normal elementor sections??? Help me bro.
Thank you very clear
Thanks for upload this video
It's my pleasure
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
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 😢
This is really nice 👍🏾
Thanks bro
Do you have a tutor lms/elementor theme on your website?
hey , sure here is a full tutorial : ruclips.net/video/kMIIfC6ddHY/видео.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
Very useful information!
Hello sir , do i have the permission to include you on my CV? because i learnt all from you
This is great ! Very helpful !!!
Glad it was helpful!
Helpful video ❤
where is the video for pop up menu? can anyone send the link? thanks.
When nesting containers, do you not add code contributing to code-bloat?
Why nest containers?
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.
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
thank you
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?
❤ Excellent
Very well explained thanks for great videos
you are welcome!
no header id after using custom header and footer how to fix it?
Awsome❤
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.
Which screen recorder software do you use sir ??
So what happened to the old menu? You just delete it?
Nice ❤
thank you kup
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.🙂
I have a question, how do you redirect your logo to the homepage?
Put home page link on logo link text...
We need how to create best website iptv complete
Ok lang pretty good
thanks !
feel free to drop your question in the comments :)
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
top
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.
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 :)
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!
nothing new ..
have some new videos lined up this week, stay tuned
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 .