ACF e Elementor: Usare i Campi Personalizzati nel Page Builder

ACF e Elementor: Un Binomio Potente

L’integrazione tra Advanced Custom Fields e Elementor rappresenta una delle combinazioni più potenti nell’ecosistema WordPress. Elementor è il page builder più diffuso al mondo, utilizzato da milioni di siti per creare layout visivamente accattivanti senza scrivere codice. ACF, dal canto suo, fornisce la struttura dati personalizzata che va oltre le capacità dell’editor standard. Insieme, permettono di creare siti con contenuti completamente dinamici, dove il design è gestito da Elementor e i dati strutturati sono gestiti da ACF.

Il concetto chiave di questa integrazione è il Dynamic Tag di Elementor Pro. I Dynamic Tag permettono di collegare qualsiasi widget di Elementor a una fonte di dati dinamica, inclusi i campi ACF. Invece di inserire testo statico in un widget Heading, puoi collegarlo a un campo ACF, e il contenuto verrà automaticamente estratto dal campo personalizzato del post corrente. Questo approccio trasforma Elementor da semplice page builder a vero e proprio strumento di templating dinamico.

In questo articolo vedremo come configurare l’integrazione ACF-Elementor, come utilizzare i Dynamic Tag per visualizzare i campi personalizzati, come creare template dinamici per custom post type e come risolvere i problemi più comuni che si incontrano nella pratica quotidiana.

Requisiti per l’Integrazione

Per utilizzare i campi ACF all’interno di Elementor, hai bisogno di Elementor Pro. La versione gratuita di Elementor non include i Dynamic Tag, che sono la funzionalità chiave per collegare i widget ai campi personalizzati. Lato ACF, puoi utilizzare sia la versione gratuita sia la versione PRO: i Dynamic Tag di Elementor funzionano con entrambe le versioni, anche se ovviamente con ACF PRO avrai accesso a più tipi di campo.

Assicurati che entrambi i plugin siano aggiornati all’ultima versione per garantire la massima compatibilità. Le versioni più recenti di Elementor Pro hanno migliorato significativamente il supporto per i campi ACF, aggiungendo il riconoscimento automatico dei gruppi di campi e una migliore gestione dei formati di ritorno. Se utilizzi versioni datate, potresti incontrare problemi di compatibilità o funzionalità mancanti.

Come Funzionano i Dynamic Tag di Elementor

I Dynamic Tag sono marcatori speciali che puoi inserire in quasi ogni campo di testo o proprietà di un widget Elementor. Quando un widget supporta i Dynamic Tag, accanto al campo di input appare una piccola icona a forma di cilindro (o di database). Cliccandola, si apre un menu con tutte le fonti di dati dinamiche disponibili, raggruppate per categoria. La categoria ACF elenca tutti i campi ACF associati al tipo di contenuto che stai modificando.

Elementor mappa automaticamente i tipi di campo ACF ai Dynamic Tag appropriati. I campi Text, Number, Email e URL vengono mappati ai Dynamic Tag di tipo testo. I campi Image vengono mappati ai Dynamic Tag di tipo immagine. I campi URL e Page Link vengono mappati ai Dynamic Tag di tipo link. Questa mappatura automatica semplifica enormemente il lavoro: non devi preoccuparti della compatibilità tra il tipo di campo ACF e il tipo di widget Elementor, perché il sistema mostra solo le opzioni compatibili.

Per utilizzare un Dynamic Tag ACF, segui questi passaggi: seleziona un widget nell’editor di Elementor, clicca sull’icona Dynamic Tag accanto al campo che vuoi rendere dinamico, cerca e seleziona il campo ACF desiderato dalla lista. Il widget mostrerà il valore del campo ACF del post corrente. Se stai lavorando su un template di Elementor Theme Builder, il valore mostrato nell’anteprima dipenderà dal post di anteprima selezionato nella barra inferiore dell’editor.

Creare un Template Dinamico con ACF e Elementor

Il caso d’uso più potente dell’integrazione ACF-Elementor è la creazione di template dinamici per custom post type. Immagina di avere un custom post type “Immobili” con campi ACF per prezzo, superficie, numero di stanze, indirizzo, gallery fotografica e mappa. Con il Theme Builder di Elementor, puoi creare un singolo template che definisce il layout della scheda immobiliare, e ogni campo del template è collegato al corrispondente campo ACF. Quando un visitatore apre la pagina di un immobile specifico, il template si popola automaticamente con i dati di quell’immobile.

