Ecco perché i bottoni del tuo sito fanno schifo – parte 2

Ciao e bentornata/o sulla rubrica del Fabbro,
La scorsa settimana abbiamo parlato di bottoni e di quanto siano importanti per potenziare al massimo le tue call to action.

Questa è la seconda parte di quell’articolo, perciò se ti fossi perso l’introduzione, puoi recuperarla subito facendo click qui.

Ecco cosa ti prometto oggi: dopo aver letto questo articolo i tuoi bottoni saranno perfetti, sia su desktop che mobile. parola di Fabbro!

Non voglio spoilerare troppo subito, però

ti insegnerò un metodo incredibile per manipolare totalmente l’aspetto dei tuoi bottoni sui dispositivi mobile.

Hai presente le righe di codice che ti ho fatto inserire nel pannello “Personalizza” di WordPress martedì scorso?

Molto bene! Partiremo da lì e perfezioneremo il tutto per assicurarci che i tuoi bottoni siano più belli, più visibili e soprattutto più efficaci!

Ci assicureremo anche che siano responsive, in modo tale da massimizzare le conversioni delle call to action su tutto il tuo sito.

Con i bottoni che avrai allora sarà impossibile per i visitatori del tuo sito non cliccarli, li renderemo irresistibili!

Infine, ti mostrerò anche come aggiungere una leggera ombreggiatura ai tuoi bottoni, per far sì che “stacchino” dallo schermo e dargli un po’ di tridimensionalità.

Scommetto che non vedi l’ora di iniziare, perciò adesso raccogli tutta la concentrazione che puoi e afferra una tazza del tuo caffè preferito!

caffè

Dove eravamo rimasti…

Ah sì! Ora ricordo:
ti avevo mostrato come personalizzare i colori dei tuoi bottoni ma si era creato quell’inconveniente per cui, una volta passato su il mouse, questi sono tornati al loro colore originario.

Anche se nel tuo caso questo piccolo inconveniente non sia capitato, devi comunque seguire questo passaggio per avere controllo totale sul colore.

Mi spiego meglio.

Di solito, quando passi il mouse su un bottone, siamo abituati a vederlo assumere un colore leggermente più scuro.

Ti sei mai chiesto come mai?

Beh, per evidenziarlo e mettere al corrente l’utente che sta per cliccarlo e dopo accadrà qualcosa.

Ma come si effettua questa modifica?

Come modificare il colore dei bottoni al passaggio del mouse

Torniamo un secondo al codice della scorsa settimana perché partiremo da lì.

Eccolo, dovrebbe essere più o meno così (naturalmente il tuo non sarà mai identico al mio):
a.nome-della-tua-classe {
background: #il codice colore che hai copiato e incollato !important;
color: #fff !important;
}

Benissimo, adesso copia il tuo vecchio codice e incollalo esattamente due righe più in basso all’interno del pannello Personalizza.

In pratica dovrai ritrovarti con due porzioni di codice identiche.

Sulla seconda porzione di codice aggiungi la scritta “:hover” subito dopo il selettore della classe CSS.

Ti ritroverai con la seconda porzione di codice più o meno simile a questa:
a.nome-della-tua-classe:hover {
background: #il codice colore che hai copiato e incollato !important;
color: #fff !important;
}

Mi raccomando, fai attenzione a come aggiungi questa scritta e in generale a rispettare la punteggiatura indicata: spesso basta uno spazio indesiderato o un errore di digitazione banale per compromettere il funzionamento del codice.

Don’t panic: il tuo sito non si può rompere in questo modo, perciò sentiti libero di sperimentare.

Se accade qualcosa di inaspettato sulla schermata destra dell’anteprima puoi sempre cancellare il codice e far tornare tutto come prima.

Ok! Adesso cerchiamo di capire cosa abbiamo fatto aggiungendo l’istruzione :hover al codice.

In poche parole abbiamo detto al sistema:

“l’istruzione tra parentesi graffe deve modificare esclusivamente l’aspetto dei bottoni quando ci si passa sopra il mouse”.

Adesso quindi non ci resta che sostituire il colore indicato dopo la scritta “background:” con una tonalità leggermente più scura.

