Intro sticky video allo scroll della pagina
Sommario
Oggi voglio insegnarti un trucchetto molto interessante che potrai fare su qualsiasi pagina web che utilizza wordpress + Elementor e Ultimated Addon Elementor (ma leggi fino alla fine perché c’é un bel regalo per te!), comunque grazie a quest’ultimo plugin potremo aggiungere ai nostri video nelle landing create con il miglior page builder per wordpress l’effetto “sticky Video“.
La funzione consiste nell’aggiungere css + javascript al div del video e permette di renderlo sempre visibile durante lo scorrimento della pagina, proprio come avviene su Facebook. Secondo me questa piccolo dettaglio aiuta moltissimo l’esperienza dell’utente che sta navigando nella nostra pagina web.
In questa immagine vediamo come il video continua a rimanere ben visibile
Inizialmente avevo creato il tutorial in pure html + css + javascript ma ho ritenuto che fosse troppo complicato per il 90% delle persone che leggono il mio blog e allora ho deciso di affidarmi a Ultimate Addon Elementor un plugin premium che aggiunge numerose funzioni al tuo sito WordPress ma senza rallentarlo, infatti tutti i file .css e .js del plugin vengono caricati solamente nelle pagine dedicate.
Comunque non spaventarti perché non dovrai spendere nemmeno 1 euro grazie alle super sopresa che ho preparato per te!
Guardati il video:
Perché si chiamano Sticky Video
Uno sticky video é semplicemente una sezione contenente il video della pagina sempre visibile e quindi nel gergo tecnico web “sticky” un pó come succede con l”header “sticky” ovvero quelli che nonostante tu scorra la pagina rimangono sempre visibili. Questa pratica é molto utile e l’ho vista fare non solo da blogger ma anche da marketers il motivo é semplice. Durante la prima visualizzazione della tua landing page con video appena arriviamo al momento che siamo incuriositi vogliamo scorrere la pagina e scoprire di piú e spesso siamo bloccati con il video, ma per dare un’esperienza migliore all’utente e renderlo [iú libero possiamo dargli la possibilitá di iniziare a leggere anche il testo della landing page e continuare a ascoltare e vedere il nostro video di presentazione.
Sticky video distrazione o no?
Dal mio punto di vista il sticky video non da distrazione anzi, ti aiuta a concentrarti sulle parti della pagina che preferisci e mantenere l’esperienza voluta con il video che spesso ha un messaggio piú forte e chiaro ma soprattutto diretto all’utente. Infatti molto spesso alcune persone (anche nel mio caso) preferiscono vedere il video per pochi secondi e poi scorrere subito alle informazioni e con il sticky video possiamo mantenere il livello di concentrazione in tutti i casi.
Calcola che quando stai leggendo un articolo il tuo occhio destro sta guardando altre possibilitá di informazioni, mentre il tuo occhio sinistro é quello che sta attualmente leggendo ma soprattutto l’audio e il video insieme che ti seguiranno durante la lettura avranno un impatto maggiore. Questo uno dei motivi del perché riusciamo a fare piú cose conteporaneamente e allora perché non sfruttare questa abilitá umana nei siti web? Ora vediamo come fare e come esempio inseriró un video che ho recentemente girano un altro articolo in questo blog (Come modificare account page di woocommerce).
Come installare UAE
L’installazione é molto semplice una volta che hai scaricato il plugin Ultimate Addons Elementor lo carichi sul tuo sito WordPress e lo attivi, subito dopo vai nelle impostazioni del plugin e ti assicuri di avere attivato almeno la funzione “video” che é quella che ci serve per creare il favoloso “sticky Video” nella nostra landing page. Noterai che il plugin ti chiederá la licenza per funzionare, e come ti spiego qui sotto te la daró appena mi contatti nella mia pagina Facebook. Una volta ricevuta la inserisci e procedi con l’attivazione.
Quale elemento utilizzare con il Sticky Video
Appena hai installato il plugin UAE avrai moltissimi nuovi elementi nel tuo builder preferito, e dovrai selezionare “UAE Video” e trascinarlo dove vuoi che venga fuori il video principale, esattamente come accade con il widget di default di Elementor.
Come configurare il Widget Video UAE con la funzione Sticky Video
Una volta che hai inserito il widget nell pagina e incollato l’url del video youtube, vimeo che vuoi utilizzare nel pannellino a sinistra hai diverse opzioni per fare comparire il video durante lo scroll della pagina in diverse posizioni dello schermo, inoltre puoi decidere di nascondere questa opzione a seconda del dispositivo se desktop, mobile o tablet. Noterai che ci sono altre opzioni veramente carine ma non sto qui a spiegartele.
Ora é importante che fai click su “Enable Sticky Video” per attivare la funzione del player e rendendolo appunto “fisso” nella posizione che desideri che puó essere:
- Top Right (in alto a destra)
- Top Left (in alto a sinistra)
- Bottom Right (in basso a destra)
- Bottom Left (in basso a sinistra)
- Center Left (centrato a sinistra)
- Center Right (centrato a destra)
Ora qui sotto t’ho messo la landing page creata di base dove puoi sperimentare la funzione e vederla “LIVE” ma non solo, potrai anche ottenere il super bonus che ho preparato.
Bonus landing page + Video
Nella video precedente t’ho mostrato come creare una landing page con il video sticky in evidenza durante lo scroll della pagina, ora qui sotto trovi il link per vedere il flow in azione e ricordati di completarlo tutto per sbloccare l’ultra bonus di oggi!
Vai alla landing page per vedere la funzione “sticky video” in azione e sbloccare il bonus.
