Elementor Theme Builder: Come Creare Header, Footer e Template Personalizzati

Il Theme Builder di Elementor Pro è una delle funzionalità più potenti e trasformative a disposizione di chi costruisce siti WordPress. Grazie a questo strumento puoi creare header, footer, template per i singoli articoli, pagine archivio e molto altro, il tutto senza scrivere una sola riga di codice. In questa guida passo passo vedremo come sfruttare al meglio ogni aspetto del Theme Builder per ottenere un sito dal design professionale e completamente personalizzato.

Cos’è il Theme Builder e Perché È Importante

Normalmente, le aree strutturali di un sito WordPress — l’header, il footer, il layout del singolo articolo e le pagine archivio — sono controllate dal tema attivo attraverso file PHP. Per modificarli servono competenze di sviluppo. Il Theme Builder rivoluziona questo paradigma: ti permette di progettare visivamente ogni parte del sito utilizzando l’editor drag-and-drop di Elementor, applicando le modifiche tramite un sistema di condizioni di visualizzazione (Display Conditions) flessibile e granulare.

Con il Theme Builder puoi:

• Creare header diversi per la homepage e le pagine interne
• Progettare footer personalizzati con colonne, link e informazioni di contatto
• Definire layout unici per i singoli articoli del blog
• Costruire pagine archivio (categorie, tag) con loop personalizzati
• Realizzare template per pagine 404, risultati di ricerca e pagine WooCommerce

Questa funzionalità è disponibile esclusivamente con Elementor Pro. Se non l’hai ancora acquistato, ti consigliamo di leggere il nostro confronto tra le versioni.

Come Accedere al Theme Builder

Per accedere al Theme Builder, vai nella dashboard WordPress e clicca su Template → Theme Builder nel menu laterale di Elementor. Si aprirà una schermata panoramica che mostra tutte le aree del sito che puoi personalizzare: Header, Footer, Single Post, Single Page, Archive e 404. Ogni sezione mostra il template attualmente attivo (se presente) e un pulsante per crearne uno nuovo.

In alternativa, puoi accedere tramite Elementor → Theme Builder nella barra di amministrazione di WordPress. La struttura visiva a colonne ti permette di avere una visione d’insieme immediata di tutti i template attivi sul tuo sito.

Creare un Header Personalizzato: Passo Passo

L’header è la prima cosa che i visitatori vedono. Ecco come crearne uno professionale con il Theme Builder:

1. Vai su Template → Theme Builder e clicca su Header
2. Clicca sul pulsante Aggiungi Nuovo. Si aprirà la libreria dei template predefiniti
3. Puoi scegliere un template dalla libreria oppure partire da zero cliccando su Chiudi (X)
4. Nell’editor Elementor, aggiungi un Container con layout orizzontale (flex direction: row)
5. Inserisci il widget Site Logo nella parte sinistra — questo caricherà automaticamente il logo impostato nel Customizer di WordPress
6. Al centro, aggiungi il widget Nav Menu. Seleziona il menu WordPress che vuoi visualizzare dal dropdown. Configura lo stile: font, colori, spaziatura e comportamento al passaggio del mouse
7. Nella parte destra, aggiungi un widget Search (icona lente) e un widget Button per la call-to-action (es. “Richiedi Preventivo” con link a la pagina contatti)
8. Configura le impostazioni responsive: per tablet e mobile, il Nav Menu si trasformerà automaticamente in un menu hamburger. Puoi personalizzare l’icona, i colori e l’animazione di apertura

Impostare le Condizioni di Visualizzazione dell’Header

Dopo aver completato il design, clicca su Pubblica. Elementor ti chiederà dove applicare questo header tramite le Display Conditions. Le opzioni principali sono:

• Entire Site: l’header verrà mostrato su tutte le pagine del sito
• Singular → Pages: solo sulle pagine (non sugli articoli)
• Singular → Front Page: solo sulla homepage
• Archive → Categorie specifiche: solo sulle pagine di determinate categorie

Puoi anche combinare condizioni con l’operatore Escludi: ad esempio “Entire Site” ma “Escludi → Front Page” per avere un header diverso sulla homepage.

Creare un Footer Personalizzato: Passo Passo

Il footer è un elemento spesso trascurato, ma fondamentale per la navigazione e la credibilità del sito. Ecco come costruirne uno efficace:

