Cómo crear un timeline en Divi con efectos de desplazamiento

Abr 3, 2020 | Tutoriales para Divi

Un diseño de línea de tiempo puede ser útil para muchas aplicaciones diferentes en un sitio web, especialmente si se ve muy bien en dispositivos móviles. Puede usarlo para mostrar una secuencia de hitos en una página acerca de, con los pasos de un proceso y mucho más. ¡Y con los efectos de desplazamiento de Divi, puedes hacer que un diseño de línea de tiempo cobre vida!

En este tutorial, le mostraremos cómo diseñar un diseño de línea de tiempo Divi completo con efectos de desplazamiento. El diseño de la línea de tiempo es versátil, elegante y receptivo. Y, el efecto de desplazamiento presenta un punto de ejecución que lleva al usuario hacia abajo en la línea de tiempo, resaltando cada evento a medida que el usuario se desplaza.

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.

Lo que necesitas para empezar

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».
    Diseño de línea de tiempo Divi con efectos de desplazamiento
  4. Luego busque y seleccione el Paquete de diseño de cervecería en la pestaña de diseños prefabricados. Luego seleccione el diseño de la página Acerca de la cervecería y haga clic en el botón «Usar este diseño».
    Diseño de línea de tiempo Divi con efectos de desplazamiento

Después de eso, estás listo para comenzar a diseñar en Divi.

Crear un diseño de línea de tiempo con efectos de desplazamiento en Divi

Este diseño de diseño de línea de tiempo incluye dos partes principales: la sección de encabezado y la sección de línea de tiempo. Estamos utilizando el diseño prefabricado de Brewery About Page para poder incorporar elementos de diseño de gran apariencia mientras nos concentramos en diseñar el diseño y los efectos de desplazamiento.

Las características clave de este diseño incluyen el posicionamiento creativo de desenfoques como elementos del evento en la línea de tiempo. La línea centrada es en realidad el borde izquierdo de una fila que se coloca en la mitad derecha de la ventana gráfica. Y los efectos de desplazamiento se agregan a múltiples módulos divisores que se han convertido en círculos de colores que se colocan y se mueven con desplazamientos precisos a medida que el usuario se desplaza hacia abajo en la página.

Hagámoslo.

Parte 1: crear la sección de encabezado

Eliminar secciones no deseadas

Primero, asegúrese de haber cargado correctamente el diseño de página de Brewery About a la página usando Divi Builder. Para este diseño, solo usaremos la sección que presenta una línea de tiempo hacia la parte inferior de la página. Elimine todas las secciones arriba y abajo de esa sección para que solo quede.

Deberías tener esta sección debajo a la izquierda.

Diseño de línea de tiempo Divi con efectos de desplazamiento

Agregar nueva sección

Ahora agregue una nueva sección debajo de la sección prefabricada y arrástrela a la parte superior de la página.

Diseño de línea de tiempo Divi con efectos de desplazamiento

Añadir fila

Agregue una fila de una columna a la sección.

Diseño de línea de tiempo Divi con efectos de desplazamiento

Copiar y pegar el módulo de texto de la sección prefabricada

Arrastre (o copie) el módulo de texto en la columna izquierda de la sección prefabricada que tiene el encabezado. Luego coloque (o pegue) el módulo en la nueva columna de arriba.

Diseño de línea de tiempo Divi con efectos de desplazamiento

Antecedentes de la sección

Una vez que el texto esté en su lugar, abra la configuración de la sección superior y agregue un fondo de la siguiente manera:

  • Color de fondo izquierdo del degradado: #ffffff
  • Color de fondo del degradado: rgba (255,255,255,0)
  • Dirección de degradado: 90 grados
  • Posición de inicio: 50%
  • Posición final: 0%
  • Coloque el gradiente sobre la imagen de fondo: SÍ

Diseño de línea de tiempo Divi con efectos de desplazamiento

Diseño de sección

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

Divisor
  • Estilo divisor superior: ver captura de pantalla
  • Color divisor: rgba (238,238,238,0.7)
  • Altura del divisor: 50vh
Tamaño y espaciado
  • Altura: 50vh
  • Acolchado: 20vh

Diseño de línea de tiempo Divi con efectos de desplazamiento

Parte 2: Crear la sección de línea de tiempo

Una vez que la sección del encabezado está en su lugar, podemos comenzar la sección principal de nuestro diseño: la línea de tiempo.

