Cos’è Beaver Builder Themer

Beaver Builder Themer è l’addon premium che porta le capacità 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à il controllo sulla struttura che circonda quel contenuto. In questa guida completa, esploreremo tutte le funzionalità di Beaver Builder Themer e imparerai a creare layout dinamici professionali.

Cos’è Beaver Builder Themer

Beaver Builder Themer è un addon separato dal plugin principale (richiede Beaver Builder Pro o Agency). Il suo scopo è permetterti di usare l’interfaccia drag-and-drop di Beaver Builder per progettare le aree del sito che normalmente sono controllate dal tema WordPress: l’header (testata), il footer (piè di pagina), i template dei singoli articoli, le pagine di archivio, le pagine 404 e qualsiasi altro layout strutturale.

Senza Themer, per personalizzare l’header dovresti modificare il file header.php del tema, il che richiede conoscenze di PHP e HTML. Con Themer, costruisci l’header visivamente nell’editor Beaver Builder, esattamente come faresti con una pagina qualsiasi.

Installazione e Attivazione

L’installazione di Beaver Builder Themer segue il procedimento standard per i plugin WordPress:

1. Scarica il file bb-theme-builder.zip dalla tua area riservata su wpbeaverbuilder.com
2. Vai su Plugin → Aggiungi nuovo → Carica plugin
3. Seleziona il file ZIP, installa e attiva

Dopo l’attivazione, nel menu di WordPress apparirà una nuova voce Beaver Builder → Themer Layouts. Da qui puoi creare e gestire tutti i layout tematici del sito.

Tipi di Layout Themer

Themer supporta diversi tipi di layout, ognuno con uno scopo specifico:

Header

Il layout Header sostituisce l’header del tema con un design completamente personalizzato. Puoi creare header con:

• Logo: modulo immagine connesso al logo del sito (impostazione del Customizer)
• Menu di navigazione: modulo Menu connesso ai menu registrati in WordPress
• Barra di ricerca: per siti con molti contenuti
• Pulsanti CTA: “Contattaci”, “Richiedi preventivo”
• Informazioni di contatto: telefono, email, indirizzo
• Icone social: link ai profili social

L’header può essere configurato come fisso (sticky), rimanendo visibile durante lo scroll, o come trasparente, con sfondo che diventa visibile solo dopo lo scroll. Queste opzioni sono accessibili dalle impostazioni della riga nell’editor.

Footer

Il layout Footer sostituisce il piè di pagina del tema. Un footer professionale tipicamente include:

• Colonne informative: 3 o 4 colonne con informazioni aziendali, link utili, servizi e contatti
• Logo e descrizione breve: chi siamo in sintesi
• Newsletter signup: modulo di iscrizione alla newsletter
• Menu secondari: link a privacy policy, termini e condizioni, sitemap
• Copyright: nota legale con anno dinamico
• Social icons: link ai profili social media

Singular (Singolo)

Il layout Singular controlla come vengono visualizzati i singoli contenuti: articoli del blog, pagine, prodotti WooCommerce, portfolio e qualsiasi custom post type. Questo è forse il tipo di layout più potente, perché ti permette di ridisegnare completamente il template di ogni tipo di contenuto.

Per un articolo del blog, ad esempio, puoi creare un layout con:

• Header dell’articolo: immagine in evidenza a tutta larghezza con titolo e data sovrapposti
• Contenuto: il testo dell’articolo, connesso dinamicamente al contenuto del post
• Sidebar: una colonna laterale con widget, articoli correlati, banner
• Autore: box autore con foto, bio e link ai suoi altri articoli
• Commenti: sezione commenti personalizzata
• Articoli correlati: griglia di post della stessa categoria

Archive (Archivio)

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’impaginazione.

404 Page

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à per trasformare un’esperienza negativa in un’opportunità di engagement.

Part (Parte)

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’editor.

Le Connessioni ai Campi Dinamici (Field Connections)

Il cuore di Beaver Builder Themer sono le Field Connections, ovvero la possibilità 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.

Le connessioni disponibili includono:

• Post Title: il titolo del post/pagina corrente
• Post Content: il contenuto dell’editor
• Post Excerpt: l’estratto
• Featured Image: l’immagine in evidenza
• Post Date: la data di pubblicazione
• Post Author: nome, bio e avatar dell’autore
• Post Taxonomy: categorie e tag
• Post Comments: conteggio e link ai commenti
• Site Info: nome del sito, tagline, URL, logo
• ACF Fields: campi personalizzati di Advanced Custom Fields (con integrazione nativa)

