Come aggiungere un video fluttuante appiccicoso sullo scorrimento della pagina in WordPress

Pubblicato: 2022-03-25

Vuoi imparare come aggiungere un video fluttuante appiccicoso sullo scorrimento della pagina nel tuo sito WordPress?

I video appiccicosi sono un modo efficace per coinvolgere il tuo pubblico nel tuo sito web. Al giorno d'oggi, le persone consumano più contenuti video rispetto ai contenuti scritti. Quindi, se trovi che i visitatori del tuo sito web non interagiscono abbastanza con il tuo sito, l'aggiunta di un video può risolvere il problema.

Se stai cercando un modo semplice per rendere appiccicoso il video del tuo sito web, allora sei arrivato all'articolo giusto. Perché in questo blog imparerai come aggiungere video appiccicosi nel sito WordPress basato su Elementor in pochi passaggi e pochi minuti.

Quindi continua a leggere...

I contenuti si nascondono
Che cos'è un video appiccicoso?
Perché aggiungere Sticky Video nel sito Web WordPress di Elementor?
Come aggiungere un video appiccicoso al sito Web di Elementor in 6 passaggi
Passaggio 1: Elemento Installr ed ElementsKit
Passaggio 2: abilita il modulo contenuto appiccicoso di ElementsKit
Passaggio 3: trascina e rilascia il widget Video di Elementor
Passaggio 4: scegli la sorgente video e aggiungi l'URL
Passaggio 5: impostazioni per rendere appiccicoso il video di Elementor
Passaggio 6: aggiorna per aggiungere video appiccicosi in Elementor e visualizza l'anteprima
Parole finali

Che cos'è un video appiccicoso?

I video appiccicosi sono video bloccati su una pagina Web e rimangono fluttuanti nella stessa posizione nella finestra di una pagina Web anche mentre un utente scorre verso l'alto o verso il basso.

Perché aggiungere Sticky Video nel sito Web WordPress di Elementor?

Il concetto di un video appiccicoso su un sito Web non solo sembra interessante, ma ha anche molti vantaggi. Ecco alcuni dei vantaggi che puoi sfruttare aggiungendo un video appiccicoso al tuo sito Web WordPress.

  • Aumenta il coinvolgimento degli utenti: con i video persistenti, le persone possono guardare e leggere il contenuto della pagina web allo stesso tempo. Di conseguenza, le persone tendono a interagire di più con i siti web.
  • Aumenta il tasso di completamento del video: poiché i video persistenti non bloccano l'intera pagina, è probabile che i clienti guardino fino alla fine piuttosto che chiuderla a metà. Quindi, rendere il tuo video appiccicoso può effettivamente aumentare il tempo di completamento del video.
  • Attira l'attenzione dell'utente: di solito, le persone lesinano su un sito. In questo caso, se ti affidi solo al contenuto di testo, c'è la possibilità che i tuoi clienti possano perdere cose importanti che vorresti che notassero. Con il video puoi attirare l'attenzione del tuo utente su informazioni specifiche in modo più efficace.
  • Storytelling migliore: i video ti offrono una tela più ampia per raccontare storie rispetto al contenuto di testo normale. Dal momento che puoi usare contemporaneamente testo, animazione e voce in un video, sei meglio attrezzato per raccontare una storia in modo più efficace.

Sei convinto di dover aggiungere un video appiccicoso al tuo sito WordPress? Bene, se lo sei, passa alla sezione successiva per capire come puoi farlo.

Come aggiungere un video appiccicoso al sito Web di Elementor in 6 passaggi

Questo è il processo più semplice per rendere i video appiccicosi e fluttuanti sul tuo sito WordPress. Esegui tutti i passaggi per aggiungere un video appiccicoso a Elementor in pochi istanti.

Passaggio 1: Elemento Installr ed ElementsKit

Innanzitutto, il passaggio consiste nell'installare tutti i plug-in richiesti. Per seguire questo tutorial su come aggiungere video appiccicosi in Elementor, avrai bisogno

  • Elementor e
  • ElementsKit (sia versione gratuita che pro).

Elementor è un generatore di pagine drag and drop ed ElementsKit è un componente aggiuntivo per Elementor. Quindi, devi prima installare Elementor, quindi scaricare ElementsKit e quindi aggiornare il tuo plug-in alla versione Pro.

Puoi consultare la documentazione se hai bisogno di aiuto per quanto riguarda l'installazione di ElementsKit pro e il processo di attivazione della licenza.

Ottieni ElementsKit Pro

Passaggio 2: abilita il modulo contenuto appiccicoso di ElementsKit

Per rendere il video appiccicoso, utilizzerò le funzionalità di contenuto appiccicoso di ElementsKit. Quindi, è necessario abilitare il modulo del contenuto permanente.

Ora vai su ElementsKit ⇒ Moduli ⇒ Contenuti permanenti , attiva l'opzione e fai clic su Salva modifiche per aggiornare le modifiche appena apportate.

aggiungi video appiccicoso in Elementor

Passaggio 3: trascina e rilascia il widget Elementor Video