Agregar sección y fila

Para comenzar, agregue una nueva sección regular debajo de la sección de encabezado que acabamos de crear.

Diseño de línea de tiempo Divi con efectos de desplazamiento

Luego agregue una fila de una columna a la nueva sección.

Diseño de línea de tiempo Divi con efectos de desplazamiento

Antecedentes de la sección

Antes de comenzar a agregar módulos, abra la configuración de la nueva sección y actualice el diseño de fondo y el relleno de la siguiente manera:

  • Color de fondo izquierdo del degradado: rgba (255,255,255,0)
  • Color de fondo del degradado: #eeeeee
  • Dirección de degradado: 90 grados
  • Posición de inicio: 50%
  • Posición final: 0%
  • Coloque el gradiente sobre la imagen de fondo: SÍ
  • Relleno: 0px arriba, 0px abajo

Diseño de línea de tiempo Divi con efectos de desplazamiento

Configuración de fila

Una vez que la sección haya terminado, abra la configuración de la fila y actualice lo siguiente:

  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho: 100%
  • Ancho máximo: 50% (escritorio), 90% (teléfono)
  • Alineación de fila: derecha
  • Acolchado: 300px superior

Diseño de línea de tiempo Divi con efectos de desplazamiento

Frontera
  • Ancho del borde izquierdo: 2px
  • Color del borde izquierdo: # 333333

Diseño de línea de tiempo Divi con efectos de desplazamiento

Sombra de la caja
  • Estilo de sombra de caja: ver captura de pantalla
  • Posición horizontal de la sombra de la caja: 0px
  • Box Shadow Spread Strength: 0px
  • Color de sombra: # 333333

Diseño de línea de tiempo Divi con efectos de desplazamiento

La combinación de borde y cuadro de sombra crea una línea centrada en la página que se utilizará para la línea de tiempo.

Edificio Blurb 1

Ahora que nuestra línea está en su lugar, podemos comenzar a agregar nuestras imágenes borrosas.

Copiar y pegar módulo de difusión prefabricado

Para crear la primera propaganda, arrastre la primera propaganda en la sección prefabricada a continuación a la nueva fila.

Diseño de línea de tiempo Divi con efectos de desplazamiento

Actualizar contenido de Blurb

Abra la configuración de la propaganda y pegue el siguiente contenido dentro del cuerpo:

01
02
03
04
Founded
<ul>
<li>Your content goes here. Edit or remove this text inline or in the module Content settings. </li>
</ul>

Diseño de línea de tiempo Divi con efectos de desplazamiento

Diseño de lista de publicidad

Luego actualice el diseño de la lista de la siguiente manera:

  • Fuente de lista desordenada: Open Sans
  • Peso de fuente de lista desordenada: semi negrita
  • Color de texto de lista desordenada: # 888888
  • Tamaño de texto de lista desordenada: 16px
  • Altura de línea de lista desordenada: 1.5em
  • Tipo de estilo de lista desordenada: Ninguno
  • Posición de estilo de lista desordenada: interior
  • Sangría de elemento de lista desordenada: 1px

Diseño de línea de tiempo Divi con efectos de desplazamiento

Diseño de icono de publicidad
  • Color del icono: #ffffff
  • Color del círculo: # 333333
  • Color del borde del círculo: # 333333
  • Colocación de imagen / icono: izquierda
  • Tamaño de fuente del icono: 30 px

Diseño de línea de tiempo Divi con efectos de desplazamiento

El tamaño de fuente del icono combinado con el círculo y el borde debe ser exactamente de 50 px por 50 px. Esto será útil para centrar el ícono sobre la línea hecha por el borde de la fila y la sombra del cuadro.

Margen difuso

Para centrar el icono sobre la línea, debemos mover el icono hacia la izquierda 27 píxeles. Los 27 píxeles representan exactamente la mitad del ancho del icono (25 px) más la mitad de la línea (2 px).

Diseño de línea de tiempo Divi con efectos de desplazamiento

Dimensionamiento de Blurb

Para este diseño, es importante darle a nuestro anuncio una altura establecida con una unidad de longitud de píxel. Esto nos permitirá agregar valores predecibles de desplazamiento del efecto de desplazamiento que también se basan en una unidad de longitud de píxeles. Dado que vamos a mover un círculo hacia abajo del módulo de propagación en incrementos de 300 px, necesitamos un valor de altura establecido para hacerlo.