Consiglio: fatti aiutare dal sito coolors per trovare il colore più adatto alla situazione. Incollaci dentro quello di base (inserito nella prima porzione del codice), fai click su “Shadows” e scegli un colore che sia più scuro di almeno 2 stop.

Lascia sempre la scritta “!important” dopo aver indicato il codice colore perché serve per sovrascrivere le impostazioni di default del tema WordPress attivo.

In altre parole, se la togli c’è rischio che il colore al passaggio del mouse resti identico a prima.

Fatto? Ottimo!

Adesso nell’anteprima a destra passa il mouse sul bottone e guarda se è filato tutto liscio.

Che ne diresti di aggiungere anche una leggera ombreggiatura al bottone per “staccarlo” dallo schermo e dargli un po’ più di tridimensionalità?

Come aggiungere un’ombreggiatura ai tuoi bottoni

Questa operazione può rivelarsi molto efficace soprattutto per i bottoni su sfondi chiari.

Prenditi un minuto per osservare questo bottone:

bottone con ombreggiatura

Sembra quasi uscire fuori dallo schermo, vero?

Per ottenere questo risultato basta aggiungere solo un po’ di ombreggiatura.

Apri nuovamente il pannello “Personalizza” di WordPress.

Torna sul primo blocco di codice, ovvero quello che abbiamo scritto insieme la settimana scorsa.

Quello che devi fare adesso è semplicemente aggiungere uno spazio prima della chiusura della parentesi graffa e scriverci dentro questa istruzione:
box-shadow: 0 8px 6px -6px black !important;

Il tuo codice adesso dovrebbe essere molto simile a questo:
a.nome-della-tua-classe:hover {
background: #il codice colore che hai copiato e incollato !important;
color: #fff !important;
box-shadow: 0 8px 6px -6px black !important;
}

Nota: può darsi anche che nel tuo caso non ci sia bisogno di inserire la scritta finale “!important” sull’ultima istruzione, soprattutto se di default i bottoni del tuo tema non hanno un’impostazione di ombreggiatura.

Se così non fosse lascia lì la scritta e goditi l’ombreggiatura sui tuoi bottoni!

E adesso? Abbiamo finito? Quasi. Diciamo che manca ancora soltanto la parte… più importante! Perciò se ne hai bisogno afferra un’altra tazza del tuo caffè preferito ma poi torna davanti allo schermo e continua a leggere!

Adesso dobbiamo verificare che i bottoni abbiano l’aspetto migliore possibile anche su cellulare!

Come modificare l’aspetto dei tuoi bottoni sul cellulare

Apri ancora una volta il pannello “Personalizza” di WordPress e nota bene questa icona:

icona cellulare

Vista? Adesso cliccaci su.

Se hai fatto tutto per bene in questo momento vedrai rimpicciolire la schermata di anteprima sulla destra.

Molto bene: quella è l’anteprima dell’aspetto che avrà la pagina del tuo sito su cellulare.

Attenzione: la riproduzione dell’anteprima è molto fedele, ma non precisissima al 100%. Per questo motivo, quando avremo finito dovrai dare un’occhiata al tuo sito direttamente dal tuo cellulare.

Anche stavolta dovrai inserire del codice CSS all’interno del pannello; nello specifico devi copiare e incollare questo dopo le altre istruzioni:
@media (min-width: 320px) and (max-width: 480px) {

}

Come avrai intuito, all’interno delle parentesi graffe scriveremo altre istruzioni.

Ma cos’è quella roba “@media min” ecc.?

In pratica stiamo dicendo al sito:
mostra le prossime istruzioni soltanto su schermi larghi minimo 320px e massimo 480px.

Si tratta dell’istruzione standard per schermi di cellulari.

Adesso osserva i bottoni del tuo sito e tieni presente che andremo a modificarlo soltanto per cellulari.

Quello che intendo è:

effettua questo passaggio solo dopo aver sistemato i bottoni su pc, lascia per ultimo questo passaggio perché è specifico per cellulari.

Il testo dei bottoni sui cellulari è troppo grande?

