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


Compartir vistas previas de video en su sitio web puede aumentar la interactividad y ayudar a los visitantes a comprender sus productos y / o servicios mejor y más rápido. Ahora, en el sitio web de Elegant Themes, hemos adoptado este enfoque por nosotros mismos y hemos creado un diseño de tutorial 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ás descargar el archivo JSON gratis!

Hagámoslo.

Avance

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

Escritorio

haga clic en video tutorial

Móvil

haga clic en video tutorial

Descargue el diseño de tutorial de video Click GRATIS

Para poner sus manos en el diseño de tutorial de video de clic libre, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=RWYTyspzqxs (/ incrustar)

Suscríbase a nuestro canal de Youtube

¡Comencemos a recrearnos!

Agregar nueva sección regular

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

haga clic en video tutorial

Agregar nueva fila

Estructura de columna

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

haga clic en video tutorial

Dimensionamiento

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

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 2
  • Ancho: 85vw (escritorio), 90% (tableta y teléfono)
  • Ancho Máx .: 100%

haga clic en video tutorial

Configuración de columna 1

Abra la configuración de la columna 1 a continuación.

haga clic en video tutorial

Espaciado

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

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

haga clic en video tutorial

Clase CSS

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

  • Clase CSS: elemento-responsive-grid

haga clic en video tutorial

Agregar módulo de difusión a la columna 1

Añadir título

¡Comencemos a agregar módulos! Para cada elemento en el que se puede hacer clic, vamos a utilizar un módulo de publicidad. 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.

haga clic en video tutorial

Seleccionar icono

Seleccione un icono a continuación.

haga clic en video tutorial

Configuración de icono predeterminada

Pase al 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 de icono: sí
  • Tamaño de fuente del icono: 2vw (escritorio), 4.5vw (tableta), 7vw (teléfono)

haga clic en video tutorial

Configuración del icono de desplazamiento

Modifique el color del icono al pasar el mouse.

  • Color del icono: # b0c8ff

haga clic en video tutorial

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úscula
  • 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)

haga clic en video tutorial

Espaciado predeterminado

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

  • Relleno 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)

haga clic en video tutorial

Espaciado de desplazamiento

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

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

haga clic en video tutorial

Frontera

Agregue algunas esquinas redondeadas también.

haga clic en video tutorial

Sombra de caja predeterminada

Junto con una sutil caja de sombra.

  • Posición vertical de la sombra de la caja: 10px
  • Caja Shadow Blur Fuerza: 70px
  • Color de sombra: rgba (0,0,0,0.11)

haga clic en video tutorial

Hover Box Shadow

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

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

haga clic en video tutorial

ID de CSS y clase

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

  • ID de CSS: video-tutorial-item-1
  • Clase CSS: video-item-cursor

haga clic en video tutorial

Módulo Clon Blurb tres veces

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

haga clic en video tutorial

Cambiar contenido

Cambie el contenido de cada módulo Blurb duplicado.

haga clic en video tutorial

Cambiar todas las ID de CSS del módulo de publicidad duplicada

Junto con las ID de CSS.

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

haga clic en video tutorial

Reutilizar columna 1

Eliminar columna 3

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

haga clic en video tutorial

Clonar columna 1 y colocar en la parte inferior

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

haga clic en video tutorial

haga clic en video tutorial

Cambiar estructura de columna posterior

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

haga clic en video 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.

haga clic en video tutorial

Cambiar todas las ID de CSS del módulo Blurb de columna 3

Junto con las ID de CSS.

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

haga clic en video tutorial

Agregar módulo de texto a la columna 2

Deje el cuadro de contenido vacío

¡Es hora de comenzar a agregar las diferentes vistas previas de video! 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 play. 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, utilizaremos un módulo de texto, pero no dude en utilizar un módulo de video. Asegúrese de que el cuadro de contenido del Módulo de texto permanezca vacío.

haga clic en video tutorial

Video de fondo

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

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

haga clic en video tutorial

Dimensionamiento

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

  • Ancho: 100%

haga clic en video tutorial

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.

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

haga clic en video tutorial

Frontera

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

haga clic en video tutorial

Sombra de la caja

Junto con una sutil caja de sombra.

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

haga clic en video tutorial

ID de CSS

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

  • ID de CSS: video-tutorial-1

haga clic en video tutorial

Clonar el módulo de texto 7 veces

Una vez que haya terminado el Módulo de texto, puede clonarlo siete veces (uno para cada Módulo de difusión).

haga clic en video tutorial

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

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

haga clic en video tutorial

Cambiar todas las ID de CSS del módulo de texto duplicado y agregar clase CSS a todos los módulos de texto duplicado

Cambie las ID de CSS también. Asegúrese de conectar cada módulo de texto al módulo Blurb derecho 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-no-primero

haga clic en video tutorial

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 algunos códigos 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.

haga clic en video tutorial

Insertar código CSS de página

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

haga clic en video tutorial

Agregue el Módulo de Código # 2 a la Columna 3

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

haga clic en video tutorial

Insertar función de clic Código JQuery

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

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

haga clic en video tutorial

Avance

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

Escritorio

haga clic en video tutorial

Móvil

haga clic en video tutorial

Pensamientos finales

En esta publicación, le mostramos cómo recrear el video tutorial de clics de Elegant Themes con Divi. ¡También te proporcionamos la descarga JSON gratis! Siéntase libre de usar 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 regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.