homefinance blog
Compartir vistas previas de video en su sitio web puede aumentar su interactividad y ayudar a los visitantes a comprender mejor y / o servicios. Y creamos un diseño de video directo con clic directo que permite a las personas navegar a través de algunas de nuestras características más populares. Recreamos este diseño dentro de la división y hoy le mostraremos cómo recrearlo desde cero. ¡Podrá descargar el archivo JSON de forma gratuita! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue el recorrido de video de diseño gratuito para hacer su mano en el video de forma gratuita, primero deberá descargarlo con 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 será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar 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. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Suscríbete a nuestro canal de YouTube para comenzar a recrear! Agregue una nueva sección regular, comience agregando una nueva sección habitual a la página en la que está trabajando.
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y aplique la siguiente configuración de tamaño:
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 2
Ancho: 85 VW (escritorio), 90% (tableta y teléfono)
Ancho máximo: 100%
Configuración Columna 1 Abra la columna 1 Configuración.
Espacio Acceda a la configuración de espaciado y agregue algunos rellenos superiores al escritorio.
Revelaje superior: 5VW (escritorio), 0VW (tableta y teléfono)
La clase CSS vaya a la pestaña avanzada y agregue una clase CSS. Más adelante en la publicación, usaremos esta clase CSS para crear un efecto de cuadrícula en la tableta y el móvil.
Clase CSS: red sensible al elemento
¡Agregue módulos de blurb a la columna 1 Agregue el título para comenzar a agregar módulos! Para cada elemento que se puede hacer clic, usaremos un módulo de propaganda. Comenzaremos con el primero y lo reutilizaremos para los elementos de clic restantes. Agregue un nuevo módulo de propaganda en la columna 1 e ingrese un título de su elección. Seleccione el icono Seleccione un icono adicional.
Configuración predeterminada para los íconos Vaya a diseñar y cambie la configuración del icono en consecuencia:
Icono de color: # e8e9ea
Colocación de íconos: izquierda
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 2VW (escritorio), 4.5VW (tableta), 7VW (teléfono)
Coloque el cursor en la configuración del icono Cambie el color del icono al cursor.
Icono de color: # b0c8ff
Configuración de texto de título Vaya a la configuración del título y realice algunos cambios allí.
Título de la fuente: Lato
Título Fuente de peso: Bold
Estilo de fuente de título: mayúscula
Título Tamaño del texto: 0.8VW (escritorio), 1.7VW (tableta), 2.5VW (teléfono)
Altura de la línea de título: 2VW (escritorio), 4.5VW (tableta), 7VW (teléfono)
Espacio predeterminado Modelaremos el módulo de la propaganda utilizando algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revelaje superior: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Bajo forro: 0.5VW (escritorio), 1.5VW (tableta y teléfono)
ENLIZACIÓN IZQUIERDA: 1.2VW (escritorio y tableta), 5VW (teléfono)
Revestimiento derecho: 1.2VW (escritorio y tableta), 5VW (teléfono)
La distancia con el mouse crea un efecto de resaltado al cambiar los valores del margen de viaje.
Margen izquierdo: -0.5VW
Margen derecho: -0.5VW
Border agregue algunas esquinas redondeadas.
Sombra de caja predeterminada con un tono de caja sutil.
Box Sombra Posición vertical: 10 pxput la falta de clara de la sombra de la caja: 70 px
Color de la sombra: RGBA (0.0,0,0.11)
Hover Box Shadow Cambie el color de la sombra de cassette al cursor.
Shadow Color: RGBA (103,151,255,0,22)
ID y clase CSS por última vez, pero no menos importante, acceda al módulo de propaganda avanzado y agregue una ID de CSS y una clase.
ID CSS: Video-Walkthrough-Weite-1
Clase CSS: Video-Print-Acursor
Modo de propaganda de clona tres veces después de haber completado el primer módulo de blurbs, puede clonar tres veces.
Cambie el contenido Cambie el contenido de cada módulo de propaganda duplicada.
Cambie todas las ID de CSS del módulo de propaganda duplicada con IDS CSS.
1) Construir visualmente: video-ritem-ritem-1
2) Efectos: Video-Walkthrough-Pritem-2
3) Divisores de formulario: Video-presentación-elemento-3
4) Edición de bloques: video-caminata-ritem-4
Reutilice la columna 1 Eliminar la columna 3 Después de haber completado la primera columna, puede abrir la configuración de la fila y puede eliminar la tercera columna.
Clon columna 1 y coloque en el clon inferior la primera columna (que contiene los módulos de la propaganda) y coloque la columna duplicada en la parte inferior.
Cambie la estructura de la columna posterior Cambie la estructura de la columna con la seleccionada al comienzo de este tutorial.
Cambie todo el contenido del módulo de blurb de la columna 3 Cambie el título del módulo de desenfoque de cada duplicado en la columna 3.
Cambie todas las ID de CSS del módulo Blurb 3 junto con IDS CSS.
5) Biblioteca de apariencia: Video-Walkthrough-Ritem-5
6) Transformaciones: Video-Walkthrough-Ritem-6
7) estados de desplazamiento: video-ritem-ritem-7
8) Busque y reemplace: Video-Walkthrough-Ritem-8
Agregue un módulo de texto en la columna 2 ¡Deje el cuadro de contenido es el momento de comenzar a agregar diferentes vistas del video! Hay dos formas de acercarse; Usando un módulo de video o módulo de texto. El módulo de video pide a los visitantes que presionen la reproducción. Por otro lado, el uso de un texto con un fondo de video reproduce el video automático, pero sin sonido. Para este tutorial, usaremos un módulo de texto, pero no dude en usar un módulo de video. Asegúrese de que el cuadro de contenido del módulo de texto permanezca vacío. Video Fundal Access Configuración de fondo y cargue un video de su elección.
Gire el video mientras no se ve: Sí
Dimensión Vaya a la pestaña Design y agregue “100%” al ancho.
Ancho: 100%
Un espaciado adicional, permitiremos que se muestre el fondo del video agregando valores de llenado personalizados, arriba y abajo, en diferentes tamaños de pantalla. Nota: Los valores que agregan deben ajustarse al conjunto de tamaño de su video.
Revelaje superior: 15VW (escritorio), 24VW (tableta), 26VW (teléfono)
Bajo forro: 15 VW (escritorio), 24VW (tableta), 26VW (teléfono)
El borde continúa agregando “10 px” a cada una de las esquinas.
Sombra de caja con un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 30 px
Poder de extender la sombra de la caja: -5 PX
Color de la sombra: RGBA (0.0,0,0.11)
ID CSS por último, pero no menos importante, agregue una ID de CSS.
ID CSS: Video-Walkthrough-1
Clone El módulo de texto 7 veces después de haber terminado el módulo de texto, puede clonarlo siete veces (uno para cada módulo de propaganda).
Cambie todos los fondos del módulo de texto duplicados Cargue un fondo de video diferente para cada duplicado. Cambie todas las ID de CSS del módulo de texto duplicado y agregue la clase CSS a todos los módulos de texto duplicados e IDS CSS. Asegúrese de conectar cada módulo de texto al módulo de propaganda a la derecha usando el mismo número al final de la ID de CSS. También ocultamos cada módulo de texto, además del módulo de texto original, utilizando una clase CSS.
Módulo de texto 1: Video-presentación-1
Módulo de texto 2: Video-Walkthrough-2
Módulo de texto 3: Video-Walktrough
Módulo de texto 4: Video-Walkthrough-4
Módulo de texto 5: Video-Walkthrough-5
Módulo de texto 6: Video-Walkthrough-6
Módulo de texto 7: Video-Walkthrough-7
Módulo de texto 8: Video-Walkthrough-8
Clase CSS: Video-No-Ferst
Agregue el módulo de código # 1 a la columna 1 Después de haber completado la segunda fila, es hora de comenzar a agregar el código. Para que funcione la función de clic, utilizaremos algunos códigos CSS y JQuey. Colocaremos el código en dos módulos de código separados. Comience agregando el primer módulo de código en la columna 1.
Ingrese el código CSS de la página Agregue las siguientes líneas de código CSS:
.Video-no-Forst {
Pantalla: ninguno;
}
.video-ítem-acursor {
Cursor: puntero;
}
@Media All y (Max-Width: 980px) {
.
Pantalla: cuadrícula;
Columnas de plantilla de cuadrícula: 50% 50%;
Grid-column-gap: 2VW;
}
}
.video-walkthrough-activo {
Color de fondo: #fff;
Margen -derecha: -0.5VW;
Margen -izquierda: -0.5VW;
Shadow de caja: 0 10px 70px 0 RGBA (103,151,255, .22), 0 15px 105px 0 RGBA (103,151,255, .22)!
}
.video-walkthrough-activo .et-pb-icon {
Color: #B0C8FF! IMPORTANTE;
}
Agregue el módulo de código # 2 en la columna 3 Continuar agregando otro módulo de código a la tercera columna. Insertar Haga clic en el código jQuery Ingrese las siguientes líneas de código JQuey:
JQuery (function ($) {
$ (‘[id*= “video-walkthrough-weitem”). Click (function () {
lima selector1 = $ (this) .attr (‘id’). reemplazar (‘-Item’, ”);
Var $ video = $ (‘#’ + selector1);
$ video.show (). Siblings (). Hide ();
$ video.AddClass (‘Play-Video’);
$ (“. Play-Video .et_pb_section_video_bg video”). Trigger (‘Play’);
$ video.removeclass (‘Play-Video’);
$ (‘[id*= “video-walkthrough-weitem”]).
$ (esto) .AddClass (‘Video-Walkthrough-ACTual’);
});
});
Después de haber recorrido este paso, ¡puede guardar su página y salir de Visual Builder!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, te mostré cómo recrear la presentación en video de los temas elegantes con Div. ¡Te ofrecemos descarga gratuita JSON! Siéntase libre de usar este diseño para cualquier tipo de sitio web que cree. Es una excelente manera de presentar videos y atraer la atención de los visitantes. Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación! Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.
