Come creare un effetto parallasse in Elementor | 3 modi

L'effetto parallasse in Elementor è una caratteristica di design che fa muovere lo sfondo a una velocità diversa rispetto al contenuto in primo piano durante lo scorrimento. Crea un senso di profondità e movimento nella pagina web.

Per creare un effetto di parallasse in Elementor, aprire la pagina in cui si desidera l'effetto e selezionare l'elemento. Andare a Stile > Sfondoe aggiungete la vostra immagine. Poi andate su Avanzato > Effetti di movimento e accendere Effetti di scorrimento o effetto mouse. Da qui, regolare le impostazioni di scorrimento, la velocità e personalizzare secondo le proprie esigenze.

In questo blog, mostrerò 3 modi diversi per aggiungere l'effetto parallasse nel vostro sito Elementor. 

1. Effetti di parallasse per elementi web
2. Effetti di parallasse per lo sfondo.
3. Effetto parallasse con personalizzazione avanzata

Quindi, iniziamo.

Come creare un effetto parallasse utilizzando Elementor | 3 modi

Esistono due modi principali per aggiungere la parallasse in Elementor. Il primo è l'applicazione di effetti di parallasse agli elementi web e il secondo è l'utilizzo di effetti di parallasse sulle sezioni di sfondo. 

Entrambe le opzioni sono disponibili solo in Elementor Pro, quindi per utilizzarle è necessaria la versione Pro.

Ecco come creare un effetto parallasse con Elementor passo dopo passo.

1. Creare l'effetto parallasse su un elemento web

L'effetto parallasse su un elemento Web è quando una sezione, una colonna o un widget si muove in modo diverso dal resto della pagina, creando profondità e movimento. Poiché si tratta di una funzione professionale di Elementor, qui utilizzeremo Elementor Pro.

Vediamo quindi come fare.

Passo 1: Aggiungere una pagina e modificarla con Elementor

Innanzitutto, aprire una pagina nuova o esistente del sito. Fare clic su "Modifica con Elementor" per utilizzare il parallasse sugli elementi della pagina.

Passo 2: scegliere un elemento per aggiungere il parallasse

Quindi, selezionare la sezione, la colonna o il widget in cui si desidera applicare l'effetto parallasse.

Passo 3: Abilitare gli effetti di scorrimento

Qui, per prima cosa, è necessario abilitare l'effetto di scorrimento, quindi andare nella sezione Avanzato dal pannello di sinistra e scorrere verso il basso per aprire la scheda Effetti di movimento impostazioni. 

Quindi, si trovano le opzioni per gli effetti di scorrimento e gli effetti del mouse. È sufficiente attivare le opzioni Effetti di scorrimento per attivare la funzione "toggle".

Passo 4: personalizzare lo scorrimento

Ora è possibile personalizzare facilmente ogni effetto in base alle proprie esigenze. Basta fare clic sul pulsante icona della matitaSi aprirà un pannello di impostazioni con tutti i controlli.

Da qui è possibile regolare con precisione la direzione, la velocità e la finestra di visualizzazione, decidendo esattamente quando l'animazione inizia e quando finisce. 

È inoltre possibile impostare la scala della finestra di visualizzazione per specificare in quale punto dello scorrimento deve iniziare l'effetto e in quale punto deve fermarsi.

Ad esempio, qui applico l'effetto Scorrimento orizzontale facendo clic sull'icona della matita sull'opzione Scorrimento orizzontale per creare un effetto di questo tipo. 

• Direzione: Destra
• Velocità: 4.8
• Porta di vista (in alto): 38%
• Portafoglio di visualizzazione (in basso): 75%

Un consiglio da professionista: Per un aspetto più dinamico, è possibile combinare più animazioni su un singolo elemento. Questo passaggio è del tutto facoltativo e dipende principalmente dal design del sito. Tuttavia, le animazioni parallasse multiple aiutano a creare effetti stratificati che si distinguono.

Passo 5: Abilitare l'effetto mouse per l'elemento web

Ora è necessario attivare la parallasse basata sul mouse, in modo che l'elemento si muova leggermente quando si sposta il cursore. 

Per prima cosa, attivare l'effetto mouse e, con l'icona della matita, personalizzare e regolare la traccia del mouse e l'inclinazione 3D.

Ad esempio, per l'effetto di inclinazione 3D, ho impostato le regolazioni seguenti:

• Direzione: Diretto
• Velocità: 4

Passo 6: Applicare il parallasse su diversi dispositivi

Ora è il momento di rispondere all'effetto di parallasse su diversi dispositivi, come desktop, tablet e cellulari. Se necessario, apportate le modifiche necessarie affinché il parallasse funzioni senza problemi su tutti i dispositivi.

