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.
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.