La página que habla de ti (sobre) es una de las páginas más importantes de tu Sitio web. Esto permite que las personas te conozcan mejor y decidan si se sienten cómodas dando el siguiente paso. Si está buscando una manera fácil de incluir narración en esta página, le encantará este tutorial. Usaremos los efectos de desplazamiento de Divi para crear una transición de narración fluida al desplazarse. Tan pronto como una parte de la historia se desvanece, aparece otra parte. Esto le da al visitantes la sensación de leer una historia interesante. 

Posible resultado final

Antes de sumergirnos en el tutorial, echemos un vistazo al resultado en diferentes tamaños de pantalla.

1. Cree la primera sección de pantalla completa de la página

Añadir una nueva sección

Color de fondo

Comience agregando una primera sección a su página Acerca de. Abra la configuración de la sección y cambie el color de fondo a negro.

• Color de fondo: # 000000

apresto

Luego gire la sección a pantalla completa agregando una altura mínima en los parámetros de tamaño.

• Altura mínima: 100vh

2. Agregar una línea animada

Añadir una nueva linea

Estructura de la columna

Luego agregue una nueva fila a su sección utilizando la siguiente estructura de columnas:

apresto

Abra los parámetros de línea y permita que la línea ocupe todo el ancho del contenedor de la sección modificando los parámetros de acotación.

• Ancho: 100%
• Ancho máximo: 100%

espaciamiento

Luego, agregue relleno izquierdo y derecho en diferentes tamaños de pantalla.

• Acolchado izquierdo: 20vw (escritorio), 10vw (tableta y teléfono)
• Relleno derecho: 20vw (escritorio) 10vw (tableta y teléfono)

Animación

Para aumentar el efecto de narración, también usaremos una animación de desvanecimiento para la línea.

• Estilo de animación: Fundido
• Duración de la animación: 3000 ms
• Curva de velocidad de animación: facilidad de entrada y salida
• Repetición de animación: una vez

Puesto de trabajo

Finalmente, nos aseguraremos de que la línea esté posicionada en el centro del contenedor de la sección modificando las opciones de posición.

• Posición: absoluta
• Lugar: Centro

3. Insertar un título con efectos de desplazamiento

Agregue el módulo de texto # 1 a la columna

Añadir contenido H1

El único módulo que necesitamos en esta línea es un módulo de texto con contenido H1.

Título 1 Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto H1 de la siguiente manera:

• Fuente del título: Nunito
• Peso de la fuente del título: Semi negrita
• Color del texto del encabezado: #ffffff
• Tamaño del texto del encabezado: 7vw (escritorio), 9vw (tableta), 11vw (teléfono)

Movimiento vertical

También agregaremos una sutil animación vertical.

• Activar movimiento vertical: sí
• Compensación de inicio: 0 (al 50%)
• Compensación media: 10 (al 100%)
• Compensación final: 10

Efecto de desplazamiento entrante y saliente

Con un efecto de desvanecimiento entrante y saliente.

• Activar fundido de entrada y salida: Sí
• Opacidad inicial: 100%
• Opacidad promedio: 100% (al 55%)
• Opacidad final: 0% (a 62%)

Escalar el efecto de desplazamiento hacia arriba y hacia abajo

Por último, pero no menos importante, también usaremos un efecto de desplazamiento de escala hacia arriba y hacia abajo.

• Habilitar escalado hacia arriba y hacia abajo: Sí
• Escala inicial: 100% (hasta 40%)
• Escala promedio: 95% (a 74%)
• Escala final: 90%

4. Clone una sección completa una vez e incluya el texto descriptivo con efectos de desplazamiento

Editar título y contenido

Una vez que haya completado la primera sección, puede clonarla por completo. Abra el módulo de texto dentro del contenedor de la sección duplicada y use una copia H2.

Modificar los parámetros de texto del módulo de texto H2

Cambie la configuración del texto H2 en consecuencia:

• Título 2 Policía: Nunito
• Título de fuente 2: semi-negrita
• Elemento 2 Color del texto: #ffffff
• Elemento 2 Tamaño del texto: 5vw (escritorio), 7vw (tableta), 8vw (teléfono)
• Altura de la línea 2: 1em (oficina), 1.2em (tableta y teléfono)

Agregue el módulo de texto # 2 a la columna

Agregar contenido

A continuación, agregue otro módulo de texto a la columna con un contenido descripción de su elección.

Configuraciones de texto

Cambie la configuración de texto para el módulo de texto de la siguiente manera:

• Fuente de texto: Open Sans
• Color del texto: #ffffff
• Tamaño del texto: 1vw (escritorio), 2.5vw (tableta), 3vw (teléfono)
• Altura de la línea de texto: 3.1em (escritorio), 2.5em (tableta y teléfono)

espaciamiento

También use un margen superior.

• Margen superior: 8vw

Efecto de desplazamiento entrante y saliente

A continuación, cambie a los efectos de desplazamiento en la pestaña avanzada y use las siguientes configuraciones de fundido de entrada y salida:

• Activar fundido de entrada y salida: Sí
• Opacidad inicial: 100%
• Opacidad promedio: 0% (al 31%)
• Opacidad final: 0% (a 35%)

Escalar el efecto de desplazamiento hacia arriba y hacia abajo

También agregue un efecto de escalado hacia arriba y hacia abajo.

• Habilitar escalado hacia arriba y hacia abajo: Sí
• Escala inicial: 100% (hasta 40%)
• Escala promedio: 95% (a 74%)
• Escala final: 90%

Ahora podrás clonar esta última sección tantas veces como sea posible. Sin embargo, necesitará ajustar el contenido de cada sección para sus necesidades.

vista

Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.

Consideraciones finales

En este artículo, le mostramos cómo contar una historia en su página Acerca de utilizando los efectos de desplazamiento integrados de Divi. El efecto que creamos permite que la copia consecutiva aparezca y desaparezca, dando al visitantes como leer un cuento. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.