Cómo crear un anuncio publicitario 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ás buscando una manera de hacer que la segunda opción suceda, te va a encantar esta publicación.

En este tutorial, le mostraremos cómo crear un anuncio publicitario 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á 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 de revelación de Blurb en 3 pasos

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

¡Empecemos a recrear!

Suscríbete a nuestro canal de Youtube

Agregar nueva sección

Fondo degradado predeterminado

Lo primero que debe 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 del gradiente: 122 grados

Fondo degradado flotante

Modifique el fondo degradado al pasar el mouse:

• Color 1: # 000000
• Color 2: #ffffff
• Tipo de degradado: 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 exceda el contenedor de la sección, vamos a ocultar los desbordamientos en la configuración de visibilidad.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Agregar fila n. ° 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

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

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

Agregar fila n. ° 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.

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

Monitor

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.

display: flex;

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

Agregar 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

Vaya 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 del texto: 4vw (escritorio), 6vw (tableta), 8vw (teléfono)

Espaciado

A continuación, agregue algunos valores de margen personalizados a la configuración de espaciado.

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

Transformar Girar

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

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 '↓' al cuadro de contenido.

Configuración de texto

Vaya 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 del 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

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.

Configuración de texto

Vaya 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 del texto: 4vw (escritorio), 6vw (tableta), 8vw (teléfono)

Espaciado

A continuación, agregue un margen superior negativo.

• Margen superior: -3vw

Transformar Girar

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

Agregar fila n. ° 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)
• Acolchado izquierdo: 10vw (escritorio), 0vw (tableta y teléfono)
• Relleno derecho: 10vw (escritorio), 0vw (tableta y teléfono)

Monitor

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.

display: flex;

Desbordamiento

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

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Agregar 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

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

• Fuente de texto: Montserrat
• Peso de la fuente del texto: Ultra Bold
• 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

Espaciado

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

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

Frontera

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

Clonar el módulo de texto numérico 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.

Agregar módulo Blurb 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.

Seleccionar icono

Continúe seleccionando un icono.

Color de fondo

Y cambia el color de fondo a blanco.

• Color de fondo: #ffffff

Configuración de iconos

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

• Color del icono: # ffcea3
• Ubicación del icono: Arriba
• Usar tamaño de fuente del 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 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

Espaciado

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

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

Frontera

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

Sombra de la caja

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

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

Clone el módulo de Blurb dos veces y coloque los 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 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)

Altura de desplazamiento

Devolveremos la altura a la normalidad al pasar el mouse.

• Altura: auto

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

¡Vuelve a subir la altura al pasar el mouse y listo!

• Altura: auto

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 un anuncio publicitario de 3 pasos utilizando las nuevas opciones de tamaño de Divi. El resultado del ejemplo es muy 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 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.