Stai creando un sito web con WordPress e vuoi modificare il layout di header e footer in modo semplice?
Vuoi avere maggiori opzioni di personalizzazioni oltre a quelle di default incluse nella sezione “personalizza” di WordPress?
Di solito quando fai una nuova installazione di WordPress il sistema installa in modo automatico un tema di default come TwentyTwenty one che ti permettere di fare delle modifiche di base al tuo sito web.
Grazie al tema WordPress Divi di Elegant themes che spesso consiglio ai liberi professionisti per piccoli progetti e blog potrai modificare ogni sezione del tuo sito web, anche quelle che al momento sono limitate.
Oggi infatti ti mostrerò come modificare header e footer con Divi di Elegant themes grazie ad una speciale funzionalità del tema chiamata “Generatore di temi”.
Sì lo so, la traduzione non è il massimo, avrebbero dovuto chiamarla “Generatore di elementi” ma poco ci importa perché è veramente uno spettacolo!
Indice dei contenuti
Che cosa sono header e footer?
Una breve introduzione su che cosa siano header e footer, perché come avviene per qualsiasi argomento se conosci le basi hai più strumenti per fare delle buone scelte.
Ogni pagina web è composta da elementi realizzati grazie al codice HTML, cioè un codice di pubblico dominio nato per la formattazione e l’impaginazione di documenti ipertestuali.
All’interno di una pagina web gli elementi HTML sono tanti e vengono definiti tag.
I tag più importanti di una pagina web sono:
- Header
- Body
- Footer
Questi tre tag definiscono le “porzioni di spazio” dentro cui puoi creare nuovi elementi.
L’header è la parte più in alto, di solito contiene le direttive principali che permettono al browser come Google Chrome di elaborare l’aspetto della pagina; i codici di tracciamento di un sito web come Google Analytics; e tutto ciò che precede il corpo della pagina, dunque il logo e il menù con le varie voci.
Il body è il vero e proprio corpo della pagina, per cui all’interno di un blog la parte centrale della pagina che contiene titoli, paragrafi e immagini è appunto il body.
Il footer è la parte finale di un sito web, nel web design moderno si tende a differenziare questa area a livello grafico applicando uno sfondo differente, informazioni di contatto e pagine legal.
Quando crei un sito web con WordPress chiaramente non scrivi in codice e quindi hai meno evidente la visione di queste aree, il mio consiglio è di tenerle in considerazione per scegliere al meglio i contenuti da inserire in ciascuna di esse.
Ogni scelta che farai contribuirà a rendere fruibile il tuo sito web, perché ricorda che la priorità dovrà essere sempre e comunque l’esperienza ottimale dell’utente.
Che cosa inserire nell’header e nel footer di un sito web?
Due domande frequenti che mi vengono poste quando si tratta di creare un nuovo sito web in WordPress sono: Che cosa inserisco nell’header? Che cosa inserisco nel footer?
Vediamo la prima.
Che cosa inserisco nell’header?
Nell’header di un sito web dovresti inserire il logo della tua attività, il menù con le pagine principali del tuo sito web e una eventuale call to action per invitare le persone a compiere un’azione.
La scelta di inserire o meno una call to action all’interno del menu dipende molto dal tipo di sito web che stai realizzando e dal tipo di audience che ti segue.
Per esempio, per i siti web che hanno maggiori visite da desktop può avere molto senso inserire una col tuo ex Shaun evidente all’interno del menù perché la sua visibilità sarà maggiore in quanto l’occhio del visitatore la vedrà subito a destra.
Per i siti web che hanno maggiori visite da mobile invece, consiglio di inserire una chiamata all’azione direttamente all’interno della pagina web perché la tendenza dell’utente è quella di cliccare meno all’interno di un pulsante di un hamburger menù.
Questa è la mia esperienza, ovviamente tu puoi fare altre considerazioni e scegliere qualcosa di diverso in base al tuo caso specifico. Vedrai che spesso sul web non esistono regole ma test che confermano ipotesi.
Quanto alla seconda domanda è più complessa.
Che cosa inserisco nel footer?
Ogni web designer ti darà cose differenti, per esempio io che mi occupo di marketing e SEO ti dico a mio avviso che cosa si fondamentale inserire.
Il primissimo consiglio che ti voglio dare quando vuoi inserire un elemento all’interno del footer e di farti la domanda:
È utile?
Se la risposta è sì procedi con l’inserimento e verifica che impatto ha sugli utenti, se la risposta è no non lo inserisci (nel 90% dei casi).
Ecco che cosa ti consiglio ti inserire all’interno del footer:
- Il logo della tua attività
- Una breve bio di due righe in cui spieghi il progetto
- Le pagine legali privacy policy e cookie policy obbligatorie per tutti i siti web
Approfondimenti:
Come modificare l’header di un sito web con Divi
L’utilizzo del tema WordPress Divi semplifica la vita in molti aspetti della costruzione di un sito web, in primis perché ha molte funzionalità che otterresti solo installando diversi plugin, in secondo luogo perché è molto più semplice rispetto agli altri temi.
Ecco perché è il tema più scelto dai liberi professionisti.
Se la tua esigenza è quella di creare un header in cui inserire solo il logo e il menù con le varie voci ti consiglio di procedere con l’inserimento standard utilizzato da WordPress.
Le impostazioni per modificare questa area le trovi in Aspetto – Personalizza
Se invece vuoi realizzare una grafica più particolare e unica ecco i passaggi per creare un header con Divi di Elegant themes:
- Vai su Divi – Generatore di temi – Aggiungi intestazione globale
- Inserisci una nuova sezione, una nuova riga in base agli elementi che vuoi inserire quindi probabilmente con una colonna sinistra più larga e una destra più piccola in cui inserirai il pulsante
- Clicca sul + in grigio per inserire un nuovo elemento, aggiungi il menù desiderato (attenzione se non ne hai uno va creato prima)
- Nella colonna a destra aggiungi un nuovo modulo pulsante
- Adatta le varie spaziature di sezione, riga e moduli
Et Voilà, l’header è fatto.
Nella sezione design puoi gestire qualsiasi aspetto, dalla tipologia di font, ai vari colori fino agli spazi con gli altri elementi.
Passaggi con immagini:
Ecco alcuni esempi di header realizzati con Divi che puoi modellare per il tuo progetto:
Come modificare il footer di un sito web con Divi
Modificare il footer di un sito web con Divi è ancora più semplice, infatti il procedimento è sempre lo stesso, vai in Divi – Generatore di temi – Aggiungi footer globale
Di solito, per distaccare anche dal punto di vista visivo la sezione del footer con il resto del sito web si tende ad impostare un colore differente (spesso scuro) e un font più piccolo, come 16 px per i titoli e 14 o 12 per i paragrafi.
Questo è il risultato del footer di esempio preparato per questo articolo, tempo di realizzazione 6 minuti:
Con un po’ di applicazione puoi realizzare qualcosa dal risultato molto più convincente e professionale, ecco alcuni esempi realizzati di footer con Divi:
Dai un’occhiata a Divi
Arrivato a questo punto avrei compreso come installare un tema WordPress professionale che ti consenta di attivare molte più funzionalità all’interno del tuo sito web offre numerosi vantaggi, come appunto la creazione di header e footer.
Se vuoi utilizzare Divi ecco il sito ufficiale dove acquistarlo, considera che essendo uno dei temi più utilizzati al mondo troverai numerose guide, video e gruppi facebook dedicati dove scoprire la maggior parte delle informazioni di cui hai bisogno.
Personalmente quando è presente la possibilità di acquistare un programma in versione a vita (lifetime plan) lo preferisco così da non avere un abbonamento annuale e fare un investimento unico una sola volta.
Per qualsiasi domanda e dubbio rispondi nei commenti, mi fa piacere dare un feedback a chi sta realizzando un progetto!
Un saluto,
Nadia
0 commenti