Cómo contar su historia sobre el desplazamiento con Divi

Su página Acerca de es una de las páginas más importantes de su sitio web. Permite que las personas te conozcan mejor y decidan si se sienten cómodos para dar el siguiente paso. Si está buscando una manera sencilla de incluir la narración de historias en su página Acerca de, le encantará este tutorial. Usaremos los efectos de desplazamiento de Divi para crear una transición fluida de narración en el desplazamiento. Tan pronto como una parte de la historia se desvanece, otra parte se desvanece. Esto les da a los visitantes la sensación de que están leyendo una historia interesante. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

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

Escritorio

Móvil

Suscríbete a nuestro canal de Youtube

Descargue la historia de la página Acerca de en el diseño de desplazamiento GRATIS

Para tener en sus manos la historia gratuita de la página Acerca de en el diseño de desplazamiento, primero deberá descargarla 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.

Descarga los archivos

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.

DESCARGAR

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!

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

Agregar 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

Dimensionamiento

Gire la sección a pantalla completa a continuación agregando una altura mínima en la configuración de tamaño.

• Altura mínima: 100vh

2. Agregar fila animada

Agregar nueva fila

Estructura de la columna

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

Dimensionamiento

Abra la configuración de la fila y permita que la fila ocupe todo el ancho del contenedor de la sección modificando la configuración de tamaño.

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

Espaciado

Luego, agregue un poco de 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 fila.

• Estilo de animación: Fade
• Duración de la animación: 3000ms
• Curva de velocidad de animación: Ease-In-Out
• Repetición de animación: una vez

Posición

Y por último, pero no menos importante, nos aseguraremos de que la fila esté ubicada en el centro dentro del contenedor de la sección modificando las opciones de posición.

• Posición: Absoluto
• Ubicación: Centro

3. Insertar título con efectos de desplazamiento

Agregar el módulo de texto n. ° 1 a la columna

Agregar contenido H1

El único módulo que necesitamos en esta fila es un módulo de texto con algo de contenido H1.

Configuración de texto del encabezado 1

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

• Fuente de encabezado: Nunito
• Peso de la fuente del encabezado: 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.

• Habilitar movimiento vertical: sí
• Desplazamiento inicial: 0 (al 50%)
• Desplazamiento medio: 10 (al 100%)
• Desplazamiento final: 10

Efecto de desplazamiento que se desvanece y desaparece

Junto con un efecto de desvanecimiento.

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

Efecto de desplazamiento hacia arriba y hacia abajo

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

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

4. Clonar toda la sección una vez e incluir texto descriptivo con efectos de desplazamiento

Cambiar el título y la copia del 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 la configuración de texto del módulo de texto H2

Cambie la configuración del texto H2 en consecuencia:

• Fuente del encabezado 2: Nunito
• Peso de fuente del encabezado 2: Semi negrita
• Color del texto del encabezado 2: #ffffff
• Encabezado 2 Tamaño del texto: 5vw (escritorio), 7vw (tableta), 8vw (teléfono)
• Altura de línea del encabezado 2: 1em (escritorio), 1.2em (tableta y teléfono)

Agregar el módulo de texto n. ° 2 a la columna

Agregar contenido

A continuación, agregue otro módulo de texto a la columna con algún contenido descriptivo de su elección.

Configuración de texto

Cambie la configuración de texto del 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)

Espaciado

Utilice también un margen superior.

• Margen superior: 8vw

Efecto de desplazamiento que se desvanece y desaparece

Luego, pase a los efectos de desplazamiento en la pestaña avanzada y use las siguientes configuraciones de aparición y desaparición gradual:

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

Efecto de desplazamiento hacia arriba y hacia abajo

Agregue un efecto de escalado hacia arriba y hacia abajo también.

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

5. Clone la segunda sección hasta tantas veces como desee

Cambie el contenido a medida que avanza

Una vez que haya completado la segunda sección de su página, puede clonarla tantas veces como desee, dependiendo de la historia de su página acerca de. Asegúrese de cambiar el contenido en cada sección.

6. Página completa con la sección de CTA

Cambiar el espaciado del módulo de texto de la descripción

Complete la página acerca de con una sección de CTA al final. Abra el módulo de texto de descripción y modifique el margen superior e inferior.

• Margen superior: 4vw
• Margen inferior: 4vw

Agregar módulo de botones

Agregar copia

Luego, agregue también un Módulo de botones con alguna copia de su elección.

Configuración de botones

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

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1vw (escritorio), 2.5vw (tableta), 3.5vw (teléfono)
• Color del texto del botón: # 000000
• Color de fondo del botón: #FFFFFF
• Ancho del borde del botón: 0px

• Radio del borde del botón: 100 px
• Fuente del botón: Nunito
• Peso de la fuente del botón: negrita

Espaciado

Complete la configuración del Módulo de botones agregando algunos valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado izquierdo: 3vw (escritorio), 6vw (tableta), 8vw (teléfono)
• Relleno derecho: 3vw (escritorio), 6vw (tableta), 8vw (teléfono)

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo contar una historia en su página Acerca de usando los efectos de desplazamiento integrados de Divi. El efecto que hemos creado permite que las copias consecutivas aparezcan y desaparezcan, dando a los visitantes la impresión de que están leyendo una historia. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.