Su página acerca de es una de las páginas más importantes de su sitio web. Permite a las personas conocerte mejor y decidir si se sienten cómodos para dar el siguiente paso. Si está buscando una manera fluida de incluir narraciones en su página acerca de, le encantará este tutorial. Utilizaremos los efectos de desplazamiento de Divi para crear una transición de narración fluida 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ás descargar el archivo JSON gratis!

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.

Avance

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

Escritorio

historia en desplazamiento

Móvil

historia en desplazamiento

1. Crear 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

historia en desplazamiento

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

historia en desplazamiento

2. Añadir fila animada

Agregar nueva fila

Estructura de columna

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

historia en desplazamiento

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 del tamaño.

  • Ancho: 100%
  • Ancho Máx .: 100%

historia en desplazamiento

Espaciado

Luego, agregue algo 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)

historia en desplazamiento

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: 3000 ms
  • Curva de velocidad de animación: facilidad de entrada y salida
  • Repetición de animación: una vez

historia en desplazamiento

Posición

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

  • Posición: absoluta
  • Lugar: Centro

historia en desplazamiento

3. Insertar título con efectos de desplazamiento

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

Añadir contenido H1

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

historia en desplazamiento

Encabezado 1 Configuración de texto

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

  • Fuente del 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)

historia en desplazamiento

Movimiento vertical

También agregaremos una sutil animación vertical.

  • Habilitar movimiento vertical: sí
  • Compensación inicial: 0 (al 50%)
  • Desfase medio: 10 (al 100%)
  • Compensación de finalización: 10

historia en desplazamiento

Desvanecimiento de efecto de desplazamiento dentro y fuera

Junto con un efecto de desvanecimiento.

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

historia en desplazamiento

Efecto de desplazamiento hacia arriba y hacia abajo

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

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

historia en desplazamiento

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

Cambiar encabezado y copia de 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.

historia en desplazamiento

Modificar la configuración de texto del módulo de texto H2

Cambie la configuración del texto H2 en consecuencia:

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

historia en desplazamiento

Agregue 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 el contenido de la descripción que elija.

historia en desplazamiento

Configuraciones 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)

historia en desplazamiento

Espaciado

Use algo de margen superior también.

  • Margen superior: 8vw

historia en desplazamiento

Desvanecimiento de efecto de desplazamiento dentro y fuera

Luego, pase a los efectos de desplazamiento en la pestaña avanzada y use la siguiente configuración de desvanecimiento:

  • Habilitar el desvanecimiento de entrada y salida: Sí
  • Opacidad inicial: 100%
  • Media opacidad: 0% (al 31%)
  • Opacidad final: 0% (al 35%)

historia en desplazamiento

Efecto de desplazamiento hacia arriba y hacia abajo

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

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

historia en desplazamiento

5. Clona la segunda sección tantas veces como quieras

Cambiar contenido a medida que avanza

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

historia en desplazamiento

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

Cambio Descripción Espaciado del módulo de texto

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

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

historia en desplazamiento

Agregar módulo de botón

Agregar copia

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

historia en desplazamiento

Configuraciones de botones

Pase a la pestaña de diseño del módulo y cambie la configuración del botón 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

historia en desplazamiento

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

historia en desplazamiento

Espaciado

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

  • Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Relleno 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)

historia en 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!