Las empresas a menudo educan a sus visitantes sobre sus servicios ofreciendo una ilustración útil de los pasos para 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 pastelito perfecto.

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 manera simple de mostrar progresivamente los pasos a 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 de manera creativa el mensaje deseado.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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.

Vistazo

pasos para un proceso de efectos de desplazamiento

Lo que necesitas para empezar

pestañas de esquina expandibles

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active el Divi Theme .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
  3. 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 a 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.

pasos para un proceso de efectos de desplazamiento

Antes de comenzar a agregar módulos / contenido a las columnas, abra la configuración de la fila y actualice lo siguiente:

  • Ancho de canal: 2
  • Ancho Máx .: 80%

pasos para un proceso de efectos de desplazamiento

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

pasos para un proceso de efectos de desplazamiento

Contenido y diseño del módulo de texto

Luego actualice el contenido del texto de la siguiente manera:

pasos para un proceso de efectos de desplazamiento

Abra la pestaña de diseño y actualice la siguiente configuración:

  • Fuente de texto: Lato
  • Peso de fuente de texto: negrita
  • Color del texto del texto: # fc6d71
  • Fuente del encabezado 2: Oswald
  • Título 2 Peso de fuente: Ligero
  • Encabezado 2 Tamaño del texto: 32px
  • Encabezado 2 letras espaciadas: 1px
  • Título 2 Altura de línea: 1.3em
  • Margen: 0px inferior
  • Acolchado: 10% superior, 10% inferior
  • Ancho del borde: 1px
  • Color del borde: rgba (166,166,166,0.16)

pasos para un proceso de efectos de desplazamiento

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.

pasos para un proceso de efectos de desplazamiento

Luego actualice el margen de la imagen de la siguiente manera:

pasos para un proceso de efectos de desplazamiento

Copiar y pegar 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.

pasos para un proceso de efectos de desplazamiento

Actualizar contenido para módulos duplicados

Una vez que los módulos duplicados estén en su lugar, regrese y actualice el contenido de texto y las imágenes para reflejar cada uno de los cuatro pasos del proceso.

pasos para un proceso de efectos de desplazamiento

Una vez hecho esto, su diseño debería verse así.

pasos para un proceso de efectos de desplazamiento

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 en el contenido.

Para crear el efecto de desplazamiento intermitente, vamos a utilizar el efecto de desplazamiento Fading In y 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%.

Columna 1 Efectos de desplazamiento

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 el desvanecimiento de entrada y salida: SÍ
  • Opacidad de inicio: 0% (al 20% de la ventana gráfica)
  • Opacidad media: 100% (con una ventana gráfica del 25% -45%)
  • Opacidad final: 0% (al 50% de la ventana gráfica)

pasos para un proceso de efectos de desplazamiento

Columna 2 Efectos de desplazamiento

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 el desvanecimiento de entrada y salida: SÍ
  • Opacidad de inicio: 0% (con una ventana gráfica del 35%)
  • Opacidad media: 100% (con una ventana gráfica del 40% -60%)
  • Opacidad final: 0% (a 65% de la ventana gráfica)

pasos para un proceso de efectos de desplazamiento

Columna 3 Efectos de desplazamiento

pasos para un proceso de efectos de desplazamiento

Columna 4 Efectos de desplazamiento

pasos para un proceso de efectos de desplazamiento

pasos para un proceso de efectos de desplazamiento

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.

pasos para un proceso de efectos de desplazamiento

Luego agregue un módulo de texto a la fila con el siguiente contenido:

pasos para un proceso de efectos de desplazamiento

En la pestaña de diseño, actualice lo siguiente:

  • Alineación de texto: Lato
  • Título 2 Peso de fuente: Ligero
  • Título 2 Estilo de fuente: TT
  • Título 2 Color del texto: # fc6d71
  • Encabezado 2 Tamaño del texto: 70 px (escritorio), 40 px (tableta), 24 px (teléfono)
  • Encabezado 2 letras espaciadas: 0.5em

pasos para un proceso de efectos de desplazamiento

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!