1. Nel Theme Builder, clicca su Footer → Aggiungi Nuovo
2. Crea un Container principale con sfondo scuro (es. #1a1a2e o il colore del tuo brand)
3. All’interno, aggiungi un Container con 3 o 4 colonne orizzontali
4. Colonna 1 — Brand: inserisci il widget Image con il logo in versione chiara, seguito da un widget Text Editor con una breve descrizione dell’azienda
5. Colonna 2 — Link Utili: usa un widget Icon List con i link alle pagine principali del sito (Chi Siamo, Servizi, Blog, Contatti)
6. Colonna 3 — Contatti: aggiungi indirizzo email, telefono e indirizzo fisico usando il widget Icon List con icone appropriate (busta, telefono, pin)
7. Colonna 4 — Social: inserisci il widget Social Icons con link a Facebook, Instagram, LinkedIn, YouTube
8. Sotto le colonne, aggiungi un Divider e un widget Text Editor centrato con il copyright: © 2026 Nome Azienda — P.IVA XXXXXXXXXXX — Tutti i diritti riservati

Per il design responsive, imposta le colonne per diventare impilate (stacked) su mobile: vai nelle impostazioni del Container, tab Avanzato, e imposta il flex-wrap su “Wrap” con larghezza colonna al 100% su mobile.

Single Post Template: Layout Personalizzato per gli Articoli

Il template per i singoli articoli determina come verranno visualizzati tutti i post del blog. Con il Theme Builder puoi creare un layout unico e accattivante:

1. Nel Theme Builder, vai su Single Post → Aggiungi Nuovo
2. Aggiungi un Container full-width con l’immagine in evidenza usando il widget Featured Image — imposta altezza fissa (es. 400px) con object-fit: cover
3. Sotto, crea un Container con larghezza massima (es. 800px) centrato, per il contenuto
4. Inserisci il widget Post Title con tag H1 e stile tipografico coerente con il tuo design system
5. Aggiungi il widget Post Info per mostrare autore, data e categoria
6. Inserisci il widget Post Content — questo caricherà dinamicamente il contenuto dell’articolo
7. Dopo il contenuto, aggiungi il widget Author Box con foto, nome e bio dell’autore
8. Aggiungi il widget Post Navigation per i link all’articolo precedente/successivo
9. Infine, usa il widget Related Posts (o Posts widget con query per stessa categoria) per mostrare articoli correlati in una griglia 3 colonne

Ricorda di impostare la condizione di visualizzazione su All Singular → Posts oppure di filtrare per categorie specifiche se vuoi layout diversi per sezioni diverse del blog.

Archive Template: Personalizzare le Pagine di Categoria e Tag

Le pagine archivio (categorie, tag, autore) mostrano gli elenchi di articoli. Di default, WordPress le presenta in modo basico. Con il Theme Builder puoi trasformarle:

1. Nel Theme Builder, vai su Archive → Aggiungi Nuovo
2. Inizia con il widget Archive Title per mostrare dinamicamente il nome della categoria/tag
3. Aggiungi opzionalmente il widget Archive Posts o usa il widget Loop Grid (Elementor 3.8+) per un controllo maggiore
4. Con il Loop Grid, puoi progettare un Loop Item Template personalizzato: miniatura, titolo, excerpt, data, pulsante “Leggi di più”
5. Configura il numero di colonne (3 su desktop, 2 su tablet, 1 su mobile), la paginazione e l’ordinamento
6. Imposta la condizione su All Archives o su categorie specifiche

Display Conditions: Il Cuore del Theme Builder

Le Display Conditions sono il meccanismo che determina dove viene applicato ogni template. Ecco le opzioni principali:

• Entire Site: si applica ovunque
• Singular: pagine singole — puoi specificare Posts, Pages, Custom Post Types, o pagine specifiche per nome/ID
• Archive: pagine elenco — Categorie, Tag, Autore, Data, Risultati di Ricerca
• WooCommerce: Shop, Single Product, Product Archive (se WooCommerce è installato)

Puoi creare regole multiple: ad esempio, un header vale per “Entire Site” ma un secondo header vale per “Front Page” — il template più specifico ha la priorità. Puoi anche usare Escludi per creare eccezioni.

Consigli Avanzati per il Theme Builder

Header Sticky (Fisso in Scroll)

Per rendere l’header fisso durante lo scroll, seleziona il Container dell’header, vai nel tab Avanzato → Motion Effects e attiva Sticky → Top. Puoi anche impostare un effetto di transizione: l’header diventa più compatto o cambia colore di sfondo quando l’utente scrolla verso il basso. Per questo, usa la funzione Scrolling Effects o aggiungi CSS personalizzato con la classe .elementor-sticky--effects.

Header Trasparente

Per un header trasparente che si sovrappone all’immagine hero, imposta lo sfondo del Container su trasparente, la posizione su Absolute e la larghezza su 100%. Aggiungi un leggero z-index (es. 100) per assicurarti che resti sopra il contenuto.

Header Diversi per Pagina

Puoi creare header multipli con condizioni di visualizzazione diverse. Ad esempio: un header con sfondo trasparente per la homepage e un header con sfondo solido per tutte le altre pagine. Elementor gestirà automaticamente quale mostrare in base alle condizioni impostate.

Risorse Utili e Guide Correlate

Il Theme Builder è più efficace quando combinato con le altre funzionalità di Elementor. Ti consigliamo di approfondire:

• Tipografia, Colori e Stili Globali in Elementor
• Tutti i Widget di Elementor: Guida Completa
• Design Responsive con Elementor
• Custom CSS e Codice Personalizzato
• Hello Elementor: il Tema Perfetto

Se hai bisogno di aiuto per creare un sito WordPress professionale con header, footer e template personalizzati, il team di G Tech Group è a tua disposizione. Contattaci per una consulenza o scopri il nostro servizio di realizzazione siti web.