Elementor le animazioni sono bellissime su desktop, ma su mobile diventano un incubo di lentezza. Effetti di entrata, blocchi che scorrono e parallasse non solo infastidiscono chi scorre con il dito, ma aggiungono anche centinaia di millisecondi al tempo di caricamento della pagina. E Google PageSpeed Insights non perdona.

La cosa più frustrante: le impostazioni di Elementor non hanno un interruttore globale per disattivare le animazioni su mobile. Ma questo non significa che il problema non si possa risolvere. In 10 minuti e con due file, eliminerai tutte le animazioni per telefoni e tablet, mantenendole su desktop.

La soluzione qui descritta disabilita il foglio di stile elementor-animations che Elementor carica su ogni pagina. Poi lo sostituiamo con CSS personalizzato usando una media query: le animazioni funzionano solo su schermi più larghi di 1000px.

💡 Panoramica rapida:

• Disattivare il file delle animazioni integrato via wp_dequeue_style nel functions.php
• Creare un CSS proprio con una media query min-width 1000px e spostarci dentro gli stili originali delle animazioni
• Caricare il nuovo file via wp_enqueue_style con priorità alta
• Per scenari complessi: un metodo alternativo che usa la sessione PHP per rilevare la dimensione dello schermo

Step 1: Disabilitare il file delle animazioni integrato

La prima cosa da fare è rimuovere dalla coda il file standard elementor-animations.css. Elementor registra e carica questo file a ogni richiesta, indipendentemente dal fatto che le animazioni siano usate o meno nella pagina.

Aggiungi il codice al functions.php del tuo tema child oppure tramite il plugin Code Snippets. Non modificare direttamente il functions.php del tema parent: le modifiche andranno perse al prossimo aggiornamento.

1
// Disable Elementor animation styles for mobile devices
2
function custom_dequeue_elementor_animations() {
3
    wp_dequeue_style( 'elementor-animations' );
4
    wp_deregister_style( 'elementor-animations' );
5
}
6
add_action( 'wp_enqueue_scripts', 'custom_dequeue_elementor_animations', 9999 );
7
add_action( 'wp_head', 'custom_dequeue_elementor_animations', 9999 );

Cosa succede qui: wp_dequeue_style rimuove il file dalla coda di output, wp_deregister_style ne elimina completamente la registrazione. La priorità alta 9999 serve a intercettare le animazioni dopo tutti gli altri script, perché Elementor le carica in fase avanzata. Due hook (wp_enqueue_scripts e wp_head) danno una copertura contro gli scenari in cui il plugin si aggancia a fasi di caricamento diverse.

Verifica: apri il codice sorgente della pagina (Ctrl+U) e cerca elementor-animations. Il link a questo file non dovrebbe più esserci.

Step 2: Creare un CSS personalizzato con media query

Ora le animazioni sono disabilitate per tutti i dispositivi. Per riattivarle su desktop, creiamo un nostro foglio di stile che racchiude le regole originali in @media (min-width: 1000px).

Crea una cartella e un file nel tuo tema child:

1
/wp-content/themes/YOUR_THEME/_sdstudio_dequeue/elementor/css_animate_dequeue.css

Apri il file originale animations.min.css (si trova in wp-content/plugins/elementor/assets/lib/animations/animations.min.css), copiane tutto il contenuto e incollalo nel nuovo file, racchiudendolo in una media query:

1
@media screen and (min-width: 1000px) {
2
    /* Insert ALL contents of the original animations.min.css here */
3
    @keyframes bounce{0%,20%,53%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0) scaleY(.95)}90%{transform:translate3d(0,-4px,0) scaleY(1.02)}}/* ... and so on */
4
}

La soglia di 1000px è un compromesso: la maggior parte dei tablet in orientamento verticale (768-1024px) avrà anch'essa le animazioni disabilitate. Se ti servono le animazioni sui tablet, abbassa il limite a 768px.

Il risultato dovrebbe apparire così:

Step 3: Caricare il nuovo foglio di stile

Non resta che dire a WordPress dove si trova il nostro CSS personalizzato. Aggiungi quanto segue nello stesso functions.php, dopo il codice precedente:

1
// Include custom CSS animations with media query
2
$theme_url = get_stylesheet_directory_uri();
3
$dequeue_css_url = $theme_url . '/_sdstudio_dequeue/elementor/css_animate_dequeue.css';
4
wp_enqueue_style( 'css_animate_dequeue', $dequeue_css_url, array(), '1.0', 'all' );

La funzione get_stylesheet_directory_uri() restituisce l'URL del tema child (o del tema parent se non esiste un tema child). È più sicuro che scrivere il percorso a mano.

Ora apri il sito su un telefono o negli strumenti per sviluppatori (F12 → Attiva/disattiva barra dispositivi). Le animazioni dovrebbero sparire sugli schermi più stretti di 1000px, pur continuando a funzionare come prima su desktop.

Approccio alternativo: rilevare la dimensione dello schermo via sessione PHP