Infine, ecco il risultato finale dell'effetto parallasse dell'elemento web:

2. Creare un effetto parallasse sullo sfondo del sito

Un altro modo popolare per aggiungere il parallasse in Elementor è applicarlo allo sfondo di una sezione. In questo modo la pagina risulta più dinamica, poiché lo sfondo si muove in modo diverso rispetto al contenuto in primo piano. È un modo semplice ma efficace per dare vita al vostro design. Seguite questi passaggi per configurarlo:

Passo 1: selezionare la sezione di sfondo

Prima di tutto, è necessario scegliere la sezione in cui si desidera che appaia l'effetto parallasse. Può trattarsi del banner eroe, di un'area in evidenza o di qualsiasi sezione che si desidera mettere in risalto.

Passo 2: aprire le impostazioni degli Effetti di movimento o degli Effetti mouse

Quindi, andare alla sezione Avanzato e trovare la scheda Effetti di movimento pannello. Qui è possibile attivare effetti di scorrimento o del mouse, a seconda dello stile desiderato.

Passo 3: Regolare lo stile dell'animazione di parallasse

Ora è necessario regolare lo stile di animazione. Quindi, iniziare aprendo la scheda Stile. Caricare l'immagine di sfondo, quindi personalizzare il modo in cui si muove, regolando la direzione, la velocità e l'intensità dell'effetto finché non si adatta perfettamente al design.

Qui è possibile scegliere tra 2 diversi effetti da applicare al livello di sfondo, come l'effetto di scorrimento e l'effetto mouse.

Passo 4: Abilitare gli effetti del mouse per lo sfondo

Dopo aver regolato l'effetto di scorrimento, attivate la parallasse basata sul mouse, in modo che lo sfondo risponda ai movimenti del cursore. Questo aggiunge una sensazione interattiva per i visitatori. Utilizzate l'icona della matita per personalizzare e mettere a punto la traccia del mouse.

Ad esempio, qui ho configurato l'effetto sfocatura,

• Direzione: Impostato su Dissolvenza, significa che l'elemento si sfoca gradualmente quando esce dalla finestra di visualizzazione.
• Livello: 15
• Intervallo di visualizzazione: Tra 49% e 84%, impostiamo l'inizio e la fine dell'effetto in base alla posizione di scorrimento dell'utente.

Fase 5: Test su tutti i dispositivi

Ora è il momento di verificare il comportamento dell'effetto parallasse su diversi dispositivi, desktop, tablet e mobile. Apportate le modifiche necessarie per garantire che l'animazione funzioni senza intoppi e abbia un aspetto gradevole ovunque.

Ecco il risultato finale dell'effetto parallasse dello sfondo:

Nota: Volete rendere l'effetto parallasse più adatto al vostro marchio?

Questi sono i due modi più comuni per aggiungere effetti di parallasse in Elementor. Tuttavia, se si desiderano effetti più avanzati, come ad esempio sezioni di parallasse, effetti di inclinazione o parallasse 3D avanzataL'Elementor stesso non fornisce queste funzioni per impostazione predefinita. Per questo, è necessario utilizzare un file Elementor effetto parallasse plugin.

Per aggiungere l'effetto parallasse al vostro sito, dovete acquistare Element pro. Ma se fosse possibile aggiungere un effetto parallasse più avanzato anche con un costo inferiore?

Ecco cosa ne viene fuori Element Pack Pro come una delle migliori opzioni di addon Elementor. Oltre a 4 diversi widget per l'effetto di parallasse, questo plugin viene fornito con altri 300+ widget Elementor.

Quindi, anche se non siete esperti o non sapete quale stile di parallasse si adatta meglio al vostro sito web, potete semplicemente esplorare le demo e scegliere quella che funziona perfettamente per il vostro sito.

Creare l'effetto parallasse avanzato Elementor con Element Pack

Elementor Pro offre effetti di parallasse di base, come Motion Effects, Trasformare e scalaree Elementi appiccicosi. 

Se volete andare oltre le opzioni di parallasse di base di Elementor, il plugin Element Pack è un'ottima scelta. Vi dà accesso a opzioni più avanzate sfondi parallassecon effetti di inclinazione, parallasse 3D avanzato e blocchi predefiniti, in modo da poter creare progetti professionali.

Iniziamo quindi a scoprire come creare un effetto parallasse avanzato in Elementor con Element Pack, passo dopo passo:

Passo 1: installare e attivare Element Pack

Prima di tutto, installare il file Element Pack sul vostro sito WordPress, quindi attivatelo.

