Tipografía apilada para crear 5 diseños de encabezado únicos en Divi

La tipografía apilada es una técnica fácil y eficaz para crear hermosos diseños de títulos en Divi. La tipografía a menudo se usa estrictamente como un elemento de diseño abstracto de formas que realmente no contribuyen al contenido leído por los motores de búsqueda. Pero también puede ser creativo con el diseño de títulos reales (h1, h2, etc.) con algunas técnicas Divi.

En este tutorial, usaré Divi para crear 5 diseños de encabezados diferentes con tipografía apilada. Con suerte, podrá utilizar estos diseños como inspiración para sus propios diseños de encabezados.

Empecemos.

Vistazo

Aquí hay un vistazo a los 5 diseños.

Diseño # 1

Diseño # 2

Diseño # 3

Diseño # 4

Diseño # 5

Empezando

Vamos a construir estos diseños desde cero. Entonces, para comenzar, cree una nueva página, asigne un título a su página e implemente Visual Builder. Seleccione la opción "Construir desde cero" y estará listo para comenzar a construir.

Para simplificar el proceso de creación de cada uno de los 5 diseños, duplicaré secciones para adelantarme al próximo diseño. Por lo tanto, sería mejor crear estos diseños en orden comenzando por el primero.

Diseño de encabezado n. ° 1

Para este primer diseño, le mostraré cómo apilar verticalmente el texto del encabezado y centrarlo en el medio de la fila. También voy a agregar dos capas de degradado (una en la sección y otra en la fila) sobre la imagen de fondo para dar una superposición blanca semitransparente equilibrada que se mezcla perfectamente con los fondos de página en blanco. El resultado es sutil pero muy único y limpio.

Antes de agregar nuestro módulo de texto, primero ocupémonos de la configuración de la sección y la fila. Esto facilitará mucho el ajuste del módulo más adelante.

Vaya a la configuración de la sección y actualice lo siguiente:

Agrega una imagen de fondo (al menos 1920 px de ancho)
Color de degradado de fondo a la izquierda: #ffffff
Gradiente de fondo Color derecho: rgba (255,255,255,0)
Colocar degradado sobre la imagen de fondo: SÍ

A continuación, actualice la configuración de la fila de la siguiente manera:

Color de degradado de fondo a la izquierda: rgba (255,255,255,0)
Gradiente de fondo Color derecho: #ffffff
Ancho personalizado: 100%
Relleno personalizado: 0px superior, 0px inferior

Ahora podemos agregar nuestro módulo de texto a la columna central de nuestra fila de tres columnas. Luego actualice la configuración del módulo de texto de la siguiente manera:

Reemplace el contenido simulado en el cuadro de contenido con un encabezado h2 que diga "diseño" como este:

<h2>design</h2>

Luego actualice el resto de la configuración de la siguiente manera:

Fuente del encabezado 2: Cairo
Peso de fuente del encabezado 2: Regular
Estilo de fuente del título 2: mayúsculas (TT)
Tamaño del texto del encabezado 2: 8vw
Ancho: 58% (escritorio), 16% (tableta), 18% (teléfono inteligente)
Alineación del módulo: centro
Margen personalizado: -10vw superior, -10vw inferior

Los valores de ancho personalizados combinados con el tamaño del texto del encabezado de 8vw son la clave para hacer este diseño. El ancho personalizado aprieta el texto para que cada letra se apile una encima de la otra. El valor del porcentaje de ancho cambia drásticamente en la tableta porque el tamaño de la columna que contiene el módulo de texto pasa de ser 1/3 a ancho completo. Establecer el texto del encabezado en una unidad de longitud vw (ancho de la ventana gráfica) permitirá que el texto se adapte perfectamente al tamaño de la ventana del navegador.

Finalmente, terminemos el diseño con un borde en el lado derecho e izquierdo.

Ancho del borde derecho: 4px
Ancho del borde izquierdo: 4px

Aquí esta el resultado final.

Diseño de encabezado n. ° 2

Para el siguiente ejemplo, voy a modificar un poco el diseño para que el texto del encabezado se parta por la mitad y se apile en lugar de que cada letra se apile individualmente. También voy a agregar un subtítulo debajo del encabezado principal para otra mirada.

En el cuadro de contenido, agregue el siguiente encabezado h3:

<h3>our process</h3>

Luego agregue un fondo blanco al módulo:

Color de fondo: #ffffff

En la pestaña de diseño, actualice lo siguiente:

Tamaño del texto del encabezado 2: 10vw
Ancho: 100% (escritorio), 32% (tableta), 33% (teléfono inteligente)
Fuente del encabezado 3: Ubuntu Condensed
Alineación del texto del encabezado 3: centro
Tamaño del texto del encabezado 3: 32 px (escritorio), 20 px (tableta), 16 px (teléfono inteligente)

Luego, actualice el espaciado del módulo de texto para que responda mejor en el dispositivo móvil:

Margen personalizado (tableta): -5vw superior, -10vw
Margen personalizado (smartphone): -5vw superior, -12vw

Ahora saque el degradado de fondo en la sección y en la fila.

Luego agregue un poco de relleno a su fila actualizando la siguiente configuración de fila:

