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. Te mostraremos cómo usar Diviy sus opciones pegajosas para cambiar estilos pegajosos 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 pasan de largo, 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 construya! 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
Descarga el diseño 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 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 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 utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo, abra la configuración de la fila y modifique la configuración de tamaño en consecuencia:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 2580px
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno 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: 100px
- Teléfono: 80px
- Acolchado inferior:
- Escritorio: 200px
- Tableta: 100px
- Teléfono: 80px
Índice Z
Aumente el índice z de esta columna también. Más adelante en el tutorial, crearemos una superposición horizontal entre las columnas 1 y 2. Aumentaremos el índice z para garantizar 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: 100px
- Teléfono: 50px
- Acolchado inferior:
- Escritorio: 200px
- Tableta: 100px
- Teléfono: 50px
- Relleno izquierdo: 8%
- Relleno 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
Cambia el color de fondo a continuación.
- Color de fondo: #efefef
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente del texto: Montserrat
- Color del texto: #ffffff
- Tamaño del texto: 100px
- Altura de 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.
- Relleno superior: 20px
- Relleno inferior: 20px
Posición
Vuelva a colocar el módulo también.
- Posición: Absoluta
- Ubicación: abajo a la derecha
- Desplazamiento Horizontal: -5%
Agregar módulo de texto a la columna 2
Agregar copia H3 y H4
Vamos a la segunda columna. Allí, agregaremos un módulo de texto con algo de copia H3 y H4.
Configuración de texto
Pase 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 de texto H3.
- Título 3 Fuente: Playfair Display
- Encabezado 3 Alineación de texto: Centro
- Título 3 Tamaño del texto:
- Escritorio: 90px
- Tableta: 70px
- Teléfono: 60px
Configuración de texto H4
Dale estilo al texto H4 también.
- Título 4 Fuente: Montserrat
- Encabezado 4 Peso de la fuente: Light
Dimensionamiento
Luego, vaya a la configuración de tamaño y aplique un ancho de «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: Absoluta
- Ubicación: abajo a la izquierda
- Desplazamiento vertical: 20px
Agregar módulo de texto a la columna 3
Agregar H5 y contenido de párrafo
A la tercera columna. Agregue un módulo de texto con H5 y contenido de párrafo de su elección.
Configuración de texto
Pase a la pestaña de diseño del módulo y cambie la fuente en la configuración del texto.
- Fuente del texto: Montserrat
Configuración de texto H5
Dale estilo al texto H5 también.
- Epígrafe 5 Fuente: Montserrat
- Encabezado 5 Peso de fuente: Negrita
- Título 5 Tamaño del texto:
- Escritorio y tableta: 23px
- Teléfono: 18px
2. Cambios clave para crear efecto
Sección
Eliminar relleno de sección
Ahora que hemos establecido la base 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. La fila, sin embargo, se volverá adhesiva durante esos pocos segundos y resaltará los estilos adhesivos modificados en nuestro diseño.
- Relleno superior: 0px
- Relleno inferior: 0px
Fila
Fila de giro 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 fijo inferior 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 pegajosa: Stick to Top
- Desplazamiento superior pegajoso: 0px
- Límite pegajoso inferior: Sección
- Desplazamiento de los elementos pegajosos circundantes: Sí
- Estilos predeterminados y fijos de transición: Sí
Color de fondo de la fila fija
¡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 fluida, aumentaremos la duración de la transición en la pestaña avanzada de la fila.
- Duración de la transición: 500ms
- Curva de velocidad de transición: Facilidad
Color de fondo de la columna fija 2
Luego, cambiaremos el color de fondo de la columna adhesiva 2.
- Color de fondo: #262626
Módulo de texto en la columna 1
Color de fondo adhesivo
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 pegajoso.
- 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 al modificar la duración de la transición del módulo en la pestaña avanzada.
- Duración de la transición: 500ms
- 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 para que se ilumine en un estado fijo.
- 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 fijos, podemos reutilizar esta sección tantas veces como queramos clonándola.
Cambiar todo Copiar
Asegúrese de cambiar todas las copias duplicadas.
Agregue algo de margen superior a la primera sección y 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: 200px
- Margen inferior: 200px
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 adhesivas 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 una determinada 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 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.