Benvenuto a questa lezione del nostro corso base su WordPress, dove scoprirai come usare l’opzione Personalizza Aspetto di WordPress, lo strumento integrato (chiamato anche Customizer) che ti permette di apportare modifiche visive al tuo sito in tempo reale, senza scrivere una singola riga di codice.
Infatti, una volta completata l’installazione del sito e scelto il tema, il passo successivo cruciale è definire la sua identità visiva. A tale scopo, WordPress offre uno strumento nativo incredibilmente potente e intuitivo: l’Opzione Personalizza Aspetto, conosciuta anche come WordPress Customizer.
Questo strumento integrato è il punto di partenza ideale per chiunque voglia apportare modifiche visive al proprio sito in tempo reale, senza scrivere una singola riga di codice.
Oggi, in questa guida completa al WordPress Customizer, ti illustreremo passo dopo passo come accedere e utilizzare ogni sezione di questo pannello per trasformare l’aspetto grafico e funzionale del tuo tema. Imparerai a configurare l’Identità del Sito, gestire Colori e Font e molto altro.
Se invece stai cercando una guida completa per personalizzare un sito WordPress tramite Menu, Widget, Temi e modifiche avanzate, torna alla Lezione 4 per una descrizione completa e più generale.
Corso base WordPress Lezione 5
Con l’opzione personalizza aspetto di WordPress, completiamo l’impostazione di un sito web base.
Per discutere in maniera esaustiva, ho deciso di dedicare un intero articolo al tema, data la vastità di opzioni offerte dal customizzatore che richiedono un’analisi approfondita.
Personalizzare l'aspetto di WordPress con il suo customizzatore
Vediamo subito cosa offre questa opzione cliccando sulla voce personalizza evidenziata nell’immagine sopra. Il risultato è illustrato qui sotto.
A destra si può vedere l’aspetto della pagina principale, mentre a sinistra sono visibili le opzioni modificabili del tema in uso.
In questo corso su WordPress stiamo usando il tema standard Twenty Sixteen ma altri temi WordPress possono includere voci aggiuntive che offrono più opzioni per personalizzare l’aspetto del sito.
Modificare l'aspetto base del tema con il WordPress Customizer
Quello che vedi ora come pagina principale del sito è il risultato delle impostazioni standard, alcune di loro possono essere cambiate semplicemente cliccando sulle icone a forma di matita con sfondo blu che vedi nella pagina.
Si tratta di un’ulteriore possibilità data allo sviluppatore che non approfondiamo ora in quanto, quello c’interessa è imparare ad usare la personalizzazione del tema attraverso il WordPress Customizer.
Analizziamo perciò il menu principale voce per voce.
Menu principale del Customizer
Partiamo dal basso, quindi dalla barra orizzontale con quattro link (tre icone e un testo).
Il link testuale a sinistra (“Nascondi i controlli“), fa scorrere il menu personalizza a sinistra e quindi permette di vedere la pagina del sito a pieno schermo, cliccando invece su ognuna delle tre icone possiamo vedere come viene visualizzata la pagina su dispositivi diversi: desktop (standard), tablet e smartphone.
L’icona sottolineata indica sempre il tipo di dispositivo in uso al momento (in questo caso un monitor di PC o LAPTOP), cliccando sulle altre due icone si vedrà la pagina come se stessi usando un tablet o uno smartphone.
Andiamo ora in alto, notiamo un pulsante blu: l’indicazione “Pubblicato” è di colore azzurro chiaro e il fatto che sia disabilitato indica che in questo momento non ci sono modifiche da salvare.
Quando inizieremo a farle il pulsante sarà abilitato e la descrizione “Pubblicato” cambierà in “Pubblica” e diventerà di colore bianco.
Personalizzare l'aspetto di WordPress con le voci del menu principale
Identità del Sito: Titolo, Motto, Logo e Favicon
Questa è la prima e più importante sezione del menu “Personalizza”, perché ti permette di definire l’identità visiva e testuale del tuo sito. Ogni dettaglio, dal titolo al logo, contribuisce a creare un’esperienza utente memorabile e a rafforzare la tua riconoscibilità.
Titolo del sito e Motto: il titolo apparirà nella parte superiore del sito e nelle schede del browser, mentre il motto è una breve frase che descrive il tuo progetto. Scegli un titolo chiaro e un motto che catturi l’attenzione.
Logo: se possiedi un logo, puoi caricarlo qui. Assicurati che sia in un formato ottimizzato per il web (es. PNG) e che si adatti bene al design del tuo tema.
Favicon: è la piccola icona che appare nella barra degli indirizzi del browser. Scegli un’immagine che rappresenti il tuo brand in modo semplice e diretto, preferibilmente con un’immagine quadrata e di buona qualità.
Potresti aver già inserito queste informazioni in fase d’installazione o dal menu impostazioni (ne abbiamo parlato nella lezione 2, la nostra guida definitiva al setup e configurazione dell’aspetto WordPress), in tal caso prosegui.
Colori, immagini e menu: la personalizzazione al tuo servizio
Una volta definita l’identità di base, puoi passare alla personalizzazione visiva vera e propria. Le opzioni disponibili possono variare a seconda del tema, ma di base ti permetteranno di controllare gli elementi più importanti del tuo sito.
La sezione “Colori del tema” ti consente di cambiare lo schema cromatico del tuo sito. Per un risultato professionale, scegli una palette di colori che sia in linea con il tuo logo e che garantisca una buona leggibilità del testo.
Le sezioni “Immagine dell’header” e “Immagine di sfondo” ti permettono, invece, di caricare una testata per il tuo sito e un’immagine per lo sfondo.
In quest’ultimo caso, ricorda di utilizzare immagini ottimizzate per il web, per non rallentare il caricamento delle pagine.
Colori predefiniti del tema
Parlando di personalizzazione dei colori, cominciamo a notare le prime differenze che incontreremo utilizzando temi diversi.
Il tema in uso (Twenty Sixteen) permette ad esempio di scegliere uno schema di colore base valido per tutto il sito, è una particolarità che non capita spesso.
Così come è raro che si possa modificare dal pannello Personalizza 5 colori o più. Infatti, a parte alcuni temi gratuiti, si può modificare soltanto il colore dello sfondo e un altro elemento a discrezione dell’autore del tema, come il colore del testo.
In questo caso, disponiamo di un tema gratuito che offre ampie possibilità di personalizzazione.
La scelta dei colori è fondamentale per il branding del tuo sito. Scegli perciò una palette che sia in linea con il tuo logo e che faciliti la lettura, specialmente se intendi vendere prodotti o servizi.
NOTA
Sia per la modifica dei colori che per altre caratteristiche di personalizzazione dell’aspetto, è preferibile usare i CSS. Per far questo usa l’opzione inserita nel menu personalizza (CSS aggiuntivo) della quale parlo più avanti.
Immagine dell'header
Anche in questo caso, la dimensione dell’immagine accettata è a discrezione dell’autore del tema e da come è stato progettato.
Le misure suggerite qui sono quelle standard, non è detto però che usando un tema commerciale si abbiano le stesse limitazioni.
L’immagine dell’header sarà visualizzata nella pagina principale dei tuoi articoli, ovvero nella homepage del tuo sito se desideri creare un blog.
Immagine di sfondo del sito
C’è stato un periodo in cui l’immagine di sfondo dei siti web era molto diffusa, specialmente negli anni ’90, e in certi casi lo è ancora.
Con la UX attuale, l’immagine di sfondo sembra essere progettata principalmente come un mezzo per posizionare un banner pubblicitario a pagina intera al di sotto del contenuto principale.
Una scelta discutibile, anche per quanto riguarda la velocità di caricamento del sito (importantissima ai fini della ottimizzazione SEO). Resta comunque un sistema in più per personalizzare l’aspetto di WordPress.
Personalizza il menu del sito
Il menu rappresenta una delle personalizzazioni e configurazioni essenziali per ogni sito web.
Un menu ben organizzato permette infatti agli utenti di accedere rapidamente ai contenuti più rilevanti del sito.
Ti segnalo che, usando il personalizzatore si possono fare le stesse impostazioni già descritte dalla bacheca.
Inoltre con il personalizzatore puoi tenere sott’occhio più informazioni contemporaneamente e realizzare e posizionare i menu in modo visuale.
NOTA: trovi una descrizione dettagliata di come realizzare al meglio il menu nella lezione 4 di questo corso base.
Struttura e Navigazione del Sito
Personalizzare l'aspetto di WordPress con i menu
La sezione “Menu” ti offre la possibilità di creare e gestire i menu di navigazione, che sono il cuore dell’esperienza utente.
Puoi personalizzare le voci, le etichette e la loro posizione. Anche i “Widget“, che trovi in una sezione dedicata, sono fondamentali.
Sono dei piccoli blocchi di contenuto che puoi posizionare nelle aree del tuo sito consentite dal tema (es. barre laterali o footer), come i link ai social, gli ultimi articoli o una barra di ricerca.
Nel nostro caso abbiamo creato un menu home inserendo la pagina e l’articolo di esempio di WordPress e aggiungendo la categoria standard “senza categoria“, Inoltre, abbiamo creato un tag chiamato “Plugin” e lo abbiamo inserito nel menu.
Le voci visualizzate sono state create in una fase precedente, selezionando dalla dashboard di WordPress l’opzione “Menu“. Ora tramite il personalizzatore è possibile modificare alcune delle loro caratteristiche.
Ad esempio, cliccando sulla freccia in prossimità della voce “Articolo” si apre un menu a tendina che permette la modifica delle sue opzioni (immagine sotto).
Personalizza le voci di menu esistenti
Come sempre è molto intuitivo quello che puoi fare. In questo caso puoi:
- Modificare la voce del menu (etichetta di navigazione).
- Inserire una frase che appare quando il mouse è sulla voce del menu (attributo titolo).
- Aggiungere una descrizione.
Quest’ultima può non essere visualizzata se il tema non lo consente.
Le stesse operazioni puoi farle per le altre voci, indipendentemente che si tratti di link ad articoli, pagine o altro.
Ma non è tutto, tornando all’immagine del menu home puoi notare che grazie all’interfaccia personalizza aspetto di WordPress puoi decidere dove mostrare il menu e se aggiungere una pagina nuova automaticamente ogni volta che ne crei una.
Scegli, modifica o crea il menu principale del sito
Questa impostazione può creare qualche confusione, ci si chiede infatti per quale motivo debba esserci un ulteriore sistema quando il precedente è più che sufficiente.
Effettivamente sembra ridondante, in realtà il suo uso principale e la comodità di averlo sono quelle di selezionare la posizione di un menu e renderlo principale, quando ne hai più di uno.
Inoltre sempre da qui puoi decidere quale sarà il menu dedicato ai social, oppure crearlo se non esiste per poi assegnarlo a tale posizione.
In ogni caso anche queste sono operazioni che puoi fare dalla dashboard di WordPress, cliccando sulla voce “Menu” sotto l’opzione “Aspetto“.
Personalizzare l'aspetto di WordPress con i widget
Come avrai notato il menu personalizza aspetto di WordPress ha un’interfaccia molto confidenziale e intuitiva, al punto tale che spesso mi trovo a ripetere gli stessi suggerimenti.
Anche per i widget vengono mostrate le posizioni dove si possono inserire, naturalmente sono quelle consentite da chi ha progettato il tema in uso.
Nel nostro tema, ad esempio, possiamo avere i widget nella barra laterale e in altre due posizioni sotto il contenuto.
Se clicchiamo sulla freccia corrispondente alla posizione “Barra laterale” vengono mostrati i widget già presenti.
Puoi eliminarli, inserirne di nuovi, oppure cambiare (o scrivere) il titolo per ognuno di loro, questo per ogni posizione disponibile.
CSS aggiuntivo: la soluzione per piccole modifiche grafiche
L’opzione “CSS aggiuntivo” è la soluzione perfetta se hai bisogno di apportare piccole modifiche grafiche al tuo tema senza correre il rischio di danneggiare il codice.
In questo campo puoi inserire le tue regole CSS personalizzate, sapendo che non andranno perse quando aggiornerai il tema. È il modo più sicuro per personalizzare in modo avanzato il design senza dover toccare direttamente i file di sistema.
Sono impostazioni di visualizzazione della grafica (a questo servono i file CSS), che si aggiungono ai CSS nativi e a parità di comando li sostituiscono.
Perciò se per esempio vuoi cambiare un colore nel tuo sito è preferibile farlo da qui.
Chiaramente devi avere confidenza con il codice CSS per evitare problemi di visualizzazione del sito.
Nel caso tu non abbia esperienza in questo meta linguaggio, trovi un’ottima guida aggiornata sul sito di html.it.
Imposta la homepage del tuo sito
La sezione “Scegli la homepage” è cruciale per la navigazione del tuo sito.
Qui puoi decidere se mostrare nella pagina iniziale gli ultimi articoli del tuo blog (ideale per i siti di notizie o blog) o una pagina statica specifica (ideale per i siti aziendali o portfolio).
Il suggerimento e le indicazioni che leggi sono molto chiare su quello che puoi fare.
Se hai già inserito articoli e pagine puoi scegliere cosa mostrare nella tua home: una pagina statica o la raccolta degli ultimi articoli.
Nel caso che hai una o più pagine statiche e una raccolta di articoli che vuoi mostrare in un blog, puoi assegnare due pagine principali.
La pagina statica la selezionerai dall’elenco mostrato sotto la voce “Home page“, scegli invece quella che raccoglierà tutti gli articoli del blog dall’elenco “Pagina articoli“.
Conclusioni: come usare l'opzione personalizza aspetto di WordPress
In conclusione, in questa quinta lezione del corso WordPress abbiamo visto come usare l’opzione personalizza aspetto di WordPress. A questo punto l’impostazione base del sito è completa, ora hai ora a disposizione tutti gli strumenti necessari per dare al tuo sito un aspetto unico e professionale senza la necessità di avere competenze di programmazione.
Lo strumento “Personalizza Aspetto” offre infatti un controllo immediato su molti elementi del design del tuo tema ed è il punto di partenza per modifiche veloci, ma la vera efficacia risiede però nel comprendere come queste modifiche influenzeranno la visualizzazione sui dispositivi mobili.
Per integrare l’uso del Customizer con i principi di design responsive e personalizzazione aspetto, ti consigliamo quindi di leggere anche la nostra guida al design responsive.
Nel prossimo appuntamento impareremo a scrivere i contenuti del nostro sito in modo che i motori di ricerca li percepiscano come di qualità e siano utili e graditi ai tuoi lettori.
É un passaggio fondamentale se vuoi realizzare un sito WordPress che ti promuova online. Ti do quindi l’arrivederci alla prossima lezione, dove vedremo come scrivere un articolo efficace e ottimizzato.
- Vuoi un sito web professionale per la tua attività?
Contatta senza impegno la nostra agenzia web per un preventivo gratuito!
Lascia un commento