I siti con design piatto vengono letti. Quelli con parallasse vengono ricordati. Stessi contenuti, stesso layout, ma lo sfondo si muove più lentamente del primo piano e la pagina acquista profondità, respiro e una qualità cinematografica. L'utente non si limita a scorrere un testo: scorre una storia.

Il problema è che la maggior parte dei siti WordPress si assomiglia: header, griglia, sidebar, footer. La parallasse rompe questo schema senza dover ristrutturare il layout, senza cambiare tema e a volte senza nemmeno usare plugin. Non tutte le implementazioni però funzionano a dovere: scatti nello scroll su mobile, problemi di performance, conflitti di accessibilità, sai già come va.

Ecco un'analisi completa: cos'è lo scrolling parallasse, quando conviene, quali temi e plugin offrono risultati già pronti e come evitare di affossare le performance. Con screenshot passo passo, confronti tra strumenti e risposte alle domande più comuni.

💡 Panoramica rapida:

• Capire come funziona lo scrolling parallasse e perché serve al tuo sito
• Valutare i rischi: performance su mobile, accessibilità, scelta dello sfondo
• Scegliere un tema con parallasse integrata o aggiungere Slider Revolution per gli slider
• Installare il plugin gratuito Advanced WordPress Backgrounds (AWB), una soluzione universale per Gutenberg, Classic Editor e WPBakery

Cos'è l'effetto parallasse

L'effetto parallasse è una tecnica in cui lo sfondo di una pagina web scorre più lentamente del contenuto in primo piano. Crea un'illusione di profondità: il contenuto sembra fluttuare sopra l'immagine e la pagina acquista una qualità tridimensionale.

La tecnica è arrivata al web design dal mondo dei videogiochi, dove la parallasse veniva usata da anni per creare livelli di sfondo nei platform. Oggi è una funzionalità standard nei temi premium, nei page builder e nei plugin standalone. Persino il tema gratuito Twenty Seventeen, distribuito di default con WordPress, aveva la parallasse integrata.

Il web design moderno è andato oltre: la proprietà CSS scroll-timeline permette di creare parallasse senza alcun JavaScript, usando animazioni pure legate all'avanzamento dello scroll. Per un'implementazione rapida su siti in produzione, però, plugin e builder restano più pratici.

Il video qui sopra è una guida completa per aggiungere la parallasse in WordPress (EN, 12 minuti). L'autore mostra l'installazione, la configurazione della velocità, la disattivazione su mobile e la gestione delle immagini di sfondo in tempo reale.

Perché usare la parallasse sul tuo sito

Primo motivo, il più ovvio: l'effetto wow visivo. La parallasse rende il sito moderno, elegante e memorabile. Quando l'utente scorre la pagina e lo sfondo si muove a una velocità diversa, l'attenzione viene catturata. Il contenuto salta all'occhio.

Ma i vantaggi non si fermano all'estetica. La parallasse spezza la pagina in sezioni leggibili, specialmente nelle landing page e nelle home page dove devi guidare il visitatore dal titolo alla call to action. Una sezione con sfondo parallasse separa naturalmente un blocco di contenuto dall'altro, indirizzando l'attenzione.

Terzo motivo: coinvolgimento e tempo sul sito. I visitatori si soffermano più a lungo sulle pagine con scorrimento interattivo, il che migliora indirettamente le metriche comportamentali e la conversione. Funziona particolarmente bene sui siti monopagina, nei portfolio e nelle landing page di prodotto.

Cosa considerare prima di implementare la parallasse

Ogni medaglia ha il suo rovescio. Ecco cosa tenere a mente prima di aggiungere sezioni parallasse.

Scelta dell'immagine di sfondo

L'immagine di sfondo è l'elemento chiave. Deve essere pertinente al tema della pagina e al brand nel suo complesso. Se sopra lo sfondo inserisci testi o titoli, è meglio usare una texture tenue o una sovrapposizione di colore piuttosto che una foto ricca di dettagli. Il contenuto non deve competere con lo sfondo.

Per le foto, solo alta risoluzione. Uno sfondo a tutto schermo sfuocato o pixelato distrugge l'aspetto professionale. Abbiamo raccolto una selezione di siti di foto stock con immagini gratuite e premium in una recensione separata di 35 banche immagini.

Parallasse su dispositivi mobili

Su smartphone e tablet la parallasse funziona in modo poco affidabile. Lo scorrimento basato su gesture (swipe) è diverso dalla rotella del mouse, l'effetto può scattare, laggare o non essere visualizzato affatto. La maggior parte dei plugin e dei temi moderni permette di disattivare la parallasse per il mobile con un semplice checkbox, ed è l'opzione migliore dal punto di vista UX.

Accessibilità

Gli sfondi in movimento creano problemi agli utenti con disturbi vestibolari: cinetosi, nausea, difficoltà di messa a fuoco. La media query prefers-reduced-motion consente di disattivare automaticamente le animazioni parallasse per questi visitatori. Se il tuo plugin o tema non la supporta, come minimo disattiva l'effetto su mobile.

