In questo articolo vediamo come costruire delle schede di prodotto interattive con il loop builder di Divi 5.

Con il costruttore di loop (loop builder in inglese) di Divi puoi lasciare l’immagine pulita e ben visibile, mostrando i dettagli che vuoi, quando vuoi. Per esempio nel momento in cui l’utente passa con il mouse sopra la scheda.

In questa guida vediamo proprio questo effetto: una sovrapposizione che compare in dissolvenza e mostra nome del prodotto, prezzo e link alla pagina di dettaglio. Il tutto mantenendo il layout ordinato, leggibile e più piacevole da esplorare.

Risoluzione dei problemi: Problemi Comuni con Sovrapposizione al Passaggio del Mouse e Contenuto Dinamico

Durante la creazione di schede prodotto interattive con il Costruttore di Loop di Divi, ci sono alcuni problemi che tornano spesso.

Vediamo i più comuni e come affrontarli.

Cosa Costruiremo

Ecco un'anteprima del risultato finale prima di iniziare.

La sovrapposizione copre tutta l’area dell’immagine, quindi l’effetto si attiva in modo fluido ovunque si sposti il cursore.

Con una dissolvenza morbida compaiono nome del prodotto, prezzo e pulsante su uno sfondo più scuro.

Il risultato? Una scheda più pulita, più leggibile e con una stratificazione visiva chiara, senza appesantire il layout.

La sovrapposizione non appare al passaggio del mouse

Di solito il problema è legato alla proprietà position del contenitore padre.

Controlla che il modulo usato come contenitore abbia position: relative impostato tramite CSS personalizzato e che la sovrapposizione abbia position: absolute con uno z-index superiore rispetto agli altri elementi.

Se stai usando le opzioni di trasformazione di Divi per animare la sovrapposizione, verifica anche che non ci sia un overflow: hidden applicato a un contenitore esterno che finisce per tagliare l’elemento.

I Passaggi Chiave per Questo Effetto

Per ottenere questo risultato, il lavoro si divide in tre parti: prima configuri il loop dei prodotti, poi aggiungi il contenuto della sovrapposizione a livelli e infine imposti l’effetto al passaggio del mouse.

Altezze inconsistenti tra le schede

Se le schede hanno altezze diverse all’interno della griglia, il motivo in genere è la lunghezza variabile dei titoli o delle descrizioni.

Iniziamo da qui: imposta un’altezza minima fissa sul contenitore della scheda e usa flexbox per spingere gli elementi di invito all’azione sempre in fondo.

Nel CSS del modulo genitore:

display: flex; flex-direction: column; justify-content: space-between; min-height: 380px;

Passo 1. Configura la griglia prodotti con il Costruttore di Loop

Partiamo da una cosa semplice.

La struttura iniziale è molto lineare: aggiungi una nuova sezione alla pagina, inserisci una riga al suo interno ed elimina le due colonne predefinite, lasciandone una sola.

Attiva il Costruttore di Loop sulla colonna e imposta il tipo di articolo su prodotti.

In pratica, Divi ripeterà automaticamente il layout della scheda per ogni prodotto presente nel negozio.

Imposta il tipo di layout della riga su griglia e attiva righe di altezza uguale.

Così mantieni le schede uniformi in tutta la griglia, senza quell’effetto un po’ traballante da elementi tutti diversi tra loro.

Imposta la spaziatura orizzontale e verticale tra le schede su Min(4vw, 60px).

Qui c’è un piccolo tecnicismo, ma semplice: vw indica una percentuale della larghezza dello schermo, mentre 60px è il tetto massimo.

Tradotto: la distanza si adatta ai dispositivi, ma senza allargarsi a caso.

Con la griglia pronta, vai nelle impostazioni dell’immagine di sfondo della colonna e imposta la sorgente su contenuto dinamico > immagine in evidenza del ciclo.

In questo modo ogni scheda caricherà automaticamente l’immagine del prodotto corrispondente.

Aggiungi un raggio del bordo di 8px per arrotondare leggermente gli angoli di ogni scheda.

A questo punto la griglia dovrebbe già mostrare le immagini dei prodotti in un layout pulito e ripetuto.

Nel prossimo passaggio andiamo a costruire la sovrapposizione che si appoggerà sopra ogni scheda.

I collegamenti dinamici non funzionano correttamente

Se il campo link del pulsante non porta alla pagina prodotto corretta, controlla che il campo dinamico sia mappato su URL del post corrente e non su un valore statico rimasto da un modello precedente.

Inoltre, svuota la cache del server e quella del browser dopo ogni modifica ai campi dinamici.

Divi può mostrare versioni memorizzate nella cache che nascondono le modifiche reali.

Passo 2. Aggiungi il Livello di Sovrapposizione su Ogni Scheda

Qui inizia la parte interessante.

