Cómo recrear el tutorial de video de clic de ET con Divi

Compartir vistas previas de videos en su sitio web puede aumentar la interactividad y ayudar a los visitantes a comprender mejor y más rápido sus productos y / o servicios. Ahora, en el sitio web de Elegant Themes, hemos adoptado este enfoque por nosotros mismos y hemos creado un diseño de recorrido de video de clic directo que permite a las personas navegar a través de algunas de nuestras funciones más populares. Hemos recreado este diseño dentro de Divi y hoy, le mostraremos cómo recrearlo desde cero. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue GRATIS el diseño del tutorial de video Click

Para poner sus manos en el diseño de tutorial de video de clic gratuito, 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.

Descarga los archivos

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.

DESCARGAR

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!

Suscríbete a nuestro canal de Youtube

¡Empecemos a recrear!

Agregar nueva sección regular

Comience agregando una nueva sección regular a la página en la que está trabajando.

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y aplique la siguiente configuración de tamaño:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 2
• Ancho: 85vw (escritorio), 90% (tableta y teléfono)
• Ancho máximo: 100%

Configuración de la columna 1

A continuación, abra la configuración de la columna 1.

Espaciado

Vaya a la configuración de espaciado y agregue un poco de relleno superior en el escritorio.

• Acolchado superior: 5vw (escritorio), 0vw (tableta y teléfono)

Clase CSS

Vaya a la pestaña avanzada y agregue una clase CSS. Más adelante en la publicación, usaremos esta clase de CSS para crear un efecto de cuadrícula en tabletas y dispositivos móviles.

• Clase CSS: item-responsive-grid

Agregar módulo Blurb a la columna 1

Añadir título

¡Comencemos a agregar módulos! Para cada elemento en el 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 Blurb a la columna 1 e ingrese un título de su elección.

Seleccionar icono

Seleccione un icono a continuación.

Configuración de iconos predeterminada

Continúe con el diseño y cambie la configuración del icono en consecuencia:

• Color del icono: # e8e9ea
• Colocación del icono: izquierda
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 2vw (escritorio), 4.5vw (tableta), 7vw (teléfono)

Configuración del icono de desplazamiento

Modifica el color del icono al pasar el mouse.

• Color del icono: # b0c8ff

Configuración del texto del título

Pase a la configuración del texto del título y realice algunos cambios allí también.

• Fuente del título: Lato
• Peso de la fuente del título: negrita
• Estilo de fuente del título: mayúsculas
• Tamaño del texto del título: 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)

Espaciado predeterminado

Vamos a dar forma al módulo Blurb utilizando algunos valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado inferior: 0.5vw (escritorio), 1.5vw (tableta y teléfono)
• Acolchado izquierdo: 1.2vw (escritorio y tableta), 5vw (teléfono)
• Relleno derecho: 1.2vw (escritorio y tableta), 5vw (teléfono)

Espaciado de desplazamiento

Cree un efecto de desplazamiento de resaltado modificando los valores del margen de desplazamiento.

• Margen izquierdo: -0.5vw
• Margen derecho: -0.5vw

Frontera

Agrega también algunas esquinas redondeadas.

Sombra de cuadro predeterminada

Junto con una sutil sombra de caja.

• Posición vertical de la sombra del cuadro: 10px
• Fuerza de desenfoque de sombra de caja: 70px
• Color de sombra: rgba (0,0,0,0.11)

Sombra de caja flotante

Cambie el color de la sombra del cuadro al pasar el mouse.

• Color de sombra: rgba (103,151,255,0.22)

ID y clase de CSS

Por último, pero no menos importante, vaya a la pestaña avanzada del Módulo Blurb y agregue una ID y una clase de CSS.

• ID de CSS: video-walkthrough-item-1
• Clase CSS: cursor de elemento de video

Clonar el módulo Blurb tres veces

Una vez que haya completado el primer módulo Blurb, puede clonarlo tres veces.

Cambiar contenido

Cambie el contenido de cada módulo Blurb duplicado.

Cambiar todas las ID CSS del módulo Blurb duplicadas

Junto con los ID de CSS.

• 1) Construya visualmente: video-walkthrough-item-1
• 2) Efectos: video-walkthrough-item-2
• 3) Divisores de forma: video-walkthrough-item-3
• 4) Edición masiva: video-walkthrough-item-4

Reutilizar la columna 1

Eliminar la columna 3

Una vez que haya completado la primera columna, puede abrir la configuración de la fila y eliminar la tercera columna.

Clonar la columna 1 y colocar en la parte inferior

Clone la primera columna (que contiene los módulos de Blurb) y coloque la columna duplicada en la parte inferior.

