Cómo crear una revelación de Blurb de 3 pasos al pasar el mouse con Divi

Muchos sitios web de empresas comparten una vista previa de su enfoque en algún momento. Al crear una sección de enfoque, puede manejarla de la manera tradicional o puede intentar agregarle más interacción. Si está buscando una manera de hacer realidad la segunda opción, le encantará esta publicación.

En este tutorial, le mostraremos cómo crear una revelación publicitaria de 3 pasos usando Divi y sus nuevas opciones de tamaño. Comenzaremos mostrando el título, continuaremos mostrando tres flechas que conducen a los pasos y completaremos el efecto revelando los anuncios publicitarios animados. ¡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 el diseño de revelación de Blurb de 3 pasos GRATIS

Para poner sus manos en el diseño de revelación de publicidad de 3 pasos, 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!

¡Empecemos a Recrear!

Suscríbete a nuestro canal de Youtube

Agregar nueva sección

Fondo degradado predeterminado

Lo primero que deberá hacer es agregar una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y agréguele el siguiente fondo degradado:

  • Color 1: #ffa3ad
  • Color 2: #ffcea3
  • Dirección del gradiente: 122 grados

Fondo degradado flotante

Modifique el fondo degradado al pasar el mouse:

  • Color 1: #000000
  • Color 2: #ffffff
  • Tipo de gradiente: Radial
  • Dirección radial: Superior
  • Posición inicial: 36%
  • Posición final: 26%

Espaciado

Pase a la pestaña de diseño y agregue un poco de relleno superior e inferior personalizado a continuación.

  • Acolchado superior: 1vw
  • Acolchado inferior: 1vw

Desbordamiento

Más adelante en esta publicación, jugaremos con la altura de la sección. Para asegurarnos de que nada supere el contenedor de la sección, ocultaremos los desbordamientos en la configuración de visibilidad.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

Añadir Fila #1

Estructura de la columna

Una vez que haya completado la configuración de la sección, puede continuar agregando la primera fila a la sección usando la siguiente estructura de columnas:

Agregar módulo de texto a la fila

Agregar contenido H2

Agregue un nuevo módulo de texto a la columna de la fila e ingrese algún contenido H2 de su elección.

Configuración de texto H2

Pase a la pestaña de diseño y cambie la configuración de texto H2 en consecuencia:

  • Título 2 Fuente: Montserrat
  • Encabezado 2 Peso de fuente: semi negrita
  • Encabezado 2 Alineación de texto: Centro
  • Título 2 Color del texto: #ffffff
  • Título 2 Tamaño del texto: 2vw (Escritorio), 5vw (Tableta), 6vw (Teléfono)
  • Encabezado 2 Espaciado entre letras: -2px

Añadir Fila #2

Estructura de la columna

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

Espaciado

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un relleno superior e inferior personalizado en diferentes tamaños de pantalla.

  • Relleno superior: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
  • Acolchado inferior: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)

Mostrar

Para asegurarnos de que todas las columnas aparezcan una al lado de la otra en tamaños de pantalla más pequeños, agregaremos una sola línea de código CSS al elemento principal de la fila.

01
display: flex;

Agregue el módulo de texto de flecha a la columna 1

Añadir símbolo

Usaremos esta fila para agregar las flechas animadas. Agregue un nuevo módulo de texto a la primera columna de la fila y agregue el símbolo ‘↓’ al cuadro de contenido.

Configuración de texto

Pase a la pestaña de diseño y cambie la configuración del texto.

  • Alineación de texto: Derecha
  • Color del texto: #ffa3ad
  • Tamaño de texto: 4vw (escritorio), 6vw (tableta), 8vw (teléfono)

Espaciado

Agregue algunos valores de margen personalizados a la configuración de espaciado a continuación.

  • Margen superior: -3vw
  • Margen inferior: 8vw

Transformar Rotar

Gire el módulo en la configuración de transformación.

  • Izquierda: 45 grados

Animación

Y agregue una animación personalizada usando la siguiente configuración:

  • Estilo de animación: Diapositiva
  • Dirección de animación: Centro
  • Retardo de animación: 1000ms

Agregue el módulo de texto de flecha a la columna 2

Añadir símbolo

Continúe agregando una nueva fila a la segunda columna y agregue el símbolo ‘↓’ al cuadro de contenido.

Configuración de texto

Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:

  • Alineación de texto: Centro
  • Color del texto: #ffa3ad
  • Tamaño de texto: 4vw (escritorio), 6vw (tableta), 8vw (teléfono)

Espaciado

Agregue un margen superior personalizado a continuación.

  • Margen superior: 1vw

Animación

Y aplique la siguiente configuración de animación:

  • Estilo de animación: Diapositiva
  • Dirección de animación: Centro

Agregue el módulo de texto de flecha a la columna 3

Añadir símbolo

En la última flecha Módulo de texto en la columna 3. Agregue la flecha ‘↓’ al cuadro de contenido.

Configuración de texto

Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:

  • Alineación de texto: Izquierda
  • Color del texto: #ffa3ad
  • Tamaño de texto: 4vw (escritorio), 6vw (tableta), 8vw (teléfono)

Espaciado

Agregue un poco de margen superior negativo a continuación.

  • Margen superior: -3vw

Transformar Rotar

Gire el módulo en la configuración de transformación.

  • Izquierda: 315 grados

Animación

Y complete la configuración del módulo agregando la siguiente animación:

  • Estilo de animación: Diapositiva
  • Dirección de animación: Centro
  • Retardo de animación: 1000ms

Añadir Fila #3

Estructura de la columna

Una vez que haya completado la segunda fila, puede continuar agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique los valores de ancho y ancho máximo en la configuración de tamaño.

  • Ancho: 100%
  • Ancho máximo: 100%