Vai alla pagina in cui desideri aggiungere il video appiccicoso, fai clic sull'opzione Modifica con Elementor.

come creare un video fluttuante appiccicoso sullo scorrimento della pagina

Scegli il layout che desideri facendo clic sull'icona + . Successivamente, cerca il widget Video , trascina il widget e rilascialo dove vuoi aggiungerlo.

Trascina e rilascia il widget video di Elementor come aggiungere un video fluttuante appiccicoso sullo scorrimento della pagina

Nota : per questo tutorial, ho già importato la pagina premade che sto modificando per mostrare l'intero processo. Puoi creare facilmente siti Web WordPress con la sezione predefinita di ElementsKit.

Passaggio 4: scegli la sorgente video e aggiungi l'URL

Con il widget video Elementor, puoi visualizzare video da fonti come Youtube, Vimeo, DailyMotion e Self Hosted.

Seleziona il tipo di video di YouTube Elementor widget come creare un video fluttuante appiccicoso sullo scorrimento della pagina

Innanzitutto, scegli il tipo di sorgente preferito, quindi fornisci l'URL del video. Userò YouTube per questo articolo.

Nota : in caso di self-hosting, puoi caricare un video sul tuo server o fornire un URL esterno.

Puoi anche personalizzare lo stile del video. Per farlo, vai alla scheda dello stile. Qui puoi scegliere le proporzioni e il filtro CSS . Puoi scegliere tra sei tipi di rapporto come 1:1, 3:2, 4:3, 16:9 ecc. Fai clic sull'icona di modifica del filtro CSS per personalizzare sfocatura, luminosità, contrasto, saturazione e tonalità.

Le impostazioni dello stile di Elementor Video Widget aggiungono video appiccicosi in Elementor

Passaggio 5: impostazioni per rendere appiccicoso il video di Elementor

Vai alla scheda Avanzate. Quindi espandi l'opzione permanente di ElementsKit . Qui puoi scegliere il tipo appiccicoso come in alto, in basso, in colonna e mostrarlo a scorrimento verso l'alto.

Impostazioni del modulo appiccicoso come aggiungere un video mobile appiccicoso allo scorrimento della pagina

Dopo aver scelto il tipo appiccicoso come qualcosa di diverso da nessuno, otterrai le seguenti opzioni:

  • Permanente fino a: qui devi impostare l'ID CSS della sezione fino alla quale desideri che il tuo video rimanga permanente. Puoi impostare un ID CSS personalizzato sulla colonna, quindi copiarlo e incollarlo nell'opzione Sticky until.
  • Offset permanente: in questa opzione, imposta il valore di offset. Il valore di offset indica la distanza tra il video e la posizione in alto della tua pagina.
impostazioni superiori appiccicose come creare un video fluttuante appiccicoso sullo scorrimento della pagina nel sito WordPress

Nota : Sticky fino a quando l'opzione non è disponibile con la colonna delle opzioni permanenti poiché sarà visibile solo fino a quando la colonna principale non sarà visibile sullo schermo.

Puoi cambiare il Colore di sfondo appiccicoso e rendere il video appiccicoso su tutti i dispositivi, solo desktop o desktop e tablet.

Cerchi un modo più semplice per aggiungere un'enorme quantità di dati alla tabella del tuo sito web? Scopri come aggiungere dati CSV/Excel nella tabella di WordPress in pochi passaggi utilizzando ElementsKit.

Passaggio 6: aggiorna per aggiungere video appiccicosi in Elementor e visualizza l'anteprima

Dopo aver scelto il tipo di video e aver impostato tutte le impostazioni permanenti, fai clic su Aggiorna per salvare e fai clic sul pulsante di anteprima per vedere i risultati finali.

aggiungi video appiccicoso in Elementor

Nota: se desideri che un pulsante video appiccicoso che si apre per mostrare un video al clic , puoi utilizzare il widget Video ElementsKit invece del widget Video Elementor. Puoi seguire la stessa procedura sopra descritta per aggiungere video appiccicosi in Elementor utilizzando il widget video ElementsKit.

Ecco un'anteprima di Sticky Video utilizzando il widget video ElementsKit .

come aggiungere un video fluttuante appiccicoso sullo scorrimento della pagina

Puoi anche dare un'occhiata al nostro blog su Come creare un modello di post del blog Elementor personalizzato

Parole finali

Congratulazioni! Ora sai come aggiungere video appiccicosi nel sito di Elementor. È molto più facile da fare di quanto sembri inizialmente, giusto?

Prova tutte le opzioni e le impostazioni del modulo adesivo ElementsKit e usalo sul tuo sito per ottenere i massimi risultati. Se sei colpito dal modulo adesivo di ElementsKit e da quanto sia facile aggiungere come aggiungere un video mobile appiccicoso sullo scorrimento della pagina.

Quindi la sana raccolta di widget e moduli di ElementsKit ha da offrire ti sorprenderà ancora di più. Quindi assicurati di controllare tutte le funzionalità che ElementsKit ha da offrire.

Ottieni ElementsKit Pro