Nota: Innanzitutto, installate l'Elementor gratuito sul vostro sito e poi installate l'Element pack.

Passo 2: Attivare i widget di parallasse

Quindi, andare a Element Pack Dashboard > Extensions > Active L'estensione correlata all'effetto parallasse è necessaria, ad esempio

• Immagine di sfondo in parallasse
• Effetti di parallasse/scorrimento
• Sezione Immagine parallasse
• Effetto di riempimento a scorrimento
• BG gradiente animato
• Effetti del cursore

Ci sono molte opzioni, per cui è possibile attivare facilmente ulteriori funzioni personalizzate per migliorare gli effetti di parallasse. 

Passo 3: aprire la pagina Elementor 

Ora, scegliere la pagina in cui si vuole aggiungere l'effetto parallasse e fare clic su Modifica con Elementor.

Passo 4: scegliere un elemento per aggiungere il parallasse

Per aggiungere un effetto di parallasse sullo sfondo, attivare innanzitutto l'effetto di parallasse sullo sfondo, selezionare la sezione e andare a Stile > Sfondoe accendere l'apparecchio Effetto parallasse BG.

Quindi, regolare il movimento di scorrimento utilizzando Parallasse X e Parallasse Y secondo le necessità.

A questo punto, scegliere un'altra sottosezione, colonna o widget in cui applicare l'effetto parallasse, quindi andare su Avanzato.

Passo 5: personalizzare le impostazioni del parallasse

Ora, nel Avanzato Nella scheda si trovano molte sezioni di personalizzazione, come ad esempio 

• Effetti dei coriandoli
• Effetti del cursore
• Effetti di rivelazione
• Effetti di ondulazione
• Appiccicoso
• Testo Sfondo sfumato
• Ombra dell'immagine realistica
• Suggerimento per gli strumenti
• Controlli di visibilità
• Effetto sonoro.

Utilizzando le sezioni, è possibile regolare la velocità, la direzione, le opzioni di attivazione e lo stile di animazione. Con Element Pack è possibile anche stratificare più elementi per creare effetti 3D o di inclinazione avanzati.

Ad esempio, qui aggiungo "Realistic Image Shadow", che aggiunge un'ombra realistica sotto l'immagine di una navicella spaziale stilizzata. Questo effetto conferisce alla grafica un senso di dimensionalità, facendola emergere dalla pagina.

Poi, regolo il movimento di scorrimento usando Parallasse X e Parallasse Y secondo le necessità.

Passo 6: Utilizzare blocchi di parallasse già pronti (metodo rapido)

Se non si vuole costruire da zero, si può scegliere tra gli effetti parallasse predefiniti. blocchi pronti incluso nell'Element Pack. È sufficiente navigare nella sezione Libreria di modelli Element Pack nell'editor Elementor.

A questo punto, cercate tra le sezioni parallasse predefinite disponibili fino a trovarne una che si adatti al vostro progetto.

Quindi, passare il mouse sul blocco desiderato e fare clic su Copia dal vivo per copiare il layout e gli effetti.

A questo punto, passare alla tela Elementor e incollare il blocco copiato nella sezione o nel contenitore desiderato.

Quindi, sostituite il testo, le immagini e i link segnaposto con i vostri contenuti in linea con il vostro marchio.

Ora, a partire dallo stile, è possibile modificare le impostazioni di colori, tipografia e parallasse per allinearle all'estetica del sito.

Fase 7: Ottimizzazione per i diversi dispositivi

Ora, testate l'effetto di parallasse su desktop, tablet e cellulare con il metodo Reattivo e assicurarsi che il risultato sia omogeneo ovunque.

Ecco il risultato finale dell'effetto di parallasse creato con l'opzione Element Pack:

Quando si creano effetti di parallasse direttamente con Elementor Pro, si ottengono le basi. Ma con Element Pack si ottiene una flessibilità molto maggiore. 

Invece di limitarsi al movimento standard, è possibile stratificare le animazioni, controllare la velocità di scorrimento e persino combinare effetti di parallasse, come gli effetti Coriandoli, Cursore, Rivelazione, Increspatura e molte altre funzioni avanzate che Elementor Pro non offre. 

Ciò significa che non state solo aggiungendo "movimento" a una sezione, ma state creando un'esperienza completamente interattiva, anche se non siete sviluppatori.

Migliori pratiche per la progettazione di effetti di parallasse con Elementor 

Gli effetti di parallasse possono far apparire il vostro sito web moderno, coinvolgente e visivamente accattivante. Ma per ottenere i migliori risultati, è necessario utilizzarli con saggezza. Ecco alcune buone pratiche da tenere a mente:

1. Proteggere la leggibilità

Il contenuto deve essere sempre al primo posto. Se il testo si trova su uno sfondo in parallasse, controllate il contrasto. Se lo sfondo è troppo occupato, utilizzate sovrapposizioni o effetti di sfocatura.

Esempio: A volte gli effetti di parallasse creano sfocature nei contenuti testuali. Pertanto, quando si utilizza un contenuto su un display parallasse, assicurarsi che il contenuto sia chiaramente visibile.

2. Corrispondere alla personalità del marchio

Lo stile del parallasse deve essere coerente con il vostro marchio. Un centro benessere potrebbe utilizzare un effetto di scorrimento lento e rilassante, mentre un sito di giochi potrebbe utilizzare movimenti più veloci e dinamici.

Esempio: Supponiamo che sul sito web di un hotel di lusso il lento movimento delle onde sullo sfondo riecheggi l'atmosfera rilassante della località balneare, in perfetto allineamento con la storia del marchio.

3. Evitare il sovraccarico di animazione

Se il sito è ricco di elementi scorrevoli, sfumati e zoomati, l'aggiunta di più effetti di parallasse non fa altro che aggiungere rumore. Limitatevi a uno o due momenti in cui il parallasse ha senso, come il banner del protagonista o la vetrina di un prodotto.

Esempio: Noterete che le pagine dei prodotti Apple utilizzano spesso pochissimo parallasse, evidenziando di solito una singola caratteristica del prodotto durante lo scorrimento. Questo è tutto ciò che serve per tenere i visitatori impegnati.

4. Osservare le prestazioni

Animazioni + immagini grandi = tempi di caricamento più lenti. Verificate sempre le prestazioni dopo aver aggiunto il parallasse. Se il sito risulta lento, comprimete le immagini, utilizzate il caricamento pigro o riducete l'effetto.

Un consiglio da professionista: Eseguire il sito con PageSpeed Insights o GTmetrix dopo aver aggiunto il parallasse. Se notate segnali di allarme, ottimizzate prima di andare in onda.

Elementor Effetto parallasse non funzionante - Problemi e soluzioni

A volte, l'effetto parallasse in Elementor potrebbe non funzionare come previsto. Ciò può accadere a causa delle impostazioni, dei conflitti tra i temi o anche delle restrizioni del dispositivo. Ecco i problemi più comuni e come risolverli:

1. Effetti di movimento non abilitati

Se il parallasse non funziona, verificare prima di tutto se Effetti di movimento sono abilitati per la sezione, la colonna o il widget. Vai a Avanzate > Effetti di movimento e assicurarsi che gli effetti di scorrimento o del mouse siano attivati.

3. Conflitti tra temi o plugin

A volte il tema o un altro plugin possono sovrascrivere gli script di Elementor. Provare a disabilitare gli altri plugin uno per uno, oppure passare temporaneamente a un tema predefinito come Hello Elementor per effettuare un test.

4. Limitazioni del browser o del dispositivo

Gli effetti di parallasse potrebbero non apparire sempre allo stesso modo sui dispositivi mobili o su alcuni browser. Controllare il Impostazioni reattive in Elementor per confermare che l'effetto è consentito su tablet e cellulari.

5. Problemi di caching e prestazioni

La cache del browser, il CDN o i plugin di ottimizzazione potrebbero bloccare l'esecuzione delle animazioni. Cancellare la cache, eliminare il CDN e ricontrollare il sito.

Domande frequenti

Pensieri finali

Gli effetti di parallasse possono aggiungere personalità, realismo e movimento al vostro sito web. Ma solo se li si usa con criterio. Dovete mantenerli sottili, proteggere la leggibilità e fare sempre dei test su tutti i dispositivi in modo che il vostro design risulti fluido ovunque.

Elementor vi fornisce gli strumenti per iniziare, ma se volete davvero spingere la vostra creatività oltre, Element Pack porta queste possibilità al livello successivo. Grazie alle funzioni aggiuntive per gli effetti di parallasse, come gli effetti coriandoli, gli effetti cursore, l'altezza uguale, il parallasse dell'immagine, l'appiccicosità, lo scorrimento delle tessere, i controlli di visibilità e molte altre opzioni di movimento avanzate, è possibile creare progetti che non sono solo belli da vedere, ma anche memorabili.

In fin dei conti, non si tratta di aggiungere effetti per il gusto di farlo. Si tratta di creare un'esperienza che risulti naturale per i visitatori. E quando si raggiunge questo equilibrio, il parallasse diventa uno di quei piccoli dettagli che fanno risaltare il vostro sito.