Aggiungi una riga all’interno della stessa colonna: sarà il contenitore della sovrapposizione.

Vai su colore di sfondo > gradiente e imposta la trasparenza del primo colore allo 0%.

Il secondo colore, invece, mettilo su nero. Così ottieni una tinta scura sovrapposta all’immagine del prodotto, utile per far risaltare meglio i contenuti sopra.

Dentro la riga, inserisci un modulo di gruppo con un layout a 2 colonne, poi aggiungi un modulo di testo in ciascuna colonna.

Nella colonna sinistra, imposta i moduli di testo su contenuto dinamico: uno su titolo del prodotto loop e l’altro su prezzo del prodotto loop.

Così ogni scheda recupera automaticamente il nome e il prezzo del prodotto corretto, senza inserimenti manuali uno per uno.

Sotto il gruppo, aggiungi un modulo pulsante e imposta il suo collegamento su contenuto dinamico > collegamento loop.

In questo modo il pulsante porterà l’utente direttamente alla pagina di quel prodotto.

Imposta ora l’altezza della riga al 100%, così lo strato sovrapposto occuperà l’intera scheda prodotto.

Infine, regola la spaziatura del gruppo e del pulsante per posizionare il contenuto nel punto desiderato dentro il livello sovrapposto.

Una volta fatto, la scheda è completa e pronta per l’effetto al passaggio del mouse.

Il prezzo non si aggiorna nei prodotti variabili

Il loop builder legge i dati del post WooCommerce come campo dinamico, ma nei prodotti variabili potrebbe mostrare solo il prezzo base.

In questi casi può avere più senso usare uno shortcode di WooCommerce o un hook PHP per mostrare correttamente l’intervallo di prezzo, invece di forzare il campo dinamico nativo.

Se il problema continua oppure il comportamento sembra dipendere dalla configurazione specifica del sito, contattami per un’analisi diretta.

Passo 3. Configurare l'Effetto al Passaggio del Mouse

La sovrapposizione ormai è al suo posto.

Ora resta solo da dire a Divi quando mostrarla.

Seleziona la riga della sovrapposizione e vai su filtri. Nello stato predefinito, imposta l’opacità allo 0%.

Così la sovrapposizione resta invisibile finché l’utente non passa con il cursore sopra la scheda.

Passa allo stato al passaggio del mouse e imposta l’opacità al 100%.

Divi gestirà la transizione in automatico, quindi la sovrapposizione apparirà in dissolvenza nel momento in cui il cursore entra nella scheda.

Dato che il livello sovrapposto copre tutta la scheda del prodotto, l’effetto si attiva ovunque l’utente passi con il cursore sull’immagine.

Niente piccole zone sensibili difficili da prendere.

Titolo del prodotto, prezzo e pulsante compaiono esattamente dove l’attenzione è già concentrata.

Risultato Finale

Ecco il layout completato in azione.

Accessibilità e Considerazioni per Dispositivi Mobili

Le schede prodotto interattive con sovrapposizione funzionano bene su desktop, ma su dispositivi touch e per gli utenti che navigano da tastiera richiedono qualche attenzione in più.

Una sovrapposizione visibile solo al passaggio del mouse, infatti, su smartphone è di fatto inaccessibile e per chi usa il tasto Tab può restare invisibile.

Touch: rendere la sovrapposizione raggiungibile al tocco

Sui dispositivi touch, lo stato :hover viene interpretato in modo poco prevedibile.

La soluzione più solida è fare in modo che le informazioni critiche — prezzo, invito all’azione e nome del prodotto — non siano solo nella sovrapposizione, oppure che la sovrapposizione si attivi al tocco e resti visibile fino a un secondo tocco o allo scorrimento.

Se usi solo CSS per attivare l’effetto al passaggio del mouse, può essere utile affiancare una logica JavaScript minimale che aggiunga o rimuova una classe .is-active al tocco.

Mantenendo invece il comportamento hover su desktop.

Focus: visibilità da tastiera

Gli elementi interattivi dentro la sovrapposizione devono essere raggiungibili via tastiera.

Verifica che:

• il focus non resti bloccato fuori dalla sovrapposizione quando questa è nascosta visivamente;
• la sovrapposizione diventi visibile quando uno dei suoi elementi riceve il focus — questo si può gestire con :focus-within sul contenitore;
• l’ordine di tabulazione sia logico rispetto alla struttura della scheda.

Contrasto e leggibilità

Le sovrapposizioni semitrasparenti su immagini di prodotto possono facilmente non superare il rapporto di contrasto minimo WCAG AA, cioè 4.5:1 per il testo normale.

Quindi occhio a questo punto.

Ecco alcune indicazioni pratiche:

