Divi Transparent Header Menu - 2021
Вставка
- Опубліковано 26 сер 2024
- Create a Divi Transparent Header Menu - 2021. In this video you will learn how to use a "full width header" Divi module to create a home or landing page hero section with real Impact and a transparent menu section. Divi is the leading page-builder for WordPress, bringing a powerful drag-and-drop page building experience to the world's leading content management system which powers nearly 40% of ALL websites.
Create a full-page hero section in DIVI with background image and use the Divi Theme builder to complete with transparent menu overlay. Full tutorial.
** RESPONSIVE NOTE ** I didn't cover responsive options in this video. If you change things slightly and use a single-column row in the header and add your logo in the menu module then it will be easier to optimise for tablet and phone.
❤️🔥❤️🔥 GET DIVI ❤️🔥❤️🔥
SUPPORT MY CHANNEL BY BUYING
WITH MY LINK
click here: divicoaching.c...
❤️🔥❤️🔥❤️🔥❤️🔥 ❤️🔥❤️🔥❤️🔥❤️🔥
Divi is the leading page-builder for WordPress, bringing a powerful drag-and-drop page building experience to the world's leading content management system which powers nearly 40% of ALL websites.
If you purchase a Divi licence using the following link, I will earn a commission from Elegant Themes which helps support my channel. See the Elegant Themes site for details. Thanks in advance!
☕ If you find my videos useful, please do feel free to buy me a coffee! ☕
☕ www.buymeacoff...
By using these affiliate links I will earn a referral commission which helps support my channel.
![АЛАУДИНОВ у Скабеевой: эти их ВСУ нас НЕ ДОГОНЯТ 😁 [Пародия]](http://i.ytimg.com/vi/an0anqU4WGQ/mqdefault.jpg)
Wow! Simple to follow. Thank you so much for making this video.
Thank you! You should also watch the updated version which adds a couple of bits and makes this fully responsive.. ua-cam.com/video/hVPF1_vHluQ/v-deo.htmlsi=HwC98V_qCa9JG1SI
Hi, I’ve just watched all of your current videos and they’re all excellent. Your teaching style is great - bite sized, to the point and waffle free. Perfect 👌🏻 👏🏻
Awesome, thank you Gary. That is really kind and great to hear!
This couldn't be better explained .. Had it done in 15 minutes, thanks !
Thanks Julian and I am glad this was helpful. I am hoping to update this soon as this was one of the first I made and I didn't cover how to set up responsive options. I have written some notes about this in the description though!
Started using Divi and getting acquinated with the the interface. However, I can't help but say that good ol fashion HTML could've be easily used in much less time to achieve the same effect. Most webpages from years back were using transparent headers, which was very much the norm during that time. Thank for the tutorial.
Thank you. The decision whether to go down the WordPress route or code pages in HTML/CSS/JS really depends on who will be building the content going forwards. Once you get used to the quirks of Divi (and there are plenty) it is possible to work very quickly but I understand your point.
Thank you - This worked beautifully!
Thank you. Look out for an update coming soon...
Cheers for this tutorial. It's straight to point and yes waffle free.
Thank you. I seem to be getting quite a few "waffle free" comments so seem to have struck a chord somewhere.
Clear, concise, and easy to follow. Great tutorial. If you have more I will watch them. Thank you.
Thanks Barry. More on the way including an update to this one covering responsive and sticky options.
Perfect tutorial. Exactly what I needed. Thanks!
You are welcome! Glad you found this useful.
Thanks a lot~ It make sense something I am so confused.
Thank you! I am glad you found this useful. You need to watch the latest on too - this deals with sticky and responsive options. ua-cam.com/video/hVPF1_vHluQ/v-deo.html
Great and relevant tutorial. One thing I did notice is that the global footer I had previously made has been replaced with the default footer
Thank you. That should not be the case. Making a customer header should not have any impact on the default footer. I am updating this tutorial at the moment to add sticky options and responsiveness so will see if there are issues with later versions of the theme builder.
Great tutorial. Thank you 😀
Thanks Mark. I'm in the middle of updating this at the moment as it needs a tweak to work properly responsively and I am also adding 'stickiness'. Coming soon...!
Wow! Excellent tutorial, you have earned a like, a subscriber, and a positive comment!
Thanks Denis. I am working on an update for this at the moment (although rather slowly!) to make this fully responsive. Stay tuned.
Excellent tutorial. Thank you!
Hi Karen - that's kind. Thank you!
Very clear, thanks!
Thank you Leo!
Really well explained. Thanks
Thank you. I'm working on an update to this adding responsuve support. Hopefully out soon!
Right what I needed! Thank you so much. Subscribed!
Excellent. Glad you found it helpful.
Very helpful. Thank you.
Very glad you found this useful!
keep it up, these are great. I'd like one on styling tablepress in divi (please) :)
Thank you! That is very encouraging. Will have a look at Tablepress.
GREAT instruction!!! So well done on the point. Thank you so much für this and it is a lot of help 🙏🙏🙏🌷
Thank you! I updated this a fait bit in the later version to add responsiveness and sticky options. Check it out ua-cam.com/video/hVPF1_vHluQ/v-deo.html
Very clear and easy to understand! Thanks
Thanks Luisa. I need to update this as I didn’t cover making this work for responsive sizes!
Well done...thank you
Welcome 😊You should also look at the more recent version of this here ua-cam.com/video/hVPF1_vHluQ/v-deo.html
perfect ... thank you
I have made a more up to date version with responsiveness etc. You might find this useful too. ua-cam.com/video/hVPF1_vHluQ/v-deo.html
Great work. I hope you will continue to put out content of this quantity. Thank you
Thanks Jacob. Great to have your support and feedback.
Useful tutorial. Keep up the good work!
Thank you. Glad you found it helpful!
Looks good but doesn't seem to be responsive. Goes to pot on tablet and phone . Or am I missing something?
No you are right. I made an updated version which is here! Unfortunately if you delete an old video on UA-cam you lose all the views so the old stuff has to stay up too... ua-cam.com/video/hVPF1_vHluQ/v-deo.html
does making it a background image effect the SEO like mentioned in another video?
You raise a good point. In this instance the image is mainly decorative so I think it s OK. It might be better to use an image module and it is certainly possible. A good exercise to see if you can adapt this!
What if I want to make the menu part sticky when scrolling with a background? How to make 100 percent of the row have a background when scrolling because its set at like 80 percent?
I made a more up to date version with all of this here ua-cam.com/video/hVPF1_vHluQ/v-deo.html
WOW you earn my sub. Thank you
Thanks for the sub!
Fantastic tutorial
Thank you Roger - that's very kind and encouraging feedback!
I have done it three times.. closely following the video but cannot seem to get the menu to show on top of the image. Cannot see what I am doing wrong.
Oh dear. It will be something simple. It always is and I am not immune myself. Do you have a URL you can share (via DM of you want)? If not then have a break and try one more time, double checking each step. I promise it works and you will find the issue. Depending on your settings and hosting sometimes cached content can screw things up so clear whatever caches you can.
I still haven't figured out when to use the Standard vs. Full-Width module when I can set the Standard module with a row of 100% width and max-width. What are your criteria?
It's really a matter of personal choice. The fullwidth modules are pre-packaged layouts which can speed things up as long as you can use or adapt their design. So, for example, the fullwidth header has a full-screen option toggle, two side-by-side buttons and an 'overlay' option which would take work/CSS if you were to build these yourself. So you can save time but as a consequence have less flexibility than if you build the layout yourself.
I don't agree with the last step "absolute".. the header doesn't stay on top
Not sure which bit you are referring to. On top or at the top? At the top requires position:fixed. I'll have another look. This tutorial is quite old and I am revising at the moment to add responsive and 'sticky' support. Should be out in a few weeks.
but it doesn't work good on mobile devices. the whole design get messy. can you add the tutorial to adjust something good for mobile device
Yes! That is exactly what I am working on now. Bringing this up to date and adding sticky and change colour/size on scroll. Give me a couple of weeks.
@@divicoaching lovely
i have resolved that matter by adding display none to the column (hiding the logo) and adding logo to the menu module. that works fine in mobile device.
Hi Divi Coaching, great tutorials btw, I have question, how about if when scrolled those header is white, or how can I customize when the scrolling those menu got changed, thanks sorry for my bad english.
Thank you. I will make a video on this soon. For now see here..
www.elegantthemes.com/blog/divi-resources/how-to-swap-your-divi-header-for-another-one-on-scroll.
@@divicoaching Hi sir, one more thing, how can I create logo centered between the menu but using your great tutorial,? please advice
@@Azlewscom Hi, I’m not quite sure what you want to achieve? If you want the menu centered at the top and logo below, create a single-column row and use an image module and menu module underneath. Set row and both modules to have a transparent background.
@@divicoaching the logo is between on the menu, I've used menu module with one row and add logo + inline center, but sadly my logo is disappear, please advice
@@divicoaching Great video. Is there a way to add colour to the background of the header section on scroll without using the jquery code in the elegant themes example? I tried to play with sticky options but that doesn't seem to work in the global header in the theme builder...
why my logo in the centered disappear 😅 still find out this issue, please advice sir thanks
Can you share a link?
@@divicoaching appreciate it sir, solved alr thank you
@@Azlewscom Way to go!
Tutorial con audio en español, por favooorr!!! No hay tiempo para leer!
Perdón, pero no hablo español. 😒
Which fonts did you use for the logo + Menu text?
Hi. They are LATO - a Google Font.
I could not set a background i can import but nothing happens ?
Any idea
The image should be .jpg or .png and around 1920x1080. Click in section settings > background, choose image tab and click to add image. What happens next?
@@divicoaching nothing happend what should happen. The image should work is the right size and jpg
@@antoonsorg Can you add images to sections normally with no problems? Check that you don't have a solid white backgound color set.
@@divicoaching i will check it tomorrow first thing in the morning. Thanks sofar.
@@divicoaching Yes it works now but I cannot get A full header is it my theme from astra I use