A medida que la tecnología sigue evolucionando, el diseño también evoluciona. Más que nunca, puede encontrarse con sitios web que lo dejan asombrado y preguntándose cómo se han creado. Aunque los sitios web que tienen interacciones de desplazamiento no son para todo tipo de negocios, saber cómo hacer un esfuerzo adicional es particularmente útil para dejar una buena impresión. Con Divi , muchas cosas ya son posibles sin tener que tocar una sola línea de código. El tutorial de hoy te ayuda a entender Divi desde otra perspectiva. Le mostraremos cómo combinar las opciones adhesivas de Divi con otras configuraciones integradas para crear transiciones sin esfuerzo. ¡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. Recrear la estructura del diseño
Agregar nueva sección
Espaciado
En la primera parte de este tutorial, nos centraremos en recrear la estructura de diseño dentro de Divi. Luego, en la segunda parte, dedicaremos tiempo a revisar todas las opciones adhesivas para lograr el efecto que puede notar en la vista previa de esta publicación. Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección, vaya a la pestaña de diseño y agregue algo de relleno inferior.
- Acolchado inferior: 100vh
Añadir Fila #1
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar módulos todavía, abra la configuración de la fila, vaya a la pestaña de diseño y cambie la configuración de tamaño en consecuencia:
- Ancho: 90%
- Ancho máximo: 100%
Índice Z
Asigne un índice z a esta fila también.
- Índice Z: 1
Agregar módulo de imagen a la columna
Dejar cuadro de imagen vacío
Es hora de agregar módulos, comenzando con un módulo de imagen. Deje el cuadro de contenido vacío.
Utilice una imagen de fondo en su lugar
Y use una imagen de fondo de su elección en su lugar.
- Tamaño de la imagen de fondo: Portada
Dimensionamiento
Cambia el ancho del módulo a continuación.
- Ancho: 100%
Espaciado
Luego, aplique un relleno superior e inferior personalizado a la configuración de espaciado.
- Acolchado superior: 40vh
- Acolchado inferior: 40vh
Agregar módulo de texto a la columna
Agregar contenido H2
Pasemos al siguiente módulo, que es un módulo de texto que contiene algo de contenido H2 de su elección.
Configuración de texto H2
Cambie la configuración de texto H2 del módulo en consecuencia:
- Título 2 Fuente: Montserrat
- Encabezado 2 Alineación de texto: Centro
- Título 2 Color del texto: #ffffff
- Título 2 Tamaño del texto:
- Escritorio: 10vw
- Tableta: 14vw
- Teléfono: 15vw
- Encabezado 2 Espaciado entre letras: -0.5vw
Dimensionamiento
Asegúrese de que el módulo también sea «100%».
- Ancho: 100%
Posición
Y reposicione el módulo en la pestaña avanzada.
- Posición: Absoluta
- Ubicación: Centro
Añadir Fila #2
Estructura de la columna
A la siguiente fila. Utilice la siguiente estructura de columnas:
Dimensionamiento
Sin agregar módulos todavía, abra la configuración de la fila, vaya a la pestaña de diseño y cambie 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: 100%
Índice Z
Asigne un índice z a esta fila también.
- Índice Z: 2
Columna 1 Espaciado
Complete la configuración de la fila abriendo la configuración de la primera columna y asignando un margen izquierdo y derecho.
- Relleno izquierdo: 5%
- Relleno derecho: 5%
Agregar módulo de texto a la columna 1
Agregar contenido H3
Ahora que la configuración de la fila está en su lugar, es hora de agregar módulos. Agregue un módulo de texto a la columna 1 con algún contenido H3 de su elección.
Configuración de texto H3
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H3 en consecuencia:
- Título 3 Fuente: Montserrat
- Título 3 Estilo de fuente: Subrayado
- Color de subrayado del título 3: #ffffff
- Título 3 Estilo de subrayado: Sólido
- Título 3 Color del texto: #ffffff
- Título 3 Tamaño del texto:
- Escritorio: 4vw
- Tableta y teléfono: 10vw
- Encabezado 3 Espaciado entre letras: -3px
Espaciado
Agregue algo de relleno a la derecha en tamaños de pantalla más pequeños.
- Relleno derecho: 20% (solo tableta y teléfono)
Agregar módulo de texto a la columna 2
Agregar contenido
Agregue otro módulo de texto a la columna 2 con algún contenido descriptivo de su elección.
Color de fondo
Cambia el color de fondo a continuación.
- Color de fondo: #ffffff
Configuración de texto
Luego, modifique la configuración de texto de la siguiente manera:
- Fuente de texto: Pantalla Playfair
- Estilo de fuente de texto: cursiva
- Tamano del texto:
- Escritorio: 1.6vw
- Tableta: 3vw
- Teléfono: 4vw
- Altura de línea de texto: 1,5 em
Espaciado
Aplique también algunos valores de relleno personalizados.
- Acolchado superior: 10vh
- Acolchado inferior: 10vh
- Relleno izquierdo: 10%
- Relleno Derecho: 10%
Agregar copia
El siguiente y último módulo que agregaremos es un módulo de botón a la columna 2. Agregue alguna copia de su elección.
Configuración de botones
Pase a la pestaña de diseño del módulo y cambie la configuración del botón de la siguiente manera:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón:
- Escritorio: 1.2vw
- Tableta: 2.5vw
- Teléfono: 3.5vw
- Color del texto del botón: #000000
- Color de fondo del botón: #ffffff
- Ancho del borde del botón: 0px
- Radio del borde del botón: 0px
- Fuente del botón: Montserrat
- Estilo de fuente del botón: Subrayado
- Color de subrayado del botón: #000000
- Estilo de subrayado del botón: Sólido
Espaciado
Agregue también algunos valores de relleno personalizados.
- Relleno superior: 20px
- Relleno inferior: 20px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Posición
Y reposicione el módulo en la pestaña avanzada.
- Posición: Absoluta
- Ubicación: abajo a la derecha
2. Aplicar efectos pegajosos
Módulo de imagen en la fila #1
Configuraciones adhesivas
Ahora que hemos construido la base de nuestro diseño, es hora de comenzar a aplicar los efectos adhesivos personalizados. Abra el módulo de imagen en la fila n.º 1 y gire el módulo como sigue:
- Posición pegajosa: Stick to Top
- Límite pegajoso inferior: Sección
- Desplazamiento de los elementos pegajosos circundantes: No
Tamaño pegajoso
Una vez que se han aplicado las configuraciones adhesivas, también podemos cambiar los estilos adhesivos de nuestro módulo. Lo primero que haremos será cambiar el ancho en un estado pegajoso.
- Ancho pegajoso: 80%
Espaciado pegajoso
A continuación, modificaremos el relleno adhesivo superior e inferior.
- Acolchado superior pegajoso: 50vh
- Acolchado inferior pegajoso: 50vh
Fondo degradado pegajoso
También aplicaremos un fondo degradado pegajoso a nuestro módulo.
- Color 1: #00336b
- Color 2: rgba(41.196.169,0)
- Tipo de gradiente: lineal
- Dirección del gradiente: 90 grados
- Coloque el degradado sobre la imagen de fondo: Sí
Transición
Y para garantizar una transición sin problemas, aumentaremos la duración de la transición del módulo.
- Duración de la transición: 1500ms
Columna 2 en Fila #2
Configuración fija de la columna 2
A continuación, también convertiremos la segunda columna de nuestra segunda fila en pegajosa.
- Posición pegajosa: Stick to Top
- Desplazamiento superior fijo: 150 px
- Límite pegajoso inferior: Sección
- Desplazamiento de los elementos pegajosos circundantes: No
- Estilos predeterminados y fijos de transición: No
Módulo de texto en columna pegajosa
Color de fondo adhesivo
Ahora que la columna 2 de la fila n.° 2 se ha convertido en fija, podemos aplicar algunos estilos fijos al módulo de texto dentro de esta columna. Comience cambiando el color de fondo en un estado fijo.
- Color de fondo adhesivo: #333333
Color de texto fijo
A continuación, modifique el color del texto en un estado fijo.
- Color de texto fijo: #ffffff
Transición
Y complete la configuración del módulo aumentando la duración de la transición en la pestaña avanzada. ¡Eso es todo!
- Duración de la transición: 1000ms
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, le mostramos cómo combinar superposiciones con las opciones pegajosas de Divi para crear transiciones sin esfuerzo. Una vez que obtenga el enfoque que se utilizó a lo largo de este tutorial, podrá crear infinitas variaciones diferentes. ¡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.