Diseño de línea de tiempo Divi con efectos de desplazamiento

Sin animación

Antes de que olvidemos, eliminemos la animación predeterminada que se agrega a todos los iconos de publicidad.

Diseño de línea de tiempo Divi con efectos de desplazamiento

Blurb Z Index

Luego establezca el Índice Z en 1. Esto asegurará que los círculos que agreguemos más adelante se ubicarán detrás de los iconos de publicidad.

Diseño de línea de tiempo Divi con efectos de desplazamiento

Crear el divisor de círculo de carrera

El siguiente paso es crear un divisor que tendrá la forma de un círculo, se posicionará absolutamente y luego se moverá a lo largo de la línea desde un ícono de propaganda al siguiente (300 px) en el desplazamiento.

Agregar divisor

Agregue un nuevo módulo divisor en Blurb 1.

Diseño de línea de tiempo Divi con efectos de desplazamiento

Fondo divisor

Luego seleccione NO debajo de Mostrar divisor y dele al Divisor un color de fondo:

  • Color de fondo: # e94558

Diseño de línea de tiempo Divi con efectos de desplazamiento

Hacer divisor circular

Para hacer que el divisor sea circular, establezca el ancho y la altura en el mismo valor (50 px) y establezca el radio del borde / esquinas redondeadas al 50%.

  • Ancho: 50 px
  • Altura: 50 px
  • Esquinas redondeadas: 50%

Diseño de línea de tiempo Divi con efectos de desplazamiento

Posición del divisor

Luego, coloque el divisor detrás del icono de publicidad actualizando lo siguiente:

  • Posición: absoluta
  • Desplazamiento horizontal: -27px

Diseño de línea de tiempo Divi con efectos de desplazamiento

Efectos de desplazamiento del divisor 1

Una vez que el divisor de círculo está en su lugar, podemos agregar los efectos de desplazamiento que crearán el movimiento de «círculo en ejecución».

Debajo de la pestaña Movimiento vertical …

  • Habilitar movimiento vertical: SÍ
  • Compensación de inicio: 0 (con 0% de ventana gráfica)
  • Desfase medio: 0 (al 50% de la vista)
  • Compensación de finalización: 3 (al 75% de la vista)

NOTA: El Desplazamiento final es 3, lo que representa 300 píxeles, por lo que el divisor viajará desde la parte superior de la propaganda hasta la parte inferior de la propagación exactamente 300 píxeles, que es la altura exacta de la propaganda.

En la pestaña Escalar hacia arriba y hacia abajo …

  • Habilitar escalar hacia arriba y hacia abajo: SÍ
  • Escala inicial: 50% (al 50% de la ventana gráfica)
  • Escala media: 50% (con una ventana gráfica del 55% -70%)
  • Compensación de finalización: 90% (al 75% de la ventana gráfica)

Diseño de línea de tiempo Divi con efectos de desplazamiento

Asegúrese de establecer el activador del efecto de movimiento en la parte superior del elemento .

Diseño de línea de tiempo Divi con efectos de desplazamiento

Creación del divisor «Pulse Highlight»

El siguiente divisor que necesitamos crear agregará un efecto de resaltado de pulso al ícono de propagación a medida que el círculo en ejecución lo alcance o cuando el ícono alcance el 50% (el centro) de la ventana gráfica.

Para crear el nuevo divisor de pulso, abra el cuadro de vista de capas y duplique el divisor que acabamos de crear.

Diseño de línea de tiempo Divi con efectos de desplazamiento

Agregar el efecto de desplazamiento «Pulso y resaltado»

Luego abra la configuración del divisor duplicado y actualice los siguientes efectos de desplazamiento:

Debajo de la pestaña Movimiento vertical …

  • Habilitar movimiento vertical: NO

En la pestaña Escalar hacia arriba y hacia abajo …

  • Escala inicial: 100% (al 50% de la ventana gráfica)
  • Escala media: 160% (con 51% -54% de ventana gráfica)
  • Compensación final: 130% (a 55% de la ventana gráfica)

Esto hará que el divisor circular se escale al 160% brevemente antes de establecerse en un tamaño un poco más grande que el icono de propaganda. Esto causará el efecto de pulso y luego el efecto de resaltado.

Diseño de línea de tiempo Divi con efectos de desplazamiento

Etiquetar los primeros tres módulos

Para una mejor organización, etiquete el primer grupo de tres módulos de la siguiente manera:

  • Blurb1
  • Runner1
  • Pulso1