Espaciado

A continuación, agregue algunos valores de relleno personalizados en diferentes tamaños de pantalla.

  • Acolchado superior: 2vw (escritorio), 8vw (tableta), 6vw (teléfono)
  • Acolchado inferior: 2vw (escritorio), 8vw (tableta), 6vw (teléfono)
  • Relleno izquierdo: 10vw (escritorio), 0vw (tableta y teléfono)
  • Relleno derecho: 10vw (escritorio), 0vw (tableta y teléfono)

Mostrar

Agregue una sola línea de código CSS al elemento principal de la fila para asegurarse de que todas las columnas aparezcan una al lado de la otra en tamaños de pantalla más pequeños.

01
display: flex;

Desbordamiento

En la última parte de este tutorial, vamos a cambiar la altura de la fila. Para prepararnos para eso, debemos asegurarnos de que nada exceda el contenedor de filas al ocultar los desbordamientos en la configuración de visibilidad.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

Agregue el módulo de texto numérico a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un nuevo módulo de texto a la primera columna e ingrese un número.

Fondo degradado

Agregue un fondo degradado al módulo usando la siguiente configuración:

  • Color 1: #ffa3ad
  • Color 2: #ffcea3
  • Dirección del gradiente: 122 grados

Configuración de texto

Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:

  • Fuente del texto: Montserrat
  • Peso de fuente de texto: ultra negrita
  • Alineación de texto: Centro
  • Color del texto: #ffffff
  • Tamaño del texto: 2vw (escritorio), 4vw (tableta), 8vw (teléfono)
  • Altura de línea de texto: 1em

Espaciado

Agregue también algo de relleno superior e inferior en diferentes tamaños de pantalla.

  • Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)

Borde

Y complete la configuración del módulo agregando ’20px’ a cada una de las esquinas en la configuración del borde.

Clonar módulo de texto de número dos veces y colocar duplicados en las columnas restantes

Continúe clonando el módulo de texto en la columna 1 dos veces y coloque los duplicados en las dos columnas restantes de la fila.

Cambiar números

Asegúrate de cambiar el número en cada uno de los duplicados.

Agregue el módulo Blurb a la columna 1

Agregar contenido

El segundo módulo que necesitamos en la primera columna es un módulo de Blurb. Introduzca algún contenido de su elección.

Seleccionar icono

Continúe seleccionando un icono.

Color de fondo

Y cambie el color de fondo a blanco.

  • Color de fondo: #ffffff

Configuración de iconos

Pase a la pestaña de diseño y cambie la configuración del icono en consecuencia:

  • Color del icono: #ffcea3
  • Ubicación del icono: superior
  • Usar tamaño de fuente de icono: Sí
  • Tamaño de fuente del icono: 4vw (escritorio), 5vw (tableta), 6vw (teléfono)

Configuración del texto del título

Modifique también la configuración del texto del título.

  • Fuente del título: Montserrat
  • Peso de la fuente del título: Negrita
  • Alineación del texto del título: Centro
  • Color del texto del título: #000000
  • Tamaño del texto del título: 1vw (escritorio), 2vw (tableta), 4vw (teléfono)

Configuración del texto del cuerpo

Junto con la configuración del texto del cuerpo.

  • Alineación del cuerpo del texto: Centro
  • Tamaño del cuerpo del texto: 0.6vw (escritorio), 1.3vw (tableta), 2vw (teléfono)
  • Altura de la línea del cuerpo: 2,5 em

Espaciado

También le estamos dando a nuestro módulo la forma deseada al agregar los siguientes valores de relleno personalizados en diferentes tamaños de pantalla:

  • Relleno superior: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
  • Acolchado inferior: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
  • Acolchado izquierdo: 1vw
  • Acolchado derecho: 1vw

Borde

Agregue ’20px’ a cada una de las esquinas en la configuración del borde a continuación.

Sombra de la caja

Y cree un poco de profundidad agregando una sutil sombra de caja.

  • Color de sombra: rgba(0,0,0,0.07)

Animación

Por último, pero no menos importante, agregue una animación al módulo.

  • Estilo de animación: Diapositiva
  • Dirección de animación: Centro
  • Retardo de animación: 1000ms

Clonar módulo Blurb dos veces y colocar duplicados en las columnas restantes

Una vez que haya completado el Módulo Blurb en la columna 1, puede clonarlo tres veces y colocar los duplicados en las dos columnas restantes de la fila.

Cambiar el contenido de ambos duplicados

Asegúrate de cambiar el contenido de cada uno de los duplicados.

Modificar la configuración de tamaño de la fila n.º 3

Altura predeterminada

Ahora, para que el efecto de desplazamiento funcione, vamos a abrir la configuración de la última fila e ir a la configuración de tamaño. Una vez allí, modificaremos la altura en diferentes tamaños de pantalla.

  • Altura: 6vw (escritorio), 18vw (tableta), 24vw (teléfono)

Altura de desplazamiento

Regresaremos la altura a la normalidad al pasar el mouse.

  • Altura: automático

Modificar la configuración de tamaño de la sección

Altura predeterminada

Abra la configuración de la sección a continuación y cambie la altura en consecuencia:

  • Altura: 7vw (Escritorio), 15vw (Tableta), 20vw (Teléfono)

Altura de desplazamiento

¡Recupera la altura al pasar el mouse y listo!

  • Altura: automático

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 crear una revelación publicitaria de 3 pasos utilizando las nuevas opciones de tamaño de Divi. El resultado del ejemplo es altamente receptivo y le permite agregar interacción adicional a su página. Esperamos que este tutorial también lo inspire a crear sus propios diseños alternativos de 3 pasos. Si tiene alguna pregunta o sugerencia, ¡asegúrese de 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 de Divi, 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 los beneficios de este contenido gratuito.