Relleno personalizado (escritorio): 5vw superior, 5vw inferior
Relleno personalizado (tableta): 0vw superior, 0vw inferior

Aquí esta el resultado final.

Diseño de encabezado n. ° 3

Esta vez vamos a desplazar el encabezado hacia la izquierda y volver a apilar cada letra verticalmente. Luego, cambiaré la fuente y le daré a la fila un borde a juego para complementar los bordes del módulo.

Duplique la segunda sección de diseño y luego actualice la configuración del módulo de la siguiente manera:

Primero elimine el encabezado h3 en el cuadro de contenido.

Fuente del título 2: Ubunto Condensed
Tamaño del texto del encabezado 2: 6vw
Ancho: 54% (escritorio), 16,4% (tableta), 17,5% (teléfono inteligente)
Alineación del módulo: izquierda (predeterminado)

Para ajustar para dispositivos móviles, actualice el siguiente espaciado:

Margen personalizado (tableta): -15vw inferior
Margen personalizado (smartphone): -17vw inferior

Ahora vaya a la configuración de la fila y actualice lo siguiente para obtener el espaciado correcto.

Acolchado personalizado: 2vw superior, 2vw inferior, 10vw izquierdo

Luego, agregue un borde a la fila para complementar el borde del módulo.

Ancho del borde superior: 4px
Ancho del borde inferior: 4px

Ahora todo lo que queda por hacer es arrastrar nuestro módulo a la columna izquierda de la fila.

mira el resultado final.

Diseño de encabezado n. ° 4

Para el último diseño de encabezado, haré que el encabezado apilado esté completamente alineado a la izquierda y luego agregaré algo de color y un efecto de sombra de cuadro genial.

Primero actualice la configuración de la fila para deshacerse del relleno izquierdo.

Luego actualice la configuración del módulo de texto para incluir lo siguiente:

Color de fondo: # 5b7796
Color del texto: claro
Fuente del encabezado 2: Cairo
Estilo de fuente del título 2: predeterminado
Tamaño del texto del encabezado 2: 10vw

Tamaño del texto del texto: 5vw
Acolchado personalizado: 2vw superior, 2vw inferior, 4vw izquierda, 4vw derecha

Restaure los estilos de borde a los valores predeterminados y luego actualice la nueva configuración de borde de la siguiente manera:

Ancho del borde derecho: 0.2em
Color del borde derecho: #ffffff

Ancho del borde inferior: 0.2em
Color del borde derecho: #ffffff

Ahora, como puede notar, el valor de 0.2em para el borde puede parecer pequeño. Esto se debe a que el valor em se basa en el valor de la fuente del cuerpo, que cambiamos a 5vw específicamente por esta razón. Dado que queremos que el ancho del borde se ajuste junto con el tamaño de nuestro encabezado, debemos darle a nuestro texto del cuerpo un valor de unidad de longitud vw que se adaptará al tamaño del navegador.

Ahora démosle una sombra de caja para un bonito efecto de cuadrícula rota.

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: 20px
Posición vertical de la sombra del cuadro: 20px
Color de sombra: # 5b7796
Posición de la caja de sombra: Sombra exterior

Luego actualice el tamaño del módulo para dispositivos móviles.

Ancho: 50% (escritorio), 13% (tableta), 16% (teléfono inteligente)

Para un último paso, saque el relleno y el borde de su fila.

Entonces mira el resultado final.

Diseño de encabezado n. ° 5

Para este último diseño de encabezado, simplemente vamos a ajustar un poco el espaciado para ampliar el módulo de texto. Esto creará un diseño similar al diseño de encabezado n. ° 2.

Primero, abra el módulo de texto y agregue el siguiente texto debajo de su encabezado h2:

<h3>our process</h3>

Luego actualice la configuración de diseño de la siguiente manera:

Estilo de fuente del título 2: mayúsculas (TT)
Ancho: 94% (escritorio), 29% (tableta), 29% (teléfono inteligente)

Luego actualice el espaciado de la siguiente manera:

Margen personalizado: -8vw superior, -5vw inferior
Acolchado personalizado: 4vw superior, 4vw inferior

Aquí esta el resultado final.

Sensible

El truco para que estos diseños se vean bien en dispositivos móviles es ajustar el tamaño y los márgenes del módulo de texto para escalar con la ventana del navegador cada vez más pequeña. Entonces, si algo no se escala correctamente, es posible que deba ajustar estas propiedades para sus propios fines. Así es como se verán los diseños en el móvil.

Pensamientos finales

Espero que los 5 diseños de encabezados de este tutorial al menos ofrezcan buenos puntos de partida para sus propios diseños. Como era de esperar, el diseño funciona mejor para títulos más cortos (una palabra), ya que el texto se apilará verticalmente. Pero hay toneladas de elementos de diseño que se pueden agregar para hacer que estos diseños sean realmente únicos. Siéntase libre de explorar diferentes fuentes, colores y bordes para personalizarlo.

Para obtener más inspiración, consulte este diseño de texto vertical. Y también puede que le guste aprender a crear texto lateral y vertical con un enfoque CSS más personalizado.

Espero tener noticias tuyas en los comentarios.

¡Salud!