Las 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 la magdalena perfecta.
Con Divi , podemos llevar los «pasos a un proceso» a un nivel completamente diferente usando 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 enfatizará creativamente el mensaje deseado.
Descarga el diseño GRATIS
Para poner sus manos en 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 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!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo JSON a Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás 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 del canalón: 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 tendrá contenido para ilustrar el paso 1. La columna 2 tendrá contenido para el 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 del texto: Lato
- Peso de fuente de texto: Negrita
- Texto Color del texto: #fc6d71
- Tipo de letra del título 2: Oswald
- Encabezado 2 Peso de la fuente: Light
- Encabezado 2 Tamaño del texto: 32px
- Encabezado 2 Espaciado entre letras: 1px
- Encabezado 2 Altura de línea: 1,3 em
- Margen: 0px inferior
- Relleno: 10% arriba, 10% abajo
- Ancho del borde: 1px
- 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:
Copie y pegue 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, regrese 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í.
Adición de 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, vamos a utilizar el efecto de desplazamiento Fading In and Out para cada columna. La idea es comenzar el efecto comenzando con 0% de opacidad, continuar con 100% de opacidad y luego volver a bajar a 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 fundido de entrada y salida: SÍ
- Opacidad inicial: 0 % (al 20 % de ventana gráfica)
- Opacidad media: 100 % (al 25 %-45 % de la ventana gráfica)
- Opacidad final: 0 % (al 50 % de 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 fundido de entrada y salida: SÍ
- Opacidad inicial: 0 % (al 35 % de ventana gráfica)
- Opacidad media: 100 % (al 40 %-60 % de la ventana gráfica)
- Opacidad final: 0% (a 65% de ventana gráfica)
Efectos de desplazamiento de la columna 3
Efectos de desplazamiento de la columna 4
Añadir 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
- Encabezado 2 Peso de la fuente: Light
- Título 2 Estilo de fuente: TT
- Título 2 Color del texto: #fc6d71
- Título 2 Tamaño del texto: 70 px (escritorio), 40 px (tableta), 24 px (teléfono)
- Encabezado 2 Espaciado entre letras: 0,5 em
Resultado final
Para ver el resultado en una página activa, deberá agregar un espacio adicional arriba y abajo de la sección para ver el efecto de desplazamiento de principio a fin. Una manera 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áticos. Con el efecto de desplazamiento de Divi, puedes darle vida a la ilustración mostrando progresivamente cada paso mientras 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 escuchar de usted en los comentarios.
¡Salud!