Come aggiungere e stilizzare un pulsante in WordPress (4 modi semplici)

Vuoi imparare a creare e stilizzare pulsanti per il tuo sito WordPress?

I pulsanti sono potenti e possono essere utilizzati per invitare gli utenti all'azione per iscriversi alla tua mailing list, seguirti sui social media e acquistare il tuo prodotto.

Per creare pulsanti personalizzati, puoi utilizzare uno snippet di codice o semplicemente scaricare un plugin che fa tutto per te.

In questo tutorial, ti mostreremo come aggiungere e stilizzare un pulsante sulla tua pagina web e persino aggiungere effetti di animazione. Iniziamo.

Ecco un indice che puoi utilizzare per saltare al metodo che ti interessa di più:

• Aggiungere un pulsante nell'Editor a Blocchi
• Aggiungere un pulsante usando SeedProd
• Aggiungere un pulsante usando Thrive Themes
• Aggiungere un pulsante usando il Codice

Prima di iniziare, potresti voler consultare questo foglio di trucchi dettagliato su come creare un pulsante perfetto per il tuo sito web.

Aggiungere pulsanti ai tuoi post e pagine incoraggia i tuoi utenti a fare ciò che vuoi che facciano. Senza un pulsante o una CTA, il tuo sito web manca di una strategia ottimizzata e lascia i tuoi tassi di conversione al caso.

Come dice l'esperto di marketing Neil Patel, un pulsante o una CTA è il "ponte tra marketing e vendite". Puoi usare i pulsanti in WordPress per dare la tua CTA finale ai tuoi utenti come Acquista Ora, Contattaci, Scarica, o altri.

Tuttavia, è importante sapere come usare questi pulsanti per massimizzare le tue conversioni. Ci sono diversi fattori che rendono alcuni pulsanti migliori di altri.

Questi includono:

• Conoscere il tuo obiettivo di conversione
• Mantenere il testo del tuo pulsante breve e accattivante
• Usare parole d'azione
• Fornire un incentivo

Ora, vediamo come creare potenti pulsanti WordPress per il tuo sito web senza alcuna codifica.

Aggiungere un pulsante in WordPress con l'Editor a Blocchi

Per impostazione predefinita, l'editor a blocchi di WordPress ti consente di aggiungere un semplice pulsante al tuo sito. Questo è gratuito e chiunque può usarlo.

Innanzitutto, crea o modifica qualsiasi pagina o post in WordPress. Quindi puoi usare il pulsante ‘+’ per aggiungere un nuovo blocco. Cerca 'pulsante' e aggiungi il widget alla tua pagina.

Ora dovresti vedere un pulsante aggiunto al tuo post. Personalizziamolo. Fai clic sul pulsante per aprire le impostazioni per i pulsanti.

Vedrai apparire un menu appena sopra il pulsante. Puoi esplorare queste impostazioni per modificare l'allineamento, aggiungere un link, modificare il testo e il font, e altro ancora.

Nel pannello di destra, puoi modificare la larghezza, aggiungere un link e un'ancora HTML. Se passi alla scheda Stili, otterrai altre opzioni per personalizzare il pulsante.

Puoi cambiare il pulsante da uno sfondo pieno a un contorno. Ci sono opzioni per cambiare la dimensione, il padding e il bordo.

Ora questo metodo è facile ma limitato nelle opzioni di personalizzazione. Se vuoi stilizzare il pulsante e aggiungere effetti di animazione, allora dovrai usare un page builder di WordPress. Successivamente, ti mostreremo come usare 2 dei page builder più popolari: SeedProd e Thrive.

Aggiungere un pulsante in WordPress usando SeedProd

Ci sono molti plugin per la creazione di pagine che ti permettono di personalizzare la tua pagina e aggiungere pulsanti con facilità. La nostra scelta n. 1 è SeedProd.

SeedProd è un costruttore di siti web e landing page per WordPress. Viene fornito con temi predefiniti che hanno già pulsanti posizionati strategicamente per te. Devi semplicemente scegliere un tema e modificarlo per adattarlo alle tue esigenze.

Con SeedProd, puoi aggiungere tutti i tipi di elementi potenti come:

