How to Add a CTA Button to the Divi Menu
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2024
- In today’s tutorial, we will show you how you can easily add a CTA button to your Divi Menu using just a little bit of CSS magic in under 8 minutes.
LINKS
Text Tutorial with Code: diviengine.com/add-a-cta-butt...
More Divi Engine Tutorials: diviengine.com/resources/
Divi Theme: www.elegantthemes.com/affilia...
Divi Machine: diviengine.com/product/divi-m...
Divi Machine Tutorial: diviengine.com/how-to-reverse...
CHAPTERS
0:00 Tutorial Introduction
0:30 Step 1 - Setting it Up: Adding the CTA Menu Item
3:04 Step 2 - Adding the CSS Code: Create the CTA Button
6:55 Step 3 - Polishing the Design: Add Wiggle Effects and More
7:39 Conclusion
![[Full Episode] MasterChef Junior Thailand มาสเตอร์เชฟ จูเนียร์ ประเทศไทย Season 3 Episode 5](http://i.ytimg.com/vi/g5wpgeAIzMs/mqdefault.jpg)
Thank you for this code and tutorial!
You are so welcome!
great help ! Thanks !!!!!!!!!!
You're welcome! I'm glad I could be of assistance. Thank you for your kind words, it means a lot to me! If you have any more questions or need further help, feel free to ask. Have a fantastic day!
Great video. Thanks. I was able to add the css in the comment on the blog to make sure the button shows up correctly on mobile. The only issue I have now is I want the text color to be white but it defaults back to the color of the other menu buttons which is black.
Great tutorial - thank you. I was wondering if there is way to add 2 CTA buttons where one is solid colour, the other one has only a frame to differentiate between the two buttons. Also on mobile menu these buttons look very close to each other, so I was wondering is there is a way to add space between such CTA buttons on the menu?
Hi, when i scroll the color goes from white to a darker color yet i dont see that specified in the css. How can i make sure the text color stays white?
This really helped me - thank you! My only question is it's looking a little funky on my mobile device menu (it's really big!). Have you shared any code to adjust for mobile devices?
Hey there, sorry, I'm seeing this a little late. The easiest way to create mobile specific styles would be to add a media query to target those screens. When I have some free time, I will update this tutorial with that code. Stand by 😁
@@DiviEngine it would be SUPER helpful to get some information on this! Just implemented it today and desperately need to change the mobile styling-it's definitely looking a little funky! 😅
Someone in the blog comments used this code and it worked for me
#mobile_menu .de-menu-cta a {
line-height: 1.3em !important;
padding-top: 9px !important;
padding-bottom: 9px !important;
}
@@nestdecor4682 From blog comments
#mobile_menu .de-menu-cta a {
line-height: 1.3em !important;
padding-top: 9px !important;
padding-bottom: 9px !important;
}
Hi, the Code is great but my Buttom is way too low and with the padding nothing changes, how can I set the button a little higher (centered) in the menu?
How if I want the link to be open in a new tab?
Hey when you are scrolling the button text disappears. How do I fix that?
By the way many thanks for the code
This helped a lot! But having problems with changing the text color. It just stays as the default link colors instead of changing to the color I want...
Hi there Alexander! It is working fine for me, but maybe there is some other CSS overriding it for you. To overcome this, try adding !important to the CSS where we define the background color.
For example: background-color: #000000!important;
@@DiviEngine I am having the same issue changing the text color to white. It won't override the already existing !important CSS in the existing css.
I had the same issue... was caused by. using a custom header - worked fine without that in use... @@thewillage
I already have some code in that Custom CSS box so I am unsure where to insert the code? Can you help or anybody else?
Hello!
If you are in the Theme Options, just find the last } bracket and add your code below and it should work find :)