Cómo cambiar estilos en el desplazamiento sin movimiento usando las opciones adhesivas de Divi

Si busca un estilo de diseño limpio al crear un nuevo sitio web, lo más probable es que desee encontrar una manera de agregar una dimensión adicional a su sitio web. Este tutorial será todo sobre eso. Le mostraremos cómo usar las opciones adhesivas de Divi para cambiar estilos adhesivos sin movimiento. Específicamente, esto significa que tan pronto como los visitantes pasen por una determinada parte de su página, los estilos de esa parte cambiarán pero los elementos permanecerán en su lugar. Este tipo de efecto está completamente enfocado en el comportamiento del usuario. El cambio de estilos pegajosos solo ocurre cuando las personas se desplazan más allá de él, lo que da un resultado hermoso. En este tutorial, le mostraremos paso a paso cómo llegar allí. Una vez que obtenga el enfoque, podrá usarlo en cualquier tipo de diseño que cree. 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

Descarga The Layout GRATIS

Para poner sus manos en el diseño gratuito, primero deberá descargarlo 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!

1. Crear estructura de elementos

Agregar nueva sección

Visibilidad

Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y oculte los desbordamientos en la pestaña avanzada. Esto ayudará a garantizar que no aparezca ninguna barra de desplazamiento horizontal.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo, abra la configuración de fila y modifique la configuración de tamaño en consecuencia:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 2580px

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

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

Configuración de la columna 1

Espaciado

Luego, abra la configuración de la columna 1 y aplique algunos valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior:
  • Escritorio: 200px
  • Tableta: 100 px
  • Teléfono: 80px
• Acolchado inferior:
  • Escritorio: 200px
  • Tableta: 100 px
  • Teléfono: 80px

Índice Z

Aumente también el índice z de esta columna. Más adelante en el tutorial, crearemos una superposición horizontal entre las columnas 1 y 2. Estamos aumentando el índice z para asegurarnos de que los módulos de la columna 1 permanezcan por encima de los módulos de la columna 2.

• Índice Z: 11

Configuración de la columna 2

Color de fondo

A continuación, agregaremos un color de fondo a la columna 2.

• Color de fondo: # f9f9f9

Espaciado

También usaremos algunos valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior:
  • Escritorio: 200px
  • Tableta: 150px
  • Teléfono: 100px
• Acolchado inferior:
  • Escritorio: 200px
  • Tableta: 150px
  • Teléfono: 100px

Configuración de la columna 3

Espaciado

Por último, pero no menos importante, también agregaremos algunos valores de relleno personalizados a la columna 3.

• Acolchado superior:
  • Escritorio: 200px
  • Tableta: 100 px
  • Teléfono: 50px
• Acolchado inferior:
  • Escritorio: 200px
  • Tableta: 100 px
  • Teléfono: 50px
• Acolchado izquierdo: 8%
• Acolchado derecho: 8%

Agregar módulo de texto a la columna 1

Agregar copia

Es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Agregue un número al cuadro de contenido.

Color de fondo

A continuación, cambie el color de fondo.

• Color de fondo: #efefef

Configuración de texto

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

• Fuente de texto: Montserrat
• Color del texto: #ffffff
• Tamaño del texto: 100px
• Altura de la línea de texto: 1em
• Alineación de texto: centro

Dimensionamiento

Modifique el ancho a continuación.

• Ancho: 150px

Espaciado

Luego, agregue un poco de relleno superior e inferior personalizado.

• Acolchado superior: 20px
• Acolchado inferior: 20px

Posición

Vuelva a colocar el módulo también.

• Posición: Absoluto
• Ubicación: Abajo a la derecha
• Desplazamiento horizontal: -5%

Agregar módulo de texto a la columna 2

Agregar copia H3 y H4

Pasemos a la segunda columna. Allí, agregaremos un módulo de texto con una copia de H3 y H4.

Configuración de texto

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

• Alineación de texto: centro
• Color del texto: oscuro

Configuración de texto H3

Luego, modifique la configuración del texto H3.

• Fuente del título 3: Playfair Display
• Alineación del texto del encabezado 3: centro
• Tamaño del texto del encabezado 3:
  • Escritorio: 90px
  • Tableta: 70px
  • Teléfono: 60px

Configuración de texto H4

Diseñe también el texto H4.

• Fuente del encabezado 4: Montserrat
• Peso de fuente del encabezado 4: Ligero

Dimensionamiento

Luego, vaya a la configuración de tamaño y aplique un ancho "100%". Esto ayudará con el siguiente paso, que es reposicionar el módulo.

• Ancho: 100%

Posición

Complete la configuración del módulo yendo a la pestaña avanzada y modificando la configuración de posición de la siguiente manera:

