Cómo sincronizar la copia desplegable en desplazamiento con Divi

Cuando el énfasis de una determinada sección está en la copia, es importante asegurarse de que la copia no pase desapercibida. Hay muchas técnicas que puede usar para poner su copia en el centro de atención, pero en este tutorial, le mostraremos cómo sincronizar la expansión de la copia en el desplazamiento usando Divi y sus nuevos efectos de desplazamiento. A medida que los usuarios se desplazan, aparecerá otra parte de la copia, lo que les permitirá leer paso a paso el contenido que está proporcionando. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

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

Escritorio

Móvil

Descargue la copia desplegable en el diseño de desplazamiento GRATIS

Para poner sus manos en la copia expandible 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 diseño de sección

Agregar nueva sección

Color de fondo

Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y cambie el color de fondo.

  • Color de fondo: #151515

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

Añadir Fila #1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique la configuración de tamaño de la siguiente manera:

  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 1
  • Ancho: 90%
  • Ancho máximo: 1380px

Espaciado

Agregue un poco de relleno superior e inferior personalizado a continuación.

  • Relleno superior: 150px
  • Relleno inferior: 150px

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

Agregar contenido

Luego, agregue un primer módulo de texto con algún contenido de su elección.

Configuración de texto

Pase a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:

  • Fuente del texto: Livvic
  • Peso de fuente de texto: Negrita
  • Color del texto: #f1f1f1
  • Tamaño del texto: 170 px (escritorio), 100 px (tableta), 70 px (teléfono)
  • Altura de línea de texto: 1em

  • Longitud horizontal de la sombra de texto: 0,06 em
  • Longitud vertical de la sombra del texto: 0em
  • Color de sombra de texto: rgba (79,79,79,0.74)
  • Alineación de texto: centro (escritorio), izquierda (tableta y teléfono)

Clonar módulo de texto dos veces

Clona el módulo de texto dos veces.

Cambiar contenido

Modifique el contenido de ambos módulos de texto duplicados.

Añadir Fila #2

Estructura de la columna

Agregue otra fila justo debajo de la anterior utilizando la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de la fila y cambie la configuración de tamaño en consecuencia:

  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 1
  • Ancho: 100%
  • Ancho máximo: 100%

Espaciado

Elimine el relleno superior e inferior predeterminado de la fila a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

Borde

Agregue un borde superior a continuación.

  • Ancho del borde superior: 1px
  • Color del borde superior: #4c4c4c

Configuración de columna

Espaciado

También estamos haciendo algunos cambios en la configuración de las columnas. Abra la configuración y agregue algunos valores de relleno personalizados.

  • Acolchado superior: 5vw
  • Acolchado inferior: 10vw
  • Acolchado izquierdo: 6vw
  • Acolchado derecho: 6vw

Borde

Use un borde derecho también.

  • Ancho del borde derecho: 1px
  • Color del borde derecho: #4c4c4c

Agregue el módulo Blurb a la columna 1

Agregar contenido

Continúe agregando un módulo de Blurb a la columna con algún contenido de su elección.

Seleccionar icono

Seleccione un icono de su elección a continuación.

Configuración de iconos

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

  • Color del icono: #a3acff
  • Alineación de imagen/icono: Izquierda

Configuración del texto del título

Modifique también la configuración del texto del título.

  • Fuente del título: Livvic
  • Peso de la fuente del título: Negrita
  • Color del texto del título: #c1c1c1
  • Tamaño del texto del título: 35px

  • Título Texto Sombra Horizontal Longitud: 0.06em
  • Título Texto Sombra Vertical Longitud: 0em
  • Color de la sombra del texto del título: rgba(79,79,79,0.74)

Configuración del texto del cuerpo

También estamos haciendo algunos cambios en la configuración del texto del cuerpo.

  • Color del cuerpo del texto: #878787
  • Tamaño del cuerpo del texto: 16px
  • Altura de la línea del cuerpo: 2,4 em

CSS del título de Blurb

Y crearemos un espacio alrededor del título con una sola línea de código CSS que agregaremos al título de la propaganda en la pestaña avanzada.

01
margin: 30px 0 40px 0;

Clonar toda la columna dos veces

Una vez que haya completado toda la columna y el módulo Blurb, puede clonar la columna completa dos veces.

Eliminar el borde de la columna 3

Abra la configuración de la columna 3 y elimine el borde derecho.

  • Ancho del borde derecho: 0px

Cambiar contenido

Y cambie el contenido del módulo Blurb para cada duplicado.

2. Agregar efectos de desplazamiento

Sección

Escalando hacia arriba y hacia abajo

Es hora de agregar efectos de desplazamiento , comenzando con la sección. Use el efecto de desplazamiento de escala hacia arriba y hacia abajo con los siguientes valores:

  • Habilitar escalado hacia arriba y hacia abajo: Sí
  • Escala inicial: 70%
  • Escala media: 100%
  • Escala final: 100%

Módulo de texto #1

Desvanecimiento de entrada y salida

Luego, abra el primer módulo de texto en la primera fila de su sección y agregue un efecto de aparición y desaparición gradual.

  • Habilitar aparición y desaparición gradual: Sí
  • Opacidad inicial: 0%
  • Opacidad media: 0% (al 55%)
  • Opacidad final: 100% (al 71%)

Escalando hacia arriba y hacia abajo

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

  • Habilitar escalado hacia arriba y hacia abajo: Sí
  • Escala inicial: 0% (al 47%)
  • Escala media: 100 % (al 56 %)
  • Escala final: 100% (al 64%)

Efectos de desplazamiento del módulo de texto extendido n.º 1

Continúe extendiendo los efectos de desplazamiento a los otros dos módulos de texto en la columna.

  • Para: Todos los textos
  • A lo largo de: esta columna

Módulo de publicidad #1

Escalando hacia arriba y hacia abajo

A continuación, agregaremos un efecto de desplazamiento de escala hacia arriba y hacia abajo al Módulo de Blurb en la columna 1.

  • Habilitar escalado hacia arriba y hacia abajo: Sí
  • Escala inicial:

    • Escritorio: 0%
    • Tableta y teléfono: 100%
  • Escala media: 100 % (al 33 %)
  • Escala final: 100% (al 64%)

Extienda los efectos de desplazamiento del Módulo #1 de Blurb

Complete el tutorial extendiendo el efecto de desplazamiento a todos los módulos de Blurb en la fila y ¡listo!

  • Para: Todos los Blurbs
  • A lo largo de: esta fila

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 este tutorial, le mostramos una forma creativa de sincronizar la copia expandida en su sección Divi. Esta es una excelente manera de resaltar la copia y permitir que los visitantes lean diferentes partes de su sección paso a paso. ¡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.