L'area dei contenuti di una pagina con Elementor si progetta in fretta. L'intestazione invece — logo, menu, numero di telefono, forse un pulsante — appartiene in prima battuta al tema. Può adattarla solo nella misura in cui il tema lo prevede. Il Theme Builder rimuove questo limite.
Di che cosa si occupa il Theme Builder
Con esso progetta le aree che stanno fuori dal contenuto vero e proprio della pagina: intestazione, piè di pagina, il layout dei singoli articoli, la panoramica del blog, le pagine di archivio, la pagina 404 e, negli shop, le pagine prodotto.
Il principio è sempre lo stesso: costruisce un modello e stabilisce dove debba valere. È la seconda parte quella su cui nella pratica ci si inceppa.
Il Theme Builder è una funzione della versione Pro.
Elementor Pro: poter progettare liberamente intestazione, piè di pagina e layout degli articoli è il motivo più frequente per passare a Pro — più dei moduli o dei popup. Scopri Elementor Pro
Preparazione: il tema giusto
Se è Elementor a costruire l'intestazione, il tema non deve fornirne una seconda. Altrimenti si ritrova due header sovrapposti.
La via più semplice è un tema volutamente minimale come Hello, pensato esattamente per questo: porta con sé pochissima grafica propria e lascia campo libero a Elementor. Con i temi più ricchi cerchi nelle impostazioni del tema un'opzione per disattivare l'header proprio. Se non ne trova nessuna, è il segnale che tema e Theme Builder si metteranno i bastoni fra le ruote.
Creare un'intestazione
Nel menu di WordPress, in Modelli → Theme Builder, scelga Intestazione e crei un nuovo modello. Elementor propone blocchi già pronti; io di solito costruisco da zero, perché le varianti preconfezionate raramente si accordano con il resto.
Una struttura solida è così: un container, impostato come riga flex, con il logo a sinistra e il menu a destra. L'allineamento verticale su «centrato», la distribuzione orizzontale su «spazio in mezzo». È la struttura che non crolla nemmeno su schermi stretti.
Per il menu usa il widget Menu di navigazione. Attinge ai menu che ha creato in WordPress sotto Aspetto → Menu — crei quindi il menu prima, altrimenti il widget resta vuoto.
Il passaggio che in molti dimenticano: le condizioni di visualizzazione
Prima di pubblicare, Elementor chiede dove debba valere il modello. Questa richiesta non è una formalità.
Per un'intestazione valida ovunque imposti la condizione su Tutto il sito. Se invece vuole un header diverso solo per la pagina iniziale, crei un secondo modello e lì imposti la condizione più specifica. La regola più specifica prevale su quella generale.
L'errore più frequente che vedo: modello costruito, pubblicato, condizione saltata — e poi lo sconcerto sul perché sul sito non cambi nulla. Le condizioni si possono impostare in qualsiasi momento anche a posteriori, dal menu di anteprima nell'editor o dalla panoramica dei modelli.
Header fisso, risolto bene
Un'intestazione che resta in alto durante lo scorrimento è una delle richieste più frequenti. Lo risolve nel container sotto Avanzate → Effetti di movimento → Fisso: in alto.
Due punti su cui tipicamente ci si inceppa:
L'header sparisce dietro il contenuto. Sotto Avanzate imposti uno z-index sufficiente, per esempio 999.
Il contenuto sobbalza durante lo scorrimento. Succede quando l'header fisso cambia altezza. Se durante lo scorrimento vuole mostrare un logo più piccolo, lavori con le impostazioni degli effetti e verifichi il risultato sul telefono — è lì che il sobbalzo si nota di più.
E un consiglio dalla pratica: sul telefono un header fisso ruba preziosa altezza di schermo. Lì spesso lo disattivo. Le opzioni di visibilità stanno anch'esse sotto Avanzate; come procedo in generale sul mobile è spiegato in Ottimizzare Elementor per il mobile.
Il piè di pagina
Il footer funziona con lo stesso schema, ma è meno critico — niente sticky, nessuna logica di menu. Faccia attenzione a due cose: note legali e privacy devono essere raggiungibili da ogni pagina, e le colonne sul telefono devono incolonnarsi con ordine invece di stringersi affiancate.
Se qualcosa non compare
Tre cause coprono la maggior parte dei casi: manca la condizione di visualizzazione. Il tema fornisce ancora il proprio header. Oppure un plugin di caching trattiene la vecchia versione — svuoti la cache prima di cercare oltre.
Altri intoppi tipici e le loro cause li ho raccolti in Risolvere gli errori più comuni di Elementor.
Se preferisce impostare il Theme Builder una volta con qualcuno accanto invece di andare a tentoni fra le condizioni di visualizzazione: è esattamente quello che facciamo nel mio corso Elementor.
Tag