Per creare un template dinamico, vai su Elementor > Theme Builder > Single Post e crea un nuovo template. Nella schermata di condizioni, specifica per quale tipo di post deve essere utilizzato (ad esempio “Immobili”). Ora costruisci il layout con i widget di Elementor e collega ogni widget al campo ACF corrispondente tramite i Dynamic Tag. Un widget Heading collegato al campo “Titolo Immobile”, un widget Image collegato al campo “Immagine Principale”, un widget Text collegato al campo “Descrizione”, e così via.

Questo approccio è straordinariamente efficiente: crei il layout una sola volta e funziona per tutti i post del custom post type. Se in futuro vuoi modificare il design della scheda immobiliare, basta aggiornare il template Elementor e tutti gli immobili si aggiornano automaticamente. Se vuoi aggiungere un nuovo dato, aggiungi il campo ACF e inserisci un nuovo widget collegato nel template.

Gestire le Immagini ACF in Elementor

Le immagini sono uno degli elementi più utilizzati nell’integrazione ACF-Elementor. Per visualizzare un’immagine ACF con il widget Image di Elementor, seleziona il widget, clicca sull’icona Dynamic Tag nel campo immagine e scegli il campo ACF Image dalla lista. Elementor gestirà automaticamente il rendering dell’immagine con le dimensioni e lo stile definiti nel widget.

Un aspetto importante è il formato di ritorno del campo Image ACF. Per la migliore compatibilità con Elementor, imposta il formato di ritorno su Image Array o Image ID. Il formato “URL” funziona ma limita le opzioni di ridimensionamento e non fornisce l’alt text automatico. Con il formato “Array” o “ID”, Elementor può accedere a tutte le dimensioni registrate dell’immagine e applicare il ridimensionamento dinamico in base alle impostazioni del widget.

Per le gallerie fotografiche, se utilizzi il campo Gallery di ACF PRO, puoi collegarlo al widget Image Carousel o al widget Image Gallery di Elementor. Questo permette di creare slider e gallerie di immagini completamente gestiti da ACF, dove l’utente seleziona e ordina le foto nel backend e Elementor le presenta con il layout e gli effetti visivi desiderati nel frontend.

Repeater e Elementor: Loop Builder

La visualizzazione dei campi Repeater di ACF in Elementor richiede un approccio specifico. Elementor Pro include il Loop Builder, che permette di creare template per elementi ripetuti. Puoi creare un template di loop che rappresenta una singola riga del Repeater, con i widget collegati ai sottocampi, e poi usare il widget Loop Grid per visualizzare tutte le righe in un layout a griglia, lista o slider.

Un’alternativa popolare per chi non usa il Loop Builder è affidarsi a plugin bridge come Dynamic Content for Elementor o JetEngine, che offrono widget specializzati per la visualizzazione dei Repeater ACF con opzioni avanzate di layout e stile. Questi plugin aggiungono widget come Repeater Grid, Repeater Slider e Repeater Table che si collegano direttamente ai campi Repeater di ACF e offrono controlli granulari sul design.

Se preferisci una soluzione senza plugin aggiuntivi, puoi creare uno shortcode personalizzato nel functions.php che renderizza il Repeater e poi inserire lo shortcode in un widget Shortcode di Elementor. Questo approccio è meno visuale ma offre il massimo controllo sull’output HTML e non introduce dipendenze da plugin terzi.

Conditional Logic con ACF e Elementor

Una delle sfide nell’integrazione ACF-Elementor è la visualizzazione condizionale: mostrare o nascondere sezioni del template in base al valore di un campo ACF. Elementor Pro offre la funzionalità Display Conditions (precedentemente chiamata Visibility Conditions) che ti permette di impostare condizioni basate sui campi ACF. Ad esempio, puoi mostrare una sezione “Video” solo quando il campo ACF “URL Video” ha un valore, oppure nascondere la sezione “Promozione” quando il campo “In Promozione” è impostato su False.

Le Display Conditions di Elementor Pro supportano operatori come “è uguale a”, “non è uguale a”, “contiene”, “non contiene”, “è vuoto” e “non è vuoto”. L’operatore “non è vuoto” è particolarmente utile per mostrare widget solo quando il campo ACF corrispondente è stato compilato, evitando di visualizzare etichette o layout per dati che non esistono. Questa funzionalità è essenziale per creare template flessibili che si adattano al contenuto disponibile.

