Los 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 claro llamado a la acción 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 un botón «Consíguelo ahora» en ese momento específico puede ser más efectivo.
En este tutorial, le mostraremos cómo hacer que aparezcan botones (o CTA) en momentos específicos al reproducir un video HTML en Divi . Esta técnica le permitirá usar videos y botones diseñados con Divi Builder y luego hacer que esos botones aparezcan cuando el video llegue a un momento específico, cuando el usuario pause el video o cuando finalice el video. Todo lo que se necesita son algunos fragmentos de JQuery. No se necesita complemento para este.
¡Empecemos!
Aquí hay un vistazo rápido al diseño que construiremos 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 finaliza 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 en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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 has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar 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 el diseño y busque y use el diseño de la página de destino del club de fútbol.
Actualizar módulo de video
En la sección superior de la página, encontrará un video con dos botones en la columna 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-contenedor
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 Traducir eje Y: 100%
Luego dale al botón la siguiente Clase CSS:
- Clase CSS: divi-retrasado-botón-1
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 Traducir eje Y: -100%
Luego asigne al botón el siguiente ID de CSS:
- ID de CSS: divi-botón-retrasado-2
Como no necesitamos las animaciones que se agregaron a los botones en el diseño prefabricado, podemos eliminarlas. Use la selección múltiple para seleccionar ambos módulos de botones (en el modal de vista de capas ). 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
Agrega 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 del código, pegue el siguiente CSS asegurándose de envolver el código en las etiquetas de estilo .
|
01
02
03
04
05
06
07
08
09
10
|
.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 incluir el código en las etiquetas del script .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
|
(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 la clase «show-button» se alterna 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.
|
01
02
03
04
05
|
.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 vamos a utilizar.
//items$diviVideo = $("#divi-video-container video");videoElement = $("#divi-video-container video")[0];$delayedButton1 = $(".divi-delayed-button-1");$delayedButton2 = $(".divi-delayed-button-2"); |
Luego, agregamos el evento de actualización de tiempo 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 de actualización de tiempo 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 de tiempo actual del video sea igual o mayor 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 declaració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 pausadas y terminadas ).
//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 finaliza 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 un llamado a la acción convincente de todos modos. Con suerte, este tutorial te dará una mejor comprensión de cómo aprovechar la funcionalidad de los videos HTML para ofrecer esos poderosos CTA cuando y donde quieras.
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 únicas de productos en Divi
- Cómo crear un video promocional pegajoso con un botón Mostrar/Ocultar en Divi
Espero escuchar de usted en los comentarios.
¡Salud!