Cómo crear texto e imágenes que cambian al desplazarse en Divi

Los efectos de desplazamiento Divi son excelentes para crear diseños interesantes. Hemos publicado bastantes desde que se lanzó la función. En este tutorial, le mostraremos cómo crear un diseño con texto e imágenes que cambian al desplazarse. Este diseño se puede utilizar para una página de servicios o cualquier tipo de página que necesite. Lo mantuvimos limpio y simple para que el efecto de desplazamiento fuera el centro de atención.

Puede descargar el diseño como un archivo JSON o volver a crearlo en su propio sitio web Divi.

Empecemos.

Avance

Antes de comenzar, echemos un vistazo al diseño en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue el texto y las imágenes que cambian en la sección de desplazamiento GRATIS

Para poner sus manos en la sección gratuita con texto e imágenes que cambian en el 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!

Recrear sección con texto e imágenes que cambian al desplazarse

Agregar nueva sección

Fondo

Para comenzar a recrear el diseño, agregue una nueva sección en una página nueva o existente. Agregue las imágenes de fondo que proporcionamos en la descarga anterior.

• Imagen de fondo: diseño de caja y puntos
  • Escritorio: Imagen 1
  • Tableta: Imagen 2
  • Teléfono: Imagen 3
• Tamaño de la imagen: Portada
• Repetición de imagen de fondo: Repetir Y (vertical)

Espaciado

Agregue un poco de espacio a la sección.

• Acolchado superior e inferior: 30%

Visibilidad

Oculte los desbordamientos también.

• Desbordamiento horizontal y vertical: oculto

Agregar nueva fila

Visibilidad

Ahora agregue una primera fila y ajuste la configuración de visibilidad en la pestaña avanzada.

• Horizontal: Oculto
• Desbordamiento vertical: predeterminado

Agregar módulo de texto

Texto

Agrega un primer módulo de texto para el título. Inserte algún contenido H1 de su elección.

• Cuerpo: Contenido H1 - Equipo de producción

Texto de encabezado

Vaya a la pestaña de diseño y aplique estilo al texto del encabezado.

• Nivel de encabezado: H1
• Fuente: Fredoke One
• Peso: negrita
• De color negro
• Tamaño
  • Escritorio: 100px
  • Tableta: 75px
  • Teléfono: 33px
• Espaciado de letras
  • Escritorio: 4px
  • Tableta: 3px
  • Teléfono: 2px

Dimensionamiento

Luego, ajusta el ancho.

• Ancho: 100%

Agregar nueva fila

Dimensionamiento

Ahora agregue una segunda fila y ajuste la configuración de tamaño en consecuencia:

• Ancho: 80%
• Ancho máximo: 1000px

Visibilidad

Oculte los desbordamientos también.

• Desbordamientos horizontales y verticales: ocultos

Agregar el primer módulo de texto

Texto

Agregue otro módulo de texto. Esta vez, ingrese algún contenido H2 de su elección.

• Cuerpo: Contenido H2 - Fotografía de escenario

Texto de encabezado

Dé estilo al título a continuación.

• Nivel de encabezado: H2
• Peso: negrita
• Estilo: TT
• Color: Negro # 000000
• Tamaño
  • Escritorio: 50px
  • Tableta: 40px
  • Teléfono: 28px
• Espaciado entre letras: 3px

Espaciado

Establezca también un espacio para el módulo.

• Margen superior e inferior: 0px

Efectos de desplazamiento

Complete la configuración del módulo agregando los siguientes efectos de desplazamiento:

• Desvanecimiento de entrada y salida: Habilitar
• Parte inferior de la ventana gráfica
  • Posición: 42%
  • Opacidad inicial: 0%
• Opacidad media
  • Posición inferior: 43%
  • Posición superior: 53%
  • Opacidad media: 100%
• Vista superior de la ventana
  • Posición: 54%
  • Opacidad final: 0%

Módulo de texto duplicado dos veces

Clona el módulo de texto dos veces.

Ajustar el segundo módulo de texto

