L’aggiunta di pulsanti di invito all’azione alle pagine o ai post di WordPress può aumentare le conversioni. Questi pulsanti sono accattivanti e indirizzano gli utenti a compiere azioni specifiche.
Ad esempio, si possono usare per inviare i visitatori a una pagina di prezzi, di prodotti o di servizi. Possono anche promuovere offerte speciali, nuovi prodotti o link di affiliazione.
In questo articolo vi mostreremo come aggiungere bellissimi pulsanti di invito all’azione in WordPress. La parte migliore è che non dovrete scrivere alcun codice.
Scopriamo il modo più semplice per migliorare il vostro sito WordPress con questi pulsanti efficaci.
Nota: questo articolo riguarda l’aggiunta di pulsanti personalizzati di invito all’azione in WordPress. Se volete aggiungere pulsanti per i social media, consultate la nostra guida sull’add-on dei pulsanti di condivisione sociale in WordPress.
Aggiunta di pulsanti nei post e nelle pagine di WordPress (passo dopo passo)
WordPress rende super facile l’aggiunta di pulsanti con il blocco Button integrato. Si tratta di una funzionalità introdotta con l’editor di blocchi di WordPress Gutenberg.
Vi mostreremo diversi modi per aggiungere pulsanti di invito all’azione alle pagine e ai post dei blog WordPress. Potete scegliere la soluzione più adatta alle vostre esigenze.
Utilizzate pure l’indice sottostante per navigare facilmente in questo articolo:
Indice dei contenuti:
Video tutorial
Se il video non vi piace o avete bisogno di ulteriori istruzioni, continuate a leggere.
Aggiunta di pulsanti nei post e nelle pagine di WordPress tramite l’editor predefinito
Secondo la nostra esperienza, questo metodo è facile e consigliato a tutti gli utenti. Utilizza il blocco “Pulsanti” integrato nell’editor a blocchi di WordPress. Se utilizzate ancora il vecchio Classic Editor, potete passare alla sezione successiva.
Per prima cosa, è necessario creare un nuovo post o modificarne uno esistente in cui si desidera aggiungere un pulsante.
Nella schermata di modifica del post, fare clic sull’icona ‘+’ e selezionare il blocco Pulsanti dalla sezione Elementi di layout.
Successivamente, si dovrebbe vedere il blocco di pulsanti aggiunto all’editor di contenuti.
È sufficiente fare clic sull’area “Aggiungi testo…” e inserire il testo del pulsante.
Successivamente, fare clic sul pulsante Link nella barra degli strumenti per aggiungere un link.
È possibile cercare un post o una pagina o semplicemente copiare e incollare un URL nel campo del link.
Una volta fatto, premere “Invio” o l’icona “Applica” per salvare il link.
Se si desidera visualizzare il pulsante al centro, è possibile fare clic sull’icona ‘Giustifica’ e selezionare ‘Giustifica centro’. È inoltre possibile modificare l’allineamento verticale del pulsante dalla barra degli strumenti.
Successivamente, è possibile personalizzare lo stile del pulsante e modificare i colori del testo e dello sfondo dal pannello delle impostazioni del blocco sul lato destro.
È sufficiente passare alla scheda “Stile” nelle impostazioni del blocco per regolare lo stile del pulsante.
È possibile scegliere tra tre stili di pulsanti: predefinito, contorno e quadrato. È possibile provare ciascuno di essi facendo clic su di essi e scegliendo quello che sembra migliore.
La sezione Impostazioni colore comprende cinque varianti di colore sia per lo sfondo che per il testo del pulsante. Non solo, ma è anche possibile utilizzare un colore personalizzato a scelta facendo clic sull’opzione ‘Colore personalizzato’.
Una volta soddisfatti del design del pulsante, è possibile salvare il post o pubblicarlo per vedere un’anteprima dal vivo.
Ecco come appariva sul nostro sito web dimostrativo.
Bonus: se volete vedere le prestazioni dei vostri pulsanti, dovreste usare MonsterInsights. Ha un monitoraggio integrato degli eventi per i link di affiliazione, i link in uscita e gli eventi personalizzati, in modo da poter vedere il rendimento dei vostri pulsanti. Per maggiori dettagli, consultate le importanti metriche di marketing che dovete monitorare in WordPress.
Creare un pulsante di WordPress nell’editor classico
L’editor a blocchi predefinito di WordPress è moderno, più veloce e più facile. Alcuni utenti utilizzano ancora il vecchio Classic Editor di WordPress.
Non consigliamo di utilizzare il classico editor di WordPress. È obsoleto e non ha abbastanza caratteristiche per permettere agli utenti di creare contenuti fantastici. Se lo utilizzate ancora, vi consigliamo di disattivarlo e di iniziare a utilizzare l’editor a blocchi.
D’altra parte, alcuni utenti potrebbero ancora volerlo utilizzare. In questo caso, avrete bisogno di una soluzione alternativa per aggiungere pulsanti sul vostro sito WordPress.
Sono disponibili tre opzioni per aggiungere pulsanti nell’Editor classico di WordPress:
- Aggiungere un pulsante in WordPress con il codice HTML/CSS.
- Aggiungere pulsanti con il plugin WordPress button shortcode.
- Aggiungere un pulsante in WordPress senza utilizzare gli shortcode.
Delle tre opzioni, la prima è il metodo di codifica. Dovrete scrivere il codice HTML/CSS e aggiungerlo al vostro sito web ovunque abbiate bisogno di un pulsante. Non è un metodo adatto ai principianti.
La seconda opzione è il metodo più comunemente utilizzato. Questo perché la maggior parte dei plugin per pulsanti di WordPress fornisce shortcode per l’aggiunta di pulsanti.
La terza opzione è la migliore perché consente di aggiungere facilmente pulsanti ai post e alle pagine senza dover ricordare lo shortcode.
Vediamo come aggiungere pulsanti in WordPress senza utilizzare gli shortcode.
La prima cosa da fare è installare e attivare il plugin Forget About Shortcode Buttons. Per maggiori dettagli, consultate la nostra guida passo-passo su come installare un plugin di WordPress.
Una volta attivato il plugin, creare una nuova pubblicazione o modificarne una esistente. Nell’editor, si vedrà un nuovo pulsante etichettato “Inserisci pulsante” nell’editor visuale.
Per inserire un nuovo pulsante nel post, è necessario fare clic sull’icona “Inserisci pulsante”.
Si aprirà una finestra popup in cui sarà possibile progettare il nuovo pulsante.
Per prima cosa, è necessario aggiungere il testo e l’URL del pulsante. Mentre si aggiunge il testo del pulsante, si può vedere un’anteprima dal vivo nel riquadro sottostante.
Successivamente, è possibile aggiungere un tag nofollow al proprio link e aprire il link in una nuova scheda facendo clic sulle opzioni della casella di controllo sottostante.
Successivamente, è possibile selezionare un’icona per il pulsante. Facendo clic sulla scheda ‘Icone’, si potranno vedere le icone che si possono aggiungere prima o dopo il testo dei pulsanti.
Queste icone sono in realtà font di icone (imparate a usare i font di icone nell’editor dei post di WordPress).
Successivamente, è possibile scegliere il colore del testo e dello sfondo del pulsante facendo clic sull’icona della casella Colore.
Successivamente, fare clic sul menu a discesa per scegliere lo stile del pulsante.
Sono disponibili otto diversi stili di pulsanti pronti all’uso.
Allo stesso modo, è possibile scegliere la dimensione del pulsante, da extra small a extra large.
Una volta soddisfatti dell’aspetto, è sufficiente fare clic sul pulsante “Aggiorna”.
Potrete vedere il vostro pulsante come appare nel vostro post, proprio all’interno dell’editor del post.
È inoltre possibile impostare l’allineamento dei pulsanti selezionando semplicemente il testo del pulsante e utilizzando i pulsanti della barra degli strumenti nell’editor classico.
Facendo doppio clic sul pulsante si aprirà la finestra a comparsa Inserisci pulsante e, se lo si desidera, si potrà modificare nuovamente il pulsante.
Una volta soddisfatti del design, è possibile pubblicare o aggiornare il post e vederlo in azione. Ecco come è apparso il pulsante di fantasia sul nostro sito WordPress demo.
Aggiunta di un pulsante per chiamare in WordPress
Oltre ai soliti pulsanti di chiamata all’azione, potete aggiungere al vostro sito web dei pulsanti di chiamata per aumentare i contatti e le conversioni.
Un pulsante “click-to-call” è un tipo specifico di pulsante call-to-action che consente agli utenti di effettuare una telefonata al vostro team con un semplice tocco.
Utilizzando i pulsanti “tap-to-call”, i visitatori del sito possono immediatamente parlare di persona con il vostro team e ottenere le informazioni di cui hanno bisogno. Sia che si tratti di una richiesta di preventivo, di informazioni pre-vendita o di un problema di assistenza, le telefonate sono rapide.
Poiché il numero di utenti di smartphone è in crescita, l’aggiunta di pulsanti di chiamata ora è ancora più importante al giorno d’oggi.
Se non si dispone di un telefono aziendale, si può pensare di ottenere un numero telefonico aziendale virtuale.
Detto questo, vediamo come aggiungere pulsanti “click-to-call” in WordPress passo dopo passo.
La prima cosa da fare è installare e attivare il plugin WP Call Button. Per istruzioni dettagliate, potete consultare la nostra guida passo-passo su come installare un plugin di WordPress.
Dopo l’attivazione, è necessario visitare la pagina Impostazioni ” WP Call Button per configurare le impostazioni del plugin e progettare il pulsante “click-to-call”.
Per prima cosa, si vedranno le impostazioni del pulsante di chiamata in evidenza. Il pulsante di chiamata in evidenza è una caratteristica ottimizzata per la conversione che sposta il pulsante di chiamata insieme agli utenti durante la navigazione del sito.
È possibile iniziare attivando lo stato del pulsante Chiama ora. È sufficiente fare clic sulla levetta dell’interruttore per attivarlo.
Dopodiché, è necessario inserire il numero di telefono. WP Call Button dispone di un campo per il numero di telefono con il codice del paese. È sufficiente selezionare il paese e inserire il numero di telefono aziendale.
Se non avete un numero aziendale, potete ottenerne uno da Nextiva. Si tratta di un fornitore VoIP aziendale di fiducia.
Successivamente, è possibile modificare il testo del pulsante di chiamata e scegliere la posizione e il colore del pulsante.
Inoltre, è possibile selezionare dove mostrare il pulsante di chiamata appiccicoso sul sito web. Per impostazione predefinita, il pulsante di chiamata viene mostrato su tutte le pagine e su tutti i dispositivi. È possibile mostrare o nascondere il pulsante su determinate pagine e mostrarlo solo sui dispositivi mobili.
Una volta esaminate tutte le opzioni, è possibile fare clic sul pulsante “Salva modifiche” in basso. Dopodiché, potrete visitare il vostro sito web e vedere il pulsante “Chiama ora” in azione.
Oltre ai pulsanti di chiamata adesivi, con questo plugin è possibile aggiungere pulsanti di chiamata statici alle pagine, ai post e alle barre laterali di WordPress.
Se utilizzate l’editor di blocchi di WordPress, potete aggiungere facilmente il pulsante Chiama ora alle vostre pagine utilizzando il blocco Pulsante di chiamata WP.
Creare una nuova pagina o modificare una pagina esistente e aggiungere il blocco WP Call Button utilizzando l’editor di pagina.
Successivamente, è possibile personalizzare il testo del pulsante, il colore del pulsante, il colore del testo, la dimensione del carattere e mostrare o nascondere l’icona del telefono.
Una volta soddisfatti del design, è possibile pubblicare o aggiornare la pagina.
Se si utilizza il classico editor di WordPress, è necessario utilizzare il generatore di pulsanti di chiamata statici per ottenere uno shortcode.
Andate su Impostazioni ” Pulsante di chiamata WP e fate clic sul menu “Pulsante di chiamata statico” in alto.
È sufficiente personalizzare le opzioni del pulsante e poi copiare lo shortcode. Dopodiché, è possibile utilizzare lo shortcode in qualsiasi post o pagina del proprio sito web.
Il plugin WP Call Button consente inoltre di aggiungere il pulsante di chiamata alla barra laterale di WordPress e ad altre aree predisposte per i widget.
Basta andare su Aspetto ” Widget e trascinare il widget WP Call Button in un’area predisposta per i widget in cui si desidera visualizzare il pulsante di chiamata.
Ora è possibile aggiungere un titolo, una descrizione e personalizzare il pulsante di chiamata dalla sezione Impostazioni avanzate. Una volta terminato, salvare il widget.
Tutto qui! Se volete vedere un tutorial più dettagliato, potete consultare la nostra guida passo-passo su come aggiungere un pulsante “click-to-call” in WordPress.
Suggerimento per l’aggiunta di pulsanti personalizzati in WordPress
La sola aggiunta di un pulsante di invito all’azione non è sempre sufficiente. È possibile che si voglia anche personalizzare la pagina o il post con un’immagine eroe, dei menu e un layout personalizzato.
In questo caso, si consiglia di utilizzare un plugin per la creazione di pagine WordPress drag-and-drop come SeedProd o Thrive Architect.
Questi page builder vi aiuteranno a creare landing page personalizzate con fantasiosi pulsanti call-to-action esattamente come volete voi.
Qualunque cosa facciate, è importante che teniate traccia dell’andamento dei vostri pulsanti, perché tirare a indovinare non è la migliore strategia di crescita aziendale.
Consigliamo di utilizzare MonsterInsights. Ha un monitoraggio integrato degli eventi per i link affiliati, i link in uscita e gli eventi personalizzati, in modo da poter vedere le prestazioni dei vostri pulsanti. Per maggiori dettagli, consultate le importanti metriche di marketing che dovete monitorare in WordPress.
Speriamo che questo articolo vi abbia aiutato a imparare come aggiungere facilmente pulsanti in WordPress. Potreste anche voler consultare la nostra guida completa sul monitoraggio delle conversioni su WordPress o il nostro elenco dei migliori plugin WordPress per far crescere il vostro sito web.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Jiří Vaněk
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
It is possible but you would need to set up the event tracking in Google Analytics which is why we recommend using MonsterInsights
Admin
Jiří Vaněk
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
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
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.
Admin
Shahzaib
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
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/
Admin
Daniel Piggott
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
You would want to ensure you are targeting the button block and not the specific button to see the alignment options
Admin
Daniel Piggott
Hi,
Oh wow! I feel silly
Thanks for your help. It’s much appreciated!
Cheers, Dan
WPBeginner Support
You’re welcome
Carolyn R Cox
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
That would be something that heavily depends on your specific use case and would likely require developer assistance.
Admin
Roger Meachem
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
Glad our guide was able to help
Admin
Meha Jain
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
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.
Admin
Dreamlife
Thanks for the post. How can I create download button with wordpress premium?
WPBeginner Support
Sadly, for WordPress.com you would need to check with their support for what is currently allowed
Admin
Rick Hoffarth
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
Ok, so I know how to make a download button now, but how do I actually make that download happen ?
Thank you!
Mark Bologna
This was just what I needed. Read the article, downloaded the plugin, and had a working button all within ten minutes. Thanks!
Debbie
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
Not great… styling is very limited
Utkarsh Agarwal
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
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
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.
Admin
Daniel
It works on sidebar as well? I need to know, thanks!
Mike Ritter
This plugin has been pulled from the library.
Jolynn Powers
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
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
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
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
Hi!
Can I link this to plugin contact form 7? If so, how?
Thanks!
Alysha
Thanks for this! Looks great, but is there anyway to use this plugin to add a button to the header on the homepage?
Toni
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
Thank you!! Spent ages looking for something simple like this. Should have known to come here first
mohamed
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
Yep, seems like an issue with the plugin. Please try adding full url like this https://www.wpbeginner.com
Admin
Altaf
Thank You Bhai i am Done Now and Solve my Wordpress issue
John
Thank you. This is exactly what I was looking for!
Alec
Hi! – is it possible to place several buttons side by side in a row? (with different items) – and how does the reference work?
Eric
I want to allow users to upload any image using Insert Image button. Will this work in that case?
Yonatan
Will this work on a sidebar as well ?
Jenny
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
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
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
You can use TinyMCE Advanced plugin for that.
Admin
Nancy
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
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
Thanks for the helpful information!
Prasad Saxena
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
Please make sure you are writing your post in the Visual Editor mode. The button does not appear in the text editor.
CEA
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
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
Very helpful! Thank you
WPBeginner Staff
It could be. Did you check by switching to a default theme?
Bill Gibson
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
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
No sorry this plugin is not supposed to do that.
Prishan Latchman
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
very good this plugin, I like it 5 stars
Brenda Malone
Thanks for the heads-up on this excellent plugin! I have installed on my sites AND donated to the author.
Rostislav Sofronov
This plugin is useful tool, rated to 5
WPBeginner Staff
Thanks for writing such a useful plugin.