• Usa uno sfondo di sovrapposizione con un’opacità sufficiente: un nero al 60–70% spesso è più affidabile di sfumature colorate.
• Evita il testo bianco su immagini chiare senza sovrapposizione, perché il contrasto finisce per dipendere dall’immagine e non dal CSS.
• Verifica il contrasto con strumenti come i developer tools del browser o un verificatore WCAG dedicato.

Integrare questi accorgimenti mentre costruisci il loop richiede pochi minuti.

In compenso riduce parecchio il rischio di escludere utenti o di ritrovarti con problemi di conformità, soprattutto nei negozi che operano in contesti regolamentati.

Metti in pratica questa struttura

Questo layout con rivelazione al passaggio del mouse è un modo efficace per mantenere le griglie di prodotto ordinate, senza nascondere le informazioni davvero utili per l’utente.

L’immagine resta in primo piano e i dettagli compaiono solo quando c’è interazione, rendendo l’interfaccia più leggibile senza perdere funzionalità.

C’è anche un vantaggio molto pratico: dato che la struttura è costruita con il Costruttore di Loop e con i contenuti dinamici, si aggiorna automaticamente quando cambia il catalogo prodotti.

Quindi non devi rimettere mano al layout ogni volta che aggiungi, rimuovi o modifichi un prodotto.

Una volta capita la logica, lo stesso schema si può riutilizzare anche altrove: portfolio, team, articoli del blog o qualsiasi griglia basata su immagini in cui vuoi mostrare i dettagli solo all’interazione.

Vale la pena provarlo su più tipi di contenuto per capire dove funziona meglio nel progetto specifico, invece di usarlo a occhi chiusi ovunque.

Prima di considerare il lavoro chiuso, controlla questi punti essenziali:

• Accessibilità: assicurati che ogni scheda abbia un testo alternativo per l’immagine, che i pulsanti abbiano etichette leggibili dai lettori di schermo e che il pannello sovrapposto sia raggiungibile anche navigando con la tastiera.
• Mobile: testa il comportamento sui dispositivi touch. Su smartphone e tablet l’effetto al passaggio del mouse non si attiva automaticamente al tocco: può quindi avere senso mostrare sempre visibili le informazioni principali, oppure rivelarle con un tocco diretto.
• Prestazioni: usa immagini ottimizzate per il web, preferibilmente in formato WebP, che in genere è più leggero rispetto a JPG e PNG. Evita animazioni pesanti su griglie con molti elementi e controlla la stabilità visiva della pagina durante il caricamento, così gli elementi non si spostano all’improvviso mentre l’utente la sta guardando.
• Contenuto dinamico: verifica che titolo, prezzo e link siano sempre aggiornati rispetto ai dati reali del prodotto. Una griglia automatica serve davvero solo se i dati che mostra sono affidabili.
• Riutilizzo del modello: lo stesso schema funziona anche per portfolio, team e blog. Se pensi di replicarlo, struttura il modello in modo da poterlo adattare senza ricostruirlo da zero ogni volta.

Se vuoi un confronto su accessibilità, prestazioni o sulla struttura dei tuoi modelli riutilizzabili, scrivimi.

Posco aiutarti con un’analisi rapida e mirata.

Vuoi Trasformare Questo in un Modello di Negozio Riutilizzabile?

Costruire una scheda prodotto funzionante con il Costruttore di Loop è già un buon punto di partenza.

Però trasformarla in un modello stabile, coerente con il brand e pronto per andare online richiede qualche passaggio in più, soprattutto se il negozio ha esigenze particolari o un catalogo abbastanza articolato.

Ecco le aree su cui, di solito, vale la pena investire tempo prima della pubblicazione:

• Conversione in modello riutilizzabile: salvare il loop come modello globale o come modello di sezione, così da poterlo replicare su altre pagine archivio, landing page di prodotto o homepage senza ripartire ogni volta da zero.
• Adattamento al sistema di stile del brand: allineare tipografia, spaziatura e palette colori al sistema visivo esistente, evitando personalizzazioni manuali che si rompono al primo aggiornamento del tema.
• Verifica dell’accessibilità: testare la navigazione da tastiera sulle schede, controllare i contrasti tra testo e sfondo delle sovrapposizioni, aggiungere etichette descrittive ai collegamenti dinamici generati dal loop. Sono dettagli spesso trascurati, ma importanti sia per l’accessibilità sia per la SEO.
• Test delle prestazioni su dispositivo reale: le animazioni al passaggio del cursore e le immagini dinamiche possono comportarsi in modo diverso su mobile o con connessioni lente. Quindi conviene validare il tutto con strumenti come Lighthouse o WebPageTest, entrambi gratuiti e utili per misurare velocità e qualità tecnica della pagina, prima del lancio.

Se stai lavorando a un progetto e ti serve un supporto mirato su uno di questi aspetti — per rifinire il modello, risolvere un problema specifico o fare una revisione tecnica — scrivimi e vediamo insieme come impostarlo al meglio.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes come base.