Cambiar la estructura de la columna posterior

Vuelva a cambiar la estructura de la columna a la que se seleccionó al comienzo de este tutorial.

Cambiar todo el contenido del módulo Blurb de la columna 3

Cambie el título del módulo Blurb de cada duplicado en la columna 3.

Cambiar todos los ID CSS del módulo Blurb de la columna 3

Junto con los ID de CSS.

• 5) Biblioteca de diseño: video-walkthrough-item-5
• 6) Transformaciones: video-walkthrough-item-6
• 7) Estados flotantes: video-walkthrough-item-7
• 8) Buscar y reemplazar: video-walkthrough-item-8

Agregar módulo de texto a la columna 2

Dejar el cuadro de contenido vacío

¡Es hora de comenzar a agregar las diferentes vistas previas de videos! Hay dos formas de abordarlo; usando un módulo de video o un módulo de texto. El módulo de video requiere que los visitantes presionen reproducir. El uso de un módulo de texto con un fondo de video, por otro lado, reproduce el video automáticamente pero sin sonido. Para este tutorial, usaremos un módulo de texto, pero siéntase libre de usar un módulo de video en su lugar. Asegúrese de que el cuadro de contenido del Módulo de texto permanezca vacío.

Fondo de video

Vaya a la configuración de fondo y cargue un video de su elección.

• Pausar video mientras no está a la vista: Sí

Dimensionamiento

Pase a la pestaña de diseño y agregue '100%' al ancho.

• Ancho: 100%

Espaciado

A continuación, vamos a permitir que se muestre el fondo del video agregando algunos valores de relleno superior e inferior personalizados en diferentes tamaños de pantalla. Nota: los valores que agregue deben ajustarse al conjunto de dimensiones de su video.

• Acolchado superior: 15vw (escritorio), 24vw (tableta), 26vw (teléfono)
• Acolchado inferior: 15vw (escritorio), 24vw (tableta), 26vw (teléfono)

Frontera

Continúe agregando '10px' a cada una de las esquinas.

Sombra de la caja

Junto con una sutil sombra de caja.

• Fuerza de desenfoque de sombra de caja: 30px
• Fuerza de propagación de la sombra de caja: -5px
• Color de sombra: rgba (0,0,0,0.11)

ID de CSS

Por último, pero no menos importante, agregue una ID de CSS.

• ID de CSS: video-tutorial-1

Clonar el módulo de texto 7 veces

Una vez que haya terminado el módulo de texto, puede clonarlo siete veces (una para cada módulo de Blurb).

Cambiar todos los fondos de video del módulo de texto duplicado

Sube un video de fondo diferente para cada uno de los duplicados.

Cambie todos los ID de CSS del módulo de texto duplicado y agregue la clase CSS a todos los módulos de texto duplicados

Cambie también las ID de CSS. Asegúrese de conectar cada módulo de texto al módulo Blurb correcto utilizando el mismo número al final de la ID de CSS. También estamos ocultando cada módulo de texto, además del módulo de texto original, usando una clase CSS.

• Módulo de texto 1: video-tutorial-1
• Módulo de texto 2: video-tutorial-2
• Módulo de texto 3: video-tutorial-3
• Módulo de texto 4: video-tutorial-4
• Módulo de texto 5: video-tutorial-5
• Módulo de texto 6: video-tutorial-6
• Módulo de texto 7: video-tutorial-7
• Módulo de texto 8: video-tutorial-8
• Clase CSS: video-not-first

Agregue el módulo de código n. ° 1 a la columna 1

Una vez que haya completado la segunda fila, es hora de comenzar a agregar el código. Para que la función de clic funcione, usaremos algo de código CSS y JQuery. Colocaremos el código en dos módulos de código separados. Comience agregando el primer módulo de código a la columna 1.

Insertar código CSS de página

Agregue las siguientes líneas de código CSS:

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

Agregue el módulo de código n. ° 2 a la columna 3

Continúe agregando otro módulo de código a la tercera columna.

Insertar Código JQuery de función de clic

Ingrese las siguientes líneas de código JQuery:

<script>
jQuery(function($){

$('[id*="video-walkthrough-item"]').click(function() {
	var selector1 = $(this).attr('id').replace('-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-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');

});
});
</script>

Una vez que haya realizado este paso, puede guardar su página y salir de Visual Builder.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo recrear el video tutorial de Elegant Themes con Divi. ¡También le proporcionamos la descarga JSON de forma gratuita! No dude en utilizar este diseño para cualquier tipo de sitio web que cree. Es una excelente manera de mostrar videos y captar la atención de sus 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 aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.