Questo metodo non lo consigliamo per un uso permanente, ma è utile come concetto per altre attività in cui la logica dipende dalla larghezza dello schermo.

L'idea: una sessione PHP salva le dimensioni della finestra dai cookie, e il functions.php decide se disabilitare le animazioni in base a questi dati. Gli svantaggi sono evidenti: la sessione aggiunge carico sul server, la cache si rompe (una pagina con session_start() non viene cachata correttamente) e la prima visita dell'utente avviene sempre senza i dati sulla dimensione dello schermo.

Se comprendi questi limiti e sei disposto ad accettarli, ecco il codice:

1
session_start();
2
if ( isset( $_SESSION['screen_width'] ) && isset( $_SESSION['screen_height'] ) ) {
3
    if ( $_SESSION['screen_width'] <= 768 ) {
4
        function custom_dequeue_elementor_animations() {
5
            wp_dequeue_style( 'elementor-animations' );
6
            wp_deregister_style( 'elementor-animations' );
7
        }
8
        add_action( 'wp_enqueue_scripts', 'custom_dequeue_elementor_animations', 9999 );
9
        add_action( 'wp_head', 'custom_dequeue_elementor_animations', 9999 );
10
    }
11
}

Per la produzione, il metodo dei passaggi 1-3 è più affidabile: non dipende dalle sessioni e funziona bene con qualsiasi sistema di caching.

Video: impostazioni nascoste delle animazioni di Elementor

Il breve video qui sotto mostra un approccio alternativo per disabilitare le animazioni su mobile tramite classi CSS e media query mirate. Questo approccio è utile se non vuoi rimuovere completamente tutte le animazioni, ma sopprimere in modo selettivo quelle più pesanti.

⁉️🤔 Domande frequenti

Perché non posso semplicemente nascondere gli elementi animati via CSS con display: none su mobile?

Perché display: none rimuove l'elemento visivamente, ma il browser carica e analizza comunque il file delle animazioni. La pagina scatta esattamente allo stesso modo, solo che non lo vedi. Una rimozione completa dalla coda via PHP risolve il problema a livello server: 50-80 KB di stili di animazione non transitano proprio sulla rete. Su rete mobile, la differenza si sente.

Questo metodo funziona con altri page builder come Divi, WPBakery o Gutenberg?

Il principio è lo stesso, ma l'handle dello stile è diverso. Divi usa divi-style, WPBakery carica js_composer_front, e Gutenberg non carica affatto un file di animazioni separato (passa tutto attraverso wp-block-library). Trova l'handle nel codice sorgente della pagina cercando <link rel='stylesheet' con il nome del plugin nell'id. Poi ripeti i passaggi 1-3 con quell'handle.

Perché la media query è esattamente 1000px e non lo standard 768px?

Il breakpoint standard di 768px copre telefoni e tablet piccoli. Ma i tablet da 9-10 pollici in verticale (~800px) soffrono ancora le animazioni, perché la potenza del processore e la banda Wi-Fi non bastano per un rendering fluido. La soglia di 1000px copre tutti i tablet, lasciando le animazioni solo per i desktop veri e propri. Se preferisci, puoi abbassarla a 768px: ti basta sostituire 1000 nel CSS con il tuo valore.

È davvero necessario nel 2026, quando tutti gli smartphone hanno processori di fascia alta?

Il divario tra top di gamma e dispositivi economici è ancora enorme. Secondo i dati Statcounter del 2026, un terzo del traffico mobile proviene da dispositivi con meno di 2 GB di RAM. In più le reti mobili: nelle regioni fuori dalle grandi città, le velocità sono spesso sotto i 5 Mbps. Ogni kilobyte di animazioni risparmiato riduce il tempo alla prima interazione di 100-300 ms, e questo è direttamente correlato alla conversione.

Posso fare la stessa cosa con un plugin invece che con codice nel functions.php?

Sì, ma non lo consigliamo. Ogni plugin in più aggiunge il suo overhead, e per un'attività da 15 righe è eccessivo. Se hai timore del codice, installa il plugin gratuito Code Snippets, incolla lì il codice (ha una casella per attivare/disattivare, ed è più difficile sbagliare rispetto al functions.php). Un plugin specifico per disattivare le animazioni è superfluo.

Disabilitare le animazioni o no: raccomandazione finale

In breve: disabilitale su mobile. I guadagni in velocità di caricamento e fluidità di scorrimento superano la perdita estetica. Un utente che visita dal telefono vuole informazioni qui e ora, non aspettare che un blocco hero animato finisca di caricarsi.

Il metodo base in tre passaggi descritto sopra risolve completamente il problema e convive bene con la cache. Configuralo una volta, testalo su un paio di pagine con PageSpeed Insights, e dimenticatene. E se ti serve un'animazione selettiva per elementi specifici, combina l'approccio del video con media query che puntano a classi CSS specifiche.

Ti è piaciuta questa guida? Dai un'occhiata agli altri nostri tutorial su Elementor: ottimizzazione dei font, lazy loading dei widget e configurazione dei breadcrumb per i custom post type.