Cos’è ACF e Perché Usarlo con Beaver Builder

L’integrazione tra Beaver Builder e Advanced Custom Fields (ACF) apre possibilità straordinarie per la creazione di siti WordPress con contenuti dinamici e strutturati. ACF permette di aggiungere campi personalizzati a qualsiasi tipo di contenuto WordPress, mentre Beaver Builder (tramite Themer) li visualizza in layout professionali. Questa combinazione è la base su cui si costruiscono siti aziendali complessi, directory, portfolio avanzati e piattaforme di contenuti personalizzati.

Cos’è ACF e Perché Usarlo con Beaver Builder

Advanced Custom Fields è il plugin WordPress più utilizzato per la creazione di campi personalizzati. Mentre l’editor standard di WordPress offre solo un titolo, un editor di contenuto e pochi altri campi, ACF ti permette di aggiungere campi di qualsiasi tipo: testo, numero, immagine, galleria, data, selettore colore, mappa, relazione tra post e molto altro.

L’esempio classico è un sito per un’agenzia immobiliare. Invece di inserire tutte le informazioni di un immobile nell’editor di testo (dove non hanno struttura), con ACF crei campi specifici: prezzo, superficie, numero di stanze, indirizzo, coordinate GPS, galleria fotografica, planimetria. Questi dati strutturati possono poi essere visualizzati con Beaver Builder Themer in layout professionali, filtrati, ordinati e ricercati.

Configurare ACF: Gruppi di Campi

Il primo passo è installare ACF (versione gratuita o Pro) e creare i gruppi di campi. Un gruppo di campi è un insieme di campi personalizzati associato a un tipo di contenuto specifico.

Esempio Pratico: Portfolio Progetti

Supponiamo di voler creare un portfolio di progetti web. Ecco come configurare i campi ACF:

1. Vai su ACF → Gruppi di campi → Aggiungi nuovo
2. Nomina il gruppo “Dettagli Progetto”
3. Aggiungi i seguenti campi:
   • Cliente (tipo: Testo)
   • Anno (tipo: Numero)
   • URL del progetto (tipo: URL)
   • Tecnologie utilizzate (tipo: Checkbox — WordPress, Shopify, React, ecc.)
   • Descrizione breve (tipo: Area di testo)
   • Galleria (tipo: Galleria)
   • Testimonial del cliente (tipo: Area di testo)
   • Risultati ottenuti (tipo: Repeater — con sotto-campi “Metrica” e “Valore”)
4. Nella sezione “Location”, imposta la regola: “Post Type è uguale a Progetto” (custom post type)
5. Pubblica il gruppo di campi

Da questo momento, quando crei o modifichi un “Progetto” nel backend di WordPress, vedrai tutti questi campi aggiuntivi sotto l’editor standard, pronti per essere compilati.

Tipi di Campo ACF Supportati da Beaver Builder Themer

Beaver Builder Themer supporta nativamente la maggior parte dei tipi di campo ACF. Ecco come vengono gestiti:

Campi Testuali

• Text, Text Area, WYSIWYG: connettibili ai moduli Testo e Titolo di Beaver Builder
• Number: visualizzabile nei moduli Testo o Number Counter
• Email, URL: utilizzabili come link nei moduli Pulsante o come testo

Campi Media

• Image: connettibile al modulo Foto, allo sfondo delle righe o a qualsiasi campo immagine dei moduli
• Gallery: visualizzabile nel modulo Gallery di Beaver Builder
• File: utilizzabile come link per il download
• oEmbed: per video embed da YouTube, Vimeo, ecc.

Campi di Scelta

• Select, Checkbox, Radio: visualizzabili come testo o elenchi nei moduli Testo
• True/False: utilizzabile per la visibilità condizionale degli elementi
• Color Picker: utilizzabile come colore di sfondo, testo o bordo

Campi Relazionali

• Relationship, Post Object: per mostrare contenuti correlati
• User: per mostrare informazioni sull’utente selezionato
• Taxonomy: per mostrare termini di tassonomia

Campi Avanzati (ACF Pro)

• Repeater: campi ripetibili (es. elenco di competenze, listino prezzi)
• Flexible Content: layout flessibili con blocchi di contenuto diversi
• Group: raggruppamento logico di campi correlati
• Google Map: coordinate GPS visualizzabili su mappa

Connettere i Campi ACF ai Moduli Beaver Builder

Una volta creati i campi ACF e compilati nei contenuti, è il momento di visualizzarli nel frontend tramite Beaver Builder Themer. Il processo è sorprendentemente semplice.

Creare un Layout Themer per il Singolo Progetto

1. Vai su Beaver Builder → Themer Layouts → Aggiungi nuovo
2. Tipo: Singular
3. Location: Progetto (il tuo custom post type)
4. Clicca su Launch Beaver Builder

Ora, nell’editor, costruisci il layout del progetto. Per ogni modulo, invece di inserire contenuto statico, usa le field connections:

• Inserisci un modulo Titolo → clicca sul + accanto al campo testo → seleziona Post Title
• Inserisci un modulo Testo → connetti a ACF → Descrizione breve
• Inserisci un modulo Foto → connetti a Post Featured Image o a un campo immagine ACF
• Inserisci un modulo Pulsante → connetti l’URL a ACF → URL del progetto

Ogni connessione è identificata da un badge arancione nel campo del modulo, indicando che il contenuto è dinamico e verrà popolato automaticamente in base al progetto visualizzato.

Visualizzazione Condizionale con ACF

