{"id":167379,"date":"2025-04-07T09:00:00","date_gmt":"2025-04-07T09:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/cose-beaver-builder-themer\/"},"modified":"2026-05-30T10:00:00","modified_gmt":"2026-05-30T08:00:00","slug":"cose-beaver-builder-themer","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/cose-beaver-builder-themer\/","title":{"rendered":"Cos\u2019\u00e8 Beaver Builder Themer"},"content":{"rendered":"<article>\n<p>Beaver Builder Themer &#232; l&#8217;addon premium che porta le capacit&#224; di Beaver Builder a un livello completamente nuovo, permettendoti di personalizzare ogni aspetto del tuo sito WordPress: header, footer, layout degli articoli, pagine di archivio e molto altro. Se Beaver Builder ti permette di costruire il contenuto delle singole pagine, Themer ti d&#224; il controllo sulla <em>struttura<\/em> che circonda quel contenuto. In questa guida completa, esploreremo tutte le funzionalit&#224; di Beaver Builder Themer e imparerai a creare layout dinamici professionali.<\/p>\n<h2>Cos&#8217;&#232; Beaver Builder Themer<\/h2>\n<p>Beaver Builder Themer &#232; un addon separato dal plugin principale (richiede Beaver Builder Pro o Agency). Il suo scopo &#232; permetterti di usare l&#8217;interfaccia drag-and-drop di Beaver Builder per progettare le aree del sito che normalmente sono controllate dal tema WordPress: l&#8217;header (testata), il footer (pi&#232; di pagina), i template dei singoli articoli, le pagine di archivio, le pagine 404 e qualsiasi altro layout strutturale.<\/p>\n<p>Senza Themer, per personalizzare l&#8217;header dovresti modificare il file <code>header.php<\/code> del tema, il che richiede conoscenze di PHP e HTML. Con Themer, costruisci l&#8217;header visivamente nell&#8217;editor Beaver Builder, esattamente come faresti con una pagina qualsiasi.<\/p>\n<h2>Installazione e Attivazione<\/h2>\n<p>L&#8217;installazione di Beaver Builder Themer segue il procedimento standard per i plugin WordPress:<\/p>\n<ol>\n<li>Scarica il file <code>bb-theme-builder.zip<\/code> dalla tua area riservata su wpbeaverbuilder.com<\/li>\n<li>Vai su <strong>Plugin &rarr; Aggiungi nuovo &rarr; Carica plugin<\/strong><\/li>\n<li>Seleziona il file ZIP, installa e attiva<\/li>\n<\/ol>\n<p>Dopo l&#8217;attivazione, nel menu di WordPress apparir&#224; una nuova voce <strong>Beaver Builder &rarr; Themer Layouts<\/strong>. Da qui puoi creare e gestire tutti i layout tematici del sito.<\/p>\n<h2>Tipi di Layout Themer<\/h2>\n<p>Themer supporta diversi tipi di layout, ognuno con uno scopo specifico:<\/p>\n<h3>Header<\/h3>\n<p>Il layout Header sostituisce l&#8217;header del tema con un design completamente personalizzato. Puoi creare header con:<\/p>\n<ul>\n<li><strong>Logo<\/strong>: modulo immagine connesso al logo del sito (impostazione del Customizer)<\/li>\n<li><strong>Menu di navigazione<\/strong>: modulo Menu connesso ai menu registrati in WordPress<\/li>\n<li><strong>Barra di ricerca<\/strong>: per siti con molti contenuti<\/li>\n<li><strong>Pulsanti CTA<\/strong>: &#8220;Contattaci&#8221;, &#8220;Richiedi preventivo&#8221;<\/li>\n<li><strong>Informazioni di contatto<\/strong>: telefono, email, indirizzo<\/li>\n<li><strong>Icone social<\/strong>: link ai profili social<\/li>\n<\/ul>\n<p>L&#8217;header pu&#242; essere configurato come <strong>fisso (sticky)<\/strong>, rimanendo visibile durante lo scroll, o come <strong>trasparente<\/strong>, con sfondo che diventa visibile solo dopo lo scroll. Queste opzioni sono accessibili dalle impostazioni della riga nell&#8217;editor.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/bb-01-settings.png\" alt=\"Creazione di un header personalizzato con Beaver Builder Themer\" \/><\/p>\n<h3>Footer<\/h3>\n<p>Il layout Footer sostituisce il pi&#232; di pagina del tema. Un footer professionale tipicamente include:<\/p>\n<ul>\n<li><strong>Colonne informative<\/strong>: 3 o 4 colonne con informazioni aziendali, link utili, servizi e contatti<\/li>\n<li><strong>Logo e descrizione breve<\/strong>: chi siamo in sintesi<\/li>\n<li><strong>Newsletter signup<\/strong>: modulo di iscrizione alla newsletter<\/li>\n<li><strong>Menu secondari<\/strong>: link a privacy policy, termini e condizioni, sitemap<\/li>\n<li><strong>Copyright<\/strong>: nota legale con anno dinamico<\/li>\n<li><strong>Social icons<\/strong>: link ai profili social media<\/li>\n<\/ul>\n<h3>Singular (Singolo)<\/h3>\n<p>Il layout Singular controlla come vengono visualizzati i singoli contenuti: articoli del blog, pagine, prodotti WooCommerce, portfolio e qualsiasi custom post type. Questo &#232; forse il tipo di layout pi&#249; potente, perch&#233; ti permette di ridisegnare completamente il template di ogni tipo di contenuto.<\/p>\n<p>Per un articolo del blog, ad esempio, puoi creare un layout con:<\/p>\n<ul>\n<li><strong>Header dell&#8217;articolo<\/strong>: immagine in evidenza a tutta larghezza con titolo e data sovrapposti<\/li>\n<li><strong>Contenuto<\/strong>: il testo dell&#8217;articolo, connesso dinamicamente al contenuto del post<\/li>\n<li><strong>Sidebar<\/strong>: una colonna laterale con widget, articoli correlati, banner<\/li>\n<li><strong>Autore<\/strong>: box autore con foto, bio e link ai suoi altri articoli<\/li>\n<li><strong>Commenti<\/strong>: sezione commenti personalizzata<\/li>\n<li><strong>Articoli correlati<\/strong>: griglia di post della stessa categoria<\/li>\n<\/ul>\n<h3>Archive (Archivio)<\/h3>\n<p>Il layout Archive controlla le pagine che mostrano elenchi di contenuti: la pagina del blog, le pagine di categoria, le pagine di tag, gli archivi per data e autore, e le pagine di archivio dei custom post type. Con Themer puoi personalizzare completamente il modo in cui vengono mostrati gli elenchi di contenuti, scegliendo il layout della griglia, le informazioni visualizzate per ogni elemento e l&#8217;impaginazione.<\/p>\n<h3>404 Page<\/h3>\n<p>Il layout 404 ti permette di creare una pagina di errore personalizzata che sostituisce quella generica del tema. Una buona pagina 404 include un messaggio chiaro, una barra di ricerca, link alle pagine principali e magari un tocco di personalit&#224; per trasformare un&#8217;esperienza negativa in un&#8217;opportunit&#224; di engagement.<\/p>\n<h3>Part (Parte)<\/h3>\n<p>Le Parts sono sezioni riutilizzabili che puoi inserire in posizioni specifiche del sito tramite hook di WordPress o shortcode. Sono utili per aggiungere elementi come banner promozionali, barre di annunci, o sezioni personalizzate in posizioni che non sono direttamente controllate dall&#8217;editor.<\/p>\n<h2>Le Connessioni ai Campi Dinamici (Field Connections)<\/h2>\n<p>Il cuore di Beaver Builder Themer sono le <strong>Field Connections<\/strong>, ovvero la possibilit&#224; di connettere i moduli Beaver Builder ai dati dinamici di WordPress. Invece di inserire testo statico, connetti un modulo a un campo del database e il contenuto si aggiorna automaticamente per ogni post o pagina.<\/p>\n<p>Le connessioni disponibili includono:<\/p>\n<ul>\n<li><strong>Post Title<\/strong>: il titolo del post\/pagina corrente<\/li>\n<li><strong>Post Content<\/strong>: il contenuto dell&#8217;editor<\/li>\n<li><strong>Post Excerpt<\/strong>: l&#8217;estratto<\/li>\n<li><strong>Featured Image<\/strong>: l&#8217;immagine in evidenza<\/li>\n<li><strong>Post Date<\/strong>: la data di pubblicazione<\/li>\n<li><strong>Post Author<\/strong>: nome, bio e avatar dell&#8217;autore<\/li>\n<li><strong>Post Taxonomy<\/strong>: categorie e tag<\/li>\n<li><strong>Post Comments<\/strong>: conteggio e link ai commenti<\/li>\n<li><strong>Site Info<\/strong>: nome del sito, tagline, URL, logo<\/li>\n<li><strong>ACF Fields<\/strong>: campi personalizzati di Advanced Custom Fields (con integrazione nativa)<\/li>\n<\/ul>\n<p>Per connettere un modulo a un campo dinamico, apri le impostazioni del modulo e clicca sull&#8217;icona <strong>+<\/strong> accanto al campo di testo. Si aprir&#224; un menu a tendina con tutte le connessioni disponibili.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/bb-02-templates.png\" alt=\"Field connections di Beaver Builder Themer per dati dinamici\" \/><\/p>\n<h2>Creare un Header Professionale: Tutorial Pratico<\/h2>\n<p>Vediamo passo dopo passo come creare un header professionale con Themer:<\/p>\n<ol>\n<li>Vai su <strong>Beaver Builder &rarr; Themer Layouts &rarr; Aggiungi nuovo<\/strong><\/li>\n<li>Seleziona il tipo <strong>Header<\/strong><\/li>\n<li>Nella sezione Location, scegli dove applicare l&#8217;header (&#8220;Entire Site&#8221; per tutto il sito)<\/li>\n<li>Clicca su <strong>Launch Beaver Builder<\/strong> per aprire l&#8217;editor<\/li>\n<\/ol>\n<p>Nell&#8217;editor, costruisci l&#8217;header come una normale pagina:<\/p>\n<ul>\n<li><strong>Riga 1 (top bar)<\/strong>: layout a 2 colonne. A sinistra: modulo Testo con telefono e email. A destra: modulo Icon Group con link ai social. Sfondo scuro, testo chiaro, font piccolo<\/li>\n<li><strong>Riga 2 (navigazione principale)<\/strong>: layout a 3 colonne (20{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} &#8211; 60{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} &#8211; 20{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c}). A sinistra: modulo Foto connesso al logo del sito. Al centro: modulo Menu connesso al menu principale. A destra: modulo Pulsante con CTA<\/li>\n<\/ul>\n<p>Per rendere l&#8217;header sticky, nelle impostazioni della riga 2 vai alla scheda Avanzate e aggiungi la classe CSS <code>fl-header-sticky<\/code> oppure usa il CSS personalizzato per impostare <code>position: sticky<\/code>.<\/p>\n<h2>Regole di Posizionamento e Condizioni<\/h2>\n<p>Una delle caratteristiche pi&#249; potenti di Themer &#232; il sistema di <strong>regole di posizionamento<\/strong>. Ogni layout pu&#242; essere applicato a posizioni specifiche del sito, con regole inclusive ed esclusive.<\/p>\n<h3>Regole Inclusive<\/h3>\n<p>Definiscono dove il layout viene applicato:<\/p>\n<ul>\n<li><strong>Entire Site<\/strong>: su tutto il sito<\/li>\n<li><strong>All Singular<\/strong>: su tutti i contenuti singoli<\/li>\n<li><strong>Post Type specifico<\/strong>: solo su articoli, pagine, prodotti, ecc.<\/li>\n<li><strong>Categoria\/Tag specifico<\/strong>: solo su contenuti di una determinata tassonomia<\/li>\n<li><strong>Post specifico<\/strong>: su un singolo contenuto identificato<\/li>\n<\/ul>\n<h3>Regole Esclusive<\/h3>\n<p>Definiscono dove il layout NON viene applicato, anche se le regole inclusive lo prevederebbero. Ad esempio: &#8220;Applica su tutto il sito, ECCETTO la homepage&#8221;. Questa combinazione di regole inclusive ed esclusive ti d&#224; un controllo granulare su dove ogni layout viene visualizzato.<\/p>\n<h3>Condizioni Utente<\/h3>\n<p>Puoi anche condizionare i layout in base all&#8217;utente: loggato\/non loggato, ruolo specifico (amministratore, editor, abbonato). Questo permette di mostrare layout diversi a utenti diversi, ad esempio un header con link al pannello di controllo per gli amministratori e un header standard per i visitatori.<\/p>\n<h2>Layout Multipli e Priorit&#224;<\/h2>\n<p>Puoi creare pi&#249; layout dello stesso tipo con regole di posizionamento diverse. Themer utilizza un sistema di priorit&#224; per determinare quale layout applicare quando pi&#249; regole si sovrappongono: il layout con la regola pi&#249; specifica ha la priorit&#224;. Ad esempio, un layout &#8220;Singular &rarr; Post in Categoria X&#8221; avr&#224; priorit&#224; su un layout &#8220;Singular &rarr; All Posts&#8221; per i post della categoria X.<\/p>\n<p>Questo sistema ti permette di creare una gerarchia di layout: un layout generico per la maggior parte dei contenuti e layout specifici per sezioni particolari del sito.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/bb-03-plugins.png\" alt=\"Regole di posizionamento e condizioni per i layout Beaver Builder Themer\" \/><\/p>\n<h2>Integrazione con i Temi<\/h2>\n<p>Beaver Builder Themer funziona meglio con temi che supportano esplicitamente le <strong>theme parts<\/strong> di Themer. Il <strong>BB Theme<\/strong> offre la migliore integrazione, ma Themer &#232; compatibile anche con molti altri temi popolari come GeneratePress, Astra e il tema Hello di Elementor (s&#236;, funziona anche con temi non legati a Beaver Builder).<\/p>\n<p>Quando usi un tema non ufficialmente supportato, Themer tenta comunque di sostituire header e footer utilizzando gli hook standard di WordPress, ma il risultato potrebbe non essere perfetto con tutti i temi. In questi casi, potresti dover aggiungere CSS personalizzato per nascondere l&#8217;header\/footer originale del tema.<\/p>\n<h2>Best Practice per i Layout Themer<\/h2>\n<ul>\n<li><strong>Pianifica prima di costruire<\/strong>: disegna la struttura dei layout su carta o in un tool di design prima di aprire l&#8217;editor<\/li>\n<li><strong>Testa ogni layout<\/strong>: verifica il layout su diversi tipi di contenuto per assicurarti che i dati dinamici vengano visualizzati correttamente<\/li>\n<li><strong>Attenzione alla performance<\/strong>: ogni layout Themer aggiunge query al database. Mantieni i layout semplici e efficienti<\/li>\n<li><strong>Usa le Parts con moderazione<\/strong>: troppe Parts possono rendere il sito difficile da gestire<\/li>\n<li><strong>Documenta le regole<\/strong>: con molti layout e regole complesse, &#232; facile perdere il controllo. Mantieni una documentazione delle regole applicate<\/li>\n<li><strong>Backup regolari<\/strong>: i layout Themer sono cruciali per l&#8217;aspetto del sito. Includi sempre i post type <code>fl-theme-layout<\/code> nei backup<\/li>\n<\/ul>\n<h2>Conclusione<\/h2>\n<p>Beaver Builder Themer trasforma Beaver Builder da un semplice page builder a un <em>site builder<\/em> completo, dandoti il controllo su ogni aspetto visivo del tuo sito WordPress. La combinazione di layout personalizzati, field connections e regole di posizionamento condizionali offre una flessibilit&#224; che rivaleggia con soluzioni di sviluppo custom, ma con la comodit&#224; di un&#8217;interfaccia visuale drag-and-drop. Nel prossimo articolo, esploreremo l&#8217;integrazione di Beaver Builder con ACF (Advanced Custom Fields) per creare contenuti dinamici ancora pi&#249; sofisticati.<\/p>\n<p>Hai bisogno di un sito con layout dinamici e personalizzati? <a href=\"https:\/\/gtechgroup.it\/contatti\/\">Contattaci<\/a> per una consulenza gratuita o scopri i nostri servizi di <a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">realizzazione siti web<\/a> professionali.<\/p>\n<div style=\"background:#f0f4f8;border-left:4px solid #0073aa;padding:20px;margin:30px 0;border-radius:4px;\">\n<h3 style=\"margin-top:0;\">Leggi gli Altri Articoli della Serie Beaver Builder<\/h3>\n<ul>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Come Installare e Configurare Beaver Builder su WordPress<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Creare la Prima Pagina con Beaver Builder: Editor Frontend<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder: Tutti i Moduli e Come Usarli<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder: Righe, Colonne e Layout Responsive<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder: Salvare e Riutilizzare Template e Righe<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder e WooCommerce: Personalizzare il Negozio<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder: Integrazioni con ACF e Campi Personalizzati<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder e la SEO: Ottimizzare le Pagine<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder: Performance e Velocit&#224; del Sito<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder Free vs Pro vs Agency: Confronto 2026<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder vs Elementor vs Divi: Confronto Page Builder<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder: CSS e Codice Personalizzato<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Beaver Builder: Addon e Estensioni (Ultimate Addons, PowerPack)<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/realizzazione-siti-web\/\">Risolvere i Problemi Comuni di Beaver Builder: Troubleshooting<\/a><\/li>\n<\/ul>\n<\/div>\n<\/article>\n<h3>Migliora il Tuo Sito WordPress<\/h3>\n<p>Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:<\/p>\n<ul>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/come-installare-elementor-wordpress-guida-principianti\/\">Come Installare Elementor su WordPress<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/wp-rocket-installare-configurare-wordpress\/\">Come Installare e Configurare WP Rocket<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/come-installare-configurare-seopress-wordpress-guida\/\">Come Installare e Configurare SEOPress<\/a><\/li>\n<li><a href=\"https:\/\/gtechgroup.it\/blog\/installare-attivare-updraftplus-wordpress\/\">Come Installare e Configurare UpdraftPlus<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Beaver Builder Themer &#232; l&#8217;addon premium che porta le capacit&#224; di Beaver Builder a un livello completamente nuovo, permettendoti di personalizzare ogni aspetto del tuo&hellip;<\/p>\n","protected":false},"author":2,"featured_media":167325,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Cos\u2019\u00e8 Beaver Builder Themer | Guida 2026","_seopress_titles_desc":"Beaver Builder Themer &#232; l&#8217;addon premium che porta le capacit&#224; di Beaver Builder a un livello completamente nuovo, permettendoti di personal","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"Cos\u2019\u00e8 Beaver Builder Themer","footnotes":""},"categories":[1,61],"tags":[3662,3329,2520,492],"class_list":["post-167379","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-senza-categoria","category-wordpress","tag-beaver-builder","tag-design","tag-page-builder","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167379","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=167379"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167379\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/167325"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=167379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=167379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=167379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}