How to Create a Call To Action Button for the Divi Menu
Вставка
- Опубліковано 12 вер 2024
- Ever wanted to put a button in your Divi menu? In this tutorial, I show you How to Create a Call To Action Button for the Divi Menu.
Find the CSS code, links and other resources here: joshhall.co/ho...
I love the "boom".. please don't stop it! :D Thank you very much for your efforts to put this all together and making room in your schedule to help us out. I really appreciate it!
haha love it. Thanks, Fernando!
Wahoo, I know pretty much nothing to coding but you explain it so well, I've almost understood each line of code, good job man !
ha awesome to hear, Boris! Glad to help.
it's so much fun to see u working with css. U do it as if it is soooo easy. And u make it fun to learn. Congrats u are a fun teacher !!
Thanks for the best tutorials for Divi - appreciate your hard work.
Will donate :)
Thanks so much for the feedback and support! Much appreciated.
Just looked at your blog...looking forward to the Xmas Sale :) Thanks again Josh.
Will definitely do one! Look for that to start later next week :)
Just what I was looking for. Thanks for the super clear tutorial!
Awesome - thanks, Kyle!
I was looking for this for so long, but as soon as I saw that you made a video on this, I knew I was saved! Incredible!
Great to see you back. Don't need this today but guess i'll need it very soon.
That's why they're here! Always good to refer back to :)
Great stuff. This tutorial doesn't have too many booms as the previous ones...I counted only one this time 😂
Please keep saying it all the time and ignore my previous comment... We love you for the person you truly are... God bless you and your family 👪
haha no worries. Thanks, Ayman!
Huge Help! Took a little while to get it right but it works great. I know nothing of code but I was able with your help.
Awesome! Thanks for the feedback, Brian.
Hi Josh, thanks for all the videos and posts!
Thanks for the excellent tutorial! This was so clear and easy to follow. Great job!
Josh, you are the greatest!
Your tutorials are very helpful man... 👍👍👍 Please also make tutorials on extended plugins for Divi.. thanks in anticipation..
Great tut. Almost perfect when played @ 1.5 Playback Speed ;)
Excellent tutorial
Thanks Josh. I appreciate your effort to share your knowledge with us!
Very helpful video for me sir, thnak you💗
Well done! Seriously looks great. Thanks, @JoshHall.
Great tutorial Josh!
This here tutorial has helped me greatly 2 times now!
Hi Josh, this was really helpful! In the mobile settings the hover background color and font are different from the desktop hovers settings. I can't seem to find a way to adjust it so that they are the same. Any recommendations? I appreciate the videos.
I'm having the same issue
Awesome Josh! thanks. Question, how can I change the border color, on hover?
Thank you alot! Got what I wanted
Thanks Josh, very helpful, do you happen to know how upon hovering over the button can i add alt text?
Thanks Josh, this is very helpful
great tutorial thanks Josh!
Thank you James! Glad it helped :)
Thank you! Very helpful. :)
Awesome Josh! Thanks! The only issue I find is that I cant change the menu text color, even though i set color: white!important;
nothing seems to happen.
same issue. were you able to resolve this?
Hi Josh, again a great tutorial!
It seems like I can't adjust the the button to the middle. The search icon and single icon menu item (from another tutorial from you) are always higher than the cta button. Both padding and margin only make it worse by moving the whole menu, no matter whether I adjust the cta button or the other icons. Also align-items : center in the header menu class doesn't help. The revised code and hight options don't help either.
How did you get it that fitting right off the bat?
Great tutorial thanks!
Great content man
Thank you so much for this tutorial! I've used it on two sites and am definitely considering taking your CSS course. I was trying to figure out though how to change the font color for only the button? So if I want a colored background on the button, and a colored menu font I can make the font color white on the button only?
Ah ok yep you can target just the button text by using "a" in the class. For example, something like:
.menu-cta a {
color: #white!important;
}
The "a" targets the link text and not the button background itself. If the other menu items are a different color this should work. My CSS Course will definitely be the start of a new chapter for you as you'll be able to do stuff like this in no time.
Use promo code CSS30 for $30 off if you're ready to join and I'd love to see you in the course and help you level up!
joshhall.co/product/divi-css-course/
dude great work
This is awesome! Thanks a ton!
Hi found your video very helpful but while scrolling down my text color changes to black again
Hi Josh, is there any way to make the logo clickable to phone number? Thank you so much!
Great tutorial Josh! For mobile, do you know how to put the CTA button to the left of the hamburger menu instead of in the hamburger menu? Thanks!
Very complete thanks!
Thanks for the tutorial.
Is there an updated version of this when using the "Divi Theme Builder"?
Thanks for sharing dude.
Great tutorial Josh! Curious why code placed in my style.css doesn't work but does work in Divi's Custom CSS block.
Thanks!
Hey Josh, thanks for this tutorial. Helped me a lot! I just have one question... Can I ask you how to change the text color of the buttons at fixed header if i scroll down?
I used black call to action buttons and need to change the text color to white/black at scrolling down and hover. Thanks a lot!
Thanks for the feedback! Yeah generally to change the color in the fixed menu state, you have to add .et-fixed-header before the class. Be sure to use inspect element for that. Look back at my tutorial for that and it should help if need be. Cheers!
Great tutorial! I was wondering how to turn that button into a pop-up request a quote form?
Hi Josh, Great tutorial! Is there a way to use the center aligned menu with Divi and have the CTA button off to the right side? I can't seem to figure it out....
You'd probably need to do some custom CSS to adjust the positioning of the button...not sure exactly on that one!
Thank you!
No problem, Harsha!
Thank youuuuuu !!
Classes are same for CTA in others WP themes.??? And guide me how to identify the classes for button in menu..
Good...
How would you move that call to action to the top of your mobile menu?
Great video. Loved it! I have an issue that when I scroll down, the text of my button disappears. How can I fix this?
Never mind. I called the class for my button call-to-action, so I had to adjust the code to reflect that and it fixed it!
@@kristygarzell Same problem , how did you solve it?
@@kristygarzell Never mind. I called the class for my button call-to-action, so I had to adjust the code to reflect that and it fixed it!
Hi Josh,
As always, thanks for the tutorials.
When I'm doing it the "height: 42px" part is overlines/crossed out and obviously makes the height uneven in the box.
How do I solve this?
Hey Adrian see the revised code here as you don't need to add the height now! joshhall.co/how-to-create-call-action-button-for-the-divi-menu/
@@JoshHallco Great! Works fine now, huge thanks!!! Subscribed!
Cool!
Hey Josh - thanks for the video. I've followed along and I'm having an issue changing the color of the CTA text in the fixed nav section. Can you help? Everything else seems to be working great.
Thanks, Brian. You can add .et-fixed-header in front of the CSS and that'll give you control of the fixed settings!
here is my boy
i tried to make it active but it failed. any tips how to make it happen?
is there a way of triggering this button to pop up using Bloom plugin. Have you done any tutorial on that?
Not sure with Bloom exactly but you could do it with just about anything with Divi Overlays. See if this helps: ua-cam.com/video/f6O5fXdO-_Q/v-deo.html
@@JoshHallcoThanks. Some reviews are scaring me to suggest this to the client.!
hi Josh I am a student of your videos however I want like this call button to be separated in mobile view may be it has be beside logo or right in mobile view.
Might take some advanced CSS or JQuery for that effect..
@media only screen not working in new divi, can you update something abaout this.
Awe man... I hate when I search for a way to do something quickly, start the tut, and then minutes into it we get referred back to a previous class! in this case how where to put your custom css!... Could you not have just reminded us as you went...
This video isn't about where to put the CSS, it's about customizing the button. That's why I created the other video to reference back to.
Great like Always :) , Hey josh Maybe you can make a tutorial on changing Divi header styles, to be honest its a bit boring haha. + I know its not the same subject, but do you have any clue how you can add font awesome to divi buttons Im going crazy here, cheers in advance and thank you
Thanks Osher. I don't use font awesome so it's not in my expertise but this might help you out: www.elegantthemes.com/blog/tips-tricks/font-awesome-wordpress
Thanks appreciate that, seen this doesn't touch the topic, still a mystery on how to get it done cheers my friend :) keep on making good stuff
This is also worth checking out: www.elegantthemes.com/blog/theme-releases/divi-font-options-update
Thanks josh appreciate your help a lotttt :))
Hey Josh. All working well but on the "shrink" on scroll down the button text turns to white. Tried a few things but cant figure it out. help would be appreciated.
3no.tangentcreativedev.com/
Check the comments on this post as someone answered it in there! I may make an updated version of this soon :)
Thank you Josh for the tutorial! Just one question. How can I link the call to action button to the footer of each page? Example: millionairemindintensive.com
Hey Kerim, I recommend checking out my tutorial on using anchor links: ua-cam.com/video/nY673daNCTo/v-deo.html
Josh Hall, Made my life easier. Thank you bro!
The way he pronounces height kills me.
Listen to my podcast and you'll really hear all my vocabulistic errors...joshhall.co/podcast
Not to be that guy but you pronounce height incorrectly.
"That guy" always makes the comment publicly. "Not that guy" sends a message directly with a more constructive approach in an effort to help.
Lol what were you trying to achieve with this response? "Keeping it real"? If your skin is so thin that you take an English correction as an insult and chastise a viewer for their way of trying to help, you are not going to survive. Fix your attitude
I'm all about constructive criticism - I just appreciate it if it's sent to me directly and not publicly.