Dalla versione 4.0 di Divi, uscita ormai quasi un anno fa, si ha la possibilità di costruire l’ header e il footer del proprio sito web (oltre ad altre funzionalità che riguardano invece i template di post type come l’articolo di blog o la scheda prodotto in WooCommerce),
Questi elementi sono elementi fissi quasi per tutti i page builder, modificabili solo in parte. A partire dalla versione 4 di Divi, abbiamo a disposizione una nuova area chiamata Generatore di temi, dove poter creare dei veri e propri template dinamici da assegnare a parti fisse o a tipologie di post all’interno di un sito web.
Infatti è proprio dalla versione 4.0 che Divi ha funzionalità di theme builder, e non più solo di page builder.
Cosa si può mettere nell’header di un sito
L’header di un sito web è una parte del sito molto importante, che accoglie l’utente mostrandogli brevemente quali contenuti troverà in questo sito, e che si può anche sfruttare per azioni di marketing. Il fatto di non potervi agire in molti temi WordPress è un limite grosso infatti, in quanto nel momento in cui servirà ad esempio far apparire un top banner con un avviso, si sarà costretti ad installare un plugin per farlo. Oppure se si vuole rendere una voce di menù diversa dalle altre, per darle risalto, o ancora se si vuole un menù con un pulsante alla fine, o un doppio menù, ecc.
Teniamo conto che la prima parte che viene visualizzata in un sito web, che sia da desktop o da mobile, è sempre l’header. Quindi questa è una parte del sito molto importante. Questa è anche una delle zone del sito che devono rimanere il più possibile pulite, non devono essere presenti troppi elementi, e il logo dovrà essere l’unico elemento grafico utile a rendere riconoscibile il brand (è sempre bene evitare banner o grafiche di altro genere!).
Altri elementi utili in questa zona del sito sono:
- Il menu principale del sito
- Top banner con piccola call to action
- Email e numero di telefono
- Carrello per ecommerce
- Icone social
- Bottone per area riservata
- Un menu secondario
- La barra di ricerca
Ecco una carrellata di esempio da cui prendere spunto:
Ovviamente non andranno inseriti tutti questi elementi insieme! Bisognerà prima capire quali sono gli elementi che servono in quel sito, e che è bene siano subito visualizzabili.
Come creare un’header globale personalizzata con il Generatore temi
Come dicevo, con il Generatore temi di Divi è facile creare una header esattamente come la vogliamo, con gli elementi che vogliamo e nelle posizioni che scegliamo noi. Vediamo subito come fare.
Dalla bacheca WordPress andare su Divi – Generatore di temi.
Dalla schermata che si aprirà cliccare sul modulo “Aggiungi intestazione globale”, scegliendo l’opzione “Crea un’intestazione globale”.
Poi scegliere “Inizia a costruire”.
A questo punto si aprirà la modalità front-end di modifica di Divi.
Inizia a costruire la struttura per la tua header. Inizia aggiungendo una nuova riga, magari con due colonne, e in una delle due inserisci subito il modulo Menu.
Devi sapere che il modulo Menu, in questa modalità di realizzazione di intestazione globale, contiene anche l’inserimento del logo. Quindi con un solo modulo potrai già inserire logo e menu principale. Ovviamente non è vincolante: puoi anche pensare di inserire il tuo logo con un semplice modulo immagine, e poi inserire il modulo menu (senza caricare il logo) in uno spazio ben distante dal logo, mantenendo i due moduli separati.
Ecco un video di esempio di come modificare un header globale nel nostro tema Havel.
Cosa si può mettere nel footer del sito
Parliamo ora del footer, un’altra area molto funzionale in un sito web.
Mentre nell’header il visitatore tende a cercare le pagine principali e il modo di tornare alla home, nel footer vuole trovare le informazioni di contatto, vuole riuscire a navigare il sito senza per forza scrollare tutta la pagina fino in cima per tornare al menù principale, vuole poter seguire l’autore del sito anche al di fuori del sito stesso, ecc.
Ecco, questi sono solo degli esempi, che servono però a farti capire soprattutto una cosa: il visitatore di un sito passa più tempo sul footer che sull’header. Questo perché l’header ha il semplice compito di farci spostare da una pagina all’altra e assolto quel compito, di solito il visitatore scrolla subito in basso per passare al contenuto.
Il footer è più ricco di contenuti, e questa caratteristica può giustamente essere sfruttata a nostro vantaggio.
Ma prima di tutto, quali sono gli elementi che non devono mancare nel footer? In poche parole: quelli legali.
- Collegamenti a privacy policy e cookie policy
- Informazione relative all’autore del sito (copyright, nome, partita iva, ecc)
- Collegamenti a termini e condizioni di vendita
Oltre a questi elementi obbligatori per legge, ci sono altri elementi da considerare utili al visitatore, e che sono un po’ uno standard nel web design anche se non sono obbligatori per legge:
- Contatti
- Orari di apertura
- Mappa
- Icone social
- Bottone per tornare in cima alla pagina o menu del sito
E infine ci sono una serie di elementi che possono essere utili a noi, dal momento che il visitatore si soffermerà spesso nella zona del footer:
- Modulo per newsletter
- Ultimi articoli del blog
- La tua mission
- Una mini bio (che rimanda alla pagina about)
- Il widget Instagram
- Testimonianze
- Loghi di partner
Ecco alcuni footer di esempio da cui prendere spunto:
Come creare un footer globale personalizzato con il Generatore di temi
Ed ora passiamo alla spiegazione pratica di come creare un footer del tutto personalizzato grazie al Generatore di temi.
Esattamente come per l’header, andremo alla voce Divi – Generatore di temi.
In questa schermata andiamo a cliccare su “Aggiungi piè di pagina globale”, selezionando l’opzione “Costruisci piè di pagina globale” e poi “Inizia a costruire”.
A questo punto, ci ritroveremo nella stessa schermata vista per l’header, dove aggiungendo una riga, magari qui a 3 o 4 colonne, potremo andare a inserire i moduli con cui vogliamo comporre il nostro footer.
Qui di seguito ti lascio il video in cui puoi vedere i passaggi per modificare un footer globale già creato con il Generatore di temi (in questo caso nel nostro tema child Havel per Divi)
