Personalizza aspetto di wordpress copertina

Come usare l’opzione personalizza aspetto di WordPress

Con la lezione 5 di oggi vediamo come usare l’opzione personalizza aspetto di WordPress, una delle più importanti del CMS. Il personalizzatore di WordPress, sempre presente in tutti i temi, dà la possibilità d’impostare le caratteristiche grafiche e l’aspetto del sito. Vediamo come si fa.

Corso base WordPress Lezione 5

Come usare l’opzione personalizza aspetto di WordPress

Modifica della grafica e presentazione del sito

Con l’opzione personalizza aspetto di WordPress, completiamo l’impostazione di un sito web base.

Per poterne parlare nel modo più completo possibile ho voluto dedicargli un articolo intero, perché le numerose possibilità fornite dal customizzatore necessitano di uno spazio dedicato.

Opzione personalizza aspetto di wordpress menu
La voce di menù per personalizzare l'aspetto di WordPress

Personalizza l’aspetto di WordPress con il suo customizzatore

Vediamo subito cosa offre questa opzione, clicchiamo quindi sulla voce personalizza evidenziata nell’immagine sopra.

Il risultato è quello qui sotto. Sulla destra è mostrato l’aspetto della pagina principale, mentre a sinistra ci sono le opzioni modificabili del tema in uso.

Come detto in altri temi possono esserci ulteriori voci, fornendo quindi maggiori opzioni per personalizzare l’aspetto del sito.

Menu generale opzione personalizza aspetto di WordPress
Cosa visualizzi all'apertura del menù PERSONALIZZA di WordPress

Modificare l’aspetto base del tema installato

Quello che vedi ora come pagina principale del sito è il risultato delle impostazioni standard.

Alcune 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 però non approfondiamo in quanto a noi interessa usare la personalizzazione del tema con il customizzatore interno.

Analizziamo il menù principale voce per voce.

Menù principale del personalizzatore

Partiamo dal basso, quindi dalla barra orizzontale con quattro link utili.

Il primo a sinistra (‘Nascondi i controlli’), permette di vedere la pagina del sito a pieno schermo facendo scorrere il menù personalizza, gli altri tre ci mostrano invece come è visualizzata dai dispositivi desktop (standard), tablet e smartphone.

La sottolineatura dell’icona indica il tipo di dispositivo in uso (in questo caso un monitor di PC o LAPTOP), cliccando sugli altri due vedi invece la pagina del sito come se stessi usando un tablet o uno smartphone.

Il menu principale dell'opzione personalizza sito di WordPress
Tutte le voci del menù personalizza

Notiamo poi un grosso pulsante blu in alto: l’indicazione ‘pubblicato’ di colore azzurro chiaro e il fatto che sia disabilitato indicano che non ci sono modifiche da salvare.

Quando inizieremo a farle il pulsante sarà abilitato e la descrizione ‘pubblicato’ cambierà in ‘pubblica’, diventando di colore bianco.

A quel punto premendolo, avremo il salvataggio e la pubblicazione delle modifiche.

Contattaci subito per un preventivo gratuito

Creazione siti web professionali

Per promuoverti on line in modo efficace ordina adesso il tuo nuovo sito web.

Personalizza l’aspetto di WordPress inserendo titolo e motto

Cosa fanno le voci di menù dell'opzione personalizza

Denominazione del sito

Il primo aspetto di cui occuparci riguarda la descrizione del sito, qui puoi scrivere il titolo e il suo motto o modificarli.

Potresti infatti aver già inserito queste informazioni in fase d’installazione o dal menù impostazioni (ne abbiamo parlato nella lezione 2).

Puoi scegliere se visualizzare il motto o no: se decidi che è utile comparirà nella barra del menù sotto il nome del sito.

Inoltre puoi aggiungere il logo e la favicon, ovvero come suggerito nella nota, quell’icona che viene mostrata nella scheda del browser quando si apre una delle pagine del tuo sito WordPress.

 

Denominazione del sito WordPress con titolo e motto
Personalizzazione di nome e sottotitolo del sito

Colori predefiniti del tema

Parlando della personalizzazione dei colori, iniziamo a notare le prime differenze alle quali andremo incontro utilizzando temi diversi.

Quello in uso (Twenty Sixteen) permette ad esempio di scegliere uno schema di colore base valido per tutto il sito, questa è una particolarità che non capita spesso.

