Cómo crear un video promocional pegajoso con un botón Mostrar/Ocultar en Divi

Un video promocional es una maravillosa herramienta de marketing para promocionar sus productos y servicios a todos aquellos visitantes que prefieren ver un video en lugar de explorar su página para obtener información. Y, si está seguro de que su video ayudará a aumentar las conversiones, es una buena idea mantener el video disponible para los usuarios tanto como sea posible. Con esto en mente, un video promocional fijo (un video que permanece fijo en la parte superior de la página) podría ser un activo valioso para su sitio web.

En este tutorial, le mostraremos cómo crear un video promocional pegajoso con un interruptor de mostrar/ocultar en Divi . La idea es mostrar la versión de tamaño completo del video inicialmente arriba del pliegue. Luego, a medida que el usuario se desplaza hacia abajo en la página, el video se adhiere a la parte superior de la página para facilitar el acceso y/o la visualización mientras el usuario explora el resto del contenido de la página. Por supuesto, esto puede ser un poco intrusivo para algunos visitantes. Entonces, también le mostraremos cómo agregar un botón de alternancia para que los usuarios puedan mostrar u ocultar el video cuando lo deseen.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.

Este es el video fijo sin la palanca.

Aquí está el mismo video fijo con el botón de alternar.

Aquí hay una mirada más cercana a la funcionalidad de alternar.

Y así es como se ve en el móvil.

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).
Seleccione la opción «Elegir un diseño prefabricado».
Cargue el diseño de página de servicios de marketing digital.

Cómo crear un video promocional fijo con un botón Mostrar/Ocultar para su página de ventas

Agregar la fila para el video fijo

Para comenzar, vamos a eliminar el segundo módulo de texto en la fila de la sección primera/superior del diseño.

Debajo de la fila existente de la sección superior, agregue una nueva fila de una columna.

Abra la configuración de fila para la nueva fila y, en la pestaña Avanzado, actualice el Índice Z de la siguiente manera:

Índice Z: 14

Esto asegurará que el video que agreguemos a la fila permanezca sobre el otro contenido en la página cuando se atasque durante el desplazamiento de la página.

Agregar el video

Dentro de la columna de la fila, agregue un nuevo módulo de video.

Abra la configuración de video y cargue los formatos mp4 y webm para el video de su elección.

Si lo desea, agregue una imagen superpuesta al video.

En la pestaña Diseño, actualice las siguientes opciones de tamaño:

Ancho máximo: 900px
Alineación del módulo: centro

Esquinas redondeadas: 8px
Sombra de caja: ver captura de pantalla

Hacer la columna pegajosa

Abra la configuración de la columna que contiene el video y agregue la siguiente clase CSS en la pestaña Avanzado:

Clase CSS: et-sticky-video

Luego actualice la posición de la palanca de la siguiente manera:

Posición pegajosa: Stick to Top
Estilos predeterminados y fijos de transición: NO

Ahora que la posición fija está en vigor, agregue el siguiente CSS personalizado al elemento principal para el estado fijo:

width: 300px !important;
right: 0px !important;
left: auto !important;
top: 0px;

Actualizar el tamaño del icono de reproducción de video en estado fijo

Luego, abra la configuración de video nuevamente y actualice el tamaño de fuente del ícono de reproducción en el estado fijo de la siguiente manera:

Usar tamaño de icono personalizado: SÍ
Tamaño de fuente del icono de reproducción (adherente): 50 px

resultado hasta ahora

Creación del botón de alternancia de video fijo

Para crear el botón de alternancia de video fijo, cree un nuevo módulo de botón debajo del módulo de video.

Luego mueva el botón sobre el módulo de video.

Abra la configuración del botón y actualice el texto del botón de la siguiente manera:

Texto del botón: Ocultar

(NOTA: este texto se reemplazará/alternará con la palabra «Mostrar» al hacer clic en el botón cuando agreguemos nuestro código más adelante).

En la pestaña de diseño, actualice lo siguiente:

Usar estilos personalizados para el botón: SÍ
Estilos de texto de botón: 14px
Color del texto del botón: #fa50a9
Peso de la fuente del botón: semi negrita
Estilo de fuente del botón: TT
Icono de botón: flecha derecha
Mostrar solo el icono al pasar el mouse sobre el botón: NO

