Cómo crear un video promocional pegajoso con un interruptor de pantalla / ocultación en la división

Un video promocional es una maravillosa herramienta de marketing para promocionar sus productos y servicios a todos aquellos visitantes que preferirían ver un video que explorar su página de información. Y, si confía en que su video contribuirá a aumentar las conversiones, es una buena idea mantener el video disponible para los usuarios tanto como sea posible. Dado esto, un video promocional pegajoso (un video que permanece fijado en la parte superior de la página) podría ser una valiosa ventaja para su sitio web. En este tutorial, le mostraremos cómo crear un video promocional pegajoso con un cambio de espectáculo / escondite en el div. La idea es mostrar la versión de tamaño completo del video original sobre la página. Luego, a medida que el usuario ejecuta la página hacia abajo, el video permanece en la parte superior de la página para acceder y / o una vista fácil mientras el usuario explora el resto del contenido del contenido. Por supuesto, esto puede ser un poco intrusivo para algunos visitantes. Por lo tanto, también le mostraremos cómo agregar un botón de interruptor para dar a los usuarios la capacidad de mostrar u ocultar el video cuando lo deseen.
¡Vamos a empezar! Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Este es el video pegajoso sin cambiar. Aquí está el mismo video pegajoso con el botón Switch. Aquí hay una mirada más cercana a la comunidad de cambio.

Así es como se ve en los dispositivos móviles. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página en el frente (Visual Builder). Seleccione la opción “Elija un aspecto prefabricado”.
Cargue el aspecto de la página de los servicios de marketing digital.
Cómo crear un video promocional pegajoso con una pantalla / ocultación para su página de ventas agregando la fila para que se inicie el video pegajoso, eliminaremos el segundo módulo de texto entre las secciones superiores.

En la fila existente desde la sección superior, agregue una nueva fila con una sola columna.

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

IND ÍNDICE: 14

Esto asegurará que el video que agregamos en una fila permanezca por encima del otro contenido en la página cuando esté bloqueado durante la página.
Agregue el video a la columna de fila, agregue un nuevo módulo de video.
Abra la configuración de video y cargue formatos MP4 y Webm para su video de 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: 900 PX

Alineación del módulo: centro
Esquinas redondeadas: 8 px
Box Shadow: Ver captura de pantalla

Al hacer que la columna pegajosa abra la configuración para la columna que contiene el video y agregue la siguiente clase CSS a la pestaña avanzada:
Clase CSS: Video Et-Sticky

Luego actualice la posición del palo de la siguiente manera:
Posición pegajosa: adhiérase a la parte superior

Transición predeterminada y estilos adhesivos: no
Ahora que la posición pegajosa está vigente, agregue el siguiente CSS personalizado al elemento principal para una condición pegajosa:
Ancho: 300px! Importante;

Derecha: 0px! IMPORTANTE;
Izquierda: coche! Importante;
Arriba: 0px;
Actualice el tamaño del icono de reproducción de video en el estado adhesivo y luego abra la configuración de video nuevamente y actualice el tamaño del reproductor para el icono de renderizado de la siguiente manera:
Use el tamaño del icono personalizado: Sí

Tamaño de fuente de icono de juego (pegajoso): 50 px
El resultado del botón de palanca de video para crear el botón Sticky Video Switch, cree un nuevo módulo de botón en el módulo de video.
Luego mueva el botón en la parte superior del módulo de video.


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

Botón de texto: Ocultar

(Nota: este texto será reemplazado / conmutado con la palabra “Pantalla” al hacer clic en el botón al agregar nuestro código más tarde).
En la pestaña Diseño, actualice lo siguiente:
Use estilos personalizados para el botón: Sí

