Nel post precedente abbiamo parlato dell’importanza di gestire lo stile del tuo sito dal customizer e non dal tab Design all’interno di ogni modulo Divi. Questo per il semplice fatto che ogni modifica potrà essere gestita più facilmente e da un unico posto.
In questo post vedremo nella pratica come fare.
Il customizer di WordPress
Il customizer è quella schermata che si apre andando dall’amministrazione WordPress, su Aspetto – Personalizza.
Il customizer una volta su WordPress non esisteva. Ogni modifica di stile andava fatta sul foglio style.css o custom.css relativo al tema (o meglio al tema child) che si stava usando. Quindi solo codice.
Poi alcuni temi tra i più famosi hanno iniziato ad introdurlo per facilitare la modifica di font e colori, e a partire dalla versione 3.5 di WordPress lo abbiamo avuto tutti. Il customizer, facilita la personalizzazione di stile del tema utilizzato, fornendo anche una anteprima di ciò che si sta modificando. Averlo nativamente su WordPress significa poterlo utilizzare su ogni tema scelto.
Il customizer in Divi: cosa si può modificare
I vari temi possono avere delle voci personalizzate all’interno del customizer: ad esempio Divi ha Header e Navigazione, da cui scegliere il formato dell’intestazione del sito con logo a sinistra o centrato, ecc. e anche come far apparire il menu primario; oppure i Bottoni, del tutto personalizzabili, anche nel passaggio del mouse; o ancora il Footer, dove si potrà scegliere quali elementi inserire al fondo di ogni pagina, personalizzando anche il copyright e le informazioni legali, pubblicando un menu per il footer.
Modificare font e colori
Ecco uno dei primi passi da fare appena si installa il tema Divi e un child theme: aprire il customizer e scegliere font, colori e stile dei bottoni per tutto il sito.
Dalla bacheca WordPress cliccare su Aspetto – Personalizza. Si aprirà la schermata con anteprima del sito e il customizer accanto.
Selezioniamo la voce Impostazioni generali – Tipografia per scegliere una coppia di font per i titoli e una per i paragrafi in tutto il sito.
I font in elenco sono visionabili con le anteprime utilizzando il sito Google Font
Da qui si può anche scegliere la dimensione del corpo del testo e la dimensione di tutti i titoli H1, oltre ad alcuni aspetti di stile come i grassetti il tutto maiuscolo, la distanza tra le lettere e l’altezza riga.
Inoltre, sempre da Tipografia, si potranno anche impostare i colori per link, titoli e corpo.
Modificare i bottoni di Divi
Altra voce del customizer utile fin da subito è la voce Bottoni.
Tornando indietro alla schermata principale del customizer, quella in cui abbiamo scelto Impostazioni generali, sceglieremo qui la voce Bottoni, che aprirà alle due voci Stile Bottoni e Stile Bottoni all’Hover (ovvero al passaggio del mouse).
Iniziando dallo Stile Bottoni si potranno scegliere le dimensioni e il colore del testo, il colore dello sfondo, eventualmente un bordo del bottone con colore e spessore, e ancora se si vuole o no un’icona sul bottone (scegliendo anche l’icona da far apparire). Simili elementi saranno personalizzabili anche alla voce Stile Bottoni all’Hover.
Video: modificare i font, i colori e i bottoni
Chiudo questo post lasciandovi anche il video di esempio sul nostro tema Havel, per modificare font, colori e bottoni dal customizer.