Diseño de línea de tiempo Divi con efectos de desplazamiento

Duplicar los primeros tres módulos

Ahora necesitamos continuar este proceso para crear más elementos de eventos en la línea de tiempo con efectos de desplazamiento. Para hacer esto, copie los primeros tres módulos y péguelos a continuación, asegurándose de que mantengan el orden original (resumen 1, corredor 1, pulso1).

Diseño de línea de tiempo Divi con efectos de desplazamiento

Luego cambie el nombre de los módulos duplicados de la siguiente manera:

  • blurb2
  • corredor2
  • pulso2

Actualizar la posición del divisor Running Circle 2

A continuación, actualice el divisor de círculo en ejecución (corredor 2) con un nuevo desplazamiento vertical que comienza en el segundo módulo de propagación, exactamente 300 píxeles hacia abajo en la página.

  • Desplazamiento vertical: 300 px

Diseño de línea de tiempo Divi con efectos de desplazamiento

Running Circle Divider 2 Efectos de desplazamiento

Luego actualice el efecto de desplazamiento de la siguiente manera:

En la pestaña Escalar hacia arriba y hacia abajo …

  • Escala inicial: 100%

Diseño de línea de tiempo Divi con efectos de desplazamiento

Actualizar la posición del divisor de pulso 2

Después de que se haya actualizado el «corredor 2», abra la configuración para el segundo divisor de pulso (pulso 2) y actualice también el desplazamiento vertical.

  • Desplazamiento vertical: 300 px

Diseño de línea de tiempo Divi con efectos de desplazamiento

Eso se encarga de nuestro segundo grupo. Hagamos uno más.

Duplicar el segundo grupo de tres módulos

Para crear nuestro tercer grupo de módulos, copie el segundo grupo (blurb2, runner2, pulse2) y péguelos a continuación, asegurándose de mantener su mismo orden.

Diseño de línea de tiempo Divi con efectos de desplazamiento

Actualizar Running Circle Divider 3 Position

Actualice el divisor de círculo en ejecución 3 (runner3) con un nuevo desplazamiento vertical que comienza en el siguiente icono de propaganda.

  • Desplazamiento vertical: 600 px

Diseño de línea de tiempo Divi con efectos de desplazamiento

Actualizar la posición del divisor de pulso 3

Luego abra la configuración del divisor de pulso (pulso 3) y dele el mismo desplazamiento.

  • Desplazamiento vertical 600px

Diseño de línea de tiempo Divi con efectos de desplazamiento

En este punto, puede continuar agregando más elementos a la línea de tiempo siguiendo estos tres pasos:

  • Duplicar grupo anterior de tres módulos
  • Actualizar Runner Divider con desplazamiento vertical aumentado en 300 px
  • Actualizar divisor de pulso con desplazamiento vertical aumentado en 300 px

Flipping Blurb 2

En este momento, todos los eventos están ubicados en el lado derecho de la línea dentro de la fila. Para crear un diseño más equilibrado, podemos voltear la segunda propagación para que quede en el lado derecho. Para hacer esto, abra la configuración de publicidad y actualice lo siguiente:

  • Alineación de texto: derecha (escritorio), izquierda (teléfono)
  • Transformar Traducir X Eje: -250 px (escritorio), 0 px (teléfono)

Diseño de línea de tiempo Divi con efectos de desplazamiento

Diseño de línea de tiempo Divi con efectos de desplazamiento

CSS personalizado

A continuación, agregue el siguiente CSS personalizado al elemento principal:

01
direction:rtl;

Y luego, en la pestaña del teléfono, agregue lo siguiente:

01
direction:rtl;

Luego agregue el siguiente CSS personalizado a la imagen de Blurb:

01
padding-left: 15px

Debajo de la pestaña del teléfono, agregue lo siguiente:

01
padding-left: 0px

Diseño de línea de tiempo Divi con efectos de desplazamiento

Diseño de línea de tiempo Divi con efectos de desplazamiento

Extender el inicio de Running Circle Divider 1

Como toque final, ajustemos el primer divisor de círculo en ejecución (corredor 1) para que comience por encima del primer icono de propaganda. Para hacer esto, abra la configuración del corredor 1 y actualice lo siguiente:

  • Compensación inicial: -4

Diseño de línea de tiempo Divi con 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

Pin It on Pinterest

Share This