¡Tu licencia Divi con un -20% de DescuentoOferta aquí

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

Sep 14, 2020 | Tutoriales para 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.

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 comenzar, echemos un vistazo al diseño en diferentes tamaños de pantalla.

Escritorio

texto e imágenes que cambian al desplazarse

Móvil

texto e imágenes que cambian al desplazarse

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

Agregar nueva sección

Antecedentes

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 imagen: Portada
  • Repetir imagen de fondo: Repetir Y (vertical)

texto e imágenes que cambian al desplazarse

Espaciado

Agregue algo de espacio a la sección.

  • Acolchado superior e inferior: 30%

texto e imágenes que cambian al desplazarse

Visibilidad

Oculte los desbordamientos también.

  • Desbordamiento horizontal y vertical: oculto

texto e imágenes que cambian al desplazarse

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 e imágenes que cambian al desplazarse

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
  • Talla
    • Escritorio: 100px
    • Tableta: 75px
    • Teléfono: 33px
  • Espaciado de letras
    • Escritorio: 4px
    • Tableta: 3px
    • Teléfono: 2px

texto e imágenes que cambian al desplazarse

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

texto e imágenes que cambian al desplazarse

Visibilidad

Oculte los desbordamientos también.

  • Desbordamientos horizontales y verticales: ocultos

Agregar el primer módulo de texto

Texto

Agrega 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
  • Talla
    • Escritorio: 50px
    • Tableta: 40px
    • Teléfono: 28px
  • Espaciado entre letras: 3px

texto e imágenes que cambian al desplazarse

Espaciado

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

  • Margen superior e inferior: 0px

texto e imágenes que cambian al desplazarse

Efectos de desplazamiento

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

  • Fading in y out: 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 superior
    • Posición: 54%
    • Opacidad final: 0%

Módulo de texto duplicado dos veces

Clona el módulo de texto dos veces.

texto e imágenes que cambian al desplazarse

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

texto e imágenes que cambian al desplazarse

Posición

Agregue posicionamiento absoluto al módulo también.

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

texto e imágenes que cambian al desplazarse

Efectos de desplazamiento

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

  • Fading in y out: 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 superior
      • 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

Agregue una posición absoluta a continuación.

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

Efectos de desplazamiento

Luego, modifique los efectos de desplazamiento.

  • Fading in y out: 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 superior
    • Posición: 81%
    • Opacidad final: 0%

texto e imágenes que cambian al desplazarse

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

texto e imágenes que cambian al desplazarse

Alineación

Establezca la alineación a la izquierda.

  • Alineación de imagen: izquierda

texto e imágenes que cambian al desplazarse

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%

texto e imágenes que cambian al desplazarse

Visibilidad

Ahora, vaya a la pestaña avanzada y configure los desbordamientos como ocultos.

  • Desbordamiento horizontal y vertical: oculto

texto e imágenes que cambian al desplazarse

Efectos de desplazamiento

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

  • Fading in y out: habilitar
  • Parte inferior de la ventana gráfica
    • Posición: 70%
    • Opacidad inicial: 0%
  • Opacidad media
    • Posición: 71%
    • Medio: 100%
  • Vista superior superior
    • 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: Jason’s Art Team
  • Botón: Libro del equipo de arte de Jason
  • Cuerpo: contenido descriptivo

Enlace

Agrega un enlace a continuación.

  • Enlace: su enlace

Antecedentes

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 título.

  • Nivel de encabezado: H3
  • Fuente: Fredoke One
  • Alineación del texto del título: izquierda
  • Color: Negro #oooooo
  • Talla
    • 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: 20 px
  • 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

texto e imágenes que cambian al desplazarse

Visibilidad

Luego, esconde los desbordamientos.

  • Desbordamiento horizontal y vertical: oculto

texto e imágenes que cambian al desplazarse

Efectos de desplazamiento

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

  • Fading in y out: 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 superior
    • 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

texto e imágenes que cambian al desplazarse

texto e imágenes que cambian al desplazarse

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 título.

  • 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

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

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This