I pulsanti possono sembrare una cosa da poco, ma possono fare molto per il vostro sito web. I pulsanti sono uno dei modi più semplici per guidare i visitatori verso l'azione desiderata.
Dal condurre le persone alla pagina del prodotto all'invitarli a leggere di più o a iscriversi, un bel pulsante può fare la differenza. La buona notizia è che non è necessario avere competenze di codifica per progettarli.
WordPress dispone di opzioni integrate e, con un piccolo aiuto da parte di un plugin di blocco, è possibile ottenere un controllo ancora maggiore sull'aspetto dei pulsanti.
In questo post, vi illustrerò tre semplici metodi per creare pulsanti eleganti in WordPress.
Inizieremo con l'editor predefinito, passeremo a un plugin che offre maggiore flessibilità e termineremo con un metodo bonus per aggiungere pulsanti all'interno delle tabelle. Entriamo nel vivo.
Creare bellissimi tavoli
Con l'editor di blocchi
✅Metodo 1: Utilizzo del blocco di pulsanti predefinito
WordPress ha un blocco pulsanti integrato che funziona bene nella maggior parte dei casi. Lo troverete all'interno dell'editor dei blocchi quando fate clic sulla piccola icona (+) e cercate "Buttons".
Quando il blocco del pulsante viene inserito, viene richiesto di aggiungere del testo all'interno del pulsante.
Una volta inserito il blocco, è possibile aggiungere uno o più pulsanti affiancati. Ogni pulsante può essere personalizzato direttamente dalla barra laterale destra. Troverete opzioni per:
- Larghezza del pulsante (completa o automatica)
- Colore del testo e dello sfondo
- Imbottitura e allineamento
- Raggio del bordo (per gli angoli arrotondati)
È un buon punto di partenza, soprattutto se ci si attiene a un design minimalista.⚠️Ma si arriva rapidamente a un limite se si ha bisogno di altre opzioni di stile, come effetti hover, gradienti o spaziatura reattiva.
🛠️ Un consiglio da professionista: Volete un pulsante perfettamente arrotondato? Impostate il raggio del bordo a 100 per un pulsante a pastiglia.
✅Metodo 2: Utilizzo del blocco Buttons di Ultimate Blocks
Se si desidera un maggiore controllo senza scrivere CSS, Blocchi definitivi è un fantastico plugin per Gutenberg da provare. Aggiunge un'interfaccia migliorata Blocco pulsanti costruito tenendo conto della personalizzazione.
L'installazione di Ultimate Blocks è un'operazione semplice.
-
Andare a Plugin
-
Fare clic su Aggiungi plugin
-
Ricerca di "Tableberg"
-
Cliccare Installare, allora Attivare
Dopo installare e attivare Ultimate Blocks, aggiungere il blocco "Pulsanti (blocchi Ultimate)".
Per inserire i pulsanti dei blocchi Ultimate, fate clic sulla piccola icona (+) e cercate "Button (Improved)".
Noterete subito la differenza quando aggiungerete il pulsante Ultimate Blocks. Ecco cosa si può modificare nelle impostazioni dei blocchi:
-
Giustificazione e orientamento dei pulsanti
-
Dimensioni del pulsante
-
Larghezza del pulsante
-
Supporto delle icone (prima o dopo il testo) con varie altre opzioni
-
Supporto per l'animazione
Nella sezione Stili dei pulsanti sono disponibili le seguenti personalizzazioni:
-
Opzione colore per lo stato Normale e Hover
-
Bordo del pulsante
-
Stile dei pulsanti
-
Padding, spaziatura dei blocchi e margine regolabili in Impostazioni dimensioni
-
Opzione CSS personalizzato
Tutte le funzionalità predefinite dei blocchi di pulsanti sono incluse nel blocco Button di Ultimate Blocks. Di seguito è riportato un pulsante personalizzato progettato da Ultimate Blocks, anche se funzionale.
Questo blocco è ideale per i marketer, i blogger e tutti coloro che vogliono che i loro pulsanti call-to-action si distinguano. Si ottiene una flessibilità a livello di design senza scrivere una sola riga di codice.
🎯 Un consiglio da professionista: Utilizzate colori contrastanti per creare una risposta visiva soddisfacente quando gli utenti interagiscono con i vostri pulsanti.
🧩 Bonus: Aggiunta di pulsanti all'interno di una tabella
A volte sono necessari dei pulsanti all'interno di un layoutcome una tabella di prezzi o un confronto di caratteristiche. È qui che un plugin per tabelle a blocchi come Tavolo di lavoro brilla.
Miglior offerta |
||
 |
 |
 |
Apple AirPods Pro di seconda generazione |
SAMSUNG Galaxy Buds 2 Pro |
Google Pixel Buds Pro |
|
|
|
Con Tableberg, ogni cella della tabella si comporta come una mini tela. Ciò significa che è possibile abbandonare il blocco Button dedicato proprio all'interno di una cella. Non siete più bloccati da un testo semplice: potete aggiungere pulsanti CTA come "Acquista ora", "Vedi dettagli" o "Prova gratis" direttamente nelle vostre righe di prezzo.
Le caratteristiche del pulsante dell'Tableberg sono le stesse del pulsante dei blocchi Ultimate.
Volete personalizzare l'aspetto del pulsante all'interno della tabella? Nessun problema. È possibile modificare il raggio del bordo, il padding e persino aggiungere icone, il tutto dall'editor di blocchi.
🛠️ Un consiglio da professionista: Combinate il vostro pulsante con una valutazione a stelle o un nastro all'interno della stessa riga per ottenere un maggiore impatto visivo e migliori conversioni.
Pensieri finali!
Progettare bellissimi pulsanti in WordPress non richiede CSS personalizzati o l'aiuto di uno sviluppatore. Con il blocco Buttons nativo, la versione migliorata di Ultimate Blocks e la flessibilità di strumenti come Tableberg, è possibile creare layout completamente interattivi che hanno un ottimo aspetto e funzionano su tutti i dispositivi.
Niente più link semplici o shortcode obsoleti. Ora avete il pieno controllo, direttamente nell'editor.
Per saperne di più!