Così come è raro il poter modificare dal pannello Personalizza ben 5 colori o più. Infatti eccetto alcuni casi (usando temi free), al massimo si può intervenire sul colore dello sfondo e un altro a scelta dell’autore del tema (il colore del testo per esempio).

In questo caso abbiamo a disposizione un tema gratuito con buone possibilità di personalizzazione.

Opzione personalizza aspetto di wordpress colori predefiniti
Modifica dei colori predefiniti
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 menù personalizza (CSS aggiuntivo) della quale parlo più avanti.

Immagine dell’header

Anche in questo caso è a discrezione dell’autore del tema, in base a come lo ha creato, la dimensione accettata dell’immagine.

Le misure suggerite qui sono standard, non è detto però che usando un tema commerciale si abbiano le stesse limitazioni.

L’immagine dell’header è a tutti gli effetti quella che verrà mostrata nella pagina principale dei tuoi articoli (il tuo blog) e di conseguenza nella home del tuo sito se quello che vuoi realizzare è un blog.

Personalizza l'immagine dell'header di un sito WordPress
L'immagine della testata (header) del sito

Contattaci subito per un preventivo gratuito

Assistenza sito WordPress

Per un intervento o un contratto di assistenza per il tuo sito WordPress, contattaci.

Immagine di sfondo del sito

Un tempo l’immagine di sfondo del sito era parecchio usata (anni ’90) e in alcuni casi lo è ancora.

Per come è concepita però la UX attuale pare più che altro un sistema per inserire un banner pubblicitario a tutta pagina sotto il contenuto.

Una scelta discutibile anche per quanto riguarda la velocità di caricamento del sito (importantissima ai fini della ottimizzazione SEO), resta comunque un metodo per personalizzare l’aspetto del sito.

Opzione personalizza aspetto di wordpress immagine sfondo
Scelta dell'immagine di sfondo

Personalizza il menù del sito

Si tratta di una delle personalizzazioni e impostazioni fondamentali per ogni sito.

Con un menù ben strutturato offri all’utente un accesso più rapido ai contenuti più importanti del sito.

Dell’argomento menù trovi una descrizione di come realizzarlo al meglio nella lezione 4 di questo corso base (ti consiglio di leggerlo).

Utilizzando il personalizzatore puoi fare le stesse cose descritte e impostabili dalla bacheca.

La personalizzazione dell'aspetto di WordPress con i menu
La personalizzazione dei menù di WordPress

Inoltre con il personalizzatore puoi tenere sott’occhio più informazioni contemporaneamente e al tempo stesso realizzare e posizionare i menù in modo visuale.

Usare personalizza aspetto di WordPress per definire i menù

Come impostare e creare i menù con il personalizzatore

Come vedi nel menù home abbiamo inserito la pagina e l’articolo di esempio di WordPress e aggiunta la categoria standard ‘senza categoria’, inoltre abbiamo creato un tag che abbiamo chiamato ‘Plugin’ e quindi inserito nel menù.

Cliccando sulla freccia della voce Articolo si apre la tendina che abilita alla modifica delle sue opzioni (vedi foto).

Per poter avere quei campi visibili, si è dovuto selezionarli in una fase precedente, tramite l’opzione menù dalla dashboard di WordPress (vedi l’immagine sotto).

Opzione personalizza aspetto di wordpress menu home
Le voci del menù nell'opzione personalizza

Scelta delle proprietà avanzate del menù

Opzione personalizza aspetto di wordpress impostazione campi menu
Scelta dei campi descrittivi delle voci di menù da modificare

Innanzitutto clicca l’opzione “impostazione schermata” in alto a destra dopo aver selezionato “Menù” dalla voce “Aspetto”.

Quindi sotto la voce “mostra proprietà avanzate del menù” spunta le seguenti opzioni:

  1. Destinazione link.
  2. Attributo titolo.
  3. Descrizione.

In questo modo forniamo maggiori informazioni all’utente e possiamo decidere cosa aprirà ogni link presente nel menu.

Contattaci subito per un preventivo gratuito

Manutenzione sito WordPress

Hai bisogno di un intervento di manutenzione? Contattaci subito!

Modifica delle voci di menù esistenti

Torniamo al personalizzatore del tema

Come sempre è molto intuitivo quello che puoi fare. In questo caso puoi:

  1. modificare la voce del menù (etichetta di navigazione),
  2. inserire una frase che appare quando il mouse è sulla voce del menù (attributo titolo),
  3. inserire una descrizione.

Quest’ultima può non essere visualizzata se il tema non lo consente.