Estilos de texto para botones: 14 PX
El color de texto del botón: # FA50A9
Peso de fuente de fuente: semi audac.
Botón de estilo de fuente: TT
Icono del botón: flecha derecha
Muestre el icono solo en el cursor para el botón: no
(Nota: El icono del botón que elija se girará con 180 grados al hacer clic en el botón al agregar el aspecto del código para una experiencia de usuario más intuitiva.
Actualice el espacio para el botón:
Revestimiento: 0.5em arriba, 0.5em hacia abajo, 1em a la izquierda, 1.7em a la derecha

En la pestaña avanzada, agregue la siguiente clase CSS al botón:
Clase CSS: Et-Sticky-Video-Toggle

En la pestaña avanzada, actualice la opción de posición:
Posición: Absoluto

Ubicación: abajo a la izquierda
Ahora mueva el botón fuera de la columna / video a la izquierda actualizando la opción de transformación en estado adhesivo de la siguiente manera: Transforme el traducido (Sticky): -100%
Para completar el diseño del botón del interruptor, debemos ocultar el botón hasta que alcance la condición pegajosa. Para hacer esto, actualice CSS personalizado en el elemento principal para el escritorio y la condición pegajosa de la siguiente manera:

Para el elemento principal en el escritorio … Pantalla: ¡Ninguno! Importante;
Para el elemento principal en el palo … Display: Bloque! Importante;

Agregar el código personalizado para la funcionalidad de conmutación para que el conmutador funcione correctamente, tendremos que agregar un módulo de código en el módulo de video.
CSS personalizado en la pestaña Contenido, pase por el próximo CSS personalizado, asegurándose de envolverlo en las etiquetas de estilo. .et-sticky-video togle.et_pb_button: después, .et_pb_sticky.et-sticky-video {
Transición: los 200 ms;

}

.et_pb_sticky.et-sticky-video-active {
Transformar: traducir (100%, 0%);
}
.et-systy-video-toogle: hover {
Cursor: puntero;
}
.ET-Stysty-Video Hidden: después de {
Transformación: Rotado (180 grados)! Importante;
}
JQuery personalizó luego, bajo CSS con etiquetas de estilo, agregue el siguiente jquey envuelto en las etiquetas de guiones.
(función ($) {
$ (documento) .Ready (function () {
Var $ stickyvideotogle = $ (‘. Et-sticky-video-toggle’);
$ Stickyvideotogle.on (‘Click’, function (s) {
E. PreventDefault ();
ps
$ (this) .Togglecass (‘et-sticky-video-hydden’);
if ($ (this) .hasclass (‘et-sticky-video hidden’)) {
$ stickyvideotogle.text (‘show’);
} más {
$ stickyvideotogle.text (‘hide’);}
});
});
}) (JQuery);
¡Eso es todo! Vista de resultados final ahora la versión en vivo de la página para ver sus resultados este es el video adhesivo sin cambiar. Aquí está el mismo video pegajoso con el botón Switch. Aquí hay una mirada más cercana a la comunidad de cambio.
Así es como se ve en los dispositivos móviles. Agregue fácilmente módulos adicionales a la columna pegajosa para completar el video porque la posición adhesiva se agrega a la columna (no al video), no dude en agregar módulos adicionales para complementar el video. Por ejemplo, puede incluir un botón en la parte inferior del video en la misma columna pegajosa.
Luego permanecerá debajo del video en la condición pegajosa de la columna.
Agregue fácilmente sus propias opciones de video personalizadas con este video pegajoso, aplicando la posición adhesiva en la columna (no en el video) es útil para agregar incorporación de video personalizada o HTML (usando un texto o código) en la columna. La funcionalidad de video pegajosa continuará funcionando. Por ejemplo, puede agregar un video HTML5 a un módulo de código en la misma columna.

¡Cambia suavemente las estructuras de la columna!También puede cambiar fácilmente el convertir en cualquier estructura de columna que desee mostrar con contenido adyacente.Por ejemplo, puede mirar con dos columnas, con el video pegajoso inicial en la columna derecha o izquierda.Solo asegúrese de que la columna que contenga el contenido de video tenga la misma clase CSS y estilo pegajoso, como se explica en este tutorial.La funcionalidad pegajosa funcionará igual.Por ejemplo, utilizando nuestro diseño existente, podemos agregar una nueva columna usando las capas de las capas y llenar esa nueva columna con el texto principal del encabezado.