Scegliere un tema con parallasse integrata

Per chi parte da zero, la strada più semplice è scegliere un tema che abbia già la parallasse integrata. La maggior parte dei temi premium per WordPress include questa funzionalità almeno per la home page. Se ti serve la parallasse su pagine diverse del sito, orientati verso temi multipurpose con un builder avanzato.

Tre opzioni collaudate:

• Divi di Elegant Themes, un visual builder con opzione di sfondo parallasse integrata per qualsiasi sezione;
• Ultra di Themify, un tema multipurpose con Themify Builder e impostazioni parallasse flessibili;
• Total di WPExplorer, un tema multipurpose basato su WPBakery con opzioni parallasse avanzate (velocità, direzione, disattivazione su mobile).

Aggiungere uno sfondo parallasse in Total (WPBakery)

Di seguito un esempio passo passo per configurare il parallax nel tema Total. Total utilizza WPBakery per costruire le pagine, ma opzioni simili sono presenti nella maggior parte dei page builder per WordPress.

Per prima cosa inserisci una riga e aggiungi del contenuto. Clicca l’icona a forma di matita per modificare la riga. Se il layout non ha una sidebar, attiva l’opzione «Stretch row» in modo che lo sfondo parallax riempia la riga a tutta larghezza. Total ha anche una modalità a schermo intero che estende lo sfondo su tutta la finestra del browser.

Nella sezione «Parallax», aggiungi un’immagine di sfondo e imposta la velocità di scorrimento. Più alto è il numero, più l’immagine si sposta e maggiore è la risoluzione richiesta.

Nelle impostazioni avanzate del parallax puoi attivare o disattivare l’effetto sui dispositivi mobili, scegliere lo stile dell’immagine (cover, fixed, repeat), la direzione del movimento e la velocità precisa.

Per creare contrasto tra sfondo e contenuto, usa la scheda «Overlay», ad esempio un riempimento bianco semitrasparente sopra l’immagine. Salva la riga e le modifiche alla pagina.

Slider parallax con Slider Revolution

Quando non ti serve uno sfondo statico ma uno slider completo con effetto parallax, lo strumento migliore è Slider Revolution. Il plugin premium include centinaia di opzioni: font, livelli, effetti di transizione, layout e, naturalmente, parallax multi-livello. Una guida dettagliata a Slider Revolution è disponibile in un articolo separato.

Come attivare il parallax in Slider Revolution

Installa il plugin e importa un template slider già pronto oppure crea uno slider da zero.

Modifica lo sfondo principale della slide: aggiungi l’immagine sorgente e vai alla scheda «Parallax / 3D» per assegnare il livello di parallax. Poi, quando aggiungi i livelli (testo, immagini, pulsanti), seleziona l’opzione Parallax / 3D per ciascun livello: la profondità del parallax darà vita agli elementi in modo indipendente l’uno dall’altro.

Lo slider finito si inserisce tramite shortcode in qualsiasi articolo o pagina. Se usi WPBakery, trascina semplicemente l’elemento Slider Revolution nella pagina e seleziona lo slider dall’elenco a discesa.

Plugin gratuito Advanced WordPress Backgrounds (AWB)

Se hai già installato un tema che non supporta il parallax, non devi cambiarlo. Advanced WordPress Backgrounds (AWB) è un plugin gratuito dalla directory ufficiale di WordPress.org che aggiunge sfondi parallax a qualsiasi elemento della pagina: blocco, titolo o intera sezione. Il plugin è attivamente sviluppato: ultimo aggiornamento, giugno 2026, compatibilità con WordPress 7.0 confermata.

AWB supporta tre tipi di sfondo: colore, immagine e video (YouTube/Vimeo/self-hosted). Funziona con Gutenberg, Classic Editor e WPBakery.

Installare AWB

Vai all'amministrazione di WordPress: Plugin → Aggiungi nuovo. Nella ricerca, digita "Advanced WordPress Backgrounds", clicca Installa → Attiva.

Il metodo per aggiungere uno sfondo dipende dall'editor. Secondo la descrizione del plugin su WordPress.org, tutti e tre gli editor hanno accesso a: tipo di sfondo (colore, immagine o video), dimensione di visualizzazione (cover, contain o pattern), posizione dello sfondo con percentuali, overlay con selezione colore e trasparenza tramite selettore Alpha, scorrimento parallax con impostazione della velocità, ridimensionamento e trasparenza, e parallax del mouse (lo sfondo si sposta leggermente con il cursore).

Nel menu Impostazioni → AWB c'è una scheda con parametri globali. Qui puoi disabilitare gli effetti parallax e video per dispositivi mobili e browser specifici.

AWB in Gutenberg

AWB è completamente compatibile con l'editor a blocchi e fornisce un proprio blocco.

