Cómo mostrar progresivamente los pasos de un proceso con los efectos de desplazamiento de Divi
Publicado: 2020-03-01Las empresas a menudo educan a sus visitantes sobre sus servicios ofreciendo una ilustración útil de los pasos de su proceso. Por ejemplo, una agencia de diseño web puede mostrar su proceso de desarrollo web, o una panadería puede presentar sus pasos para crear el cupcake perfecto.
Con Divi, podemos llevar los "pasos de un proceso" a un nivel completamente diferente utilizando los efectos de desplazamiento incorporados. En este tutorial, le mostraremos una forma sencilla de mostrar progresivamente los pasos de un proceso a medida que el usuario se desplaza hacia abajo en la página. Esto le dará al diseño un buen impulso interactivo que enfatiza creativamente el mensaje deseado.
Vistazo
Descarga el diseño GRATIS
Para poner sus manos sobre los diseños de este tutorial, 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.
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.
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!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo JSON al Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Elija la opción "Construir desde cero".
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Cómo mostrar progresivamente los pasos de un proceso con los efectos de desplazamiento de Divi
Para crear nuestro diseño para mostrar los pasos de un proceso en el desplazamiento, debemos comenzar agregando una nueva fila.
Crear la fila de cuatro columnas
Para comenzar, agregue una fila de cuatro columnas a la sección.
Antes de comenzar a agregar módulos / contenido a las columnas, abra la configuración de la fila y actualice lo siguiente:
- Ancho de la canaleta: 2
- Ancho máximo: 80%
Bastante simple hasta ahora. Ahora comencemos a agregar algo de contenido.
Agregar contenido (pasos) a cada columna
Dado que este diseño presenta un efecto de desplazamiento que muestra los pasos de un proceso, cada una de nuestras columnas contendrá uno de los pasos. La columna 1 contendrá contenido para ilustrar el paso 1. La columna 2 contendrá el contenido del paso 2. Y así sucesivamente.
Agregar módulo de texto a la columna 1
Agregue un nuevo módulo de texto a la columna 1.
Contenido y diseño del módulo de texto
Luego actualice el contenido del texto de la siguiente manera:
Abra la pestaña de diseño y actualice la siguiente configuración:
- Fuente de texto: Lato
- Peso de la fuente del texto: negrita
- Color del texto del texto: # fc6d71
- Fuente del título 2: Oswald
- Peso de fuente del encabezado 2: Ligero
- Tamaño del texto del encabezado 2: 32px
- Encabezado 2 espaciado de letras: 1px
- Altura de la línea del rumbo 2: 1.3em
- Margen: 0px inferior
- Relleno: 10% superior, 10% inferior
- Ancho del borde: 1 px
- Color del borde: rgba (166,166,166,0.16)
Agregar módulo de imagen a la columna 1
Una vez que el módulo de texto esté en su lugar, agregue un módulo de imagen debajo del módulo de texto en la columna 1.
Luego actualice el margen de la imagen de la siguiente manera:
Copiar y pegar el contenido de la columna 1
Para acelerar el proceso de diseño, podemos usar la selección múltiple para seleccionar los dos módulos en la columna 1 y luego pegarlos en cada una de las cuatro columnas restantes.
Actualizar contenido para módulos duplicados
Una vez que los módulos duplicados estén en su lugar, retroceda y actualice el contenido del texto y las imágenes para reflejar cada uno de los cuatro pasos del proceso.
Una vez hecho esto, su diseño debería verse así.
Agregar efectos de desplazamiento a cada columna
Ahora estamos listos para agregar los efectos de desplazamiento para mostrar cada paso del proceso a medida que el usuario se desplaza hacia abajo en la página. En lugar de agregar efectos de desplazamiento a cada uno de los módulos, agregaremos el efecto de desplazamiento a cada columna para que el efecto se aplique a todos los módulos del contenido.
Para crear el efecto de desplazamiento parpadeante, usaremos el efecto de desplazamiento Fading In y Out para cada columna. La idea es comenzar el efecto comenzando con 0% de opacidad, continuar hasta el 100% de opacidad y luego volver a bajar al 0%.
Efectos de desplazamiento de la columna 1
En la configuración de la fila, abra la configuración de la columna 1 y agregue el siguiente efecto de desplazamiento:
En la pestaña de opciones Fading In and Out:
- Habilitar Fading In y Out: SÍ
- Opacidad inicial: 0% (al 20% de la ventana gráfica)
- Opacidad media: 100% (al 25% -45% de la ventana gráfica)
- Opacidad final: 0% (al 50% de la ventana gráfica)
Efectos de desplazamiento de la columna 2
Abra la configuración de la columna 2 y agregue el siguiente efecto de desplazamiento:
En la pestaña de opciones Fading In and Out:
- Habilitar Fading In y Out: SÍ
- Opacidad inicial: 0% (al 35% de la ventana gráfica)
- Opacidad media: 100% (al 40% -60% de la ventana gráfica)
- Opacidad final: 0% (al 65% de la ventana gráfica)
Efectos de desplazamiento de la columna 3
Efectos de desplazamiento de la columna 4
Agregar un encabezado
Como toque final, podemos agregar un encabezado a nuestro diseño. Para hacer esto, agregue una nueva fila de una columna debajo de la fila actual.
Luego agregue un módulo de texto a la fila con el siguiente contenido:
En la pestaña de diseño, actualice lo siguiente:
- Alineación de texto: Lato
- Peso de fuente del encabezado 2: Ligero
- Estilo de fuente del título 2: TT
- Color del texto del encabezado 2: # fc6d71
- Tamaño del texto del encabezado 2: 70 px (escritorio), 40 px (tableta), 24 px (teléfono)
- Espacio entre letras del encabezado 2: 0.5em
Resultado final
Para ver el resultado en una página en vivo, deberá agregar un espacio adicional arriba y debajo de la sección para ver el efecto de desplazamiento de principio a fin. Una forma fácil de hacer esto es agregar un margen superior e inferior a la sección.
Aquí está el resultado.
Pensamientos finales
Ilustrar los pasos de un proceso no tiene por qué limitarse a una imagen o gráfico estático. Con el efecto de desplazamiento de Divi, puede dar vida a la ilustración mostrando progresivamente cada paso a la vista a medida que el usuario se desplaza hacia abajo en la página. Y, dado que el efecto de desplazamiento se agrega a cada columna, puede cambiar fácilmente los módulos / contenido dentro de cada columna sin interrumpir la funcionalidad. Con suerte, esta será una técnica útil para agregar a su caja de herramientas de diseño.
Espero tener noticias tuyas en los comentarios.
¡Salud!