How To Make A Transparent Header In The Divi Theme Builder
ฝัง
- เผยแพร่เมื่อ 10 ก.พ. 2020
- Can You Still Have A Transparent Header In Divi Over The First Section? Yes!
This quick tip will show you how to create a transparent background with the Divi Theme Builder so it shows over top the page content (like the old header).
Blog Post: www.peeayecreative.com/divi-t...
I know some of you were hoping to still be able to achieve the transparent header like we could do with the menu prior to Divi 4.0. It was quite easy - just set the header background slider to transparent, and walah! The content in the first section magically moved up behind it. But there’s no Customizer settings anymore once you have the Theme Builder enabled, so how can we do this?
Easy peasy! You can do this directly in the Divi Builder now since the Divi 4.2 version update, and we are proud to once again be the first to offer a solution to a common request in the Divi community.
Become a member of our Divi Adventure Club!
www.peeayecreative.com/produc...
Join The Divi Teacher Facebook group: / thediviteacher
Visit our Divi child themes, plugins, tutorials, and courses here: www.peeayecreative.com/
Thanks for watching!
![[TH] GEN vs SEN | FPX vs TH - VALORANT Champions 2024 DAY 1](http://i.ytimg.com/vi/VcyH-0LAlhs/mqdefault.jpg)
So easy yet I have been struggling to figure this out for so long! THANK YOU SO MUCH!
Wonderful Video For Divi Transparent Header. Thanks
@Pee-Aye Creative
You're most welcome!
Once again you've saved my life! I've been doing this the hard way all along. Not only the transparent menu BUT that trick with the overlay blend is what I needed in my life! Thank you!
You're welcome!
I love your straight to the point approach.
Very nice tutorial videos on your channel.
Thank you, I am so happy to hear this!
Your videos are always very useful! Thank you
Awesome man! Fast and easy, I love your channel.
Thank you so much.
Greetings from Bogotá, Colombia.
Thanks for watching! I am happy you enjoy my videos!
you are AMAZING, and really like how you illustrate things, a real teacher, sumps up and keep it going (Y)
Hey thank, glad you like my style! 😁
👏🙌
I didn't even watch the video. I followed along with the written tutorial. Love how you format the written tutorials.
In my opinion, they are easier to follow than ET's written tutorials 😉
Thank you, I'm glad you like the style! 🙂
Awesome man. Long time follower. Thank you for taking the time to make this
My pleasure!
Perfect, exactly what I needed to fix my issue. Thanks!
Wonderful!
That was one practical hack. You are an HOUR saver dude! :D
So glad it helped, I like that..."The Hour Saver" 😉
@@PeeAyeCreative It actually saved a day not just an hour, but Hour Saver sounded better 🤪
Great Guy, good and quick explanation. Greating from Hamburg/Germany
Glad you enjoyed it! Nice to hear from you!
Straight to the point! awesome!
You're welcome, Ivan! Glad you like it!
Thank you so much. This is really great info
Glad it was helpful!
Great video, thanks for the help!
Glad it helped!
Thank you mate, you saved my Saturday morning!
That's so good to hear, Enzo! 😎
Just what I needed, thanks!
Glad to hear it!
Thank you for the tutorial Nelson
Sure, you are welcome!
super easy to follow, thanks!!! life saver
You're welcome, it's great to hear that this helped so much!
Thanks for ur all videos sir
You're welcome!
Thanks that was exactly what I was looking for
That's great Keith! Happy to help!
You're amazing. THANK YOU!!!
You're so welcome!
Hey I just found you...great great great tutorials. Subscribed
I'm glad you found my channel, I hope you enjoy everything we have here!
You indeed know what people have problem with. Awesome tutorial!
Thanks, I try to keep up with common questions in the Facebook groups!
Thank you so much bro 🙏
Always welcome
Very helpful video.
Thank you for sharing that, glad it is helpful!
Thank you so much! Who would ever think to try Absolute position for it to work.
Happy to help! Yes sometimes it is something so simple.
Thankyou for this 🙌
You're welcome 😊
Thanks a lot!
You're welcome!
In your video, you talk about adding an overlay to the image to make the transparent menu stand out a little more, and that works fine but if instead of an image I use a 7 seconds video the overlay doesn't show, that's all. Thank you again. You are a patient man.
Hi Pilo, okay I'm not sure but you can use CSS to make a simple overlay and put it in the section "after" CSS area.
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.6);
@@PeeAyeCreative Thank You once again, Nelson! , that is exactly what I needed . Your CSS tips are jewels hard to find on youtube and in your channel are plenty of them. Thanks.
this guy solved my any problems.
I'm always so happy to hear that! 🙂
Thank you! I always wondered why I couldnt do it. In the older version as you said, I just made the background transparent, but i keep getting that white section :D
Yup, in a way this makes more sense anyhow, but just not as instant and quick.
Thanks Nelson!
You're welcome, Ryan!
Thank You Very Very Very Very Very Very Very Very Much ......
You are very, very, very, very, very, very, very, very, very, very welcome! ;)
It works thanks!!!🎉
You're welcome!
Thank You
You're welcome
Thanks for the video! How do I fix the mobile and tablet version? My background images disappear and essentially on mobile all I see is the bottom footer! Thanks
Great Dear
Thank you
Thank You :-)
You're welcome!
thank u!
You're welcome!
Thank you!!!!!!
You're welcome!
Is there a way to do the same with the footer?
Hi, please , is it possible to have not only 1 photo, by presentation of lets say 5 photos on whole backgroound screen?
is there a way to have a background color when scrolling down?
Thank you, you most be viral
You're welcome!
Hi there. Firstly thank you so much for your amazing videos they are priceless.
Question:
So i have 2 global headers that get used on different pages, Iam also using the code you provided in another video to push content down so that they dont overlap with the header. YAY. But now the problem is that the one global header needs to be transparent so that it can been seen over my background picture....
any help here for me please.
You would need to target a specific header section with the code.
Thank you. The exact problem I had and I am gone mad! 3:25
Glad to help!
thank you, very cool. but on a one-page it would be great if the menu always stays visible at the top and doesn't scroll up. is that also possible?
You can use the scroll settings in Divi to make any section, row, or module sticky.
perfect . . .
Thank you!
Question, when appliening its grabbing a portion of my header underneath, do you know how i get the space beneath look normal and not like it took a part of my slider?
I'm not sure what you mean. Can you show me?
It’s solved. What I meant was that the menu was overlapping my page, but I followed your other tutorial to apply a jquery script to push the page content down properly!
Hi... I always love your works... I have a question... How to make the header blurry transparent while scrolling? It should be transparent on top and only while scrolling it should be blurry transparent.. Would be great to see this tutorial.. Thank you
I'm not sure what you mean exactly.
Thanks. But if you. have a menu with a second, sticky alternative state, this does not work as you must have it on relative in that case. Any idea how to fix that issue?
looking for this answer as well
me too
@@chiaralombardo8380
I love you Jajaja Thanks Man, you got your like and subscribe
Glad to have you, hope you enjoy all the videos!
Thank Nelson! great tut as always. I wonder why the overlay works on an image but not on a video; do you have any tips for that?
Hi Pilo, I'm not sure what you mean. What overlay isn't working?
@@PeeAyeCreative Thank you Nelson for answering my question, I’ll try to explain it better. I was trying to darken the screen to be able to see the transparent menu better as you show in the video, the background is a fullwidth video and it didn’t work so tried with an image and it worked fine. All this is in the theme builder so instead of a regular section I tried a fullwidth header section and works fine but I would rather use a regular section.
I also tried loading the page in the browser to do it with the visual builder but it loads the theme builder. Thank you Nelson I hope I explained it better. I don’t know what I would do without your tuts.
I'm still not sure what you mean. You mentioned overlay but also background. So I'm not sure what you are trying to describe. Also don't use anything "fullwidth" as those are depreciated.
Great tutorial, but the issue now is to keep sticky the header while scrolling. Is there any trick ?
Divi has settings for that now
Great tutorial in many ways. However when I change the position to absolute, all my text elements in my hero section shoot up to the top of the page.
Thanks Michael. That's very strange, how you described that does not sound normal at all.
@@PeeAyeCreative I know. It's got me stumped and I'm a semi-retired web developer! Everything I saw in your tutorial, up until changing the header section position to Absolute, matched what I'd done following along. That included seeing the header in "white" above my hero section. When I went into Theme Builder and set the header section position to Absolute, the header became transparent but everything else moved up, as you would expect when moving an element out of the document flow by using Absolute positioning.
I saw another tutorial by MAK with Elegant Themes where he did kind of the same thing as you. He also set positioning to Absolute, and it didn't appear his content was impacted either. It's a brand new page, so I doubt there are any correlated issues causing this to happen. Very puzzling.
@@mnburch +1. It messes everything up so it is hard to edit afterward.
when i do it, even the text becomes transparent?
When you do what exactly?
@@PeeAyeCreative when changed it from relative to absolute. It doesn't show immediately but when i go to the preview of my site the entire header is transparent. thanks for replying.
Well, I wonder how does the menu looks on mobile... :)
Not sure what you mean
@@PeeAyeCreative I mean that when you use theme builder to make your own menu in Divi - you have to make also your own version of mobile menu. You can not just use this on desktop and have a default Divi version of menu on mobile, can you? And this is the biggest minus of Divi for me. And making a mobile menu is not as easy as this kind of menu like you have on the movie... It needs more movies ;)
Thanks for the video. However, this is not the best solution. What was Divi thinking ?! Is there no elegant solution?
This is the best solution.