{"id":166451,"date":"2024-08-12T09:00:00","date_gmt":"2024-08-12T07:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/elementor-theme-builder-header-footer-template-personalizzati\/"},"modified":"2026-05-25T10:00:00","modified_gmt":"2026-05-25T08:00:00","slug":"elementor-theme-builder-header-footer-template-personalizzati","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/elementor-theme-builder-header-footer-template-personalizzati\/","title":{"rendered":"Elementor Theme Builder: Come Creare Header, Footer e Template Personalizzati"},"content":{"rendered":"<p style=\"text-align: justify;\">Il <strong>Theme Builder di Elementor Pro<\/strong> \u00e8 una delle funzionalit\u00e0 pi\u00f9 potenti e trasformative a disposizione di chi costruisce siti WordPress. Grazie a questo strumento puoi creare <strong>header, footer, template per i singoli articoli, pagine archivio<\/strong> 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.<\/p>\n<p><img decoding=\"async\" src=\"\/blog\/wp-content\/uploads\/2026\/05\/06-editor.png\" alt=\"Editor visuale di Elementor per il Theme Builder\" \/><\/p>\n<h2>Cos&#8217;\u00e8 il Theme Builder e Perch\u00e9 \u00c8 Importante<\/h2>\n<p style=\"text-align: justify;\">Normalmente, le aree strutturali di un sito WordPress \u2014 l&#8217;header, il footer, il layout del singolo articolo e le pagine archivio \u2014 sono controllate dal tema attivo attraverso file PHP. Per modificarli servono competenze di sviluppo. Il <strong>Theme Builder<\/strong> rivoluziona questo paradigma: ti permette di progettare visivamente ogni parte del sito utilizzando l&#8217;editor drag-and-drop di Elementor, applicando le modifiche tramite un sistema di <strong>condizioni di visualizzazione<\/strong> (Display Conditions) flessibile e granulare.<\/p>\n<p style=\"text-align: justify;\">Con il Theme Builder puoi:<\/p>\n<ul>\n<li>Creare header diversi per la homepage e le pagine interne<\/li>\n<li>Progettare footer personalizzati con colonne, link e informazioni di contatto<\/li>\n<li>Definire layout unici per i singoli articoli del blog<\/li>\n<li>Costruire pagine archivio (categorie, tag) con loop personalizzati<\/li>\n<li>Realizzare template per pagine 404, risultati di ricerca e pagine WooCommerce<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Questa funzionalit\u00e0 \u00e8 disponibile esclusivamente con <a href=\"\/blog\/elementor-pro-vs-free-differenze-upgrade\/\">Elementor Pro<\/a>. Se non l&#8217;hai ancora acquistato, ti consigliamo di leggere il nostro confronto tra le versioni.<\/p>\n<h2>Come Accedere al Theme Builder<\/h2>\n<p style=\"text-align: justify;\">Per accedere al Theme Builder, vai nella dashboard WordPress e clicca su <strong>Template \u2192 Theme Builder<\/strong> nel menu laterale di Elementor. Si aprir\u00e0 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.<\/p>\n<p style=\"text-align: justify;\">In alternativa, puoi accedere tramite <strong>Elementor \u2192 Theme Builder<\/strong> nella barra di amministrazione di WordPress. La struttura visiva a colonne ti permette di avere una visione d&#8217;insieme immediata di tutti i template attivi sul tuo sito.<\/p>\n<h2>Creare un Header Personalizzato: Passo Passo<\/h2>\n<p style=\"text-align: justify;\">L&#8217;header \u00e8 la prima cosa che i visitatori vedono. Ecco come crearne uno professionale con il Theme Builder:<\/p>\n<ol>\n<li><strong>Vai su Template \u2192 Theme Builder<\/strong> e clicca su <strong>Header<\/strong><\/li>\n<li>Clicca sul pulsante <strong>Aggiungi Nuovo<\/strong>. Si aprir\u00e0 la libreria dei template predefiniti<\/li>\n<li>Puoi scegliere un template dalla libreria oppure partire da zero cliccando su <strong>Chiudi<\/strong> (X)<\/li>\n<li>Nell&#8217;editor Elementor, aggiungi un <strong>Container<\/strong> con layout orizzontale (flex direction: row)<\/li>\n<li>Inserisci il widget <strong>Site Logo<\/strong> nella parte sinistra \u2014 questo caricher\u00e0 automaticamente il logo impostato nel Customizer di WordPress<\/li>\n<li>Al centro, aggiungi il widget <strong>Nav Menu<\/strong>. Seleziona il menu WordPress che vuoi visualizzare dal dropdown. Configura lo stile: font, colori, spaziatura e comportamento al passaggio del mouse<\/li>\n<li>Nella parte destra, aggiungi un widget <strong>Search<\/strong> (icona lente) e un widget <strong>Button<\/strong> per la call-to-action (es. &#8220;Richiedi Preventivo&#8221; con link a <a href=\"\/contatti\/\">la pagina contatti<\/a>)<\/li>\n<li>Configura le impostazioni responsive: per tablet e mobile, il Nav Menu si trasformer\u00e0 automaticamente in un menu hamburger. Puoi personalizzare l&#8217;icona, i colori e l&#8217;animazione di apertura<\/li>\n<\/ol>\n<p><img decoding=\"async\" src=\"\/blog\/wp-content\/uploads\/2026\/05\/06-editor.png\" alt=\"Creazione header nell'editor Elementor\" \/><\/p>\n<h3>Impostare le Condizioni di Visualizzazione dell&#8217;Header<\/h3>\n<p style=\"text-align: justify;\">Dopo aver completato il design, clicca su <strong>Pubblica<\/strong>. Elementor ti chieder\u00e0 dove applicare questo header tramite le <strong>Display Conditions<\/strong>. Le opzioni principali sono:<\/p>\n<ul>\n<li><strong>Entire Site<\/strong>: l&#8217;header verr\u00e0 mostrato su tutte le pagine del sito<\/li>\n<li><strong>Singular \u2192 Pages<\/strong>: solo sulle pagine (non sugli articoli)<\/li>\n<li><strong>Singular \u2192 Front Page<\/strong>: solo sulla homepage<\/li>\n<li><strong>Archive \u2192 Categorie specifiche<\/strong>: solo sulle pagine di determinate categorie<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Puoi anche combinare condizioni con l&#8217;operatore <strong>Escludi<\/strong>: ad esempio &#8220;Entire Site&#8221; ma &#8220;Escludi \u2192 Front Page&#8221; per avere un header diverso sulla homepage.<\/p>\n<h2>Creare un Footer Personalizzato: Passo Passo<\/h2>\n<p style=\"text-align: justify;\">Il footer \u00e8 un elemento spesso trascurato, ma fondamentale per la navigazione e la credibilit\u00e0 del sito. Ecco come costruirne uno efficace:<\/p>\n<ol>\n<li>Nel Theme Builder, clicca su <strong>Footer \u2192 Aggiungi Nuovo<\/strong><\/li>\n<li>Crea un Container principale con sfondo scuro (es. <code>#1a1a2e<\/code> o il colore del tuo brand)<\/li>\n<li>All&#8217;interno, aggiungi un Container con <strong>3 o 4 colonne<\/strong> orizzontali<\/li>\n<li><strong>Colonna 1 \u2014 Brand<\/strong>: inserisci il widget Image con il logo in versione chiara, seguito da un widget Text Editor con una breve descrizione dell&#8217;azienda<\/li>\n<li><strong>Colonna 2 \u2014 Link Utili<\/strong>: usa un widget <strong>Icon List<\/strong> con i link alle pagine principali del sito (Chi Siamo, Servizi, Blog, Contatti)<\/li>\n<li><strong>Colonna 3 \u2014 Contatti<\/strong>: aggiungi indirizzo email, telefono e indirizzo fisico usando il widget Icon List con icone appropriate (busta, telefono, pin)<\/li>\n<li><strong>Colonna 4 \u2014 Social<\/strong>: inserisci il widget <strong>Social Icons<\/strong> con link a Facebook, Instagram, LinkedIn, YouTube<\/li>\n<li>Sotto le colonne, aggiungi un Divider e un widget Text Editor centrato con il copyright: <code>\u00a9 2026 Nome Azienda \u2014 P.IVA XXXXXXXXXXX \u2014 Tutti i diritti riservati<\/code><\/li>\n<\/ol>\n<p style=\"text-align: justify;\">Per il design responsive, imposta le colonne per diventare impilate (stacked) su mobile: vai nelle impostazioni del Container, tab <strong>Avanzato<\/strong>, e imposta il flex-wrap su &#8220;Wrap&#8221; con larghezza colonna al 100% su mobile.<\/p>\n<h2>Single Post Template: Layout Personalizzato per gli Articoli<\/h2>\n<p style=\"text-align: justify;\">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:<\/p>\n<ol>\n<li>Nel Theme Builder, vai su <strong>Single Post \u2192 Aggiungi Nuovo<\/strong><\/li>\n<li>Aggiungi un Container full-width con l&#8217;immagine in evidenza usando il widget <strong>Featured Image<\/strong> \u2014 imposta altezza fissa (es. 400px) con <code>object-fit: cover<\/code><\/li>\n<li>Sotto, crea un Container con larghezza massima (es. 800px) centrato, per il contenuto<\/li>\n<li>Inserisci il widget <strong>Post Title<\/strong> con tag H1 e stile tipografico coerente con il tuo <a href=\"\/blog\/elementor-tipografia-colori-stili-globali-design-system\/\">design system<\/a><\/li>\n<li>Aggiungi il widget <strong>Post Info<\/strong> per mostrare autore, data e categoria<\/li>\n<li>Inserisci il widget <strong>Post Content<\/strong> \u2014 questo caricher\u00e0 dinamicamente il contenuto dell&#8217;articolo<\/li>\n<li>Dopo il contenuto, aggiungi il widget <strong>Author Box<\/strong> con foto, nome e bio dell&#8217;autore<\/li>\n<li>Aggiungi il widget <strong>Post Navigation<\/strong> per i link all&#8217;articolo precedente\/successivo<\/li>\n<li>Infine, usa il widget <strong>Related Posts<\/strong> (o Posts widget con query per stessa categoria) per mostrare articoli correlati in una griglia 3 colonne<\/li>\n<\/ol>\n<p style=\"text-align: justify;\">Ricorda di impostare la condizione di visualizzazione su <strong>All Singular \u2192 Posts<\/strong> oppure di filtrare per categorie specifiche se vuoi layout diversi per sezioni diverse del blog.<\/p>\n<h2>Archive Template: Personalizzare le Pagine di Categoria e Tag<\/h2>\n<p style=\"text-align: justify;\">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:<\/p>\n<ol>\n<li>Nel Theme Builder, vai su <strong>Archive \u2192 Aggiungi Nuovo<\/strong><\/li>\n<li>Inizia con il widget <strong>Archive Title<\/strong> per mostrare dinamicamente il nome della categoria\/tag<\/li>\n<li>Aggiungi opzionalmente il widget <strong>Archive Posts<\/strong> o usa il widget <strong>Loop Grid<\/strong> (Elementor 3.8+) per un controllo maggiore<\/li>\n<li>Con il Loop Grid, puoi progettare un <strong>Loop Item Template<\/strong> personalizzato: miniatura, titolo, excerpt, data, pulsante &#8220;Leggi di pi\u00f9&#8221;<\/li>\n<li>Configura il numero di colonne (3 su desktop, 2 su tablet, 1 su mobile), la paginazione e l&#8217;ordinamento<\/li>\n<li>Imposta la condizione su <strong>All Archives<\/strong> o su categorie specifiche<\/li>\n<\/ol>\n<h2>Display Conditions: Il Cuore del Theme Builder<\/h2>\n<p style=\"text-align: justify;\">Le <strong>Display Conditions<\/strong> sono il meccanismo che determina dove viene applicato ogni template. Ecco le opzioni principali:<\/p>\n<ul>\n<li><strong>Entire Site<\/strong>: si applica ovunque<\/li>\n<li><strong>Singular<\/strong>: pagine singole \u2014 puoi specificare Posts, Pages, Custom Post Types, o pagine specifiche per nome\/ID<\/li>\n<li><strong>Archive<\/strong>: pagine elenco \u2014 Categorie, Tag, Autore, Data, Risultati di Ricerca<\/li>\n<li><strong>WooCommerce<\/strong>: Shop, Single Product, Product Archive (se WooCommerce \u00e8 installato)<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Puoi creare <strong>regole multiple<\/strong>: ad esempio, un header vale per &#8220;Entire Site&#8221; ma un secondo header vale per &#8220;Front Page&#8221; \u2014 il template pi\u00f9 specifico ha la priorit\u00e0. Puoi anche usare <strong>Escludi<\/strong> per creare eccezioni.<\/p>\n<h2>Consigli Avanzati per il Theme Builder<\/h2>\n<h3>Header Sticky (Fisso in Scroll)<\/h3>\n<p style=\"text-align: justify;\">Per rendere l&#8217;header fisso durante lo scroll, seleziona il Container dell&#8217;header, vai nel tab <strong>Avanzato \u2192 Motion Effects<\/strong> e attiva <strong>Sticky \u2192 Top<\/strong>. Puoi anche impostare un effetto di transizione: l&#8217;header diventa pi\u00f9 compatto o cambia colore di sfondo quando l&#8217;utente scrolla verso il basso. Per questo, usa la funzione <strong>Scrolling Effects<\/strong> o aggiungi <a href=\"\/blog\/elementor-custom-css-codice-personalizzato-sviluppatori\/\">CSS personalizzato<\/a> con la classe <code>.elementor-sticky--effects<\/code>.<\/p>\n<h3>Header Trasparente<\/h3>\n<p style=\"text-align: justify;\">Per un header trasparente che si sovrappone all&#8217;immagine hero, imposta lo sfondo del Container su <strong>trasparente<\/strong>, la posizione su <strong>Absolute<\/strong> e la larghezza su 100%. Aggiungi un leggero z-index (es. 100) per assicurarti che resti sopra il contenuto.<\/p>\n<h3>Header Diversi per Pagina<\/h3>\n<p style=\"text-align: justify;\">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\u00e0 automaticamente quale mostrare in base alle condizioni impostate.<\/p>\n<h2>Risorse Utili e Guide Correlate<\/h2>\n<p style=\"text-align: justify;\">Il Theme Builder \u00e8 pi\u00f9 efficace quando combinato con le altre funzionalit\u00e0 di Elementor. Ti consigliamo di approfondire:<\/p>\n<ul>\n<li><a href=\"\/blog\/elementor-tipografia-colori-stili-globali-design-system\/\">Tipografia, Colori e Stili Globali in Elementor<\/a><\/li>\n<li><a href=\"\/blog\/widget-elementor-guida-completa-esempi\/\">Tutti i Widget di Elementor: Guida Completa<\/a><\/li>\n<li><a href=\"\/blog\/elementor-design-responsive-mobile-tablet\/\">Design Responsive con Elementor<\/a><\/li>\n<li><a href=\"\/blog\/elementor-custom-css-codice-personalizzato-sviluppatori\/\">Custom CSS e Codice Personalizzato<\/a><\/li>\n<li><a href=\"\/blog\/hello-elementor-tema-perfetto-configurazione\/\">Hello Elementor: il Tema Perfetto<\/a><\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Se hai bisogno di aiuto per creare un sito WordPress professionale con header, footer e template personalizzati, il team di <strong>G Tech Group<\/strong> \u00e8 a tua disposizione. <a href=\"\/contatti\/\">Contattaci per una consulenza<\/a> o scopri il nostro servizio di <a href=\"\/realizzazione-siti-web\/\">realizzazione siti web<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il Theme Builder di Elementor Pro \u00e8 una delle funzionalit\u00e0 pi\u00f9 potenti e trasformative a disposizione di chi costruisce siti WordPress. Grazie a questo strumento&hellip;<\/p>\n","protected":false},"author":2,"featured_media":166404,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"61","_seopress_titles_title":"Elementor Theme Builder: Header, Footer e Template [2026]","_seopress_titles_desc":"Come usare il Theme Builder di Elementor Pro per creare header, footer, single post template e archive personalizzati. Guida passo passo.","_seopress_robots_index":"","footnotes":""},"categories":[61],"tags":[2567,2581,2519,2583,2521,2582,2584],"class_list":["post-166451","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-elementor-pro","tag-elementor-theme-builder","tag-elementor-wordpress","tag-footer-elementor","tag-guida-elementor","tag-header-elementor","tag-template-personalizzati"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=166451"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166451\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/166404"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=166451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=166451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=166451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}