Shrink Header in Divi Theme Builder - NO CODING
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- If you have created a awesome header in your theme builder and you don't know how to shrink it? This is the way - without any coding!
👇🏻👇🏻👇🏻 Start here 👇🏻👇🏻👇🏻
Do you want to support my channel? Leave a like or buy Divi / Elementor Pro with 10% discount via the link below. That will help me enormously to create these free videos for you and keep going!
⇒ Software that I recommend:
✅ Divi 10% discount ⇒ wp.discount/divi-discount/
✅ Elementor Pro ⇒ wp.discount/elementor-pro-dis...
✅ SiteGround 70% discount ⇒ wp.discount/siteground-discount/
✅ WP Rocket 10% discount ⇒ wp.discount/wp-rocket-discount/
I want you to succeed with your website, so lets get started.
⏱️Timestamps⏱️
0:00 Intro
0:30 Shrinking your header
✅For tips and tricks on getting the most out of Divi and WordPress, don't forget to subscribe: wpressdoctor.com/sub
📖Transscript📖
Hey guys what's up, its the WordPress doctor here, and maybe you have been searching the entire internet to find how to shrink your header with no coding within your Divi Theme Builder. It is pretty easy if you know how. So we're going to create this. If you scroll down your header, just goes into wide and it just gets smaller. You can change it also that it doesn't go full width or 90% that we've changed it, but I will show you exactly in this very short video. Alright, let's have some fun. I have created this header for my website. This is actually my website tutorial header which I used in "How to create a pro website 2021". So, if you didn't see that already, go watch it, you will learn a ton of cool stuff and how to create a professional website how I create them for my clients. What I created - let me show you in the wireframe view - is pretty easy just a section, a row, a menu and a social media follow. This is all there is for this module. Now, how are we going to create it that when you slide down, things get a little bit more smaller? Well, I'm going to show you right now, just go into the 'Section Settings', right here and we go to 'Advanced', and then we go to 'Scroll effects', right there, and what you need to do is you need to change the 'Sticky position' to 'Stick to top'. This way, your section will always stay on top when you scroll, that is the basis. Just press the 'Save changes' button right there. And now I'm going to show you a little trick. If you go to your 'Menu settings' of your module. You go to 'Design', and you go to 'Sizing'. And here you see, you have a 'Logo max height'. But when I hover my mouse over it you will see one its called 'Sticky'. If you press it, you can now go to 'Sticky' right there, and we can change the 'Logo max height' to the sticky size of, well let's say 75 pixels? No it's too big. Let's make it 50 pixels. Remember you have to try out for your website what works perfectly. I'm going with 40 pixels, right there. So, if I also want to change the size of my font. It's also possible. Just go to.... just go to 'Menu text' right here, and you go to your 'Menu text size' and there is an another button, the sticky button. Use it, and then we go with 15 pixels, or maybe even 13 pixels, it's a bit small but I think it's nice. Press 'Save Changes'. Then you go to the 'Row Settings' right there. You go to 'Design', you go to 'Spacing', and then we go to also to the 'Padding', when you are in sticky modus, right there. I'll have to go with zero padding. And then we go to 'Sizing', and then you go to your width. When you're in sticky mode, I want this to be, well, let's say, 90%. And then you go to 'Max Width', that also want this in sticky mode to be 100% right there. So now it just slides, also to the sides. If you don't like it just remove this one like this and then it just stays there. But in this example, we're going to use the sticky modus to also make it more wider. That is awesome. And we're going to save this header right here. And then we're gonna look at the front end, how it looks. And then when we have our beautiful header on the front end, when you just scroll down it will just easily just shrink. That is amazing. So now you know how to create a shrinking header right here with your website. So guys that's basically it. I hope you like this solution for your Divi Theme Builder, it's pretty easy to make a shrinking header, you know how to do it right now. If you have any questions, drop them down in the comments and I'll be glad to answer all of them. If this video is helpful for you, hit that like button and I will see you in the next video. Have a awesome day!
📖 Read the rest of the transcript at wpressdoctor.com/
#Divi #Shrink #Header #WordPress
![เบิ้ล ปทุมราช - อ้ายกินดอง น้องลาบงัว ft. สแน็ก อัจฉรีย์ [OFFICIAL MV]](http://i.ytimg.com/vi/-OK--KaSPcI/mqdefault.jpg)
Wow!!! That's really fantastic and helpful video. Love you bro!
Hi there! You are very welcome! I’m glad I could help you out with this video. Stay tuned, more awesome tutorials coming up! Have a great day and take care 😀👍🏻
Thank you, Doc!
I'm not even a web designer, but you and Ferdy made me fell in love with doing it =)
Now I'm making Divi and Elementor websites for my family and friends in my spare time 😄
I ❤ you both!
Fantastic! That is awesome Arash! Thanks for the nice words 😁 What kind of websites are you creating? Webshops also?
Man, again you are really cool! Thanks! Great skills, great support with site building. You are talented teacher! 👏🤩🌟
Thank you very much again! 😀👍🏻
Amazing video! Thanks for your help!
Thank you for your kind words! Really appreciate that! I am glad the video was helpful to you. I hope my other video’s might also help you. Please consider a like and subscribe or maybe a share for my video, that would help me a lot! If you want a free website review and audit, check wpressdoctor.com/audit
Helped me after 2 Hours google search skill training. Thanks!
Hey thanks man! I’m glad you found the solution to your problem 👍🏻😀
Very cool. Thanks for the tutorial!!
You are very welcome! Good luck with it 😀
HEY!!! This helped a lot! Been looking for this solution.
Thank you for the comment! I’m glad it helped you out 😀
Awesomeee Bro🥰🥰Plz keep going on regulary ❤
Hey thanks man 👋🏻 will do! Back after the holidays 😎👍🏻
Another great job
Thanks! I’m glad you liked the video 😀👍🏻
Very interesting how you have a row and in line with that same row you have social icons all the way to the right that is not part of that row.
How did you achieve that??
Hi there! Great question. There are multiple ways to achieve that, with custom CSS or using the ‘transform’ option in Divi module itself or playing with the ‘position’ option in the module…
Hi there, Thanks for this tutorial. I made the section sticky. I had a button module and I went and reduced the font size on the button on sticky. For some reason it would not reduce the font size. Not sure if it is a elegant themes bug. Also I reduced the padding on the button on sticky. The padding was getting reduced on scroll but not the font size of the button. To get around it I made the row sticky instead of the section. Wondering if you have tried reducing the button font smaller on sticky when the Section is sticky. Thanks.
Hi there! I’m thankful it was useful for you! The font should also work on sticky, so that’s a bit odd. When you enable safe mode in Divi -> Support, does that makes a difference?
@@WPressDoctor Thanks. I did revert it back to making the Section Stick instead of Row. And I also enabled safe mode. No luck. The button will not shrink. I have tried this on a couple of different sites, but the button font size will not reduce. Am not sure if it is my environment. The strange thing is when I am in the Visual Builder on the backed, it does show me the preview of shrinking, but once I save it - it does not get reflected on the front end.
Is this something you can try for fun to see if it works for you. My workaround is making the row sticky instead of the section. Thanks a bunch.
Hm thats indeed strange! If I was u I’d ask Elegant Themes support to check it out. It might be a bug indeed!
@@WPressDoctor Thanks I guess I will send them a note.
Why isn't this working for me? When I give the logo a max-height value of 50px it is not scaling, it is just squishing the logo vertically. I have followed these instructions to the letter.
Hi Scott! Thanks for letting me know. Did you clear caches? I will investigate and I will create a new video soon with this exact topic as the video seem to be a bit outdated. 🤷🏼♂️
Awesome. But I couldn't find the video "How to create a pro website 2021" Any link, please?
Hi Cecil! Thanks you very much! That video is coming soon and will be out the coming weeks 👍🏻😀 Stay tuned! 👌🏻
Its here :) th-cam.com/video/nH-zE9P59hw/w-d-xo.html
I came here from
Ferdy Korpershoek channel.
Hi Salam 👋🏻 That is great to hear 😀👍🏻 You are very welcome!