L’Editor di Elementor offre un’ampia gamma di widget. Tuttavia, quando lavori su siti che richiedono una forte personalizzazione, questi non sono sempre sufficienti. Inoltre, spesso hai idee di personalizzazione che non trovano lo strumento adatto alla loro realizzazione. Allora, che fare? Metti mano al codice e lo crei da zero.
Oggi, Angie, l’agentic AI plugin di Elementor, ti aiuta in questo processo e, in pochi minuti, crea il tuo widget personalizzato esattamente come lo desideri.
È quello che ha fatto Antonio Colucci, fondatore dell’agenzia Start Web. Gli abbiamo chiesto di raccontarci come ci è riuscito, qual è stato il processo e com’è arrivato a creare il suo widget Slider Servizi Accordion.
Introduzione
Creare widget personalizzati per Elementor è da sempre una delle sfide più affascinanti — e complesse — per chi lavora con WordPress a livello professionale. Richiede conoscenza di PHP, JavaScript, CSS e delle API interne di Elementor, una combinazione che spesso spaventa anche gli sviluppatori più esperti.
In questo articolo racconto come ho realizzato uno slider interattivo, denominato Slider Servizi Accordion, partendo da un set di requisiti precisi e affinando il risultato attraverso tre iterazioni successive di prompt con Angie, l’assistente AI integrato in Elementor.
Il risultato finale è un widget completamente configurabile dal pannello di Elementor, responsive, accessibile e privo di conflitti con i plugin di cache — un problema reale che ho risolto lungo il percorso.
Cos’è lo Slider Servizi Accordion
L’idea di base è semplice ma potente: uno slider a fisarmonica (accordion) in cui ogni pannello rappresenta un servizio offerto da un’azienda o da un professionista.
Ecco le caratteristiche principali che ho definito prima ancora di scrivere il primo prompt:
- Layout orizzontale su desktop, verticale su mobile — senza perdere funzionalità.
- La prima slide è sempre aperta al caricamento della pagina.
- Un clic su una slide chiusa la apre e chiude automaticamente quella precedentemente aperta (comportamento accordion classico).
- Ogni slide supporta un’immagine di sfondo, un titolo, una descrizione e un pulsante di azione.
- Il pulsante “scopri di più” con sfumatura di colore sia in stato normale che in hover.
- Tutti i parametri — colori, font, immagini, testi — modificabili direttamente dal pannello widget di Elementor.
Un widget del genere, sviluppato da zero in modo tradizionale, richiederebbe diversi giorni di lavoro. Con Angie ho raggiunto un risultato funzionante in poche ore, iterando su tre versioni del prompt.
Versione 1 — Il prompt fondativo
Il prompt
Il primo prompt è stato il più articolato: ho descritto l’intera logica del componente in modo dettagliato, specificando ogni comportamento atteso.
| 💬 Prompt V1 — testo completo Crea uno slider denominato “Slider Servizi Accordion” – lo slider deve essere molto semplice ma deve presentare queste caratteristiche: • Essere responsive: deve quindi adattarsi in automatico a tutti gli schermi dal più grande al più piccolo senza perdere le sue funzionalità. • Sugli schermi grandi le slide devono essere affiancate su riga orizzontale, sugli schermi più piccoli devono essere in verticale. • La prima slide deve essere sempre aperta su ogni dispositivo, poi quando l’utente clicca su una slide chiusa, questa deve aprirsi in automatico e allo stesso tempo quella aperta deve chiudersi. • Ogni slide deve avere queste caratteristiche: possibilità di caricare una foto di sfondo, avere un titolo e una descrizione. Deve inoltre presentare un pulsante “scopri di più” che quando cliccato deve aprire una pagina in overlay nella slide coprendo interamente il contenuto che c’è sotto, la pagina che si apre deve presentare una piccola “x” di chiusura. • Il pulsante scopri di più deve avere uno sfondo in sfumatura quando è “normale” in uno sfondo in hover sempre in sfumatura quando il cursore viene posizionato sopra. • Ogni elemento che viene inserito deve essere modificabile dal widget di Elementor. E con ogni elemento intendo: sfondo, colori, font, peso font, pulsante. |
Cosa ha generato Angie
Angie ha restituito una struttura completa del widget: la classe PHP principale, il metodo di registrazione dei controlli Elementor e la struttura HTML del template di rendering. Il codice era organizzato in quattro file distinti.
Analisi del risultato
La Versione 1 era già funzionante al primo caricamento. Il widget appariva nel pannello di Elementor, i controlli erano mappati correttamente e il comportamento accordion funzionava come previsto sia su desktop che su mobile.
Tuttavia, durante i test di produzione è emerso un problema critico: il plugin di gestione della cache del sito (LiteSpeed Cache) causava il mancato funzionamento del pulsante overlay in modo intermittente. Il JS veniva concatenato con altri script, creando conflitti di variabili.
Versione 2 — Il problema cache e la nuova opzione
Il problema
I plugin di cache come LiteSpeed Cache, W3 Total Cache o WP Rocket spesso concatenano tutti gli script JavaScript del sito in un unico file per migliorare le performance. Questo processo può causare conflitti quando due script usano variabili globali con lo stesso nome, o quando il codice dipende da un ordine preciso di esecuzione.
Nel mio caso, il pulsante “scopri di più” smetteva di aprire il pannello overlay in modo casuale, rendendo il widget inaffidabile in produzione.
| 💬 Prompt V2 — testo completo Correggi queste falle: il widget nel pulsante scopri di più non funziona come dovrebbe a volte il plugin che gestisce la cache del sito web, tende a rompere il funzionamento del pulsante scopri di più. Inserisci una nuova tendina che mi permetta di dare al pulsante “scopri di più” la possibilità di: • Fare click sul pulsante e aprire la pagina in overlay • Fare click sul pulsante e aprire un link esterno |
La soluzione di Angie
Angie ha affrontato il problema su due fronti: ha isolato il codice JavaScript del widget all’interno di una IIFE (Immediately Invoked Function Expression), eliminando così qualsiasi dipendenza da variabili globali che potessero confliggere con altri script. Contestualmente ha aggiunto una nuova opzione nel pannello widget che permette di scegliere il comportamento del pulsante.
- Modalità Overlay — comportamento originale con apertura in-page.
- Modalità Link esterno — il pulsante apre un URL configurabile dal pannello Elementor.
Risultato parziale
La soluzione con IIFE ha risolto la maggior parte dei conflitti. Tuttavia, durante ulteriori test su ambienti con configurazioni di cache aggressive, il problema si ripresentava ancora in alcuni casi limite, rendendo necessaria una terza iterazione.
Versione 3 — La soluzione definitiva
La decisione di semplificare
Di fronte a un problema che non trovava soluzione completa nella doppia modalità, ho scelto un approccio radicalmente diverso: eliminare del tutto la funzionalità overlay. Questo tipo di decisione — semplificare invece di aggiungere complessità — è spesso la scelta più saggia in sviluppo web professionale.
La funzione overlay, per quanto interessante dal punto di vista UX, era la fonte del problema. Rimuoverla significava ottenere un widget stabile al 100%, senza compromettere la funzionalità principale dello slider.
| 💬 Prompt V3 — testo completo Il problema cache anche con le modifiche apportate non è sparito, per questo procediamo in tal senso: • Elimina del tutto il click che porta all’apertura della pagina in overlay ed elimina la tendina che permette la scelta tra apertura pagina in overlay ed apertura link esterno. Da adesso il pulsante “scopri di più” aprirà sempre e solo un link esterno. |
Il widget definitivo creato con Angie
Angie ha prodotto la versione finale del widget eliminando tutto il codice relativo all’overlay (listener, animazioni CSS, markup HTML) e semplificando il controllo PHP a un singolo campo URL per ogni slide. Il risultato è un widget più leggero, più stabile e completamente immune ai problemi di concatenazione degli script.
Qui il codice finale creato da Angie (apre il pdf in una nuova pagina).
Perché ho creato questo widget
La risposta breve è: perché nessuno dei widget esistenti faceva esattamente quello che mi serviva. Ma vale la pena raccontare il contesto più ampio, perché credo sia una situazione in cui si ritrovano molti professionisti che lavorano con Elementor ogni giorno.
Il problema con i layout standard
Il mio sito diverse pagine dedicate ai servizi che offro (suddivise per categorie) e sono probabilmente la più importanti. Sono quelle pagine che un potenziale cliente visita per capire cosa faccio, come lavoro e se sono la persona giusta per il suo progetto. Per molto tempo poteva raggiungerle solo dal menù, ma sappiamo bene tutti che il visitatore sul sito web vuole starci il tempo giusto e trovare in maniera molto rapida ciò che gli serve.
Avevo provato vari template preconfezionati: layout a griglia, a lista, slider classici. Funzionavano, ma nessuno mi convinceva davvero. Il problema comune è che costringono il visitatore a scorrere o cliccare per vedere i servizi uno alla volta, perdendo la visione d’insieme. Volevo qualcosa di diverso: un componente in cui tutti i servizi fossero visibili contemporaneamente e fosse possibile approfondirne uno con un semplice click, in modo naturale e immediato. L’accordion orizzontale era esattamente quella soluzione.
Perché non usare un plugin già pronto
La prima cosa che ho fatto, come farebbe chiunque, è stata cercare un plugin o un add-on di Elementor che facesse al caso mio. Ne ho trovati diversi che si avvicinavano all’idea, ma ognuno presentava almeno uno di questi problemi:
- Controlli limitati dal pannello di Elementor — non era possibile personalizzare colori, font e immagini senza toccare manualmente il CSS.
- Comportamento responsive approssimativo — su mobile il layout si rompeva o perdeva la logica dell’accordion.
- Dipendenze pesanti — alcuni plugin caricavano librerie JS da 200 KB o più per una funzionalità che avrebbe potuto essere implementata in poche decine di righe.
- Conflitti con l’ambiente di produzione — un problema che, come ho scoperto lungo il percorso, era ben lontano dall’essere raro.
A un certo punto, la valutazione costi-benefici era chiara: sviluppare un widget su misura era la scelta più efficiente, sia in termini di qualità del risultato sia di manutenibilità nel tempo.
Il contesto dell’agenzia
Nella mia agenzia gestisco diversi siti per clienti appartenenti a settori molto diversi tra loro. Ogni volta che costruisco un componente su misura, l’obiettivo non è solo risolvere il problema di un singolo cliente: è creare qualcosa di riutilizzabile, che possa essere adattato in pochi minuti a un nuovo progetto con requisiti simili.
Lo Slider Servizi Accordion risponde perfettamente a questo criterio. Una volta sviluppato e testato, è diventato parte del mio set di widget personalizzati — pronto da installare, configurabile al 100% dal pannello, e già ottimizzato per i problemi di cache che affliggono qualsiasi ambiente di produzione reale.
| 💡 Un approccio che scala Il vantaggio di costruire widget personalizzati invece di dipendere da plugin di terze parti non è solo tecnico. È anche commerciale: si riduce il numero di plugin installati (con impatto diretto sulle performance), si elimina il rischio di aggiornamenti incompatibili, e si offre ai clienti un’esperienza di editing più semplice e coerente. |
Considerazioni finali sull’uso di Angie
Lavorare con un AI assistant per lo sviluppo di widget Elementor ha cambiato in modo significativo il mio flusso di lavoro. Ecco cosa ho imparato da questa esperienza.
Cosa funziona bene
- Prompt dettagliati producono codice più preciso. Più si specificano i comportamenti attesi, meno iterazioni sono necessarie.
- L’AI eccelle nella struttura boilerplate. Registrazione widget, controlli Elementor, hook PHP — tutto corretto al primo tentativo.
- La diagnosi dei problemi è rapida. Descrivendo il sintomo (il problema cache) Angie ha identificato la causa e proposto più soluzioni.
- Le iterazioni sono veloci. Tre versioni del widget in una singola sessione di lavoro.
Cosa richiede attenzione
- Il codice generato va sempre testato in un ambiente di staging prima della messa in produzione.
- I problemi di ambiente (cache, concatenazione di script) non sono sempre prevedibili dall’AI: servono test reali.
- Semplificare è a volte la soluzione migliore — l’AI tende a proporre soluzioni additive, ma a volte meno è di più.
Il workflow consigliato
Basandomi su questa esperienza, il flusso che consiglio per sviluppare widget Elementor con Angie è:
- Scrivi prima le specifiche complete su carta o in un documento, includendo tutti i comportamenti edge case.
- Usa un primo prompt fondativo completo per ottenere la struttura di base.
- Testa immediatamente su staging, inclusi scenari con plugin di cache attivi.
- Itera con prompt chirurgici, descrivendo esattamente il problema osservato e non la soluzione attesa.
- Considera sempre la semplificazione come un’opzione valida quando un requisito crea instabilità.
Conclusione
Lo Slider Servizi Accordion è ora in produzione sul mio sito. È stabile, performante e — cosa fondamentale — posso gestirlo autonomamente dal pannello di Elementor, senza alcun intervento tecnico aggiuntivo.
L’uso di Angie ha ridotto il tempo di sviluppo di circa il 70% rispetto a un approccio tradizionale. Non perché l’AI faccia tutto da sola, ma perché elimina la parte più lenta del processo: la scrittura del codice boilerplate e la ricerca della sintassi corretta nelle API di Elementor.
Il valore aggiunto rimane nelle mani dello sviluppatore: saper formulare i requisiti con precisione, testare in modo critico, interpretare gli errori e prendere le decisioni architetturali giuste — come la scelta di rimuovere la funzione overlay nella Versione 3.
Se non hai ancora provato Angie per lo sviluppo di widget personalizzati, questo è il momento giusto per iniziare.