Per connettere un modulo a un campo dinamico, apri le impostazioni del modulo e clicca sull’icona + accanto al campo di testo. Si aprirà un menu a tendina con tutte le connessioni disponibili.

Creare un Header Professionale: Tutorial Pratico

Vediamo passo dopo passo come creare un header professionale con Themer:

1. Vai su Beaver Builder → Themer Layouts → Aggiungi nuovo
2. Seleziona il tipo Header
3. Nella sezione Location, scegli dove applicare l’header (“Entire Site” per tutto il sito)
4. Clicca su Launch Beaver Builder per aprire l’editor

Nell’editor, costruisci l’header come una normale pagina:

• Riga 1 (top bar): 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
• Riga 2 (navigazione principale): layout a 3 colonne (20{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} – 60{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} – 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

Per rendere l’header sticky, nelle impostazioni della riga 2 vai alla scheda Avanzate e aggiungi la classe CSS fl-header-sticky oppure usa il CSS personalizzato per impostare position: sticky.

Regole di Posizionamento e Condizioni

Una delle caratteristiche più potenti di Themer è il sistema di regole di posizionamento. Ogni layout può essere applicato a posizioni specifiche del sito, con regole inclusive ed esclusive.

Regole Inclusive

Definiscono dove il layout viene applicato:

• Entire Site: su tutto il sito
• All Singular: su tutti i contenuti singoli
• Post Type specifico: solo su articoli, pagine, prodotti, ecc.
• Categoria/Tag specifico: solo su contenuti di una determinata tassonomia
• Post specifico: su un singolo contenuto identificato

Regole Esclusive

Definiscono dove il layout NON viene applicato, anche se le regole inclusive lo prevederebbero. Ad esempio: “Applica su tutto il sito, ECCETTO la homepage”. Questa combinazione di regole inclusive ed esclusive ti dà un controllo granulare su dove ogni layout viene visualizzato.

Condizioni Utente

Puoi anche condizionare i layout in base all’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.

Layout Multipli e Priorità

Puoi creare più layout dello stesso tipo con regole di posizionamento diverse. Themer utilizza un sistema di priorità per determinare quale layout applicare quando più regole si sovrappongono: il layout con la regola più specifica ha la priorità. Ad esempio, un layout “Singular → Post in Categoria X” avrà priorità su un layout “Singular → All Posts” per i post della categoria X.

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.

Integrazione con i Temi

Beaver Builder Themer funziona meglio con temi che supportano esplicitamente le theme parts di Themer. Il BB Theme offre la migliore integrazione, ma Themer è compatibile anche con molti altri temi popolari come GeneratePress, Astra e il tema Hello di Elementor (sì, funziona anche con temi non legati a Beaver Builder).

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’header/footer originale del tema.

Best Practice per i Layout Themer

• Pianifica prima di costruire: disegna la struttura dei layout su carta o in un tool di design prima di aprire l’editor
• Testa ogni layout: verifica il layout su diversi tipi di contenuto per assicurarti che i dati dinamici vengano visualizzati correttamente
• Attenzione alla performance: ogni layout Themer aggiunge query al database. Mantieni i layout semplici e efficienti
• Usa le Parts con moderazione: troppe Parts possono rendere il sito difficile da gestire
• Documenta le regole: con molti layout e regole complesse, è facile perdere il controllo. Mantieni una documentazione delle regole applicate
• Backup regolari: i layout Themer sono cruciali per l’aspetto del sito. Includi sempre i post type fl-theme-layout nei backup

Conclusione

Beaver Builder Themer trasforma Beaver Builder da un semplice page builder a un site builder 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à che rivaleggia con soluzioni di sviluppo custom, ma con la comodità di un’interfaccia visuale drag-and-drop. Nel prossimo articolo, esploreremo l’integrazione di Beaver Builder con ACF (Advanced Custom Fields) per creare contenuti dinamici ancora più sofisticati.

Hai bisogno di un sito con layout dinamici e personalizzati? Contattaci per una consulenza gratuita o scopri i nostri servizi di realizzazione siti web professionali.