Effetti Divi personalizzati: 3 micro-script pronti (hover, reveal on scroll, ticker infinito)

Tip

• Usa threshold: 0.2 per evitare animazioni premature.

• Rispetta prefers-reduced-motion se aggiungi effetti più marcati.

3) Ticker verticale infinito (USP, recensioni, loghi)

Perfetto per benefit o claim che vuoi far scorrere in loop. Funziona con qualsiasi gruppo di moduli Divi impilati in una colonna.

HTML – in una Colonna Divi, inserisci i moduli (Testo, Blurb, ecc.) uno sotto l’altro, poi assegna alla Colonna la classe fw-ticker.
Esempio contenuto dei moduli:

<p>✔️ Siti WordPress veloci e sicuri</p>
<p>✔️ Hosting ottimizzato e monitorato</p>
<p>✔️ Supporto tecnico in italiano</p>

CSS

.fw-ticker {
position: relative;
overflow: hidden;
–fw-gap: 16px;
–fw-speed: 26s; /* aumenta per scorrere più lentamente */
}
.fw-ticker .fw-track {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: var(–fw-gap);
animation: fwScroll var(–fw-speed) linear infinite;
}
@keyframes fwScroll {
from { transform: translateY(0); }
to { transform: translateY(calc(-1 * var(–fw-distance, 0px))); }
}

JS – costruisce la traccia e duplica i moduli per lo scorrimento continuo.

<script>
document.addEventListener(‘DOMContentLoaded’, function(){
document.querySelectorAll(‘.fw-ticker’).forEach(function(root){
if (root.dataset.ready) return;
const modules = Array.from(root.querySelectorAll(‘:scope > .et_pb_module’));
if (!modules.length) return;

const track = document.createElement(‘div’);
track.className = ‘fw-track’;
modules.forEach(m => track.appendChild(m));
modules.forEach(m => track.appendChild(m.cloneNode(true)));
root.appendChild(track);

function recalc(){
const gap = parseFloat(getComputedStyle(root).getPropertyValue(‘–fw-gap’)) || 16;
const originals = Array.from(track.children).slice(0, modules.length);
const distance = originals.reduce((sum, el) => sum + el.getBoundingClientRect().height, 0)
+ gap * Math.max(0, originals.length – 1);
track.style.setProperty(‘–fw-distance’, distance + ‘px’);
}
const ro = new ResizeObserver(recalc);
ro.observe(track);
recalc();
root.dataset.ready = ‘1’;
});
});
</script>

Note pratiche

• Funziona con contenuti di altezze diverse.

• Modifica --fw-speed per regolare la velocità; aggiungi :hover { animation-play-state: paused; } sulla .fw-track se vuoi fermarlo al passaggio del mouse.

Effetti Divi personalizzati: Performance & Accessibilità

• Niente librerie esterne: solo CSS/JS → impatto minimo su LCP/CLS.

• Rispetta prefers-reduced-motion per utenti sensibili al movimento.

• Mantieni contrasto e dimensioni font adeguate (WCAG AA).

• Carica gli script nel body e minificali in produzione.

SEO: come gli effetti Divi personalizzati aiutano davvero

Gli effetti Divi personalizzati non sono solo estetica: migliorano engagement, tempo sulla pagina e lettura a blocchi dei contenuti. Questo favorisce segnali comportamentali positivi utili al posizionamento e alla ricerca AI-First (esperienza e chiarezza). Mantieni il DOM pulito, evita markup eccessivo e lascia che sia il contenuto a rimanere protagonista.

Gli effetti Divi personalizzati non sono solo “cosmesi”: sono micro-segnali di qualità che migliorano fruibilità e conversione. Parti da questi 3 snippet, testali su sezioni ad alto impatto e misura il risultato: spesso bastano poche righe di codice per fare una grande differenza.

Vuoi che li integriamo direttamente sul tuo sito? Ti diamo noi una mano: setup, test A/B e ottimizzazione.