Come usare l’opzione personalizza aspetto di WordPress

Come usare l'opzione personalizza aspetto di WordPress

Corso base WordPress Lezione 5

La lezione 5 di oggi descrive come usare personalizza aspetto di WordPress,
una delle opzioni più importanti di questo CMS.

Il personalizzatore di WordPress, sempre presente in tutti i temi, da la possibilità di impostare le caratteristiche grafiche e l’aspetto del nostro sito. Vediamo come fare.

Come usare l'opzione personalizza aspetto di WordPress

Per modificare grafica e presentazione del sito.

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

Per poterne parlare nel modo più completo possibile ho voluto dedicare un articolo intero all’argomento.

Come ho detto nella lezione 4 il customizzatore di WordPress e le sue numerose possibilità di personalizzazione hanno bisogno 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

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

Il risultato è quello che vedi qui sotto. Sulla destra viene mostrato l’aspetto della pagina principale, mentre a sinistra trovi le opzioni modificabili del tema WordPress in uso.

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

Opzione personalizza aspetto di wordpress menu generale
Cosa visualizzi all'apertura del menù PERSONALIZZA di WordPress.

Modificare l'aspetto base del tema installato

Quello che vedi ora come pagina principale del tuo 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 tartta di un’ulteriore possibilità data allo sviluppatore che però noi non approfondiremo, in quanto ci occuperemo della personalizzazione del tema esclusivamente tramite il menù di sinistra, il customizzatore interno.

Analizziamolo voce per voce.

Opzione personalizza aspetto di wordpress menu personalizza sito
Tutte le voci del menù personalizza.

Nella barra in basso orizzontale troviamo quattro link utili: il primo permette di vedere la pagina del sito a pieno schermo facendo scorrere a sinistra il menù personalizza, gli altri tre ci consentono di osservare come viene visualizzata su desktop (standard), tablet e smartphone.

Notiamo subito un grosso pulsante blu.

L’indicazione Pubblicato di colore azzurro chiaro e il fatto che sia disabilitato indicano che non ci sono modifiche da salvare.

Quando le faremo il pulsante verrà abilitato e la descrizione Pubblicato cambierà in Pubblica, diventando di colore bianco.

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

L’icona sottolineata rappresenta il tipo di dispositivo in uso (in questo momento un normale monitor PC/LAPTOP), ma cliccando su uno degli altri due potrai osservare la pagina del sito come se stessi usando un tablet o uno smartphone.

Personalizza l'aspetto di WordPress

Cosa fanno le voci di menù dell'opzione personalizza.

DENOMINAZIONE DEL SITO

Il primo aspetto di cui occuparci riguarda la descrizione generica del tuo 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 meno: se decidi che la cosa ti piace questo 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.

 

Opzione personalizza aspetto di wordpress menu denominazione
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 altre caratteristiche di personalizzazione dell’aspetto, è preferibile usare i CSS, usando l’opzione inserita nel menù personalizza (CSS aggiuntivo) e 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.

Opzione personalizza aspetto di wordpress immagine header
L'immagine della testata (header) del sito.

IMMAGINE DI SFONDO

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.

Vuoi personalizzare l'aspetto del tuo sito WordPress?

SitiWeb-WP è un’agenzia specializzata in WordPress e può aiutarti a personalizzare e impostare il tuo sito in modo ottimale.

Per questa e altre necessità, contattaci!

PERSONALIZZARE IL MENU'

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

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 che trovi qui, puoi fare le stesse cose descritte e impostabili dalla bacheca.

Opzione personalizza aspetto di wordpress personalizzare menu
La personalizzazione dei menù di WordPress.

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

Restyling siti wordpress

SitiWeb-WP si occupa di restyling dei siti WordPress, se vuoi cambiare il tema grafico del tuo sito, consultaci.

Interveniamo sia per la parte grafica che sulla struttura del sito, in questo modo lo rendiamo piacevole agli utenti e ne guadagna il tuo ranking nei motori di ricerca.

Usare personalizza aspetto di WordPress per 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ù” dal “Aspetto”.

Quindi sotto la voce “mostra proprietà avanzate del menù” abbiamo spuntato 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.

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 farlo comparire, e ogni volta che crei un articolo o una pagina questi verranno aggiunti automaticamente al menù.

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 già 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 funzione.

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

Realizzazione assistenza e manutenzione

SitiWeb-WP si occupa di realizzazione e restyling di siti WordPress e fornisce servizi di assistenza, manutenzione, gestione e ottimizzazione dei contenuti.

Per ogni necessità, scrivici!

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, inserirne di nuovi, oppure cambiare (o scrivere) il titolo per ognuno di loro.

Questo per ognuna delle posizioni disponibili.

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 sul cosa puoi fare: se hai già un po’ di articoli e di pagine puoi impostare quale sarà la home (una pagina statica) e quale invece raccoglierà tutti gli articoli del blog.

Se vuoi, puoi creare da qui sia pagine che articoli nuovi.

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

CSS AGGIUNTIVO

L’ultima delle opzioni 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 che tu non abbia esperienza in proposito puoi trovare un’ottima guida aggiornata sul sito di html.it.

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

Abbiamo visto nella lezione 5 del corso base come usare l’opzione  personalizza l’aspetto di WordPress. A questo punto l’impostazione del sito o del blog WordPress che vuoi creare, è completa.

Ti dò appuntamento alla prossima lezione, dove inizieremo a creare i contenuti del nostro sito, e dove il primo argomento affrontato riguarderà la realizzazione degli articoli, una delle pietre angolari nell’uso professionale di WordPress!

Inizieremo inoltre a vedere come cercare e aggiungere i plugin, in quanto ci serviremo di alcuni di loro per scrivere in modo più efficace i nostri articoli.

Desideri personalizzare il tuo sito web WordPress?

SitiWeb-WP si occupa di ogni aspetto che riguarda un sito WordPress: dalla realizzazione al restyling, dalla manutenzione, all’ assistenza e alla gestione.

Se desideri arrivare ai primi posti su Google e trovare nuovi Clienti, possiamo ottimizzarlo per te. Contattaci per maggiori informazioni.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Accetto la Privacy Policy