Ciao e bentornata/o sulla rubrica del Fabbro,
La scorsa settimana ti ho parlato delle CTA e di come posizionarle all’interno delle pagine e gli articoli del tuo sito.
Se ti fossi perso l’articolo puoi fare click qui e andare a leggerlo subito, ma poi torna qui, mi raccomando!
Quell’articolo in combinazione con questo di oggi ti darà tutti gli strumenti necessari per creare delle call to action fenomenali!
Così hai realizzato il tuo primo sito web e hai notato che i bottoni del tuo sito sono… anonimi o peggio brutti, ma talmente brutti che non li cliccheresti neanche tu sotto tortura.
Non sottovalutare la questione: è un problema grave.
Se i bottoni del tuo sito non sono belli e in evidenza nessuno li cliccherà e quindi non riuscirai ad acquisire contatti tramite il tuo sito.
In poche parole: il tuo sito diventerà inutile.
Ma come mai i bottoni del tuo sito sono così insulsi? E soprattutto: come puoi modificarli?
La domanda è lecita perché la risposta non è così intuitiva come sembra e, in base al tema WordPress in uso, potresti non avere tante opzioni di personalizzazione tra cui poter scegliere.
Anche avendone, non è detto che tu senza una guida esperta al tuo fianco possa tirare fuori il massimo da quei bottoni, perciò adesso raccogli tutta la concentrazione che puoi e afferra una tazza del tuo caffè preferito: iniziamo!
Perché i bottoni del mio sito WordPress fanno schifo?
Ok, chiariamoci: non è sempre vero. Magari i bottoni del tuo sito non fanno proprio così schifo, però resta il fatto che sono molto basici e che si perdono con il resto dei contenuti.
Innanzitutto un consiglio spassionato: ingrandisci quei bottoni.
Fai in modo che siano ben visibili sulla pagina e non aver paura di renderli ben più grandi rispetto a come sono adesso.
“Va bene Fabbro, ma quanto grandi devo farli?”
Ottima domanda!
Per quanto riguarda il mobile, non esagerare: cercheremo di metterli più in evidenza avvalendoci del colore.
Gli schermi dei telefoni (nonostante mi pare di notare siano sempre più grandi) sono piccoli, perciò evita di occupare tutto lo spazio a disposizione con un singolo bottone!
Su pc il discorso cambia perché abbiamo molto più spazio a disposizione e c’è il rischio che lo sguardo dell’utente non vada a cadere sul bottone.
Per renderti conto di quale possa essere la giusta dimensione fai così: apri sul pc una schermata del tuo sito, alzati dalla sedia, fai due passi indietro e nota se riesci a distinguere chiaramente il bottone dal resto del contenuto.
Se così fosse sei a posto, altrimenti devi lavorare sulla dimensione e/o su altri aspetti del bottone fino a raggiungere questo risultato.
Perché è così maledettamente difficile modificare i bottoni del mio sito WordPress?
Spoiler: in realtà non lo è se leggi fino in fondo questa guida.
Scommetto che a questo punto hai provato con molta difficoltà a lavorare su dimensione e colori dei tuoi bottoni.
Don’t panic: è normalissimo.
Su WordPress, infatti, molte cose sono facili, ma non proprio tutte.
E modificare i bottoni è sfortunatamente una di quelle difficili!
Per tua fortuna, il tema che stai usando potrebbe venirti in aiuto, ma non è sempre il caso.
Proprio per questo motivo ho deciso di illustrarti un metodo valido a prescindere da qualsiasi tema in uso.
Prima di effettuare delle modifiche ai bottoni, però, dobbiamo decidere una cosa: che colori andremo ad usare?
Un po’ di tempo fa ho scritto una guida alla scelta dei colori per il tuo sito tuttora validissima. Puoi andare a consultarla subito facendo click qui.
Oltre all’ormai blasonato sito “coolors” oggi voglio consigliarti un altro sito in grado di darti una mano se sei proprio indeciso su quali colori utilizzare: “Happy Hues”.
Puoi cercarlo su Google o in alternativa fare click qui per raggiungerlo.
Vedrai principalmente due schermate:
- la barra laterale sinistra, sulla quale puoi scegliere tra le combinazioni di colori disponibili;
- la schermata destra, dove vedrai applicati i colori selezionati ai contenuti del sito.
Queste palette di colori funzionano e sono già pronte all’uso, perciò sentiti libero di usarle sul tuo sito.
Scrollando verso il basso vedrai i codici colori della palette e sarai in grado di copiarli semplicemente facendo click sul relativo box.
Facile, no?
“Sì Fabbro, ma poi dove incollo questo codice?”
Se il tuo tema ti mette a disposizione un’opzione per cambiare il colore dei bottoni incollalo pure lì, altrimenti collegati subito alla schermata “Personalizza” di WordPress.
Ma che cacchio è la schermata Personalizza?
Che cacchio è la schermata Personalizza
Innanzitutto ti mostro dove puoi trovarla.
Hai presente la barra laterale sinistra della bacheca WordPress? Trovi la voce “Personalizza” sotto “Aspetto”.
A questo punto ti si aprirà una nuova pagina con dentro:
- una barra laterale sinistra; molto simile a quella del sito Happy Hues, vero?
- Una schermata destra su cui potrai vedere in anteprima le modifiche che andrai ad applicare.
Nello specifico, all’interno della schermata destra vedrai l’anteprima dell’homepage del tuo sito.
Se al posto di questa vorresti vedere l’anteprima di un’altra pagina, allora apri quella pagina in una nuova scheda (però assicurati di essere loggato dentro WordPress).
Adesso guarda in alto, dove c’è la barra nera con il logo WordPress a sinistra, cerca la voce “Personalizza” e cliccala.
Et voilà! Adesso sei dentro la schermata “Personalizza” e stai visualizzando l’anteprima della pagina di tua preferenza.
“Fabbro, come mai non vedo in alto questa barra nera di cui parli?”
Se non vedi la barra è perché non hai effettuato l’accesso da amministratore al tuo sito.
Don’t panic, effettua il login in WordPress e poi ripeti il procedimento.
Adesso, all’interno di “Personalizza”, cerca la voce di menù “CSS aggiuntivo”, sulla barra laterale sinistra.
Ti si aprirà una schermata vuota con dei numeretti a sinistra, uno per ogni riga.
“Aiuto Fabbro, ma che è ‘sta roba?”
All’interno di questa schermata puoi inserire del codice CSS per andare a sovrascrivere le istruzioni del tema relative allo “stile” dei tuoi contenuti.
In poche parole, se i bottoni del tuo tema fanno schifo puoi modificarle usando il CSS.
Che roba è ‘sto CSS?
È un linguaggio codice in grado di apportare modifiche all’aspetto degli elementi del tuo sito.
Non preoccuparti, non si tratta di un vero e proprio linguaggio di programmazione, perciò fidati di me e continua a leggere. Vedrai che modificare l’aspetto dei tuoi bottoni così sarà divertentissimo, promesso!
Prima di scrivere la tua prima riga di CSS, però, dobbiamo fare una cosa un po’ brigosa per andare a capire come si chiama la “classe CSS” che dà vita ai tuoi bottoni.
Quasi ogni elemento del tuo sito (menù, footer, paragrafi, titoli, bottoni e quant’altro) ha delle classi CSS assegnate. A loro volta, tutte le classi CSS contengono dentro di sé delle istruzioni in grado di modificare totalmente il loro aspetto.
Vuoi vedere subito in azione quanto è potente il CSS?
Allora prova a copiare e incollare queste righe di codice dentro alla barra laterale sinistra della tua schermata CSS:
body {
display: none !important;
}
Fatto?
Ops! Cos’è successo? Scommetto che il contenuto della pagina nella schermata destra è completamente scomparsa!
Ommioddio! E adesso? Niente paura, ti basta cancellare queste 3 righe di codice per farla tornare com’era prima.
Visto? Il codice CSS è potentissimo ed è in grado di rivoluzionare totalmente l’aspetto delle pagine sul tuo sito WordPress.
Ma torniamo alla cosa brigosa da fare per trovare la classe CSS dei tuoi bottoni.
Sulla schermata destra fai click col tasto destro del mouse su uno dei bottoni che vuoi modificare e seleziona “ispeziona” (o “analizza elemento”, in base al browser che stai utilizzando questa dicitura potrebbe variare).
Ti si aprirà una finestra in basso sul browser con dentro del codice, ma non spaventarti!
All’interno di questa finestra passa il mouse sulle varie righe di codice finché non vedi bello in evidenza il tuo bottone, come puoi vedere in questa foto:
Vedi quella scritta che comincia con “a.”? Naturalmente nel tuo caso quel che segue “a.” è diverso dalla mia foto.
Adesso devi scrivere quel testo all’interno della schermata CSS e aggiungere una parentesi graffa di apertura e chiusura, tipo così:
a.nome-della-tua-classe {
}
Fatto? Molto bene.
Adesso dentro le parentesi graffe scrivi:
background: #000 !important;
In questo modo dovresti ottenere una porzione di codice simile a questa:
a.nome-della-tua-classe {
background: #000 !important;
}
Se hai fatto tutto per bene, noterai subito che il colore del bottone è diventato nero.
Se non avesse funzionato don’t panic: molto probabilmente hai solo sbagliato a scrivere il nome della classe del tuo bottone.
Nel caso in cui abbia funzionato, adesso torna sul sito Happy Hues e copia il codice colore che preferisci.
Ora torna sulla schermata Personalizza e modifica il codice CSS andando a sostituire il codice colore alla scritta #000 (che è il codice colore per il nero).
Et voilà! Ora il bottone ha il colore che volevi!
Non abbiamo finito però, perché adesso probabilmente potresti aver bisogno di modificare anche il colore del testo del bottone.
Per farlo, dovrai aggiungere sotto l’istruzione “background” l’istruzione “color” con dentro il codice colore che preferisci. Per ora facciamo finta che sia il bianco.
Il tuo codice finale avrà questo aspetto:
a.nome-della-tua-classe {
background: #il codice colore che hai copiato e incollato !important;
color: #fff !important;
}
Il colore del testo del tuo bottone è diventato bianco? Molto bene, allora non ti resta altro da fare che sostituire al codice colore #fff il codice colore che preferisci.
Conclusioni
Oggi hai scoperto un metodo incredibilmente potente per modificare l’aspetto dei bottoni del tuo sito.
E adesso?
Non pensare che sia finita qui! Salva le modifiche sul pannello “Personalizza”, poi però passa il mouse sul bottone.
Molto probabilmente quando passi il mouse sul bottone, quest’ultimo diventerà com’era prima.
Come si può scegliere un colore personalizzato anche al passaggio del mouse?
Purtroppo lo spazio a disposizione di questa guida è terminato, ma don’t panic: la prossima settimana ti darò altre indicazioni per rivoluzionare per sempre i tuoi bottoni!
Per non perderti la seconda parte di questa guida 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