Texto

Cambie el contenido en el nuevo módulo de texto.

• Cuerpo: H2 Content - Dirección de arte

Posición

Agregue posicionamiento absoluto al módulo también.

• Posición: Absoluto
• Ubicación: arriba a la izquierda

Efectos de desplazamiento

A continuación, actualice la configuración del efecto de desplazamiento.

• Desvanecimiento de entrada y salida: Habilitar
• Parte inferior de la ventana gráfica
  • Posición: 56%
  • Opacidad inicial: 0%
• Opacidad media
• Posición inferior: 57%
• Posición superior: 67%
• Opacidad media: 100%
• Vista superior de la ventana
  • • Posición: 68%
    • Opacidad final: 0%

  

Ajustar el tercer módulo de texto

Texto

Ahora ajusta el segundo módulo de texto duplicado. Primero cambie el contenido.

• Cuerpo: Contenido H2 - Accesorios y armario

Posición

A continuación, agregue una posición absoluta.

• Posición: Absoluto
• Ubicación: arriba a la izquierda

Efectos de desplazamiento

Luego, modifique los efectos de desplazamiento.

• Desvanecimiento de entrada y salida: Habilitar
• Parte inferior de la ventana gráfica
  • Posición: 70%
  • Opacidad inicial: 0%
• Opacidad media
  • Posición inferior: 71%
  • Posición superior: 80%
  • Opacidad media: 100%
• Vista superior de la ventana
  • Posición: 81%
  • Opacidad final: 0%

Agregar módulo de imagen

Imagen

Ahora es el momento de agregar un módulo de imagen. Utilice una imagen cuadrada con un tamaño de imagen de 350 x 350 px.

• Imagen: Imagen cuadrada 350 x 350 px

Alineación

Establezca la alineación a la izquierda.

• Alineación de imagen: izquierda

Espaciado

Ajuste el espaciado también.

• Mostrar espacio debajo de la imagen: No
• Margen superior: -60px

Filtros

Luego, agregue un filtro para desaturar la imagen.

• Saturación: 0%

Visibilidad

Ahora, muévase a la pestaña avanzada y configure los desbordamientos como ocultos.

• Desbordamiento horizontal y vertical: oculto

Efectos de desplazamiento

Por último, pero no menos importante, agregue un efecto de desplazamiento de entrada y salida gradual.

• Desvanecimiento de entrada y salida: Habilitar
• Parte inferior de la ventana gráfica
  • Posición: 70%
  • Opacidad inicial: 0%
• Opacidad media
  • Posición: 71%
  • Medio: 100%
• Vista superior de la ventana
  • Posición: 100%
  • Opacidad final: 0%

Agregar módulo de llamada a la acción

Texto

Pasemos al siguiente módulo, que es un módulo de llamada a la acción. Incluya algún contenido de su elección.

• Título: Equipo de arte de Jason
• Botón: Libro del equipo de arte de Jason
• Cuerpo: contenido descriptivo

Enlace

Agregue un enlace a continuación.

• Enlace: su enlace

Fondo

Elimina también el color de fondo predeterminado.

• Usar color de fondo: No

Texto

Luego, establezca la alineación a la derecha.

• Alineación de texto: derecha

Texto de encabezado

Diseñe también el texto del encabezado.

• Nivel de encabezado: H3
• Fuente: Fredoke One
• Alineación del texto del título: izquierda
• Color: Negro #oooooo
• Tamaño
  • Escritorio: 48px
  • Tableta: 42px
  • Teléfono: 33px
• Espaciado de letras
  • Escritorio y tableta: 1 px
  • Teléfono: 0px
• Altura de la línea
  • Escritorio y tableta: 1.6em
  • Teléfono: 1.1em

Cuerpo de texto

Luego, el cuerpo del texto.

• Fuente: Verdana
• Color: Negro # 000000
• Tamaño: 14px
• Espaciado entre letras: 0.5px

Botón

También ajusta los estilos de los botones.