• Posición: Absoluto
• Ubicación: Abajo a la izquierda
• Desplazamiento vertical: 20px

Agregar módulo de texto a la columna 3

Agregar contenido de párrafo y H5

A la tercera columna. Agregue un módulo de texto con algo de contenido H5 y de párrafo de su elección.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la fuente en la configuración del texto.

• Fuente de texto: Montserrat

Configuración de texto H5

Diseñe también el texto H5.

• Fuente del encabezado 5: Montserrat
• Peso de fuente del encabezado 5: Negrita
• Tamaño del texto del encabezado 5:
  • Escritorio y tableta: 23px
  • Teléfono: 18px

2. Cambios clave para crear efecto

Sección

Quitar relleno de sección

Ahora que hemos establecido las bases de nuestro diseño, podemos comenzar a crear el efecto de estilos adhesivos personalizados que pudo ver en la vista previa de esta publicación. El primer paso para lograr este efecto es asegurarse de que los valores de relleno superior e inferior de su sección sean cero. Hacer esto nos ayudará a asegurarnos de que tanto la sección como la fila comiencen y terminen en el mismo punto. Esto es importante cuando agregamos la posición fija a nuestra fila en los próximos pasos. Al establecer el límite en la parte inferior de la sección, no dejamos espacio para que la fila se mueva. Sin embargo, la fila se volverá pegajosa durante esos pocos segundos y resaltará los estilos pegajosos cambiados en nuestro diseño.

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

Hilera

Gire la fila pegajosa

Abra la configuración de la fila y gire la fila pegajosa. Como se mencionó en el paso anterior, es importante asegurarse de que el límite inferior fijo de nuestra fila sea la sección. Debido a que no hay espacio entre el final de la fila y el final de la sección, la fila adhesiva permanecerá en su lugar.

• Posición adhesiva: adherirse a la parte superior
• Desplazamiento superior pegajoso: 0px
• Límite inferior pegajoso: sección
• Desplazamiento de elementos pegajosos circundantes: Sí
• Transición de estilos predeterminados y pegajosos: Sí

Color de fondo de fila adhesiva

¡Es hora de comenzar a aplicar algunos estilos pegajosos a nuestros elementos! Comience con el color de fondo de la fila.

• Color de fondo: # 161616

Transición de fila

Para garantizar una transición sin problemas, aumentaremos la duración de la transición en la pestaña avanzada de la fila.

• Duración de la transición: 500 ms
• Curva de velocidad de transición: facilidad

Color de fondo de la columna fija 2

Luego, cambiaremos el color de fondo de la columna 2.

• Color de fondo: # 262626

Módulo de texto en la columna 1

Color de fondo pegajoso

También cambiaremos el color de fondo del Módulo de texto en la columna 1.

• Color de fondo: # ddc7b5

Color de texto fijo

Junto con el color del texto adhesivo.

• Color del texto: # 0a0a0a

Tamaño pegajoso

Y aumentaremos el ancho del módulo en la configuración de tamaño.

• Ancho: 105%

Transición

Estamos asegurando una transición sin problemas modificando la duración de la transición del módulo en la pestaña avanzada.

• Duración de la transición: 500 ms
• Curva de velocidad de transición: facilidad

Módulo de texto en la columna 2

Color de texto fijo

A continuación, tenemos el Módulo de texto en la columna 2. Cambiaremos el color del texto a claro en un estado pegajoso.

• Color del texto: claro

Módulo de texto en la columna 3

Color de texto fijo

Lo mismo ocurre con el módulo de texto en la columna 3.

• Color del texto: claro

3. Clonar sección para reutilizar

Ahora que hemos completado la primera sección, incluido el efecto de cambio de estilos adhesivos, podemos reutilizar esta sección hasta tantas veces como queramos clonándola.

Cambiar todas las copias

Asegúrese de cambiar todas las copias duplicadas.

Agregue un margen superior a la primera sección y un margen inferior a la última sección

Y por último, pero no menos importante, agregaremos un margen superior a la primera sección y un margen inferior a la última sección. Esto nos ayudará a evitar la transición inmediata antes de que las personas comiencen a desplazarse. ¡Eso es todo!

• Margen superior: 200 px

• Margen inferior: 200 px

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 esta publicación, le mostramos cómo ser creativo con las opciones pegajosas de Divi. Más específicamente, hemos utilizado las opciones adhesivas de Divi para cambiar los estilos adhesivos sin agregar movimiento. Tan pronto como las personas se desplazan más allá de cierta parte de su página, los estilos del diseño cambian, lo que resalta esa parte específica de la página. ¡También pudo descargar el archivo JSON gratis! 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.