Allora modificalo così:
@media (min-width: 320px) and (max-width: 480px) {

a.nome-della-tua-classe {
font-size: 14px !important;
}

}

Come vedi questo blocco è molto simile a quelli che abbiamo utilizzato in precedenza, solo che va collocato all’interno delle parentesi riferite a @media per far sì che le istruzioni interessino esclusivamente la visualizzazione dei bottoni da cellulare.

Nota: il pixel è una delle varie unità di misura che puoi usare sul web. 14px è un valore che ho sparato a caso, se vedi che il testo è ancora troppo grande o troppo piccolo modificalo in 10px oppure 20px. Le dimensioni varieranno anche alla grandezza base del font che stai utilizzando, perciò non posso fornirti un valore preciso.

Modifica la grandezza in pixel varie volte finché non trovi la grandezza ideale del carattere.

Puoi anche utilizzare valori come 14.5px (cioè per intenderci quattordici pixel e mezzo) o 10.3px.

Sotto font-size potresti anche inserire un’istruzione “background” per cambiare il colore dei bottoni su cellulare (nel caso volessi abbiano un aspetto diverso dalla versione pc).

E se ad esempio tu volessi far sì che i bottoni abbiano un’ombreggiatura su pc ma disattivarla su cellulare?

Allora dovresti aggiungere sotto font-size la riga:
box-shadow: none !important;

Se anche modificando l’ampiezza del carattere i bottoni dovessero risultare troppo grandi, puoi agire modificando il valore “width”, ovvero larghezza.

Per farlo, anziché usare l’unità di misura px useremo un valore percentuale.

Ancora sotto font-size aggiungi:
width: 70% !important;

Anche in questo caso il numero 70 è sparato a caso e dovrai modificarlo in base a quanto vuoi ridurre la larghezza del bottone.

Sei ancora qui?

Molto bene, hai appena eseguito una tecnica da maestro di WordPress e sei in grado di modificare i bottoni del tuo sito a piacimento!

Conclusioni
C’è ancora qualche altra modifica che vorresti fare sui bottoni e che non ti ho mostrato nella guida?

Allora fammelo sapere nei commenti e ti mostrerò come fare!

Se invece hai riscontrato qualche problema durante l’inserimento del codice scrivimi comunque un commento qui sotto: ti aiuterò a far funzionare tutto per bene.

Stesso discorso per quanto riguarda le guide del futuro:

vuoi che ti continui a parlare di CSS nelle prossime guide? Fammelo sapere e pubblicherò ancora articoli a riguardo!

Come abbiamo visto in queste due settimane modificare i bottoni di un sito WordPress può non sempre essere facilissimo e ciò dipende in gran parte dal tema in uso.

Adesso però sei in grado con questa tecnica di modificarli a tuo piacimento, a prescindere da qualsiasi tema!

Per non perderti altre guide come questa iscriviti subito alla rubrica del Fabbro!

Fai click qui, compila il form e preparati a ricevere in anteprima ogni mio articolo direttamente all’interno del tuo indirizzo email preferito!
Vuoi scoprire altri metodi infallibili per gestire il tuo sito web al meglio senza dover prendere a martellate il tuo computer? Allora ho una buona notizia per te: è uscito da poco il mio primo libro: “Forgia il tuo sito web”!

Al suo interno ti svelerò tutti i trucchi più rapidi e le soluzioni migliori per realizzare e gestire in autonomia il sito web della tua azienda.

Per farti capire quanto è utile ti dico una cosa: puoi fare click qui e acquistarlo senza neanche dover prima afferrare una tazza del tuo caffè preferito!

Continua a seguirmi e vedrai che presto per te sarà facilissimo usare il martello per spaccare il web!

A martedì prossimo,
Il Fabbro

Tags

Commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Copyright 2024 © Upbrain srl | Via Giovanni Tommaso Blanch 22, 80143 – Napoli
P.iva 03625651207 – Cap. soc.: 10.000 euro – Nr. REA: NA-1074376
Ufficio del registro delle imprese di Napoli

Apri la chat
Hai bisogno di aiuto?
Ciao 👋
Hai bisogno di aiuto?