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ómodas para dar el siguiente paso. Si está buscando una manera fluida de incluir la narración de historias en su página acerca de, le encantará este tutorial. Usaremos Divi y sus efectos de desplazamiento 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á descargar el archivo JSON de forma gratuita!
Hagámoslo.
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 poner sus manos en la historia 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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 de información. 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.
- Relleno izquierdo: 20vw (escritorio), 10vw (tableta y teléfono)
- Relleno derecho: 20vw (escritorio) 10vw (tableta y teléfono)
Animación
Para aumentar el efecto narrativo, también usaremos una animación de fundido para la fila.
- Estilo de animación: Fundido
- Duración de la animación: 3000ms
- Curva de velocidad de animación: Facilidad de entrada y salida
- Repetición de animación: una vez
Posición
Y por último, pero no menos importante, nos aseguraremos de que la fila esté en el centro del contenedor de la sección modificando las opciones de posición .
- Posición: Absoluta
- Ubicación: Centro
3. Insertar título con efectos de desplazamiento
Agregue 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.
Encabezado 1 Ajustes 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 título: #ffffff
- Tamaño del texto del encabezado: 7vw (escritorio), 9vw (tableta), 11vw (teléfono)
movimiento vertical
Agregaremos una animación vertical sutil también.
- Habilitar movimiento vertical: Sí
- Compensación inicial: 0 (al 50 %)
- Compensación media: 10 (al 100 %)
- Compensación final: 10
Efecto de desplazamiento de aparición y desaparición gradual
Junto con un efecto de entrada y salida gradual.
- Habilitar aparición y desaparición gradual: Sí
- Opacidad inicial: 100%
- Opacidad media: 100% (al 55%)
- Opacidad final: 0% (al 62%)
Efecto de desplazamiento de escala 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% (al 40%)
- Escala media: 95% (al 74%)
- Escala final: 90%
4. Clone toda la sección una vez e incluya texto de descripción con efectos de desplazamiento
Cambiar título de contenido y copiar
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 alguna copia H2.
Modificar la configuración de texto H2 del módulo de texto
Cambie la configuración de texto H2 en consecuencia:
- Título 2 Fuente: Nunito
- Encabezado 2 Peso de fuente: semi negrita
- Título 2 Color del texto: #ffffff
- Título 2 Tamaño del texto: 5vw (Escritorio), 7vw (Tableta), 8vw (Teléfono)
- Encabezado 2 Altura de línea: 1em (escritorio), 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 algún contenido de descripción 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 de texto: 1vw (Escritorio), 2.5vw (Tableta), 3vw (Teléfono)
- Altura de la línea de texto: 3,1 em (escritorio), 2,5 em (tableta y teléfono)
Espaciado
Use un poco de margen superior también.
- Margen superior: 8vw
Efecto de desplazamiento de aparición y desaparición gradual
Luego, pase a los efectos de desplazamiento en la pestaña avanzada y use las siguientes configuraciones de aparición y desaparición gradual:
- Habilitar aparición y desaparición gradual: Sí
- Opacidad inicial: 100%
- Opacidad media: 0% (al 31%)
- Opacidad final: 0% (al 35%)
Efecto de desplazamiento de escala hacia arriba y hacia abajo
Agregue un efecto de escala 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. Clona la segunda sección tantas veces como quieras
Cambie el contenido sobre la marcha
Una vez que hayas completado la segunda sección de tu página, puedes clonarla tantas veces como quieras, dependiendo de la historia de tu página. Asegúrese de cambiar el contenido de cada sección.
6. Página completa con la sección CTA
Cambiar descripción Espaciado de 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
Agregar copia
Luego, agregue un Módulo de botones también con alguna copia de su elección.
Configuración 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
- Radio del borde del botón: 100px
- 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.
- Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Relleno 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 la copia consecutiva aparezca y desaparezca, dando a los visitantes la impresión de que están leyendo una historia. ¡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.
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.