Chiamata per il test del programma FSE #12: Diamo un po’ di pepe agli Header

Questo articolo è la dodicesima chiamata per il test all’interno del Full Site Editing Outreach Program. Per sapere di più su questo programma sperimentale, dai un’occhiata a queste FAQ con utili dettagli. Per entrare nel vivo, vai su #fse-outreach-experiment in Make Slack per futuri annunci su nuovi test, articoli e molto altro ancora.

Panoramica

Con il rilascio di WordPress 5.9, è ora di iniziare a riesaminare alcuni comuni flussi di lavoro di cui abbiamo testato versioni precedenti e che ora hanno nuovi strumenti, opzioni ed altro ancora da esplorare. Nel caso di questo test, personalizzeremo un header usando tutto, dal blocco navigazione alla modalità in risalto per la parte del template, per poi riutilizzare questo header personalizzato in un template diverso. Strada facendo, esploreremo il modo in cui i pattern sono integrati all’interno dell’esperienza, le nuove opzioni di controllo delle dimensioni e la UX migliorata per il blocco navigazione. Mentre ti occupi di questa esperienza d’uso, pensa a cosa potrebbe renderla ancora più semplice e più intuitiva, dato che il nostro obiettivo è proprio questo!

Ambiente di prova

Di seguito troverai maggiori informazioni per avere la certezza di impostare tutto correttamente, ecco comunque gli aspetti chiave da impostare sul tuo ambiente di prova: 

Istruzioni per il test

Istruzioni per la configurazione: 

  1. Imposta un sito di prova utilizzando la versione più recente di WordPress (5.9.1). È importante che questo non sia un sito live o di produzione. 
  2. Installa ed attiva il tema Twenty Twenty-Two andando su Aspetto > Temi. Se scegli di utilizzare un diverso tema a blocchi, installalo ed attivalo andando su Aspetto > Temi > Aggiungi nuovo, cercandone uno che abbia Full Site Editing tra le caratteristiche elencate. 
  3. Andando sotto Pagine > Aggiungi pagina crea quattro pagine diverse, con titoli differenti, da aggiungere al menu. Non serve che queste pagine abbiano dei contenuti. 
  4. Installa ed attiva il plugin Gutenberg da Plugin > Aggiungi nuovo. Nel caso fosse già installato, accertati di usare come minimo la versione 12.6 di Gutenberg.
  5. Alla fine di questi passi, dovresti vedere una voce di navigazione dal titolo “Editor (beta)” sotto Aspetto. Se non lo vedi, non stai usando un tema a blocchi e serve che tu cambi tema. 

Istruzioni per il tema:

Suggerimento utile: Man mano che ti occupi di questo test, potresti trovare la vista elenco molto utile mentre navighi tra il contenuto.

Queste istruzioni sono volutamente più generali per aiutarti a rendere davvero tuo l’Header che creerai, trovare più punti di attrito, così come nel caso stessi utilizzando un diverso tema a blocchi. In generale, dovresti esplorare alcune cose con questo test, perciò se i passi non si allineano con quello che vedi, passa al tema Twenty Twenty-Two per rendere le cose più semplici nel caso non lo stessi già usando, oppure accertati di coprire ognuna delle funzioni elencate nella sezione Panoramica. 

  1. Naviga su Aspetto > Editor (beta). Questo aprirà automaticamente l’editor del sito sul template che fa funzionare la tua homepage. 
  2. Usando la Vista elenco, seleziona l’Header generale fornito dal tuo tema. Se stai utilizzando il tema Twenty Twenty-Two, noterai che fornisce diverse opzioni per l’header quando selezioni l’opzione “Sostituisci” nella barra degli strumenti del blocco. Seleziona qualunque header vorresti modificare. Ecco uno screenshot che illustra ciò che dovresti aspettarti se hai questa opzione.
  3. Da qui, entra nella modalità di modifica di quella sola parte di template per concentrarti solo sulla modifica dell’Header in particolare. Per trovare questa modalità seleziona l’elemento principale della parte del template Header > Apri il menu con i tre puntini > Seleziona “Modifica Header”. Puoi avere più informazioni riguardo questa modalità ed i vari i modi in cui puoi trovarla in questo articolo
  4. Una volta che sei lì, costruisci e personalizza il tuo blocco navigazione aggiungendo le quattro pagine che hai creato in precedenza. Ricorda che puoi creare bozze di pagine che dovrai comunque pubblicare successivamente in modo che siano visibili sul frontend del tuo sito.
  5. Continua a personalizzare il tuo header in base ai tuoi gusti, ad esempio utilizzando i controlli di dimensione presenti nei blocchi Gruppo o Riga (a seconda di quello che offre il tuo tema), aggiungendo blocchi aggiuntivi a piacimento (Motto del sito, Logo del sito, ecc.), o esplorando ulteriori opzioni all’interno del blocco navigazione.
  6. Una volta finito, seleziona “Indietro” per ritornare al template della tua homepage e fare qualsiasi altra modifica ora che vedi nuovamente la parte del template nel contesto del template generale.
  7. A questo punto, seleziona Salva ed esamina il riepilogo delle modifiche per salvare tutte le modifiche che hai fatto. 
  8. Dopo aver salvato, apri il menu W > Template e seleziona un altro template che vuoi esaminare per assicurarti che usi l’Header che hai appena personalizzato (ad esempio, il template Vuoto). Apri quel template e, se l’Header non è al suo posto, aggiungilo secondo il modo che ritieni più corretto prima di salvare. 

Cosa notare:

Se ti va, ricorda di condividere uno screenshot di quello che hai creato!

  • L’esperienza si è bloccata in qualche punto?
  • L’esperienza di salvataggio ha funzionato correttamente?
  • Hai trovato delle funzionalità mancanti durante la creazione o il riutilizzo dell’Header?
  • Cosa hai trovato particolarmente confuso o frustrante riguardo l’esperienza?
  • Cosa ti è piaciuto o hai apprezzato in modo particolare riguardo l’esperienza?
  • Cosa avrebbe reso questa esperienza più facile ed intuitiva?
  • Credi che quanto hai creato nell’Editor del sito corrisponda a quello che vedi sulla tua homepage?
  • Ha funzionato usando solo la tastiera?
  • Ha funzionato usando uno screen reader?

Lascia il tuo feedback entro il 16 marzo 2022

#fse-outreach-program, #fse-testing-call, #full-site-editing

Articolo originale: FSE Program Testing Call #12: Hyping Headers