Cómo mostrar botones (o CTA) en momentos específicos al reproducir un video HTML en Divi
Publicado: 2021-04-23Los videos son herramientas de marketing efectivas para un sitio web. Y si un video busca promocionar y vender productos o servicios en línea, debe incluir un llamado a la acción claro para los clientes potenciales. Una forma sencilla de proporcionar una llamada a la acción es incluir un botón cerca del video en el que puedan hacer clic. Sin embargo, algunos botones (o CTA) tienen más sentido para aparecer en un momento específico cuando el usuario está viendo el video. Por ejemplo, puede haber un segmento del video (como 20 segundos) donde se menciona un determinado descuento o promoción. Hacer que aparezca el botón "Consígalo ahora" en ese momento específico puede ser más efectivo.
En este tutorial, le mostraremos cómo hacer que los botones (o CTA) aparezcan en momentos específicos al reproducir un video HTML en Divi. Esta técnica te permitirá usar videos y botones diseñados con Divi Builder y luego hacer que esos botones aparezcan cuando el video llegue a un tiempo específico, cuando el usuario pausa el video o cuando el video termina. Todo lo que se necesita son algunos fragmentos de JQuery. No se necesita ningún complemento para este.
¡Empecemos!
Vistazo
Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.
Observe cómo aparece el botón superior cuando el tiempo actual del video alcanza los 5 segundos y el botón inferior aparece cuando termina el video.
Aquí aparece el mismo botón superior cuando el tiempo actual del video alcanza los 5 segundos y el botón inferior aparece cuando el video está en pausa.
También puede consultar este codepen para ver una demostración en vivo de esta funcionalidad.
Descarga el diseño GRATIS
Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón Importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Elija la opción "Construir desde cero".
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Cómo mostrar un botón en momentos específicos al reproducir un video en Divi
Cargar el diseño de la página de destino del club de fútbol
Para comenzar con el diseño, vamos a utilizar el diseño de la página de destino del club de fútbol del paquete de diseño del club de fútbol.
Para hacer esto, abra el menú de configuración, haga clic en el icono Agregar desde diseño y busque y use el diseño de la página de destino de Soccer Club.
Actualizar módulo de video
En la parte superior de la página, encontrará un video con dos botones en la columna de la derecha. Usaremos estos elementos para demostrar la funcionalidad de mostrar esos botones mientras se reproduce un video.
Abra la configuración de video y cargue / agregue un video en formato de archivo MP4. También puede incluir un archivo WEBM.
En la pestaña avanzada, asigne al video una ID de CSS personalizada:
- ID de CSS: divi-video-container
Actualizar botón superior
A continuación, abra la configuración del módulo de botones sobre el video y actualice la opción de transformación para que mueva el botón detrás del video de la siguiente manera:
- Transformar trasladar eje Y: 100%
Luego dale al botón la siguiente clase CSS:
- Clase CSS: divi-delayed-button-1
Actualizar botón inferior
A continuación, abra la configuración del módulo de botones debajo del video y actualice la opción de transformación para que mueva el botón hacia arriba de la siguiente manera:
- Transformar trasladar eje Y: -100%
Luego, asigne al botón la siguiente ID de CSS:
- ID de CSS: divi-delayed-button-2
Como no necesitamos las animaciones que se agregaron a los botones en el diseño prefabricado, podemos eliminarlas. Utilice multiselección para seleccionar ambos módulos de botones (en la vista de capas modal). Luego abra la configuración de cualquiera de los módulos de botones y establezca el estilo de animación en ninguno.
- Estilo de animación: Ninguno
Agregar el código
Para el paso final, necesitamos agregar el código cust0m. Para hacer esto, agregue un módulo de código debajo del botón inferior.
Dentro del cuadro de código de configuración de código, pegue el siguiente CSS asegurándose de envolver el código en las etiquetas de estilo .
.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;
}
Luego, pegue el siguiente código JQuery después del CSS asegurándose de envolver el código en las etiquetas del 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);
Sobre el Código
El CSS
Primero, ocultamos los botones y establecemos la duración de la transición de la animación del botón.
.divi-delayed-button-1,
.divi-delayed-button-2 {
visibility: hidden;
transition: all 400ms ease !important;
}
Luego mostramos el botón cuando se cambia la clase "show-button" a través de JQuery y establecemos la transformación en none para que el botón vuelva a la ubicación original en la página.
.divi-delayed-button-1.show-button,
.divi-delayed-button-2.show-button {
visibility: visible;
transform: none;
}
El JQuery
Lo primero que hacemos es definir las variables que usaremos.
//items
$diviVideo = $("#divi-video-container video");
videoElement = $("#divi-video-container video")[0];
$delayedButton1 = $(".divi-delayed-button-1");
$delayedButton2 = $(".divi-delayed-button-2");
A continuación, agregamos el evento timeupdate en el video con una función para que podamos determinar dinámicamente la hora actual del video durante la reproducción. Para obtener más información, lea sobre el evento timeupdate aquí.
//add timeupdate event on video with a function.
$diviVideo.on("timeupdate", function (e) {
});
Dentro de la función, usamos una instrucción if para mostrar el botón 1 (el botón superior) siempre que el atributo currentTime del video sea igual o superior a 5 segundos.
//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 condición de la instrucción if es e.target.currentTime> = 5, pero puede cambiar esto para mostrar el botón en un momento diferente al reproducir el video. Por ejemplo, si desea mostrar el botón cuando el tiempo actual del video alcance los 20 segundos, puede reemplazar la condición con e.target.currentTime> = 20 .
Luego usamos otra instrucción if para mostrar el botón 2 (el botón inferior) cada vez que el video está en pausa o ha terminado (usando las propiedades HTMLMediaElement pausado y terminado.
//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");
}
});
Resultado final
Observe cómo aparece el botón superior cuando el tiempo actual del video alcanza los 5 segundos y el botón inferior aparece cuando termina el video.
Aquí aparece el mismo botón superior cuando el tiempo actual del video alcanza los 5 segundos y el botón inferior aparece cuando el video está en pausa.
También puede consultar este codepen para ver una demostración en vivo de esta funcionalidad.
Pensamientos finales
Mostrar un botón basado en la hora actual de un video puede resultar útil para comercializar sus productos y servicios. Cualquier video promocional exitoso merece una llamada a la acción convincente de todos modos. Con suerte, este tutorial le dará una mejor comprensión de cómo aprovechar la funcionalidad de los videos HTML para ofrecer esos poderosos CTA cuando y donde lo desee.
Si está interesado en otras formas creativas de usar videos HTML en Divi, aquí hay algunos artículos que puede disfrutar:
- Cómo crear controles de video HTML personalizados en Divi
- Agregar efectos 3D a videos HTML5 para mostrar animaciones de productos únicos en Divi
- Cómo crear un video promocional fijo con un botón Mostrar / Ocultar en Divi
Espero tener noticias tuyas en los comentarios.
¡Salud!