Inserisci un blocco AWB, poi aggiungi al suo interno qualsiasi altro blocco con il tuo contenuto.

Clicca sul blocco AWB e vai alla scheda "Blocco" nel pannello di destra. Qui configuri tutti i parametri dello sfondo: tipo, immagine, parallax, overlay.

AWB nel Classic Editor

Nell'editor classico, AWB funziona tramite uno shortcode. Seleziona il testo che necessita di uno sfondo parallax e clicca l'icona AWB nella barra degli strumenti dell'editor.

Scegli un'immagine di sfondo e configura gli altri parametri: colore dell'overlay, tipo di parallax, velocità. Clicca "Inserisci".

Lo shortcode ha un aspetto simile a questo:

1
[nk_awb awb_type="image" awb_image="1234" awb_image_size="full" awb_image_background_size="cover" awb_image_background_position="50% 50%" awb_parallax="scroll" awb_parallax_speed="0.5"]Your content inside the parallax background[/nk_awb]

Lo svantaggio dell'approccio con shortcode è che le impostazioni di sfondo non sono visibili nell'editor visuale, devi modificare il codice manualmente. Per un lavoro confortevole, è meglio usare Gutenberg o WPBakery.

AWB con WPBakery

Con WPBakery, l'integrazione è estremamente semplice. Nelle impostazioni di qualsiasi riga compare una scheda aggiuntiva "Backgrounds (AWB)", dove puoi creare e configurare uno sfondo parallasse senza shortcode, tutto in modo visuale.

⁉️🤔 Domande frequenti

Devo cambiare tema per avere il parallasse?

No. Se il tuo tema attuale non supporta il parallasse, il plugin gratuito AWB è sufficiente. Aggiunge l'effetto a qualsiasi elemento su qualsiasi pagina tramite un'interfaccia comoda, senza toccare il resto del tema. Cambiare tema ha senso solo se parti comunque da zero e vuoi un parallasse nativo già integrato.

Il parallasse rallenta il sito?

Con una configurazione attenta, solo leggermente. AWB utilizza la libreria leggera Jarallax (senza jQuery dalla versione 1.11), e i browser moderni ottimizzano transform via GPU. Il fattore principale di rallentamento è un'immagine di sfondo eccessivamente pesante. Ottimizza le foto in WebP o AVIF, mantieni la dimensione entro 200-300 KB, e la velocità non ne risentirà.

Il parallasse funziona su iPhone e Android?

Dipende dall'implementazione. Su iOS, il parallasse web è tradizionalmente problematico: lo sfondo fisso (background-attachment: fixed) viene ignorato da Safari. Il plugin AWB risolve il problema con un'animazione JavaScript, funziona in modo stabile. Ma la best practice per il mobile è disabilitare del tutto il parallasse (c'è una checkbox in AWB o nelle impostazioni del tema): su uno schermo piccolo l'effetto è poco percettibile e si risparmia batteria.

Si può creare il parallasse senza alcun plugin?

Sì. La proprietà CSS animation-timeline: scroll() permette di legare l'animazione del parallasse al progresso dello scroll senza una sola riga di JavaScript. Tuttavia, il supporto dei browser è ancora incompleto (Safari incluso nel 2024, Firefox dal 2025). Per compatibilità con browser meno recenti, un plugin è ancora più affidabile.

Cosa rende AWB migliore di altri plugin parallasse gratuiti?

AWB si distingue per tre aspetti: primo, supporta tre editor (Gutenberg, Classic, WPBakery) senza conflitti; secondo, aggiornamenti regolari, il plugin è testato fino a WordPress 7.0; terzo, il parallasse con il mouse e gli sfondi video nella versione gratuita, funzionalità che spesso sono a pagamento nei competitor.

Il parallasse serve per la SEO?

Non direttamente. Il parallasse è una tecnica visiva, non un fattore di ranking. Ma indirettamente può aiutare: maggior tempo sulla pagina, minor frequenza di rimbalzo, i motori di ricerca ne tengono conto. L'importante è non sacrificare la velocità di caricamento e la leggibilità del testo per l'effetto.

Quale strumento scegliere per il tuo progetto

Se il tuo tema supporta già il parallasse, usa le impostazioni integrate, sono sufficienti per home page e landing page.

Se il tuo tema non ha il parallasse, AWB copre la maggior parte degli scenari tipici gratuitamente: installazione rapida, interfaccia intuitiva, funziona con Gutenberg e WPBakery, disattivazione globale su mobile. Per slider con parallasse multi-livello, Slider Revolution non ha rivali per flessibilità di animazione.

Il parallasse non è una panacea. Su siti con contenuti testuali densi (long read, documentazione), è più un ostacolo che un aiuto. Ma per una landing page, un portfolio, una pagina promozionale di prodotto, la tecnica resta una delle più potenti nel web design. L'utente dimenticherà il testo ma ricorderà come la pagina "respirava" durante lo scroll.