La forma en que diseñas tus páginas es un reflejo directo de tu marca. Es por eso que en algún momento de su lluvia de ideas de diseño, es posible que desee encontrar y agregar elementos de diseño únicos a su sitio web que ayudarán a generar un patrón en todas las páginas. Una forma única de resaltar la identidad de su sitio web es mediante el uso de títulos de sección fijos. Estos títulos de secciones fijas seguirán el comportamiento de navegación de sus visitantes al colocarse en la parte superior de su navegador. En este tutorial, le mostraremos cómo crear títulos de secciones adhesivas usando Divi y sus opciones adhesivas. Los títulos de las secciones adhesivas se enfatizarán menos una vez que los visitantes se desplacen, pero serán lo suficientemente visibles para que reconozcan la sección en la que se encuentran. ¡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á descargarlos 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!
Suscríbete a nuestro canal de Youtube
1. Crear diseño de sección
Agregar nueva sección
Espaciado
Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y aplique un poco de relleno superior e inferior.
- Relleno superior: 200px
- Relleno inferior: 200px
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: 100%
- Ancho máximo: 100%
Agregar módulo de texto a la columna
Agregar contenido H2
Ahora, agregue un módulo de texto a la columna de la fila e inserte algún contenido H2 de su elección.
Configuración de texto H2
Pase a la pestaña de diseño del módulo y modifique la configuración de texto H2 de la siguiente manera:
- Título 2 Fuente: Poppins
- Encabezado 2 Peso de fuente: semi negrita
- Encabezado 2 Alineación de texto: Centro
- Título 2 Color del texto: #000000
- Título 2 Tamaño del texto:
- Escritorio: 20vw
- Tableta y teléfono: 28vw
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%
Agregar módulo de texto a la columna 2
Agregar contenido
Luego, agregue un primer módulo de texto a la columna 2 con algún contenido descriptivo 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: Poppins
- Color del texto: #000000
- Tamano del texto:
- Escritorio: 2vw
- tableta: 4vw
- Teléfono: 5vw
- Espaciado entre letras de texto: -0.1vw
- Altura de línea de texto: 1,6 em
Dimensionamiento
Modifique también la configuración de tamaño en diferentes tamaños de pantalla.
- Ancho:
- Escritorio: 70%
- Tableta y teléfono: 90%
- Alineación del módulo: Centro
Agregar módulo de imagen a la columna 2
Cargar imagen
En el siguiente módulo, que es un módulo de imagen. Sube una imagen de tu elección.
Dimensionamiento
Pase a la pestaña de diseño del módulo y fuerce el ancho completo en la imagen.
- Forzar ancho completo: Sí
Espaciado
Agregue un poco de margen superior también.
- Margen superior: 100px
Agregar copia
A continuación, tenemos un módulo de botones. Agregue alguna copia de su elección.
Configuración de botones
Cambie la configuración de los botones del módulo en consecuencia:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón:
- Escritorio: 1.5vw
- Tableta: 2.5vw
- Teléfono: 3.5vw
- Color del texto del botón: #ffffff
- Color de fondo del botón: #f6223e
- Ancho del borde del botón: 0px
- Radio del borde del botón: 0px
- Fuente del botón: Poppins
- Mostrar icono de botón: Sí
- Ubicación del icono del botón: Izquierda
- Solo mostrar icono al pasar el mouse sobre el botón: No
Espaciado
Y complete la configuración del módulo agregando algunos valores de relleno personalizados en diferentes tamaños de pantalla.
- Acolchado superior:
- Computadora de escritorio y tableta: 3%
- Teléfono: 5%
- Acolchado inferior:
- Computadora de escritorio y tableta: 3%
- Teléfono: 5%
- Relleno izquierdo:
- Escritorio: 5vw
- tableta: 8vw
- Teléfono: 12vw
- Relleno derecho:
- Escritorio: 5vw
- tableta: 8vw
- Teléfono: 12vw
Agregar módulo de texto a la columna 2
Agregar contenido de lista de viñetas
El próximo y último módulo que agregaremos a esta columna es otro módulo de texto. Agregue los elementos de la lista de su elección al cuadro de contenido.
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: Poppins
- Color del texto: #000000
- Tamano del texto:
- Escritorio: 2vw
- tableta: 4vw
- Teléfono: 5vw
- Espaciado entre letras de texto: -0.1vw
- Altura de línea de texto: 1,6 em
Configuración de texto de lista ordenada
Realice también algunos cambios en la configuración del texto de la lista ordenada.
- Color de texto de la lista ordenada: #ff2340
- Altura de línea de lista ordenada: 1,6 em
- Tipo de estilo de lista ordenada: romano superior
- Posición de estilo de lista ordenada: exterior
Agregue color de texto negro a los elementos de la lista individualmente en el cuadro de contenido
Luego, volveremos a poner los elementos en negro navegando hasta el cuadro de contenido y agregando manualmente un color de texto negro a cada uno de los elementos de la lista.
Dimensionamiento
A continuación, cambiaremos la configuración de tamaño en diferentes tamaños de pantalla.
- Ancho:
- Escritorio: 70%
- Tableta y teléfono: 90%
- Alineación del módulo: Centro
Espaciado
También aplicaremos algunos márgenes personalizados y valores de relleno a la configuración de espaciado del módulo.
- Margen superior: 50px
- Relleno izquierdo: 5%
- Relleno derecho: 5%
2. Aplicar efecto adhesivo al título de la sección
Agregar efecto adhesivo a la fila
Ahora que hemos establecido la base de nuestro diseño, es hora de hacer que suceda el efecto que pudo ver en la vista previa de esta publicación. Para hacer eso, convertiremos toda nuestra primera fila en fija abriendo la configuración de la fila, yendo a la pestaña avanzada y aplicando la siguiente configuración:
- Posición pegajosa: Stick to Top
- Límite pegajoso inferior: Sección
- Desplazamiento de los elementos pegajosos circundantes: Sí
- Transición de estilos predeterminados y fijos
Modificar índice de fila Z
Para asegurarnos de que la fila fija permanezca debajo de la segunda fila en nuestro diseño, asignaremos un índice z de «1» a nuestra fila fija. Al desplazarse, verá que la fila adhesiva y su Módulo de texto van debajo de los módulos de la segunda fila.
- Índice Z: 1
Agregar el modo de fusión de la columna 2 (fila n.º 2)
Sin embargo, como puede notar en la vista previa de esta publicación, el título de la sección adhesiva está visible en todo momento. Para lograr ese efecto, agregaremos un módulo de combinación a la segunda columna de nuestra segunda fila. Esto ayudará a combinar la fila fija y los módulos de la segunda fila, manteniendo un índice z bajo para la fila fija.
- Modo de fusión: Multiplicar
Cambiar la configuración de texto adhesivo H2
También aplicaremos algunos estilos pegajosos a nuestro módulo de texto en la fila n.º 1. Comience cambiando el color del texto H2 en un estado fijo y aplique también una sombra de texto personalizada.
- Color de texto adhesivo H2: #ffffff
- Título 2 Sombra de Texto: Segunda Opción (Ver Imprimir Pantalla Abajo)
- Título 2 Color de sombra de texto:
- Predeterminado: rgba(0,0,0,0)
- Pegajoso: rgba(0,0,0,0.08)
Cambiar el espaciado del módulo de texto fijo
También cambiaremos la posición del módulo usando un margen izquierdo adhesivo negativo en la configuración de espaciado
- Margen izquierdo fijo: -35 %
Aumentar la duración de la transición del módulo de texto
Y para asegurar una transición sin problemas, aumentaremos la duración de la transición en la pestaña avanzada.
- Duración de la transición: 500ms
3. Sección de reutilización
Sección de clonación
Ahora que tenemos una sección completa, incluido el título de la sección adhesiva, podemos reutilizar la sección completa tantas veces como queramos clonándola.
Cambiar el contenido del título
Asegúrese de cambiar el contenido del título en la primera fila.
Hacer coincidir el tamaño del texto con la longitud del carácter
Dependiendo de cuántos caracteres tenga su nuevo título H2, es posible que desee ajustar el tamaño del texto del encabezado 2.
Cambiar todo el resto del contenido e imágenes
Y, por supuesto, también deberá cambiar el resto del contenido en la sección duplicada. ¡Eso es todo!
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 crear títulos de sección fijos que siguen a sus visitantes a lo largo del diseño que está creando. Este efecto le da a su diseño una dimensión adicional y una transición perfecta. ¡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.