Custom Post Type e Archive Template

Oltre ai template per i singoli post, puoi utilizzare ACF e Elementor per personalizzare le pagine archivio dei custom post type. Con il Theme Builder di Elementor, crea un template di tipo “Archive” e collegalo al tuo custom post type. All’interno del template archivio, usa il widget Posts o il widget Loop Grid per mostrare l’elenco dei post, personalizzando i campi visibili con i Dynamic Tag ACF.

Per le pagine archivio, i Dynamic Tag funzionano in modo leggermente diverso: nel contesto di un loop di post, i Dynamic Tag si riferiscono al post corrente dell’iterazione, non alla pagina archivio stessa. Questo significa che un widget Heading con Dynamic Tag ACF dentro un loop mostrerà il valore del campo ACF di ciascun post individualmente, creando automaticamente schede con dati diversi per ogni post nell’archivio.

Performance e Ottimizzazione

L’integrazione ACF-Elementor può avere un impatto sulle performance se non gestita correttamente. Ogni Dynamic Tag genera una chiamata get_field() che, per i campi dei post, esegue una query al database. In un template con 20 campi ACF dinamici, vengono eseguite 20 query aggiuntive per ogni caricamento della pagina. Per la maggior parte dei siti, questo è trascurabile, ma per siti ad alto traffico o con molti campi, può sommarsi.

Per ottimizzare le performance, considera queste strategie: utilizza un plugin di caching delle pagine (come WP Rocket o WP Super Cache) per servire le pagine precompilate senza rieseguire le query; abilita l’Object Cache (Redis o Memcached) per cachare i risultati delle query al database; evita di usare campi ACF dinamici in sezioni che non cambiano tra i post (per quelle, usa contenuti statici nel template Elementor); e considera l’uso della funzione acf/pre_load_value per precaricare i valori dei campi in una singola query.

Un’altra considerazione importante riguarda il tempo di rendering dell’editor. Template Elementor complessi con molti Dynamic Tag ACF possono essere lenti da caricare nell’editor, soprattutto su hosting condivisi. Questo non influisce sulle performance del frontend (che sono gestite dalla cache), ma può rallentare il lavoro di design. In questi casi, valuta di suddividere template molto grandi in più template section collegati tramite shortcode o template include.

Problemi Comuni e Soluzioni

Il problema più frequente è che i campi ACF non appaiono nella lista dei Dynamic Tag. Questo accade quando le Location Rules del gruppo di campi non includono il tipo di contenuto che stai modificando in Elementor. Se stai creando un template Theme Builder per il post type “Prodotto”, assicurati che il gruppo di campi ACF abbia una regola di posizionamento per “Post Type è uguale a Prodotto”. Se i campi non appaiono dopo aver verificato le regole, prova a svuotare la cache di Elementor da Elementor > Tools > Regenerate CSS & Data.

Un altro problema comune è che i valori dei campi non vengono visualizzati nell’anteprima dell’editor Elementor. Questo è normale per i template Theme Builder: devi selezionare un post di anteprima dalla barra inferiore dell’editor cliccando sull’icona dell’occhio e scegliendo un post specifico che abbia i campi ACF compilati. Senza un post di anteprima, l’editor non sa da quale post recuperare i valori e mostrerà i campi vuoti.

Infine, fai attenzione alla compatibilità dei formati di ritorno. Se un campo ACF Image è impostato per restituire “URL” ma il Dynamic Tag si aspetta un ID immagine, il risultato sarà un’immagine mancante. La soluzione è impostare il formato di ritorno del campo ACF su “Image Array” o “Image ID”, che sono compatibili con tutti i widget Elementor che gestiscono immagini.

Per creare siti WordPress dinamici con ACF e Elementor, affidati al team di G Tech Group, specializzato nella realizzazione di siti web con page builder e campi personalizzati avanzati. Contattaci per una consulenza e scopri come possiamo trasformare le tue idee in un sito professionale e dinamico.

Migliora il Tuo Sito WordPress

Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:

• Come Installare Elementor su WordPress
• Come Installare e Configurare WP Rocket
• Come Installare e Configurare SEOPress
• Come Installare e Configurare UpdraftPlus