• Profili social
• Pulsanti di condivisione sui social (Mi piace, Tweet, Segui)
• Tabella prezzi & pulsante di pagamento
• Conto alla rovescia
• Menu di navigazione
• Recensioni & testimonianze
• Galleria immagini
• Google Maps

...e molto altro.

C'è un costruttore drag and drop con un'interfaccia visiva. Ciò significa che modificherai il front-end del tuo sito web. Semplicemente fai clic e modifica qualsiasi cosa ti serva, e trascina e rilascia nuovi elementi dove li desideri.

Non c'è mai bisogno di scrivere codice. Dai un'occhiata a come abbiamo modificato il testo nel nostro design di esempio qui:

Passando alle opzioni di personalizzazione avanzate per i pulsanti, SeedProd include:

• Stili di pulsanti predefiniti
• Dimensioni, forma e colore personalizzabili
• Font e tipografia personalizzati
• Icone al pulsante
• Effetti di animazione
• Funzione di duplicazione per trasferire lo stile del pulsante ad altri blocchi
• Salva il layout come modello personalizzato
• Mostra/nascondi sui dispositivi
• Anteprima su mobile e tablet
• Elementi SEO-friendly come i tag no-follow & apri in una nuova scheda

Con SeedProd, avrai tutto ciò che ti serve per progettare un pulsante accattivante che spinga gli utenti a fare clic e ad agire sul tuo sito.

La prima cosa che dovrai fare è scaricare e installare SeedProd sul tuo sito.

Una volta attivato il plugin, vai alla dashboard di amministrazione di WordPress e apri SeedProd. Se stai creando un nuovo sito web, puoi selezionare un kit di temi già pronti e personalizzarlo. Questo creerà tutte le pagine e i post di cui il tuo sito potrebbe aver bisogno.

Per questo tutorial, ti mostreremo come aggiungere un pulsante a una landing page. Naviga nella scheda SeedProd » Landing Pages. Qui puoi aggiungere una nuova landing page.

Scegli un modello e aggiungi un nome per la tua pagina, quindi si aprirà il costruttore. Vedrai un'anteprima live del tuo design con un pannello di modifica sulla sinistra.

Dai blocchi standard disponibili, semplicemente trascina e rilascia il blocco pulsante nel tuo design. Quando lo fai, si apriranno più opzioni per modificare il pulsante sulla sinistra. Puoi semplicemente fare clic sul testo del pulsante e aggiungere la tua call to action. Vedi come abbiamo aggiunto e modificato facilmente un pulsante sulla nostra pagina:

Quando selezioni il pulsante, nel pannello di sinistra sotto la scheda Contenuto, puoi modificare il testo, le dimensioni, l'allineamento, aggiungere un link e altro ancora. Queste sono le opzioni predefinite disponibili anche nell'editor di blocchi di WordPress.

Quando aggiungi un link, otterrai opzioni per aggiungere elementi SEO come 'no follow' e 'apri in una nuova finestra'.

Ora c'è di più. Non devi stilizzare il pulsante da solo. Se passi alla scheda Modelli, vedrai design di pulsanti già pronti tra cui scegliere. Puoi scegliere un design di pulsante piatto o a pillola.

Ci sono anche tantissimi colori tra cui scegliere. Se desideri un maggiore controllo sullo stile del tuo pulsante, vai alla scheda Avanzate. Qui puoi impostare il padding, il raggio, la larghezza, il colore e altro ancora.

Nella scheda Avanzate, scorri verso il basso e vedrai Effetti di animazione. Puoi far rimbalzare, pulsare, tremare il tuo pulsante e molto altro. Questo ti aiuterà ad attirare l'attenzione del lettore.

In fondo al page builder, c'è un'opzione per l'anteprima su dispositivi mobili e tablet per assicurarti che il design del tuo pulsante sia bello su tutti i dispositivi.

In questo modo, puoi personalizzare l'intera tua landing page con SeedProd. Quando sei pronto, puoi salvare e pubblicare la tua pagina.

Aggiungi un pulsante in WordPress usando Thrive

Thrive Themes ha un potente theme builder e landing page builder che puoi usare per personalizzare il tuo sito WordPress.

