ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
How to Add a Button in Your WordPress Header Menu
ฝัง
- เผยแพร่เมื่อ 6 ส.ค. 2024
- Want to add a button to your WordPress header menu?
🔴 How to Install Google Analytics for WordPress 👉 • How to Install Google ...
When you add a button to the header navigational menu, you create a noticeable call to action. And this improves the click through rate of that button.
In this video, you'll learn how to easily add a button to your WordPress header menu.
--Links--
►MonsterInsights www.monsterinsights.com/ Promo Code: WPBVIP
►Code in Written Tutorial- How to Add a Button in Your WordPress Header Menu www.wpbeginner.com/wp-tutoria...
--Related Videos--
►How to Install Google Analytics for WordPress • How to Install Google ...
►WordPress Gutenberg Tutorial • 🧱 How to Use the WordP...
►How to Add Call to Action Buttons in WordPress (without Code) • How to Add Call to Act...
►How to Track Link Clicks and Button Clicks in WordPress • How to Track Link Clic...
►How to Add a Click to Call Button in WordPress • How to Add a Click to ...
►What is SEO and How Does it Work? • What is SEO and How Do...
►WordPress Tutorial - How to Make a WordPress Website for Beginners • 📘 WordPress Tutorial -...
Why Add a Button in WordPress Header Menu?
WordPress navigation menus are usually plain text links that all look the same. In terms of design, all the links are given the same importance and weight.
Adding a button will highlight your most important call to action on your site to make it more noticeable and easier for people to find them.
If you liked this video, then please Like and subscribe to our channel here for more WordPress videos.
th-cam.com/users/subscription_...
Join our group on Facebook
/ wpbeginner
Follow us on Twitter
/ wpbeginner
Check out our website for more WordPress Tutorials
www.wpbeginner.com
Timestamps
00:00 Intro for how to add a button in your WordPress header menu
00:34 How to edit your WordPress menu to add CSS
01:10 Add custom CSS class to your menu
02:02 Add code to customize area in WordPress
02:27 How to see changes immediately with CSS
02:52 How to track your conversions with MonsterInsights
#WPBeginner #WordPressTips #WordPressButton
🔴 How to Install Google Analytics for WordPress 👉 th-cam.com/video/TWSrpXQDSbk/w-d-xo.html
Thank you very much from Paris.
You're welcome :)
Thank you, you saved me a lot of headeaches !
Glad we could help :)
Thank you very much
You are welcome
Thank you.
You're welcome!
Thanks for such guidance. I am curious to know, once we update our theme, this custom code will stay or not?
Using the method from this guide, it should stay.
@@wpbeginner Thanks a million.
I have been searching for this for quite a long time. Thank you so much!!!
Glad we could help :)
Hi, how do you reduce the width of the button and change the colour of the active button? Appreciate it, a great video.
For that, you would need to use CSS to customize it. We have a guide below explaining how to use inspect element to customize things like the button.
www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
thanks. however on my mobile site the button color surrounding the text is higher on the dropdown menu. How do I correct this on the mobile version?
It would depend on your specific theme but you would likely need to tweak the CSS for your specific theme. For a starting point we would recommend taking a look at our article below:
www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
To test how the tweaks would affect the button.
Hi, help. the button is fitting perfect on desketop, but on mobile it's looking weird. Is there a way to set different width for mobile and desktop? i am from Brazil. 😍
You would need to add CSS and specify the screen width similar to the below and add the CSS between the {}
@media screen and (min-width: 600px) {
}
@@wpbeginner I did not make it. the button did not fill the width space on mobile.
Yoast seo not showing my woldpress post ?
You would likely want to check in your screen options to ensure it is displaying, otherwise you would want to reach out to Yoast's support using the forum below:
wordpress.org/support/plugin/wordpress-seo/
how to add button in container?
It would depend on the container, for a starting point we would recommend taking a look at our article below:
www.wpbeginner.com/plugins/how-to-add-buttons-in-wordpress-without-using-shortcodes/
This does not account for any padding and so I have a giant smear from the text all the way to the bottom of my menu and it does not look good. I need where the button background color will just surround the text only and not the entire background.
Sadly, our articles cannot account for every styling available. Our guide below on Inspect element should be able to help find the padding that you can change or if you reach out to the support for your specific theme they can normally assist with small customizations like this.
www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Cannot get the code link in your description
You should be able to get the code in our article below:
www.wpbeginner.com/wp-tutorials/how-to-add-a-button-in-your-wordpress-header-menu/
you were so close to telling me what I need to know then you skipped it. My template came with a button and I have no idea how to edit it.
It would depend on the specific template, if you have not done so already, we would recommend checking with the support for your theme and they can normally help if there is a specific customization for your theme to edit the button.
💘
:)