Le stesse operazioni puoi farle per ogni voce del menù, indipendentemente che si tratti di link ad articoli, pagine o altro.

Opzione personalizza aspetto wordpress modifica menu home
La modifica degli attributi della voce di menù

Ma non è tutto, tornando infatti all’immagine del menù home puoi notare che usando l’interfaccia personalizza aspetto di WordPress puoi scegliere dove mostrare il menù, e se ogni volta che crei una pagina desideri aggiungerla automaticamente.

Scegli, modifica e crea il menù principale del sito

Questa impostazione a volte 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 sua comodità sono quelle di selezionare la posizione di un menù e renderlo principale, quando ne hai più di uno.

Inoltre sempre da qui puoi decidere quale sarà il menù dedicato ai social, oppure crearlo se non esiste per poi assegnarlo a tale posizione.

Opzione personalizza menu principale di wordpress
Modifiche e impostazioni del menù principale

Contattaci subito per un preventivo gratuito

Assistenza sito WordPress

Per un intervento o un contratto di assistenza per il tuo sito WordPress, contattaci.

Scegliere e posizionare i widget

Come avrai notato il menù personalizza aspetto di WordPress è realizzato in modo tale che per ogni opzione hai un’interfaccia ripetitiva, quindi molto confidenziale e intuitiva per le operazioni che puoi fare, al punto tale che spesso mi trovo a ripetere gli stessi suggerimenti.

Anche in questo caso trovi visualizzate le posizioni dove puoi inserire i widget, messe a disposizione dal tema in uso.

In questo tema puoi posizionare i widget nella barra laterale e in altre due posizioni sotto il contenuto.

Cliccando sulla freccia della posizione barra laterale vengo mostrati i widget presenti.

Puoi eliminarli o inserirne di nuovi, oppure cambiare (o scrivere) il titolo per ognuno di loro, questo per ogni posizione disponibile.

Opzione personalizza aspetto di wordpress widget
Personalizza aspetto di wordpress con widget barra laterale
I widget che personalizzano la barra laterale

Impostazioni homepage

Questa opzione del personalizzatore di WordPress ti permette di scegliere cosa mostrare nella tua homepage.

Il suggerimento e le indicazioni che leggi sono chiarissime su cosa puoi fare: se hai già un po’ di articoli e pagine puoi impostare quale sarà la home (una pagina statica) e quale invece raccoglierà tutti gli articoli del blog.

Se vuoi puoi crearle da qui.

Opzione personalizza aspetto di wordpress imposta homepage
Scegliere cosa visualizzare come homepage del sito

CSS aggiuntivo

L’ultima opzione del menù personalizza riguarda la possibilità di inserire del codice CSS nel tuo tema.

Si tratta di 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.

Ogni nuovo comando scritto nel CSS aggiuntivo prende il posto di quello equivalente già esistente.

Chiaramente devi avere confidenza con i CSS per evitare problemi di visualizzazione.

Nel caso tu non abbia esperienza in questo meta linguaggio trovi un’ottima guida aggiornata sul sito di html.it.

Opzione personalizza aspetto di wordpress css aggiuntivo
Impostare l'aspetto di WordPress attraverso i CSS

In questa quinta lezione del corso WordPress abbiamo visto come usare l’opzione  personalizza l’aspetto di WordPress, a questo punto l’impostazione base del tuo sito è completa.

Ti do quindi appuntamento alla prossima lezione, la numero 6, dove vedremo come creare articoli di qualità per il tuo sito web. Un passo fondamentale per farti trovare da chi cerca su Google.

Ci occupiamo di tutto quello che riguarda la tua presenza su Internet con un sito web.

Siamo esperti nella realizzazione di siti web professionali con WordPress e offriamo servizi di assistenza manutenzione e gestione completa dei siti in WordPress. Se hai un sito WordPress e hai bisogno di un suo rifacimento o di fare il restyling possiamo intervenire e sistemarlo.

Ulteriori servizi che offriamo sono l’ottimizzazione SEO e la creazione di contenuti di qualità (non usiamo software di IA ma ci avvaliamo orgogliosamente della scrittura umana), inoltre grazie alla collaborazione con esperti Social Media Manager possiamo creare e gestire in modo professionale le tue pagine social.

Qualsiasi bisogno abbia la tua azienda o attività professionale riguardo al web, contattaci!

Lascia un commento

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

Accetto la Privacy Policy * for Click to select the duration you give consent until.