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 requiera. 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 recrearlo en su propio sitio web de Divi .
Empecemos.
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 al desplazarse, 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!
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 cuadro y puntos
- Escritorio: Imagen 1
- Tableta: Imagen 2
- Teléfono: Imagen 3
- Tamaño de imagen: Portada
- Imagen de fondo Repetir: Repetir Y (vertical)
Espaciado
Agregue algo 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.
- Horizontales: Oculto
- Desbordamiento vertical: predeterminado
Agregar módulo de texto
Texto
Agregue 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
Pase a la pestaña de diseño y aplique estilo al texto del título.
- Nivel de título: 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, ajuste 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 primer módulo de texto
Texto
Agregue otro módulo de texto. Esta vez, ingrese algún contenido de H2 de su elección.
- Cuerpo: Contenido H2 – Fotografía del set
Texto de encabezado
Dale estilo al encabezado a continuación.
- Nivel de título: H2
- Peso: Negrita
- Estilo: TT
- Color: Negro #000000
- Tamaño
- Escritorio: 50px
- Tableta: 40px
- Teléfono: 28px
- Espaciado entre letras: 3px
Espaciado
Establezca un poco de espacio para el módulo también.
- Margen superior e inferior: 0px
Efectos de desplazamiento
Complete la configuración del módulo agregando los siguientes efectos de desplazamiento:
- Fundido de entrada y salida: Habilitar
- Vista inferior
- Posición: 42%
- Opacidad inicial: 0%
- Opacidad media
- Posición inferior: 43%
- Posición superior: 53%
- Opacidad media: 100%
- Vista superior
- 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: Contenido H2 – Dirección de arte
Posición
Agregue posicionamiento absoluto al módulo también.
- Posición: Absoluta
- Ubicación: Arriba a la izquierda
Efectos de desplazamiento
A continuación, actualice la configuración del efecto de desplazamiento.
- Fundido de entrada y salida: Habilitar
- Vista inferior
- Posición: 56%
- Opacidad inicial: 0%
- Opacidad media
- Posición inferior: 57%
- Posición superior: 67%
- Opacidad media: 100%
- Vista superior
-
- Posición: 68%
- Opacidad final: 0%
-
Ajustar el tercer módulo de texto
Texto
Ahora ajuste el duplicado del segundo módulo de texto. Cambia el contenido primero.
- Cuerpo: contenido H2: accesorios y vestuario
Posición
Agregue una posición absoluta a continuación.
- Posición: Absoluta
- Ubicación: Arriba a la izquierda
Efectos de desplazamiento
Luego, modifique los efectos de desplazamiento.
- Fundido de entrada y salida: Habilitar
- Vista inferior
- Posición: 70%
- Opacidad inicial: 0%
- Opacidad media
- Posición inferior: 71%
- Posición superior: 80%
- Opacidad media: 100%
- Vista superior
- Posición: 81%
- Opacidad final: 0%
Agregar módulo de imagen
Imagen
Ahora es el momento de agregar un módulo de imagen. Use 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, vaya 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 aparición y desaparición gradual.
- Fundido de entrada y salida: Habilitar
- Vista inferior
- Posición: 70%
- Opacidad inicial: 0%
- Opacidad media
- Posición: 71%
- Medio: 100%
- Vista 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. Incluye algún contenido de tu elección.
- Título: El equipo de arte de Jason
- Botón: reservar el equipo de arte de Jason
- Cuerpo: contenido descriptivo
Enlace
Agregue un enlace a continuación.
- Enlace: Tu 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
Dale estilo al texto del título también.
- Nivel de título: 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: 1px
- Teléfono: 0px
- Altura de la línea
- Computadora de 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
Ajuste los estilos de los botones también.
- Estilos personalizados
- Tamaño del texto: 17px
- Color del texto: Blanco #ffffff
- Fondo: Negro #000000
- Espaciado entre letras: 1px
- Fuente: Verdana
- Margen superior: 20px
- Relleno superior e inferior: 10px
- Relleno izquierdo y derecho: 25px
Posición
Pase a la pestaña avanzada y cambie la configuración de posición de la siguiente manera:
- Cargo: Relativo
- Origen compensado: arriba a la izquierda
- Desplazamiento horizontal: 25 px
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 aparición y desaparición gradual.
- Fundido de entrada y salida: Habilitar
- Vista inferior
- Posición: 54%
- Opacidad inicial: 0%
- Opacidad media
- Posición inferior: 55%
- Posición superior: 80%
- Medio: 100%
- Vista superior
- Posición: 100%
- Opacidad final: 0%
Duplicar segunda fila
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. Comienza desde arriba.
- Cuerpo: Contenido H2 / Preproducción
Texto
Cambia la alineación a la derecha.
- Alineación de texto: Derecha
Ampliar alineación de texto
Aplique la alineación a todos los módulos de texto clonados en esa misma fila.
- Ampliar 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 H2 / Producción en el set
Posición
Cambie la ubicación en la configuración de posición tambié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 la ubicación en la configuración de posición tambié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 nuevo módulo de llamada a la acción
Texto
A continuación, abra el módulo de llamada a la acción y cambie todo el contenido.
- Título: El equipo de producción de Alice
- Botón: reservar el equipo de producción de Alice
- Cuerpo: Nuevo contenido descriptivo.
Enlace
Cambia 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
Así como el 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 predeterminado
Avance
Echemos un último vistazo al diseño de la página en diferentes tamaños de pantalla.
Escritorio
Móvil
¡Eso es una envoltura para el diseño con texto e imágenes que cambian en el desplazamiento!
Terminamos de recrear el texto y las imágenes que cambian al desplazarse. Pudimos lograr este efecto gracias a los efectos de desplazamiento integrados de Divi. ¡Use este diseño para una página de servicios, una página acerca de, una página para conocer al equipo o cualquier cosa que desee! Utilice los fondos proporcionados o deje el fondo blanco.
¡Háganos saber lo que piensa en los comentarios!