Cómo crear títulos de sección adhesivos con Divi

La forma en que diseña sus páginas es un reflejo directo de su 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 adhesivos. Estos títulos de secciones adhesivas seguirán el comportamiento de navegación de sus visitantes al pegarse en la parte superior de su navegador. En este tutorial, le mostraremos cómo crear títulos de sección adhesivos utilizando las opciones adhesivas de Divi. 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.

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á descargarlos 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!

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: 200 px
• Acolchado inferior: 200px

Agregar fila n. ° 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 fila y modifique la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 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

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

• Fuente del título 2: Poppins
• Peso de fuente del encabezado 2: Semi negrita
• Alineación del texto del encabezado 2: centro
• Color del texto del encabezado 2: # 000000
• Tamaño del texto del encabezado 2:
  • Escritorio: 20vw
  • Tableta y teléfono: 28vw

Agregar fila n. ° 2

Estructura de la columna

Agregue otra fila justo debajo de la anterior usando 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 de la canaleta: 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

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

• Fuente de texto: Poppins
• Color del texto: # 000000
• Tamano del texto:
  • Escritorio: 2vw
  • Tableta: 4vw
  • Teléfono: 5vw
• Espaciado de letras de texto: -0.1vw
• Altura de la línea de texto: 1.6em

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

Pasemos al 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: 100 px

Agregar módulo de botones a la columna 2

Agregar copia

A continuación, tenemos un módulo de botones. Agregue una 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
• Mostrar solo el icono al pasar el mouse por 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%
• Acolchado izquierdo:
  • Escritorio: 5vw
  • Tableta: 8vw
  • Teléfono: 12vw
• Acolchado 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 siguiente 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

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

• Fuente de texto: Poppins
• Color del texto: # 000000
• Tamano del texto:
  • Escritorio: 2vw
  • Tableta: 4vw
  • Teléfono: 5vw
• Espaciado de letras de texto: -0.1vw
• Altura de la línea de texto: 1.6em

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 lista ordenada: # ff2340
• Altura de la línea de lista ordenada: 1.6em
• Tipo de estilo de lista ordenada: romana superior
• Posición de estilo de lista ordenada: Exterior

Agregar color de texto negro a los elementos de la lista individualmente en el cuadro de contenido

Luego, volveremos los elementos a 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 valores de margen y relleno personalizados a la configuración de espaciado del módulo.

• Margen superior: 50 px
• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

2. Aplicar efecto adhesivo al título de la sección

Agregar efecto pegajoso a la fila

Ahora que hemos establecido las bases 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, volveremos toda nuestra primera fila adhesiva abriendo la configuración de la fila, yendo a la pestaña avanzada y aplicando la siguiente configuración:

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

Modificar el índice Z de la fila

Para asegurarnos de que la fila adhesiva permanezca debajo de la segunda fila en nuestro diseño, asignaremos un índice de "1" a nuestra fila adhesiva. Al desplazarse, verá la fila adhesiva y su módulo de texto debajo de los módulos de la segunda fila.

• Índice Z: 1

Agregar 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 es visible en todo momento. Para lograr ese efecto, agregaremos un módulo de mezcla a la segunda columna de nuestra segunda fila. Esto ayudará a mezclar la fila pegajosa y los módulos de la segunda fila, sin dejar de mantener un índice z bajo para la fila pegajosa.

• Modo de fusión: multiplicar

Cambiar la configuración de Sticky H2 Text

También aplicaremos algunos estilos pegajosos a nuestro Módulo de texto en la fila # 1. Comience cambiando el color del texto H2 en un estado adhesivo y aplique también una sombra de texto personalizada.

• Color de texto pegajoso H2: #ffffff
• Sombra de texto del encabezado 2: segunda opción (consulte la pantalla de impresión a continuación)
• Color de la sombra del texto del encabezado 2:
  • Por defecto: 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 pegajoso 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: 500 ms

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 hasta 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 la cantidad de caracteres que tenga su nuevo título H2, es posible que desee ajustar el tamaño del texto del encabezado 2.

Cambiar todos los demás contenidos e imágenes

Y, por supuesto, también deberá cambiar el resto del contenido en la sección de duplicados. ¡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 pegajosas de Divi. Más específicamente, le mostramos cómo crear títulos de sección adhesivos que sigan 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 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.