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


Muchos sitios web de la empresa 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 que la segunda opción suceda, le encantará esta publicación.

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

propaganda revelar

Móvil

propaganda revelar

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 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.

¡Comencemos a recrearnos!

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

Suscríbase 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 agregue el siguiente fondo degradado:

  • Color 1: # ffa3ad
  • Color 2: # ffcea3
  • Dirección de degradado: 122 grados

propaganda revelar

Desplazar fondo degradado

Modifique el fondo del degradado al pasar el mouse:

  • Color 1: # 000000
  • Color 2: #ffffff
  • Tipo de degradado: radial
  • Dirección radial: superior
  • Posición de inicio: 36%
  • Posición final: 26%

propaganda revelar

Espaciado

Pase a la pestaña de diseño y agregue algunos rellenos superiores e inferiores personalizados a continuación.

  • Relleno superior: 1vw
  • Relleno inferior: 1vw

propaganda revelar

Desbordamiento

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

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

propaganda revelar

Agregar fila # 1

Estructura de columna

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

propaganda revelar

Agregar módulo de texto a la fila

Añadir contenido H2

Agregue un nuevo módulo de texto a la columna de la fila e ingrese el contenido H2 que desee.

propaganda revelar

Configuraciones de texto H2

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

  • Título 2 Fuente: Montserrat
  • Título 2 Peso de fuente: Semi negrita
  • Título 2 Alineación de texto: centro
  • Título 2 Color del texto: #ffffff
  • Encabezado 2 Tamaño del texto: 2vw (escritorio), 5vw (tableta), 6vw (teléfono)
  • Encabezado 2 letras espaciadas: -2px

propaganda revelar

Agregar fila # 2

Estructura de columna

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

propaganda revelar

Espaciado

Sin agregar ningún módulo todavía, abra la configuración de fila y agregue algunos rellenos superiores e inferiores personalizados en diferentes tamaños de pantalla.

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

propaganda revelar

Monitor

Para asegurarnos de que todas las columnas aparecen 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.

display: flex;

propaganda revelar

Agregar módulo de texto de flecha a la columna 1

Agregar símbolo

Utilizaremos 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 "↓" en el cuadro de contenido.

propaganda revelar

Configuraciones de texto

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

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

propaganda revelar

Espaciado

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

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

propaganda revelar

Transformar Rotar

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

  • Izquierda: 45 grados

propaganda revelar

Animación

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

  • Estilo de animación: diapositiva
  • Dirección de animación: centro
  • Retraso de animación: 1000 ms

propaganda revelar

Agregar módulo de texto de flecha a la columna 2

Agregar símbolo

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

propaganda revelar

Configuraciones de texto

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

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

propaganda revelar

Espaciado

Agregue un margen superior personalizado a continuación.

  • Margen superior: 1vw

propaganda revelar

Animación

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

  • Estilo de animación: diapositiva
  • Dirección de animación: centro

propaganda revelar

Agregar módulo de texto de flecha a la columna 3

Agregar símbolo

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

propaganda revelar

Configuraciones de texto

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

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

propaganda revelar

Espaciado

Agregue un margen superior negativo a continuación.

  • Margen superior: -3vw

propaganda revelar

Transformar Rotar

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

  • Izquierda: 315 grados

propaganda revelar

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
  • Retraso de animación: 1000 ms

propaganda revelar

Agregar fila # 3

Estructura de columna

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

propaganda revelar

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áx .: 100%

propaganda revelar

Espaciado

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

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

propaganda revelar

Monitor

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

display: flex;

propaganda revelar

Desbordamiento

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

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

propaganda revelar

Agregar número de módulo de texto 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.

propaganda revelar

Fondo degradado

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

  • Color 1: # ffa3ad
  • Color 2: # ffcea3
  • Dirección de degradado: 122 grados

propaganda revelar

Configuraciones de texto

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

  • Fuente de 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 la línea de texto: 1em

propaganda revelar

Espaciado

Agregue también un 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)

propaganda revelar

Frontera

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

propaganda revelar

Número de clon Módulo de texto dos veces y colocar duplicados en 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.

propaganda revelar

Cambiar los números

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

propaganda revelar

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

Agregar contenido

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

propaganda revelar

Seleccionar icono

Continúe seleccionando un icono.

propaganda revelar

Color de fondo

Y cambie el color de fondo a blanco.

  • Color de fondo: #ffffff

propaganda revelar

Configuraciones de iconos

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

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

propaganda revelar

Configuración del texto del título

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

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

propaganda revelar

Configuración de texto del cuerpo

Junto con la configuración del texto del cuerpo.

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

propaganda revelar

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)
  • Relleno izquierdo: 1vw
  • Relleno derecho: 1vw

propaganda revelar

Frontera

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

propaganda revelar

Sombra de la caja

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

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

propaganda revelar

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
  • Retraso de animación: 1000 ms

propaganda revelar

Clone Blurb Module dos veces y coloque 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.

propaganda revelar

Cambiar contenido de ambos duplicados

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

propaganda revelar

Modificar la configuración de tamaño de fila # 3

Altura predeterminada

Ahora, para que funcione el efecto de desplazamiento, 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)

propaganda revelar

Altura de desplazamiento

Volveremos a la altura normal en vuelo estacionario.

  • Altura: auto

propaganda revelar

Modificar la configuración de tamaño de 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)

propaganda revelar

Altura de desplazamiento

¡Vuelve a subir la altura al pasar el ratón y listo!

  • Altura: auto

propaganda revelar

Avance

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

Escritorio

propaganda revelar

Móvil

propaganda revelar

Pensamientos finales

En esta publicación, le mostramos cómo crear una revelación de publicidad 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 lo inspire a crear sus propios diseños alternativos de 3 pasos también. 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 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.