Come mostrare i pulsanti (o CTA) in momenti specifici durante la riproduzione di un video HTML in Divi
Pubblicato: 2021-04-23I video sono strumenti di marketing efficaci per un sito web. E se un video cerca di promuovere e vendere prodotti o servizi online, dovrebbe includere un chiaro invito all'azione per i potenziali clienti. Un modo semplice per fornire un invito all'azione è includere un pulsante vicino al video su cui possono fare clic. Tuttavia, alcuni pulsanti (o CTA) hanno più senso apparire in un momento specifico quando l'utente sta guardando il video. Ad esempio, potrebbe esserci un segmento del video (come 20 secondi in) in cui viene menzionato un determinato sconto o promozione. Avere un pulsante "Ottieni ora" visualizzato in quel momento specifico potrebbe essere più efficace.
In questo tutorial, ti mostreremo come far apparire i pulsanti (o CTA) in momenti specifici durante la riproduzione di un video HTML in Divi. Questa tecnica ti consentirà di utilizzare video e pulsanti progettati con Divi Builder e quindi di visualizzare quei pulsanti quando il video raggiunge un momento specifico, quando l'utente mette in pausa il video o quando il video termina. Tutto ciò che serve sono alcuni frammenti di JQuery. Nessun plugin necessario per questo.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
Nota come appare il pulsante in alto quando l'ora corrente del video raggiunge i 5 secondi e il pulsante in basso appare quando il video finisce.
Qui lo stesso pulsante in alto appare quando l'ora corrente del video raggiunge i 5 secondi e il pulsante in basso appare quando il video è in pausa.
Puoi anche dare un'occhiata a questo codepen per una demo live di questa funzionalità.
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Come mostrare un pulsante in momenti specifici durante la riproduzione di un video in Divi
Carica il layout della pagina di destinazione della squadra di calcio
Per iniziare subito il design, utilizzeremo il layout della pagina di destinazione della squadra di calcio dal pacchetto di layout della squadra di calcio.
Per fare ciò, apri il menu delle impostazioni, fai clic sull'icona aggiungi dal layout e trova e utilizza il layout della pagina di destinazione della squadra di calcio.
Aggiorna modulo video
Nella parte superiore della pagina troverai un video con due pulsanti nella colonna di destra. Useremo questi elementi per dimostrare la funzionalità di mostrare quei pulsanti durante la riproduzione di un video.
Apri le impostazioni video e carica/aggiungi un video in formato file MP4. Puoi anche includere un file WEBM.
Nella scheda Avanzate, assegna al video un ID CSS personalizzato:
- ID CSS: divi-video-contenitore
Aggiorna il pulsante in alto
Quindi, apri le impostazioni per il modulo pulsante sopra il video e aggiorna l'opzione di trasformazione in modo che sposti il pulsante dietro il video come segue:
- Trasforma Trasla asse Y: 100%
Quindi dai al pulsante la seguente classe CSS:
- Classe CSS: divi-delayed-button-1
Aggiorna pulsante in basso
Quindi, apri le impostazioni per il modulo pulsante sotto il video e aggiorna l'opzione di trasformazione in modo che sposti il pulsante verso l'alto come segue:
- Trasforma Trasla asse Y: -100%
Quindi dai al pulsante il seguente ID CSS:
- ID CSS: divi-delayed-button-2
Dal momento che non abbiamo bisogno delle animazioni che sono state aggiunte ai pulsanti nel layout predefinito, possiamo eliminarle. Utilizzare la selezione multipla per selezionare entrambi i moduli pulsante (nella modalità di visualizzazione dei livelli). Quindi apri le impostazioni di entrambi i moduli pulsante e imposta lo stile di animazione su nessuno.
- Stile di animazione: nessuno
Aggiungi il codice
Per il passaggio finale, dobbiamo aggiungere il codice cust0m. Per fare ciò, aggiungi un modulo di codice sotto il pulsante in basso.
All'interno della casella del codice delle impostazioni del codice, incolla il seguente CSS assicurandoti di racchiudere il codice nei tag di stile .
.divi-delayed-button-1,
.divi-delayed-button-2 {
visibility: hidden;
transition: all 400ms ease !important;
}
.divi-delayed-button-1.show-button,
.divi-delayed-button-2.show-button {
visibility: visible;
transform: none;
}
Quindi, incolla il seguente codice JQuery dopo il CSS assicurandoti di avvolgere il codice nei tag di script .
(function ($) {
$(document).ready(function () {
//items
$diviVideo = $("#divi-video-container video");
videoElement = $("#divi-video-container video")[0];
$delayedButton1 = $(".divi-delayed-button-1");
$delayedButton2 = $(".divi-delayed-button-2");
//add timeupdate event on video with a function.
$diviVideo.on("timeupdate", function (e) {
//add class to show button1 when specified currentTime is reached.
if (e.target.currentTime >= 5) {
$delayedButton1.addClass("show-button");
}
//add class to show button2 when video is paused or has ended
if (videoElement.paused || videoElement.ended) {
$delayedButton2.addClass("show-button");
}
});
});
})(jQuery);
Informazioni sul codice
Il CSS
Innanzitutto, nascondiamo i pulsanti e impostiamo la durata della transizione dell'animazione del pulsante.
.divi-delayed-button-1,
.divi-delayed-button-2 {
visibility: hidden;
transition: all 400ms ease !important;
}
Quindi mostriamo il pulsante quando la classe "show-button" viene attivata tramite JQuery e impostiamo la trasformazione su nessuno in modo che il pulsante torni alla posizione originale sulla pagina.
.divi-delayed-button-1.show-button,
.divi-delayed-button-2.show-button {
visibility: visible;
transform: none;
}
Il JQuery
La prima cosa che facciamo è definire le variabili che useremo.
//items
$diviVideo = $("#divi-video-container video");
videoElement = $("#divi-video-container video")[0];
$delayedButton1 = $(".divi-delayed-button-1");
$delayedButton2 = $(".divi-delayed-button-2");
Successivamente, aggiungiamo l'evento timeupdate sul video con una funzione in modo da poter determinare dinamicamente l'ora corrente del video durante la riproduzione. Per ulteriori informazioni, leggi l'evento timeupdate qui.
//add timeupdate event on video with a function.
$diviVideo.on("timeupdate", function (e) {
});
All'interno della funzione, usiamo un'istruzione if per mostrare il pulsante 1 (il pulsante in alto) ogni volta che l'attributo currentTime del video è uguale o maggiore di 5 secondi.
//add timeupdate event on video with a function.
$diviVideo.on("timeupdate", function (e) {
//add class to show button1 when specified currentTime is reached.
if (e.target.currentTime >= 5) {
$delayedButton1.addClass("show-button");
}
});
NOTA: la condizione dell'istruzione if è e.target.currentTime >= 5, ma è possibile modificarla per mostrare il pulsante in un momento diverso durante la riproduzione del video. Ad esempio, se desideri mostrare il pulsante quando il currentTime del video raggiunge i 20 secondi, puoi sostituire la condizione con e.target.currentTime >= 20 .
Quindi usiamo un'altra istruzione if per mostrare il pulsante 2 (il pulsante in basso) ogni volta che il video è in pausa o è terminato (usando le proprietà HTMLMediaElement in pausa e terminato.
//add timeupdate event on video with a function.
$diviVideo.on("timeupdate", function (e) {
//add class to show button1 when specified currentTime is reached.
if (e.target.currentTime >= 5) {
$delayedButton1.addClass("show-button");
}
//add class to show button2 when video is paused or has ended
if (videoElement.paused || videoElement.ended) {
$delayedButton2.addClass("show-button");
}
});
Risultato finale
Nota come appare il pulsante in alto quando l'ora corrente del video raggiunge i 5 secondi e il pulsante in basso appare quando il video finisce.
Qui lo stesso pulsante in alto appare quando l'ora corrente del video raggiunge i 5 secondi e il pulsante in basso appare quando il video è in pausa.
Puoi anche dare un'occhiata a questo codepen per una demo live di questa funzionalità.
Pensieri finali
La visualizzazione di un pulsante in base all'ora corrente di un video può tornare utile per la commercializzazione dei tuoi prodotti e servizi. Qualsiasi video promozionale di successo merita comunque un invito all'azione convincente. Si spera che questo tutorial ti dia una migliore comprensione di come sfruttare la funzionalità dei video HTML per offrire quei potenti CTA quando e dove vuoi.
Se sei interessato ad altri modi creativi per utilizzare i video HTML in Divi, ecco alcuni articoli che potrebbero interessarti:
- Come creare controlli video HTML personalizzati in Divi
- Aggiunta di effetti 3D ai video HTML5 per visualizzare animazioni di prodotti unici in Divi
- Come creare un video promozionale appiccicoso con un interruttore Mostra/Nascondi in Divi
Non vedo l'ora di sentirti nei commenti.
Saluti!