Come personalizzare header e footer del tema Divi di WordPress

La personalizzazione delle sezioni Header e Footer del tema Divi di WordPress viene effettuata:

• in parte dal Modificatore di Tema (in inglese: "Theme Customizer"), a cui si può accedere dalla bacheca dell’amministratore in due modi:
  • tramite le voci di menu: Aspetto > Personalizza,
  • tramite le voci Divi > Modificatore di tema:
• in parte dalle opzioni del tema Divi, a cui si accede con tramite le voci Divi > Opzioni tema:

Il file Excel allegato fornisce un elenco di tutte le opzioni disponibili, l’oggetto a cui si riferiscono e il percorso per la loro impostazione. Ad esempio, per ottenere l’elenco delle opzioni relative alla top bar, filtrare “top bar” nella colonna “Oggetto” del file excel, verranno visualizzate le righe con oggetto:

• “top bar”;
• “menu a cascata top bar” (per le opzioni del menu a cascata del menu secondario);
• “menu di navigazione / top bar” (per le impostazioni della barra superiore nel caso di stile di intestazione impostato a “Scorrimento” o “Schermo intero”).

---

Header del tema Divi

Struttura

La sezione Header predefinita del tema Divi è formata dalla Top bar (detta anche toolbar o menu secondario) e dalla barra di navigazione. Gli elementi presenti nelle due barre dipendono dal layout (desktop o mobile) e dallo dallo stile intestazione.

Layout

Ecco la disposizione dei diversi elementi nel caso di layout Desktop (stile predefinito):

Ed ecco la disposizione dei diversi elementi nel caso di layout Mobile (sempre per lo stile predefinito):

Stile di intestazione

Lo stile dell’intestazione determina la posizione dei diversi elementi che compongono l’header. Il seguente video illustra i diversi stili.

Gli stili di navigazione possono essere raggruppati in tre diversi scenari:

Scenario	Opzione	Percorso
scenario 1	– Predefinito (logo a sinistra, menu primario a destra); – Centrato (logo centrato sopra, menu primario centrato sotto); – Logo centrato in linea (logo centrato, in mezzo al menu primario).	Header e Navigazione > Formato Header > Stile intestazione
scenario 2	– Scorrimento (logo a sinistra e icona sandwich menu a destra, al click su questa, comparsa a scorrimento del menu verticale a destra); – Schermo intero (logo a sinistra e icona sandwich menu a destra, al click comparsa in dissolvenza del menu a schermo intero).	Header e Navigazione > Formato Header > Stile intestazione
scenario 3	E’ una variante dello Scenario 1, in cui la barra di navigazione viene visualizzata in verticale (a sinistra o a a destra dello schermo). Non si può attivare questa modalità quando lo stile di intestazione è impostato a “Scorrimento” o a “Schermo intero”.	Header e Navigazione > Formato Header > Abilita navigazione verticale

I tre scenari influenzano la struttura dell’intestazione nel seguente modo:

	Scenari 1 e 3	Scenario 2
La top bar contiene:	– numero di telefono; – email; – icone social; – menu secondario (- carrello shop WooCommerce)	(non viene visualizzata)
La barra di navigazione contiene:	– logo – menu primario – box di ricerca	– logo – sandwich menu
Il menu a comparsa contiene:	(non viene visualizzato)	– barra superiore, formata da: icone social (e carrello), box di ricerca, email e telefono; – menu primario; – menu secondario.

Top Bar

Gli elementi che compongono la top bar sono così allineati:

• a sinistra: icona e numero di telefono; icona e indirizzo di posta elettronica;
• a destra: icone social, menu secondario e carrello.

Curiosamente, se si imposta il telefono (o l’email), ma non il menu secondario, le icone social vengono allineate a sinistra.

Per allineare il gruppo Telefono + Email + Icone social a destra (dopo il menu secondario), impostare il seguente css aggiuntivo:

#et-info {
    float: right;
}

Se non viene attivato alcun elemento, la top bar non viene visualizzata.

Se è abilitato il menu verticale (scenario 3), la Top bar è visibile, ma allo scorrimento in giù della pagina scompare.

Personalizzare le icone social del tema DIVI

Il sito Elegant Marketplace rende disponibile un generatore di temi child per Divi. Il tema generato mette a disposizione ulteriori link a social media e l’opzione aggiuntiva “Apri Social URL in un nuovo tab”.

Barra di navigazione

L’aspetto grafico ed il comportamento della barra di navigazione sono personalizzabili tramite le opzioni del tema. Vedere il file excel allegato.

Menu automatico del tema Divi

il tema Divi prevede tre posizioni di menu: Primario, Secondario e Piè di pagina. Se alla posizione Menu primario non viene associato alcun menu, Divi genera un menu automatico formato dalle seguenti voci:

• il link all’home page;
• un link per ogni pagina pubblicata, con gli eventuali menu a cascata per le pagine figlie;
• un link per ogni categoria di primo livello, con gli eventuali menu a cascata per le categorie figlie.

Le opzioni per personalizzare il menu automatico si trovano nei percorsi:

• Divi > Opzioni tema > Navigazione > Pagine
• Divi > Opzioni tema > Navigazione > Categorie

Come modificare o rimuovere la scritta “Seleziona una pagina” dalla barra di navigazione

Quando si utilizza il layout Mobile e lo stile di navigazione “Centrato” o “Logo centrato in linea”, nella barra di navigazione viene visualizzata la scritta “Seleziona una pagina”. Questa scritta è prodotta dall’istruzione esc_html__( 'Select Page', 'Divi' ) nel file php \wp-content\themes\Divi\functions.php (alla riga 522 nella versione 4.17.3 di Divi).

Per modificare il testo è quindi sufficiente intervenire sui file po/mo di Divi.

Hook per l’header

Il template header.php del tema prevede due hook di azione per personalizzare la barra di navigazione:

• et_header_top che viene eseguito subito dopo l’output del menu primario
• et_search_form_fields che viene eseguito subito dopo l’output del campo di ricerca (nel box di ricerca)

Se si devono applicare modifiche non gestibili dalle opzioni o dagli hook, è necessario ricorrere al Generatore di Temi di Divi.

---

Footer del tema Divi

Il Footer è composto da tre sezioni:

• area widget
• menu piè di pagina
• bottom bar

Il colore di fondo è comune alle tre sezioni, ma con sfumature diverse, grazie alle trasparenze.

Area widget

L’Area widget può contenere fino a 6 aree responsive. Ciascuna area può contenere uno o più blocchi Gutenberg, compresi i blocchi di tipo “widget”. Se un’area non viene valorizzata, non viene neppure visualizzata.

Menu del piè di pagina

Per visualizzare un menu nell’apposita sezione del footer, un menu dev’essere associato alla posizione di menu “Menu piè di pagina” del tema.

Bottom bar

La bottom bar prevede un testo libero (generalmente contenente i crediti e il copyright) sul lato sinistro e le icone social sul lato destro. Se queste ultime non vengono visualizzate, è possibile centrare i crediti con il CSS aggiuntivo:

#footer-info {
    text-align: center;
    float: none;
}

Hook per il footer

Il template footer.php del tema prevede un hook di azione per personalizzare il footer:

• wp_footer che viene eseguito subito dopo l’output del footer

Se si devono applicare modifiche non gestibili dalle opzioni o dagli hook, è necessario ricorrere al Generatore di Temi di Divi.