Per questo tutorial, ti mostreremo come usare Thrive Architect – il landing page builder. I passaggi per il theme builder seguono procedure simili.

Thrive Architect è adatto ai principianti e facile da usare per chiunque. Questo plugin è uno strumento premium, quindi dovrai prima iscriverti a un account Thrive.

Quindi puoi installare questo plugin sul tuo sito. Scopri come farlo nella nostra Recensione di Thrive Architect.

Una volta installato sul tuo sito, inizia creando o modificando qualsiasi pagina usando il builder di Thrive Architect.

Quando si apre il landing page builder di Thrive, vedrai un'anteprima della tua pagina insieme alle opzioni di modifica a destra e a sinistra del builder.

Nel pannello di sinistra, fai clic sull'icona '+' e si aprirà un menu a blocchi. Qui puoi selezionare il blocco 'Pulsante' e trascinarlo nel tuo design.

Quando lo fai, vedrai apparire il pulsante nell'anteprima insieme alle opzioni di modifica a destra. Puoi cambiare colore, dimensione, allineamento e altro ancora. Puoi anche aggiungere un link e aggiungere tag 'no follow' o 'apri in una nuova scheda'.

Nel menu di sinistra, c'è una scheda 'Pulsante Modello'. Quando la apri, vedrai diversi stili di pulsante tra cui scegliere. Ci sono così tante opzioni qui, non dovrai mai più stilizzare un pulsante da solo.

Tornando alla scheda Opzioni Principali, scorri verso il basso per trovare altre opzioni.

Queste opzioni includono:

• Tipografia
• Stile Sfondo
• Layout e Posizione
• Animazione e Azione
• Reattivo
• Attributi HTML

...e altro ancora.

Per dare vita al tuo pulsante, apri la scheda Animazione e Azione. Vedrai effetti di animazione per far scorrere, zoomare, ingrandire, rimpicciolire, sfumare il tuo pulsante e altro ancora.

Quando hai personalizzato l'intera pagina e sei pronto per pubblicare, apri l'icona delle impostazioni in cima al builder. Qui puoi pubblicare la tua pagina per renderla live sul tuo sito.

Ecco fatto! Hai imparato come creare un pulsante usando l'editor a blocchi e i page builder di terze parti. Successivamente, ti mostreremo anche come usare il codice personalizzato per aggiungere un pulsante.

Aggiungi un pulsante usando il codice

Se hai dimestichezza con il codice e vuoi aggiungere/stilizzare un pulsante da solo, allora vorrai dare un'occhiata a WPCode.

WPCode ti offre snippet di codice predefiniti che puoi utilizzare sul tuo sito web. C'è una libreria di snippet gratuiti e pro a cui puoi accedere sul loro sito.

Puoi visualizzare in anteprima lo snippet e scaricarlo per utilizzarlo sul tuo sito.

Puoi anche installare il plugin sul tuo sito e otterrai snippet predefiniti insieme a un'opzione per inserirli automaticamente nella tua pagina. C'è anche un'opzione di shortcode che puoi utilizzare per aggiungere facilmente il pulsante ovunque desideri sul tuo sito.

Con WPCode, non dovrai mai più passare ore a cercare di capire come creare/aggiungere nuovi elementi. Puoi trovare rapidamente gli snippet di codice di cui hai bisogno e aggiungerli al tuo sito.

Questo è tutto per te. Speriamo che questo tutorial ti abbia aiutato ad aggiungere un pulsante al tuo sito. Se stai cercando di aggiungere un pulsante personalizzato a un popup sul tuo sito, allora OptinMonster è lo strumento che fa per te. Dai un'occhiata alla nostra Recensione di OptinMonster per saperne di più.

Successivamente, potresti anche voler consultare le nostre altre guide utili:

• Come Creare un Layout WordPress Personalizzato
• Come personalizzare un sito WordPress
• Come tracciare i clic sui link e sui pulsanti in WordPress

Questi tutorial ti aiuteranno a personalizzare il tuo sito WordPress. L'ultimo ti aiuterà a monitorare le prestazioni dei tuoi pulsanti.