(NOTA: el ícono del botón que elija girará 180 grados al hacer clic en el botón cuando agreguemos el diseño del código para una mejor experiencia de usuario más intuitiva.

Actualice también el espacio para el botón:

Acolchado: 0,5 em arriba, 0,5 em abajo, 1 em izquierda, 1,7 em derecha

En la pestaña Avanzado, agregue la siguiente clase CSS al botón:

Clase CSS: et-sticky-video-toggle

En la pestaña Avanzado, actualice la opción de posición:

Posición: Absoluta
Ubicación: abajo a la izquierda

Ahora mueva el botón fuera de la columna/video a la izquierda actualizando la opción de traducción de transformación en el estado fijo de la siguiente manera:

Transformar Traducir Eje X (pegajoso): -100%

Para finalizar el diseño del botón de alternancia, debemos ocultar el botón hasta que alcance el estado fijo. Para hacer esto, actualice el CSS personalizado al elemento principal para el escritorio y el estado fijo de la siguiente manera:

Para el elemento principal en el escritorio…

display:none !important;

Para el elemento principal en Sticky…

display:block !important;

Agregar el código personalizado para la funcionalidad de alternar

Para que el conmutador funcione como lo necesitamos, necesitaremos agregar un módulo de código debajo del módulo de video.

CSS personalizado

En la pestaña de contenido, pase el siguiente CSS personalizado y asegúrese de envolverlo en las etiquetas de estilo .

.et-sticky-video-toggle.et_pb_button:after, .et_pb_sticky.et-sticky-video {
transition: all 200ms;
}
.et_pb_sticky.et-sticky-video-active {
transform: translate(100%, 0%);
}
.et-sticky-video-toggle:hover {
cursor: pointer;
}
.et-sticky-video-hidden:after {
transform: rotate(180deg) !important;
}

JQuery personalizado

Luego, debajo del CSS con las etiquetas de estilo, agregue el siguiente JQuery envuelto en las etiquetas del script .

(function($) {
$(document).ready(function(){
var $stickyVideoToggle = $('.et-sticky-video-toggle');
 
$stickyVideoToggle.on('click',function(e) {
e.preventDefault();
 
$(e.target).closest('.et-sticky-video').toggleClass('et-sticky-video-active');
 
$(this).toggleClass('et-sticky-video-hidden');
if ($(this).hasClass('et-sticky-video-hidden')) {
$stickyVideoToggle.text('show');
} else {
$stickyVideoToggle.text('hide');
}
});
});
})(jQuery);

¡Eso es todo!

Resultado final

Ahora vea la versión en vivo de la página para ver los resultados por sí mismo.

Este es el video fijo sin la palanca.

Aquí está el mismo video fijo con el botón de alternar.

Aquí hay una mirada más cercana a la funcionalidad de alternar.

Y así es como se ve en el móvil.

Agregue fácilmente módulos adicionales a la columna adhesiva para complementar el video

Debido a que la posición fija se agrega a la columna (no al video), siéntase libre de agregar módulos/contenido adicionales para complementar el video.

Por ejemplo, podría incluir un botón en la parte inferior del video en la misma columna adhesiva.

Luego permanecerá debajo del video en el estado fijo de la columna.

Agregue fácilmente sus propias opciones de video personalizadas con este diseño de video fijo

Tener la posición adhesiva aplicada a la columna (no al video) también es útil para agregar incrustaciones de video personalizadas o HTML (usando un módulo de texto o código) dentro de la columna. La funcionalidad de video fijo seguirá funcionando.

Por ejemplo, puede agregar un video HTML5 a un módulo de código dentro de la misma columna.

¡Cambie fácilmente las estructuras de las columnas también!

Además, puede cambiar fácilmente la fila a cualquier estructura de columna que desee para mostrar su video con contenido adyacente. Por ejemplo, puede crear un diseño de dos columnas con el video fijo inicialmente en la columna derecha o izquierda. Solo asegúrese de que la columna que contiene el contenido del video tenga la misma clase CSS y el mismo estilo que se explica en este tutorial. La funcionalidad pegajosa funcionará de la misma manera.

Por ejemplo, usando nuestro diseño existente, podemos agregar una nueva columna usando la vista de capas y llenar esa nueva columna con el texto del encabezado principal.

La columna pegajosa seguirá funcionando sin problemas mientras que la columna/el contenido adyacente permanece en el flujo normal del documento.

Problema con videos/incrustaciones de YouTube usando la opción de imagen de superposición Divi

Si está utilizando una URL de YouTube para incrustar un video con el módulo de video como en este diseño, es mejor no usar la opción de imagen superpuesta integrada de Divi (con el ícono de reproducción). Esto hará que el audio del video se reproduzca automáticamente desde el principio en el estado fijo, lo que provocará la reproducción duplicada del audio en diferentes intervalos. Entonces, si desea utilizar la imagen superpuesta de Divi y el ícono de reproducción con el Módulo de video Divi, debe agregar los archivos de video/URL mp4 y WebM en su lugar.

Pensamientos finales

Crear un video promocional pegajoso con un botón de mostrar/ocultar para su página abre la puerta a nuevas formas de promocionar sus productos y servicios. No solo puede mantener esos videos de alta conversión a la vanguardia, sino que también puede incluir fácilmente información complementaria o CTA arriba o debajo del video simplemente agregándolo a la misma columna en Divi.

De hecho, ni siquiera tiene que incluir un video, ¡simplemente llene la columna adhesiva con cualquier información que desee colocar en la parte superior de la página al desplazarse!

Espero escuchar de usted en los comentarios.

¡Salud!