Om du lägger till uppmaningsknappar i dina WordPress-inlägg eller sidor kan du öka konverteringen. Dessa knappar är iögonfallande och uppmanar användarna att vidta specifika åtgärder.
Du kan t.ex. använda dem för att skicka besökare till en prissida, produktsida eller servicesida. De kan också användas för att marknadsföra specialerbjudanden, nya produkter eller affiliatelänkar.
I den här artikeln visar vi dig hur du lägger till vackra call-to-action-knappar i WordPress. Det bästa är att du inte behöver skriva någon kod.
Låt oss utforska det enkla sättet att förbättra din WordPress-webbplats med dessa effektiva knappar.
Obs: Den här artikeln handlar om att lägga till anpassade uppmaningsknappar i WordPress. Om du vill lägga till knappar för sociala medier kan du läsa vår guide om hur du lägger till sociala delningsknappar i WordPress.
Lägga till knappar i WordPress Posts och Pages (Steg för Steg)
WordPress gör det superenkelt att add to knappar med ett built-in Button block. Det är en funktion som introducerades med Gutenberg WordPress block editor.
Vi kommer att visa dig flera sätt att lägga till uppmaningsknappar i WordPress-blogginlägg och -sidor. Du kan välja den lösning som bäst passar dina behov.
Använd gratis innehållsförteckningen under för att enkelt navigera genom denna artikel:
Table of contents:
Video Tutorial
Om du inte gillar videoklippet eller behöver fler instruktioner kan du fortsätta läsa.
Lägga till knappar i WordPress Posts / Pages med hjälp av standard Editor
Enligt vår erfarenhet är den här metoden enkel och rekommenderas för alla användare. Den använder det inbyggda blocket ”Buttons” i WordPress blockredigerare. Om du fortfarande använder den äldre klassiska redigeraren kan du hoppa till nästa avsnitt.
Först måste du skapa ett nytt post eller edit ett befintligt där du vill lägga till en knapp.
På din post edit vy, click on the ’+’ icon and select the Buttons block from the Layout Elements section.
Därefter bör du kunna se blocket med knappar addat till content editor.
Klicka bara på ”Add text…” area och enter din knapp text.
Därefter klickar du på knappen Link i toolbaren för att lägga till en länk.
Du kan searcha efter en post eller page eller helt enkelt copy and paste in en URL i länkfältet.
När du är klar, tryck på ’Enter’ eller tryck på ’Tillämpa’ icon för att save your link.
Om du vill att knappen ska visas centrerat kan du klicka på ikonen ”Justify” och sedan välja ”Justify Center”. Du kan också ändra den vertikala justeringen av knappen från toolbaren.
Därefter kan du customize din knappstil och ändra text- och bakgrundsfärger från panelen för blockinställningar på höger sida.
Byt bara till tabben ”Styling” under block settings för att justera stilen på din knapp.
Du kan välja mellan tre olika knappar: standard, outline och squared. You can try each one by clicking on them and choosing the one that looks best.
Section Color Settings innehåller fem färgvariationer för både knappens bakgrund och knappens text. Inte bara det, utan du kan också använda en custom färg som du väljer genom att clicka på alternativet ”Custom Color”.
När du är nöjd med knappens design kan du save your post eller publicera den för att se en live preview.
Så här såg det ut på vår demo website.
Bonus: Om du vill se hur bra dina knappar utförs bör du använda MonsterInsights. Det har built-in event tracking för affiliate-länkar, utgående länkar och custom events, så att you kan se hur väl dina knappar utförd. För mer detaljer, se viktiga metrics för marknadsföring som du måste track i WordPress.
Skapa en WordPress-knapp i Classic Editor
Standardblockredigeraren i WordPress är modern, snabbare och enklare. Vissa användare använder fortfarande den gamla klassiska WordPress-redigeraren.
Vi rekommenderar inte att du använder den klassiska WordPress-redigeraren. Den är föråldrad och har inte tillräckligt med funktioner för att användarna ska kunna skapa fantastiskt innehåll. Om du fortfarande använder den rekommenderar vi att du stänger av den och börjar använda blockredigeraren.
Å andra sidan kanske vissa användare fortfarande vill använda det. I så fall behöver du en alternativ lösning för att lägga till knappar på din WordPress site.
Det finns tre alternativ tillgängliga för att lägga till knappar i WordPress Classic Editor:
- Lägg till en knapp i WordPress med HTML / CSS-kod.
- Lägg till knappar med ett plugin för knappkortkoder för WordPress.
- Lägg till en knapp i WordPress utan att använda shortcodes.
Av de tre alternativen är det första kodningsmetoden. Du måste skriva HTML / CSS-kod och lägga till den på din webbplats var du än behöver en knapp. Det är inte Beginner-vänligt.
Det andra alternativet är den mest använda metoden. Det beror på att de flesta tillägg för knappar i WordPress tillhandahåller shortcodes för att lägga till knappar.
Det tredje alternativet är det bästa eftersom det tillåter dig att enkelt add knappar till dina posts och pages utan att behöva komma ihåg shortcode.
Låt oss ta en titt på hur du kan add to knappar i WordPress utan att använda shortcodes.
Det första du behöver göra är att installera och aktivera pluginet Forget About Shortcode Buttons. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
När du har aktiverat pluginet skapar du ett nytt inlägg eller redigerar ett befintligt. I redigeraren kommer du att se en ny knapp märkt ”Infoga knapp” i den visuella redigeraren.
För att insert en new knapp i din post måste du click på ’Insert Button’ icon.
Detta kommer att visa ett popup-fönster där du kan designa din nya knapp.
Först måste du add to texten till din knapp och din URL. När du addar texten till din knapp kan du se en live preview i boxen under.
Därefter kan du add to en nofollow tag till din Link och öppna länken i en new tab genom att click på checkboxes alternativen under.
Efter det kan du välja en icon för din knapp. Om du klickar på tabben ”Icons” kommer du att kunna se de icons som du kan add to före eller efter texten i dina knappar.
Dessa icons är faktiskt icon fonts (lär dig hur du använder icon fonts i WordPress post editor).
Därefter kan du välja textfärg och bakgrundsfärg för din knapp genom att clicka på Color box icon.
Därefter klickar du på rullgardinsmenyn för att välja stil på knappen.
Det finns åtta olika knappar som är klara att användas.
På samma sätt kan du också välja storlek på knappen från extra small till extra large.
När du är nöjd med utseendet klickar du helt enkelt på knappen ”Update”.
Du kommer att kunna se din knapp som den ser ut i ditt post, direkt i post editor.
Du kan också ställa in knapparnas justering genom att helt enkelt välja knapptexten och använda knapparna i toolbaren i den klassiska Editorn.
Om du dubbelklickar på knappen visas popupen Infoga knapp, och du kan redigera din knapp om du gillar det.
När du är nöjd med designen kan du publicera eller updaten din post och se den i action. Så här ser den snygga knappen ut på vår demo website WordPress.
Lägga till en Click-to-Call-knapp i WordPress
Förutom de vanliga call-to-action-knapparna kan du också lägga till click-to-call-knappar på din website för att öka leads och konverteringar.
En click-to-call-knapp är en specifik typ av call-to-action-knapp som tillåter dina användare att ringa ett telefonsamtal till ditt team med bara ett tap.
Med hjälp av knapparna tap-to-call kan besökarna på din site omedelbart prata med ditt team personligen och få den information de behöver. Om det gäller diskussion om en request, information före försäljning eller en issue med support, går det snabbt att ringa.
I takt med att antalet användare av smartphones ökar blir det allt viktigare att lägga till knappar för anrop.
Om du inte har en företagstelefon kanske du vill överväga att skaffa ett virtuellt företagstelefonnummer.
Med det sagt, låt oss titta på hur du lägger till click-to-call knappar i WordPress steg för steg.
Det första du behöver göra är att installera och aktivera pluginet WP Call Button. För detaljerade instruktioner kan du se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
Efter aktivering måste du besöka Settings ” WP Call Button page för att konfigurera plugin-inställningarna och designa din click-to-call knapp.
Först kommer du att se inställningarna för Sticky Call-knappen. Den klibbiga anropsknappen är en konverteringsoptimerad funktion som flyttar anropsknappen tillsammans med användarna när de surfar på din webbplats.
Du kan börja med att aktivera statusen för knappen Anropa nu. Klicka helt enkelt på switch toggle för att aktivera den.
Efter det måste du ange ditt telefonnummer. WP Call Button har ett telefonnummerfält med din landskod. Välj bara ditt land och ange ditt företags telefonnummer.
Om du inte har ett företagsnummer kan du få ett från Nextiva. Det är en pålitlig VoIP-provider för företag.
Därefter kan you edit your call button text and choose the call button position and color.
You can also select where to show the sticky call button on your website. Som standard visas knappen för anrop på alla pages och på alla devices. You can show or hide the button on certain pages and show it only on mobile devices.
När du har reviewat alla alternativ kan du klicka på knappen ”Save Changes” längst ner. Efter det kan du besöka din website och se den sticky call now-knappen i action.
Notis: Förutom de klistriga knapparna kan du också lägga till statiska knappar på dina WordPress pages, posts och sidebars med hjälp av detta plugin.
Om du använder WordPress Block Editor kan du enkelt lägga till knappen Call Now på dina pages med hjälp av WP Call Button-blocket.
Skapa en new page eller edit en befintlig page och add to WP Call Button block med hjälp av your page editor.
Därefter kan du customize knapptexten, knappfärgen, textfärgen och fontstorleken och visa eller dölja telefonikonen.
När du är nöjd med designen kan du publicera eller updating din page.
Om du använder den klassiska WordPress-redigeraren måste du använda generatorn Static Call Button för att få en kortkod.
Gå till Settings ” WP Call Button och klicka på menyn ”Static Call Button” högst upp.
Customize helt enkelt alternativen för knappen och kopiera sedan shortcoden. Efter det kan du använda shortcoden i valfri post eller page på din website.
WP Call Button plugin tillåter dig också att lägga till knappen för anrop på din WordPress sidebar och andra widget-klara områden.
Gå bara till Appearance ” Widgets och dra WP Call Button-widgeten till ett widgetfärdigt område där du vill visa knappen för anrop.
Nu kan du add to en rubrik, en description och customize knappen för anrop från Advanced Settings section. När du är klar sparar du din widget.
Det var allt! Om du vill se en mer detaljerad tutorial kan du kontrollera vår steg-för-steg guide om hur du lägger till en knapp för click-to-call i WordPress.
Bonustips för att lägga till customize-knappar i WordPress
Att bara lägga till en call-to-action knapp är inte alltid tillräckligt. Du kanske också vill customize sidan eller posten med en hero image, menyer och en custom layout.
I så fall rekommenderar vi att du använder ett drag and drop WordPress page builder plugin som SeedProd eller Thrive Architect.
Dessa page builders hjälper dig att skapa custom landing pages med snygga call-to-action knappar precis som du vill ha dem.
Vad du än gör är det viktigt att du trackar hur dina knappar utförs eftersom gissning inte är den bästa strategin för företagstillväxt.
Vi rekommenderar att du använder MonsterInsights. Det har built-in event tracking för affiliate-länkar, utgående länkar och custom events, så att you kan se hur bra dina knappar utförd. För mer detaljer, se viktiga marknadsföringsmetrics som du måste tracka i WordPress.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till knappar i WordPress. Du kanske också vill se vår kompletta guide om konverteringsspårning i WordPress eller vår lista över de bästa WordPress-pluginsen för att få din webbplats att växa.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
Is it possible to track some statistics of the button, only with Google Analytics? Unfortunately, I don’t have monstesight, but I do have Google Analytics on my website.
WPBeginner Support says
It is possible but you would need to set up the event tracking in Google Analytics which is why we recommend using MonsterInsights
Administratör
Jiří Vaněk says
Thanks for the reply and explanation. I plan to dive a bit more into Google Analytics, as the only things I currently track with them are the number of users, geolocation and backlinks. I know that GA can do an awful lot. However, I have already seen and read several articles on your website, so I believe that thanks to them I will finally understand this tool a little better. Thank you for your great work. She moved me forward in many ways.
sandra says
How can I add a form (first name / email address) to my call to action button?
Or is there a way to adjust a contact form (remove textbox) to do the trick?
I do not code.
WPBeginner Support says
You would want to check with the support for your form plugin, depending on the one you are using there are different possible methods to do what you are wanting.
Administratör
Shahzaib says
I have added a button thanks alot but it appears very small and i can’t figure out how to increase its size in block editor
WPBeginner Support says
For the button size, at the moment you would need to use CSS. We have a guide on how to use inspect element that will help you below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administratör
Daniel Piggott says
Hi,
I am currently trying to make a button on WordPress. But there is no option to align in the centre.
Has the latest wordpress omitted the alignment feature of a button?
WPBeginner Support says
You would want to ensure you are targeting the button block and not the specific button to see the alignment options
Administratör
Daniel Piggott says
Hi,
Oh wow! I feel silly
Thanks for your help. It’s much appreciated!
Cheers, Dan
WPBeginner Support says
You’re welcome
Carolyn R Cox says
What about a button that performs an action on the page. For example executes a query, reloading the page with the query data (without replacing the page, in other words: no urls.) Is there a simple way to accomplish this without loading a different page? Thanks.
WPBeginner Support says
That would be something that heavily depends on your specific use case and would likely require developer assistance.
Administratör
Roger Meachem says
Finally, a clear instruction that works! Thank you. I’ve spent hours trying all manner of things and failing – perhaps they were out-of-date posts but this solved my problem and did so in minutes. It was perfect. I now have buttons that work on the WordPress site.
WPBeginner Support says
Glad our guide was able to help
Administratör
Meha Jain says
Hi,
Any idea how I can add read more button on the theme modules?
The theme which i am using is not giving me the option to read more button in the modules on the home page.
How I can add read more button there?
Regards
Meha
(I am a non-technical person.)
WPBeginner Support says
You would want to first reach out to your theme’s support and they may have a recommended method for adding that to your theme.
Administratör
Dreamlife says
Thanks for the post. How can I create download button with wordpress premium?
WPBeginner Support says
Sadly, for WordPress.com you would need to check with their support for what is currently allowed
Administratör
Rick Hoffarth says
I need to add code to a button in order for the button to take the user to a merchant services portal to make secure payments. So far, the button creators want a URL, not code. How can I connect a button to another site that requires code in order to do it?
Daniel says
Ok, so I know how to make a download button now, but how do I actually make that download happen ?
Thank you!
Mark Bologna says
This was just what I needed. Read the article, downloaded the plugin, and had a working button all within ten minutes. Thanks!
Debbie says
Super quick – just what I needed! Thank you so much. I had mucked around with some that were so hard to setup… I needed a button and this got the job done quick and easy!
Nina says
Not great… styling is very limited
Utkarsh Agarwal says
How to create links to sections on the same page? For example, I need to create a button after the completion of my post which points to the Comments section down below.
Jen Lewis says
Can this plugin be installed on a site that’s on a free plan? In general, do you have to be on one of the paid plans to install additional plugins to your WordPress site?
WPBeginner Support says
Hi Jen,
You are probably using WordPress.com’s free plan. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Administratör
Daniel says
It works on sidebar as well? I need to know, thanks!
Mike Ritter says
This plugin has been pulled from the library.
Jolynn Powers says
Mike dose that mean that we can no longer add buttons this way and if so where do we look for other information on how to add buttons?? I need to add three buttons to my work website for a listing of dinning locations, entertainment locations and hotel locations and want to put them on a page rather than a post so that they are always on the site at the same location.
Furquan says
I am searching for button , I have found your post at top in Google but the plugin you have mentioned is no more on WordPress. Could you please help me
Aachal says
Hey.. I want a button ”Apply” instead of the page ”Apply” on the homepage of my website.
How can that be done. Any lead on this?
bill says
can i add buttons and then deactivate and delete the url and the buttons are still there ???
or is there a way to put in the css codes to function so i have them without a plugin ???
Bridget says
Hi!
Can I link this to plugin contact form 7? If so, how?
Thanks!
Alysha says
Thanks for this! Looks great, but is there anyway to use this plugin to add a button to the header on the homepage?
Toni says
This is a really great plugin! It allows for a lot more customization than the standard shortcakes without having to write your own css!
One question though – why doesn’t it work in the visual text editor of the widgets? This would be so helpful it if also worked in widgets!
Thanks,
Toni
Wolf says
Thank you!! Spent ages looking for something simple like this. Should have known to come here first
mohamed says
thanks for your article…i install it and worked well except for the url. for example : when i write in the url (www.example.com) and publish my post and go to press the button , i found the button rfere to (www.example.net/www.example.com). how to solve this problem?
WPBeginner Support says
Yep, seems like an issue with the plugin. Please try adding full url like this https://www.wpbeginner.com
Administratör
Altaf says
Thank You Bhai i am Done Now and Solve my WordPress issue
John says
Thank you. This is exactly what I was looking for!
Alec says
Hi! – is it possible to place several buttons side by side in a row? (with different items) – and how does the reference work?
Eric says
I want to allow users to upload any image using Insert Image button. Will this work in that case?
Yonatan says
Will this work on a sidebar as well ?
Jenny says
Hello there!
This is very useful, but is there any way to use a custom image as a button rather than the options that come with the plugin? I have button images that I’ve downloaded from, and I’d like to use those instead because the logo is familiar to my site visitors.
Warmly,
Jenny
Karan Bhagat says
Hey, I have been using this plugin for more than 2 of my sites and installed it on one more, it was working fine till yesterday, but suddenly now it has stopped working, it is showing any button in the toolbar to add these buttons to post. I deleted and reinstalled it, still facing the issue. Help please
Blake says
How can i add things to the dropdown menu in the editor? i want things like Font size, buttons, or what ever else i chose to put there without using a plugin, is there anyway to do this?
WPBeginner Support says
You can use TinyMCE Advanced plugin for that.
Administratör
Nancy says
Thank you! Again! I was searching all over the internet for help with button shortcodes. Couldn’t get them to work. As always, you have the simple answer. I can stop looking any place else for WordPress help!
bryan midgett says
How do I get the buttons on one line instead of vertical? I tried putting between buttons, but the tag prints. When I put my buttons side by side, they run together. Help!
Sacha says
Thanks for the helpful information!
Prasad Saxena says
I want a button to be displayed with each post on the main page of the website, which says go to the website. It should be just beside read more. I did get the button, but i dont know how to configure it so that each post has a different linking url.
Also the url can be inserted from the post itself. I mean while writing it. Just a box below, a text box where you can put the link to the button.
Please help….
WPBeginner Staff says
Please make sure you are writing your post in the Visual Editor mode. The button does not appear in the text editor.
CEA says
I installed the plugin and activated it, but am not seeing any change to my editor. I am using WP 4.0. What am I missing? Please help!
Bal Chandra Dhawan says
I added this button today but URL didn’t work.
I added to page xyz.com/policies and add URL xyz.com/registration,
on clicking it says page not found and in address bar I see. xyz.com/policies/xyz.com/registration. Its adding existing page URL ?
Don’t know why?
Sarah McLain says
Very helpful! Thank you
WPBeginner Staff says
It could be. Did you check by switching to a default theme?
Bill Gibson says
One problem: I guess it is a link underline that is going through the button text (almost like a strikeout). I have tried smallest and largest button sizes and the line is always through the text. I even tried to add ”no decoration” to the style manually and that was ignored. Could this be theme specific? Thanks.
Seo service says
I just installed this plugin and I adore it! I
already am putting it to good use on my blog. Thanks so much for the heads-up
on this.
WPBeginner Staff says
No sorry this plugin is not supposed to do that.
Prishan Latchman says
Is there a button that will allow me to add a specific amount of money to it so that when it is clicked it will increase the current value by that set amount?
E.G. The button is set to an amount for R20.00 and the item (a pair of shoes) for R100.00 and every time someone clicks on the button the price for the shoes goes up by R20.00 to R120.00
bucur says
very good this plugin, I like it 5 stars
Brenda Malone says
Thanks for the heads-up on this excellent plugin! I have installed on my sites AND donated to the author.
Rostislav Sofronov says
This plugin is useful tool, rated to 5
WPBeginner Staff says
Thanks for writing such a useful plugin.