• Estilos personalizados
• Tamaño del texto: 17px
• Color del texto: blanco #ffffff
• Fondo: Negro # 000000
• Espaciado entre letras: 1px
• Fuente: Verdana
• Margen superior: 20px
• Acolchado superior e inferior: 10px
• Relleno izquierdo y derecho: 25px

Posición

Vaya a la pestaña avanzada y cambie la configuración de posición de la siguiente manera:

• Posición: relativo
• Origen de desplazamiento: arriba a la izquierda
• Desplazamiento horizontal: 25px

Visibilidad

Luego, oculta los desbordamientos.

• Desbordamiento horizontal y vertical: oculto

Efectos de desplazamiento

Por último, pero no menos importante, habilite un efecto de desplazamiento de entrada y salida gradual.

• Desvanecimiento de entrada y salida: Habilitar
• Parte inferior de la ventana gráfica
  • Posición: 54%
  • Opacidad inicial: 0%
• Opacidad media
  • Posición inferior: 55%
  • Posición superior: 80%
  • Medio: 100%
• Vista superior de la ventana
  • Posición: 100%
  • Opacidad final: 0%

Segunda fila duplicada

Clona la fila con todos sus módulos.

Ajustar el primer módulo de texto

Texto

Ahora cambie el contenido de los módulos de texto clonados. Empiece desde arriba.

• Cuerpo: Contenido H2 / Preproducción

Texto

Cambie la alineación a la derecha.

• Alineación de texto: derecha

Extender la alineación del texto

Aplique la alineación a todos los módulos de texto clonados en esa misma fila.

• Extender la alineación del texto: a todos los módulos de texto de esta fila

Ajustar el segundo módulo de texto

Texto

Ahora actualice el contenido en el segundo módulo de texto clonado.

• Cuerpo: contenido de H2 / producción en el set

Posición

Cambie también la ubicación en la configuración de posición.

• Ubicación: arriba a la derecha

Ajustar el tercer módulo de texto

Texto

Ahora cambie el contenido del tercer módulo de texto clonado.

• Cuerpo: Contenido H2 / Coordinación entre equipos

Posición

Cambie también la ubicación en la configuración de posición.

• Ubicación: arriba a la derecha

Ajustar nuevo módulo de imagen

Imagen

A continuación, cambie la foto en el módulo de imagen.

• Imagen: Nueva imagen 350 x 350px

Alineación

Cambie también la alineación de la imagen.

• Alineación de imagen: derecha

Ajustar el nuevo módulo de llamada a la acción

Texto

Abra el módulo de llamada a la acción a continuación y cambie todo el contenido.

• Título: Equipo de producción de Alice
• Botón: Libro del equipo de producción de Alice
• Cuerpo: Nuevo contenido descriptivo.

Enlace

Cambie el enlace también.

• Enlace: Nuevo enlace

Texto

Modifique también la alineación.

• Alineación de texto: izquierda

Texto de encabezado

Cambie también la alineación del texto del encabezado.

• Alineación del texto del título: izquierda

Cuerpo de texto

Además del cuerpo del texto.

• Alineación del texto del cuerpo: izquierda

Dimensionamiento

No olvide cambiar la alineación de todo el módulo en la configuración de tamaño también.

• Alineación del módulo: izquierda

Posición

Finalmente, restablezca la configuración de posición a los valores predeterminados y listo.

• Posición: Restablecer a los valores predeterminados

Avance

Echemos un último vistazo al diseño de la página en diferentes tamaños de pantalla.

Escritorio

Móvil

¡Eso es un ajuste para el diseño con texto e imágenes que cambian en el desplazamiento!

Hemos terminado de recrear el texto y las imágenes que cambian en el desplazamiento. Pudimos lograr este efecto gracias a los efectos de desplazamiento integrados de Divi. Utilice este diseño para una página de servicios, una página de información, una página de encuentro con el equipo o cualquier cosa que desee. Utilice los fondos proporcionados o deje el fondo en blanco.

¡Háganos saber lo que piensa en los comentarios!