Una funzionalità avanzata ma estremamente utile è la visualizzazione condizionale: mostrare o nascondere moduli in base al valore di un campo ACF. Ad esempio, potresti voler mostrare la sezione “Testimonial del cliente” solo quando il campo è stato compilato, o mostrare un badge “Progetto premiato” solo quando il campo True/False corrispondente è attivo.

Beaver Builder Themer supporta le condizioni di visibilità basate sui campi ACF nelle impostazioni avanzate dei moduli e delle righe. Seleziona Visibility → ACF Field e imposta la condizione (campo uguale a, diverso da, vuoto, non vuoto). Questo elimina la necessità di codice PHP condizionale e rende la gestione dei layout completamente visuale.

Lavorare con i Campi Repeater di ACF

I campi Repeater di ACF Pro sono tra i più potenti per la creazione di contenuti strutturati. Un Repeater permette di definire un set di sotto-campi che possono essere ripetuti un numero illimitato di volte. Esempi comuni: elenco di competenze con percentuale, listino prezzi con voci multiple, timeline con eventi datati.

Beaver Builder Themer gestisce i Repeater tramite il modulo Post Grid con layout personalizzato, o tramite codice PHP in un modulo HTML. La gestione visuale dei Repeater è un’area dove addon come ACF Module for Beaver Builder o PowerPack offrono moduli dedicati che semplificano enormemente il lavoro.

Caso d’Uso: Schede Servizi con ACF e Beaver Builder

Vediamo un caso d’uso completo. Supponiamo di voler creare un sito aziendale con pagine dei servizi dinamiche, dove ogni servizio ha informazioni strutturate.

Step 1: Custom Post Type

Crea un custom post type “Servizio” (usando un plugin come CPT UI o registrandolo nel functions.php del tema).

Step 2: Campi ACF

Crea un gruppo di campi “Dettagli Servizio” con:

• Icona (tipo: Immagine) — l’icona rappresentativa del servizio
• Sottotitolo (tipo: Testo) — una frase di sintesi
• Vantaggi (tipo: Repeater) — con sotto-campo “Vantaggio” (Testo)
• Prezzo a partire da (tipo: Numero)
• Tempo di realizzazione (tipo: Testo) — es. “2-3 settimane”
• CTA testo (tipo: Testo) — il testo del pulsante di azione
• CTA link (tipo: URL) — il link del pulsante

Step 3: Layout Themer

Crea un layout Singular per il post type “Servizio” con:

• Hero section: immagine in evidenza come sfondo, modulo Titolo connesso al Post Title, modulo Testo connesso al Sottotitolo ACF
• Sezione vantaggi: elenco dei vantaggi dal campo Repeater ACF
• Sezione dettagli: 2 colonne con Prezzo e Tempo di realizzazione
• CTA: pulsante con testo e link connessi ai campi ACF corrispondenti

Step 4: Archivio Servizi

Crea un layout Archive per il post type “Servizio” con un Post Grid che mostra tutti i servizi in formato card, con icona ACF, titolo, sottotitolo ACF e link alla pagina del servizio.

ACF Options Pages e Impostazioni Globali

ACF Pro offre le Options Pages, pagine di impostazioni globali accessibili dal backend di WordPress. Puoi creare campi che non sono legati a un post specifico ma al sito nel suo complesso: numero di telefono aziendale, indirizzo, orari di apertura, link ai social media, testo del footer.

Beaver Builder Themer può connettersi anche ai campi delle Options Pages, rendendoli disponibili in qualsiasi layout. Questo significa che puoi avere un unico punto dove aggiornare il numero di telefono, e il dato si propagherà automaticamente a header, footer, pagina contatti e ovunque sia utilizzato nel sito.

Performance e Considerazioni Tecniche

L’uso combinato di ACF e Beaver Builder Themer aggiunge query al database per ogni campo connesso. Ecco alcuni accorgimenti per mantenere buone performance:

• Cache degli oggetti: abilita un plugin di object caching (Redis o Memcached) per ridurre le query ripetute al database
• Limita i campi: non creare campi ACF superflui. Ogni campo è una riga nella tabella postmeta
• Ottimizza le query: nelle pagine di archivio con molti post e molti campi ACF, le query possono diventare pesanti. Considera l’uso di transient o di cache a livello di pagina
• ACF Local JSON: abilita la funzionalità Local JSON di ACF per salvare le definizioni dei campi in file JSON invece che nel database, accelerando il caricamento

Alternative ad ACF

Sebbene ACF sia il plugin più popolare per i campi personalizzati, esistono alternative compatibili con Beaver Builder Themer:

• Pods: un framework completo per custom post type e campi personalizzati, con integrazione Themer
• Toolset: una suite completa per siti dinamici, con il proprio builder ma compatibile anche con Beaver Builder
• Meta Box: un’alternativa leggera e performante ad ACF, con supporto Themer tramite addon

Conclusione

L’integrazione tra Beaver Builder e ACF è la combinazione ideale per creare siti WordPress con contenuti strutturati e layout dinamici professionali. ACF fornisce la struttura dei dati, Beaver Builder Themer la visualizzazione, e il risultato è un sito che il cliente può gestire facilmente dal backend senza rischiare di rompere il design. Questa architettura è alla base dei siti WordPress più sofisticati e professionali. Nel prossimo articolo, ci concentreremo sull’ottimizzazione SEO delle pagine costruite con Beaver Builder.

Vuoi un sito WordPress con contenuti dinamici e gestione semplificata? Contattaci per una consulenza o esplora i nostri servizi di realizzazione siti web su misura.