Come aggiungere animazioni allo scorrimento in Elementor (come Apple AirPods)
Pubblicato: 2022-07-21Cerchi un modo per aggiungere animazioni allo scorrimento in Elementor come Apple e Sony utilizzano sui loro siti Web?
Sebbene Elementor Pro includa tutti i tipi di effetti di animazione accurati tramite la sua funzione Effetti di movimento, non ti consente di creare una sequenza di immagini davvero coinvolgente su effetti di scorrimento come quelli che vedi sul sito Web di Apple (più molti altri). Ad esempio, la pagina AirPods Pro .
Con il plug-in Scrollsequence, puoi facilmente aggiungere questi tipi di animazioni di scorrimento cinematografiche a Elementor ( compresa la versione gratuita di Elementor ).
È difficile da descrivere a parole, quindi dai un'occhiata all'esempio seguente ( l'animazione si sposta mentre un visitatore scorre la pagina verso il basso ):
Se vuoi saperne di più su Scrollsequence in generale, puoi leggere la nostra recensione completa di Scrollsequence.
In questo post, tuttavia, ci concentreremo in particolare su come aggiungere animazioni allo scorrimento in Elementor usando Scrollsequence.
Scendiamo!
Come creare animazioni di scorrimento cinematografiche in Elementor con Scrollsequence
Ecco uno sguardo di alto livello ai passaggi coinvolti: continua a leggere per il tutorial dettagliato:
- Installa il plugin Scrollsequence
- Crea la tua animazione
- Aggiungi l'animazione di scorrimento a Elementor
1. Installa il plugin Scrollsequence
Per iniziare, ti consigliamo di installare il plug-in Scrollsequence sul tuo sito Web Elementor.
Scrollsequence ha una versione gratuita su WordPress.org e una versione premium che aggiunge più funzionalità. La versione gratuita ti consente di impostare animazioni di base con un massimo di tre scene e un massimo di 100 immagini per scena, mentre la versione premium rimuove tutti i limiti e aggiunge anche animazioni e funzionalità più avanzate.
Scrollsequence – Plugin per l'animazione di immagini di scorrimento cinematograficheVersione corrente: 1.2.7
Ultimo aggiornamento: 9 maggio 2022
sequenza di scorrimento.1.2.7.zip
Puoi anche provare gratuitamente tutte le funzionalità premium con una prova gratuita di 14 giorni, quindi non devi pagare nulla solo per provarlo.
Se decidi di volere la versione premium dopo la prova, parte da $ 69,99. Tuttavia, puoi utilizzare il nostro esclusivo coupon Scrollsequence per risparmiare il 20%:
Hosting WordPress 20i
Particolari
Sconto esclusivo del 50% da 20i WordPress Hosting, solo per i lettori di WP Mayor.
Astra
Particolari
Ottieni uno sconto esclusivo del 10% su Astra Pro, il pacchetto Essential e il pacchetto Crescita.
Vendita di compleanno di Astra
Particolari
25% di sconto sui bundle Astra Pro o Astra Agency più un ingresso gratuito a un'estrazione a premi per vincere un nuovissimo iMac!
Autonami
Particolari
Sconto esclusivo del 10% su Autonami: gestisci le relazioni con i clienti utilizzando tag, segmentazione e trasmissioni senza uscire da WordPress.
Avada
Particolari
Avada è l'ultimo costruttore di siti Web WordPress. Scelto da principianti, esperti di marketing e professionisti, costruito pensando a usabilità e prestazioni.
Fienile2
Particolari
I lettori di WP Mayor ottengono uno sconto aggiuntivo del 5% sull'offerta del 30% del Black Friday! Questo verrà applicato automaticamente al momento del pagamento.
Costruttore di castori
Particolari
Ottieni uno sconto del 25% su Beaver Builder, il generatore di pagine di WordPress di cui ti puoi fidare con la tua attività.
Bluehost
Particolari
Bluehost è il nostro provider di hosting condiviso WordPress consigliato. Ottieni fino a $ 15 di sconto al mese sull'hosting condiviso Bluehost.Dominio gratuito con Bluehost
Particolari
Ottieni la registrazione gratuita del tuo dominio quando ti iscrivi all'hosting conveniente e affidabile di Bluehost.
Bollettino
Particolari
20% di sconto su tutti i piani di Bulletin! Il plug-in per banner di annunci più semplice e potente per il tuo sito WordPress.
Elementor Pro
Particolari
Unisciti a una comunità di oltre 8 milioni di professionisti che creano siti Web, collaborano e crescono insieme con la piattaforma di creazione Web n. 1 per WordPress.
EngineThemes
Particolari
Ottieni uno SCONTO del 35% su EngineThemes - Temi applicativi WordPress realizzati sapientemente per il tuo mestiere.
Plugin essenziale
Particolari
Ottieni uno sconto del 15% sul bundle Essential Plugin.
Pronto All-in-One
Particolari
1 mese GRATIS per tutti i nuovi clienti sulla soluzione All-in-one Pronto, un tema fotografico leader per WordPress.
Groundhogg
Particolari
Sconto esclusivo del 15% su Groundhogg.
Coltivatore
Particolari
Sconto esclusivo del 30% su Growanizer: la nuova generazione di vendite intelligenti per WooCommerce.
Presenza umana
Particolari
Sconto esclusivo del 20% sulla presenza umana: interrompi i checkout dei bot e crea spam senza influire sulla tua esperienza utente.
Iconico WP
Particolari
Questo Black Friday puoi ottenere fino al 40% di sconto sui plug-in WooCommerce e sui bundle di plug-in che aumentano le vendite di IconicWP.Iconico WP
Particolari
Questo mese di WooCommerce, ottieni fino al 15% di sconto sui plug-in WooCommerce e sui bundle di plug-in che aumentano le vendite di IconicWP.
KBucket
Particolari
Ottieni uno sconto del 40% sul plug-in KBucket: crea un hub di contenuti personalizzabile.
Linguistica
Particolari
20% di sconto su Linguise - Aumenta il traffico del tuo sito web con traduzioni istantanee in più di 80 lingue.
Rete liquida
Particolari
35% DI SCONTO per 4 mesi sull'hosting WordPress gestito.Rete liquida
Particolari
Ottieni uno sconto del 33% dagli specialisti di hosting WooCommerce gestiti da Liquid Web.
Widget Video Magnifi
Particolari
Incorpora, personalizza ed effettua videochiamate in modo sicuro con Magnifi Video Widget dal tuo sito web in pochi minuti.
Componenti aggiuntivi principali per Elementor
Particolari
Sconto esclusivo del 50% dai componenti aggiuntivi principali per Elementor.
Newsletter Colla
Particolari
Newsletter Glue collega il tuo servizio di posta elettronica a WordPress in modo che tu possa pubblicare newsletter nello stesso modo in cui pubblichi i post del blog!Ottieni uno sconto del 15% sul tuo primo acquisto.
Notifica X
Particolari
FOMO definitiva e soluzione di marketing a prova sociale affidabile da oltre 30.000 aziende in tutto il mondo.
OceanWP
Particolari
Il tema WordPress che ti dà di più!
Ordinabile
Particolari
Porta gli ordini online a un livello completamente nuovo. Ottieni il miglior prezzo su Ordinabile con il codice WPMAYOR .
Outfunnel
Particolari
Ottieni uno sconto del 25% per i primi 3 mesi su Outfunnel: tieni traccia delle visite al sito Web e sincronizza gli invii dei moduli con il tuo CRM.
Pagina di pagamento
Particolari
15% di sconto sulla pagina di pagamento.
PeepSo
Particolari
Ottieni uno sconto del 10% su un pacchetto annuale di PeepSo.
Quicq
Particolari
Ottieni uno sconto del 20% sui primi due mesi su tutti i pacchetti di QuicqSequenza di scorrimento
Particolari
Ottieni uno sconto esclusivo del 20% su Scrollsequence con il coupon WPMAYOR20. Crea la tua animazione di scorrimento in pochi minuti.
Negozio pronto
Particolari
Ottieni uno sconto esclusivo del 20% su ShopReady.
Faretto PRO
Particolari
Ottieni uno sconto del 20% su Spotlight PRO per raddoppiare l'impatto dei tuoi contenuti su Instagram!
Vendita stellare
Particolari
Ottieni uno sconto del 40% su tutti i plug-in IconicWP, inclusi i loro bundle (ottieni un enorme sconto di $ 199 su All Access Bundle)!
Vendita stellare
Particolari
Ottieni uno sconto del 40% su Events Calendar Pro: calendari, ticketing e potenti strumenti WordPress per gestire i tuoi eventi dall'inizio alla fine.
Tripetto Pro
Particolari
Ottieni uno sconto del 10% sulle licenze Tripetto Pro.
WP illimitato
Particolari
Ottieni uno sconto del 20% sul tuo primo mese da UnlimitedWP.
Compositore visivo
Particolari
Ottieni uno sconto del 10% su Visual Composer - Crea il tuo sito Web WordPress oggi stesso. Inizia facile. Costruisci velocemente.WooFunnels
Particolari
Raddoppia i tuoi profitti in questa alta stagione! Grandi risparmi su WordPress Funnel Builder e motore di automazione del marketing di WooFunnels!
WP Amministra
Particolari
Esclusivo 30% di sconto su WP Adminify, un potente toolkit per la dashboard di WordPress.
Appassionati di WP
Particolari
10% di sconto da WP Buffs, il tuo partner tecnico 24 ore su 24, 7 giorni su 7 per piani di assistenza e servizi di manutenzione.
WP attira l'attenzione
Particolari
Risparmia il 40% sulle edizioni illimitate di Draw Attention, lo strumento n. 1 per la creazione di immagini interattive su WordPress.
Motore WP
Particolari
Ottieni 4 mesi gratuiti sui piani annuali o il 20% di sconto sul primo mese sui piani mensili.
WP Event Manager
Particolari
Ottieni uno sconto del 10% su WP Event Manager: calendario, biglietti e potenti strumenti WordPress per gestire i tuoi eventi.
WP Migrare DB Pro
Particolari
Offerta per nuovi clienti: risparmia fino al 50% sul tuo primo anno di WP Migrate DB Pro per uso individuale.WP Migrate DB Pro ti consente di copiare l'intero sito WordPress da un ambiente all'altro con un clic nella dashboard.
WP Webhook Pro
Particolari
Sconto esclusivo del 15% su WP Webhooks Pro. Estendi il tuo sito web con il più potente sistema di webhook. (Lo sconto si applica al primo periodo di fatturazione).
Plugin Yith WooCommerce
Particolari
Prendi tutto con uno sconto del 30%! Non sono necessari coupon.2. Crea la tua animazione
Dopo aver installato il plug-in, vai su Scrollsequence → Aggiungi nuova sequenza di scorrimento per impostare la tua prima animazione di scorrimento.
Ogni animazione è composta da una o più scene e ogni scena conterrà più immagini disposte in sequenza. Il plugin genererà quindi l'animazione in base a tutte le immagini nella sequenza.
Una "scena" è una sequenza di animazione completa. Se decidi di aggiungere più scene, l'utente avanzerà alla scena successiva dopo aver completamente fatto scorrere l'animazione della prima scena.
Nella maggior parte delle situazioni, ti consigliamo di basare le immagini nella sequenza su un video di base. Per convertire un video esistente in una sequenza di immagini separate, puoi utilizzare uno di questi strumenti dalla documentazione del plugin. L'opzione più semplice è il convertitore Ezgif basato su browser, ma otterrai una qualità migliore con un software dedicato.
Crea scene e aggiungi immagini
Dopo aver creato l'animazione di alto livello, fai clic sul pulsante Aggiungi scena per aggiungere la prima scena.
Questo amplierà un nuovo set di opzioni che ti permetteranno di caricare tutte le immagini per la tua sequenza di animazione. Gli sviluppatori consigliano di caricare almeno 50-100 immagini per scena per garantire un'animazione fluida.
Dopo aver caricato le immagini, puoi utilizzare l'opzione di ordinamento per assicurarti che siano nell'ordine corretto. Se non sono nell'ordine corretto, l'animazione non avrà un aspetto corretto .
Se desideri creare un'altra scena, puoi farlo facendo clic sull'icona più accanto alla scheda Scena 0 .
Aggiungi contenuto fisso e animazioni
Per aggiungere il contenuto fisso che appare sopra le immagini di animazione, puoi usare la casella Contenuto fisso per il contenuto stesso.
Quindi, puoi utilizzare la sezione Animazione del contenuto fisso per impostare le sue regole di animazione. Lo tratteremo in dettaglio nel passaggio 4 della nostra recensione di Scrollsequence, ma l'idea di base è la seguente:
- Aggiungi i selettori CSS al contenuto nella casella Contenuto fisso (usando la scheda Testo ).
- Puoi impostare le regole di animazione nella casella Animazione del contenuto fisso prendendo di mira quei selettori CSS e quindi scegliendo anche i tempi per come animare il contenuto all'interno di quei selettori. Ad esempio, potresti dire di voler mostrare un certo testo per le immagini 30-55.
Ecco un esempio di aggiunta dei selettori CSS ai tuoi contenuti:
E poi ecco come appare per impostare le regole di animazione:
Oltre ad animare i tuoi contenuti fissi, puoi anche regolare la durata dell'immagine.
Configura altre impostazioni secondo necessità
L'impostazione di scene, immagini e contenuto fisso sono le parti più importanti della creazione di un'animazione.
Tuttavia, Scrollsequence ti offre anche alcune altre impostazioni in questa interfaccia che potresti voler esplorare.
Ad esempio, puoi regolare la scala e l'allineamento dell'immagine nella parte inferiore dell'area delle impostazioni della scena.
Ottieni anche alcune impostazioni generali nell'area Impostazioni sequenza di scorrimento della barra laterale. In questo widget, puoi controllare la larghezza dell'immagine e il ritardo di scorrimento, nonché aggiungere CSS personalizzati se lo desideri.
Pubblica la tua animazione
Per finire, fai clic sul pulsante Pubblica per pubblicare la tua animazione, proprio come faresti con un post di un blog.
Una volta pubblicato, puoi trovare lo shortcode di questa animazione andando su Scrollsequence → Scrollsequence :
Tieni questo shortcode a portata di mano perché ti servirà in un secondo per aggiungere l'animazione allo scorrimento in Elementor.
3. Aggiungi la tua animazione di scorrimento a Elementor
Una volta che sei soddisfatto dell'animazione di scorrimento, sei pronto per aggiungerla al tuo design Elementor.
Puoi creare un design Elementor separato esclusivamente per l'animazione di scorrimento. Oppure potresti anche includere l'animazione di scorrimento come parte di un design più ampio. In questo caso, il contenuto sopra e sotto l'animazione di scorrimento rimarrebbe statico.
Per iniziare, avvia l'editor Elementor per il contenuto in cui desideri aggiungere l'animazione di scorrimento.
Quindi, ecco come aggiungere l'animazione di scorrimento:
- Aggiungi il widget Shortcode di Elementor dove vuoi che appaia l'animazione di scorrimento.
- Incolla lo shortcode dell'animazione (di nuovo, puoi trovarlo andando su Scrollsequence → Scrollsequence ) .
- Fai clic sul pulsante Applica nelle impostazioni del widget Shortcode per fare in modo che Elementor generi un'anteprima dal vivo della tua animazione nell'editor.
Puoi provare la tua animazione completa senza uscire dall'editor di Elementor: basta scorrere verso il basso nell'anteprima visiva!
E il gioco è fatto: hai appena imparato come impostare un'animazione di scorrimento cinematografico in Elementor, proprio come fa Apple con così tante delle sue pagine di destinazione.
Se vuoi creare animazioni aggiuntive o aggiungere nuove scene alla tua animazione, devi solo ripetere i passaggi dall'alto.
Crea oggi il tuo primo Elementor su animazione di scorrimento
Le persone adorano Elementor per la flessibilità che ti dà quando si tratta di creare il tuo design.
Tuttavia, una cosa che Elementor non può fare da solo è impostare i tipi di filmati sulle animazioni di scorrimento che vedi da Apple e altri.
Associando Elementor a Scrollsequence, puoi facilmente aggiungere questi tipi di animazioni ai tuoi progetti Elementor.
Se vuoi provarlo, hai due opzioni:
- Basta usare la versione gratuita di Scrollsequence su WordPress.org.
- Usa la prova gratuita di 14 giorni per accedere a tutte le funzionalità premium di Scrollsequence.
Se decidi di voler utilizzare la versione premium di Scrollsequence, puoi utilizzare il nostro coupon esclusivo Scrollsequence per risparmiare il 20% sul tuo ordine.
Hosting WordPress 20i
Particolari
Sconto esclusivo del 50% da 20i WordPress Hosting, solo per i lettori di WP Mayor.Astra
Particolari
Ottieni uno sconto esclusivo del 10% su Astra Pro, il pacchetto Essential e il pacchetto Crescita.Vendita di compleanno di Astra
Particolari
25% di sconto sui bundle Astra Pro o Astra Agency più un ingresso gratuito a un'estrazione a premi per vincere un nuovissimo iMac!Autonami
Particolari
Sconto esclusivo del 10% su Autonami: gestisci le relazioni con i clienti utilizzando tag, segmentazione e trasmissioni senza uscire da WordPress.Avada
Particolari
Avada è l'ultimo costruttore di siti Web WordPress. Scelto da principianti, esperti di marketing e professionisti, costruito pensando a usabilità e prestazioni.Fienile2
Particolari
I lettori di WP Mayor ottengono uno sconto aggiuntivo del 5% sull'offerta del 30% del Black Friday! Questo verrà applicato automaticamente al momento del pagamento.Costruttore di castori
Particolari
Ottieni uno sconto del 25% su Beaver Builder, il generatore di pagine di WordPress di cui ti puoi fidare con la tua attività.Bluehost
Particolari
Bluehost è il nostro provider di hosting condiviso WordPress consigliato. Ottieni fino a $ 15 di sconto al mese sull'hosting condiviso Bluehost.Dominio gratuito con Bluehost
Particolari
Ottieni la registrazione gratuita del tuo dominio quando ti iscrivi all'hosting conveniente e affidabile di Bluehost.Bollettino
Particolari
20% di sconto su tutti i piani di Bulletin! Il plug-in per banner di annunci più semplice e potente per il tuo sito WordPress.Elementor Pro
Particolari
Unisciti a una comunità di oltre 8 milioni di professionisti che creano siti Web, collaborano e crescono insieme con la piattaforma di creazione Web n. 1 per WordPress.EngineThemes
Particolari
Ottieni uno SCONTO del 35% su EngineThemes - Temi applicativi WordPress realizzati sapientemente per il tuo mestiere.Plugin essenziale
Particolari
Ottieni uno sconto del 15% sul bundle Essential Plugin.Pronto All-in-One
Particolari
1 mese GRATIS per tutti i nuovi clienti sulla soluzione All-in-one Pronto, un tema fotografico leader per WordPress.Groundhogg
Particolari
Sconto esclusivo del 15% su Groundhogg.Coltivatore
Particolari
Sconto esclusivo del 30% su Growanizer: la nuova generazione di vendite intelligenti per WooCommerce.Presenza umana
Particolari
Sconto esclusivo del 20% sulla presenza umana: interrompi i checkout dei bot e crea spam senza influire sulla tua esperienza utente.Iconico WP
Particolari
Questo Black Friday puoi ottenere fino al 40% di sconto sui plug-in WooCommerce e sui bundle di plug-in che aumentano le vendite di IconicWP.Iconico WP
Particolari
Questo mese di WooCommerce, ottieni fino al 15% di sconto sui plug-in WooCommerce e sui bundle di plug-in che aumentano le vendite di IconicWP.KBucket
Particolari
Ottieni uno sconto del 40% sul plug-in KBucket: crea un hub di contenuti personalizzabile.Linguistica
Particolari
20% di sconto su Linguise - Aumenta il traffico del tuo sito web con traduzioni istantanee in più di 80 lingue.Rete liquida
Particolari
35% DI SCONTO per 4 mesi sull'hosting WordPress gestito.Rete liquida
Particolari
Ottieni uno sconto del 33% dagli specialisti di hosting WooCommerce gestiti da Liquid Web.Widget Video Magnifi
Particolari
Incorpora, personalizza ed effettua videochiamate in modo sicuro con Magnifi Video Widget dal tuo sito web in pochi minuti.Componenti aggiuntivi principali per Elementor
Particolari
Sconto esclusivo del 50% dai componenti aggiuntivi principali per Elementor.Newsletter Colla
Particolari
Newsletter Glue collega il tuo servizio di posta elettronica a WordPress in modo che tu possa pubblicare newsletter nello stesso modo in cui pubblichi i post del blog!Ottieni uno sconto del 15% sul tuo primo acquisto.
Notifica X
Particolari
FOMO definitiva e soluzione di marketing a prova sociale affidabile da oltre 30.000 aziende in tutto il mondo.OceanWP
Particolari
Il tema WordPress che ti dà di più!Ordinabile
Particolari
Porta gli ordini online a un livello completamente nuovo. Ottieni il miglior prezzo su Ordinabile con il codice WPMAYOR .Outfunnel
Particolari
Ottieni uno sconto del 25% per i primi 3 mesi su Outfunnel: tieni traccia delle visite al sito Web e sincronizza gli invii dei moduli con il tuo CRM.Pagina di pagamento
Particolari
15% di sconto sulla pagina di pagamento.PeepSo
Particolari
Ottieni uno sconto del 10% su un pacchetto annuale di PeepSo.Quicq
Particolari
Ottieni uno sconto del 20% sui primi due mesi su tutti i pacchetti di QuicqSequenza di scorrimento
Particolari
Ottieni uno sconto esclusivo del 20% su Scrollsequence con il coupon WPMAYOR20. Crea la tua animazione di scorrimento in pochi minuti.Negozio pronto
Particolari
Ottieni uno sconto esclusivo del 20% su ShopReady.Faretto PRO
Particolari
Ottieni uno sconto del 20% su Spotlight PRO per raddoppiare l'impatto dei tuoi contenuti su Instagram!Vendita stellare
Particolari
Ottieni uno sconto del 40% su tutti i plug-in IconicWP, inclusi i loro bundle (ottieni un enorme sconto di $ 199 su All Access Bundle)!Vendita stellare
Particolari
Ottieni uno sconto del 40% su Events Calendar Pro: calendari, ticketing e potenti strumenti WordPress per gestire i tuoi eventi dall'inizio alla fine.Tripetto Pro
Particolari
Ottieni uno sconto del 10% sulle licenze Tripetto Pro.WP illimitato
Particolari
Ottieni uno sconto del 20% sul tuo primo mese da UnlimitedWP.Compositore visivo
Particolari
Ottieni uno sconto del 10% su Visual Composer - Crea il tuo sito Web WordPress oggi stesso. Inizia facile. Costruisci velocemente.WooFunnels
Particolari
Raddoppia i tuoi profitti in questa alta stagione! Grandi risparmi su WordPress Funnel Builder e motore di automazione del marketing di WooFunnels!WP Amministra
Particolari
Esclusivo 30% di sconto su WP Adminify, un potente toolkit per la dashboard di WordPress.Appassionati di WP
Particolari
10% di sconto da WP Buffs, il tuo partner tecnico 24 ore su 24, 7 giorni su 7 per piani di assistenza e servizi di manutenzione.WP attira l'attenzione
Particolari
Risparmia il 40% sulle edizioni illimitate di Draw Attention, lo strumento n. 1 per la creazione di immagini interattive su WordPress.Motore WP
Particolari
Ottieni 4 mesi gratuiti sui piani annuali o il 20% di sconto sul primo mese sui piani mensili.WP Event Manager
Particolari
Ottieni uno sconto del 10% su WP Event Manager: calendario, biglietti e potenti strumenti WordPress per gestire i tuoi eventi.WP Migrare DB Pro
Particolari
Offerta per nuovi clienti: risparmia fino al 50% sul tuo primo anno di WP Migrate DB Pro per uso individuale.WP Migrate DB Pro ti consente di copiare l'intero sito WordPress da un ambiente all'altro con un clic nella dashboard.WP Webhook Pro
Particolari
Sconto esclusivo del 15% su WP Webhooks Pro. Estendi il tuo sito web con il più potente sistema di webhook. (Lo sconto si applica al primo periodo di fatturazione).Plugin Yith WooCommerce
Particolari
Prendi tutto con uno sconto del 30%! Non sono necessari coupon.Hai ancora domande su come aggiungere animazioni allo scorrimento in Elementor? Mandaci un messaggio nella sezione commenti e facci sapere cosa hai in mente.