Cómo crear 3 impresionantes diseños de fuentes monoespaciadas en Divi

Las fuentes monoespaciadas son un recurso delicioso para el diseño web. Son especialmente útiles para crear diseños que tengan una hermosa simetría y equilibrio. Una fuente monoespaciada se compone de letras y caracteres que tienen el mismo ancho (o espacio horizontal). Como tales, brindan una estructura consistente y elegante para mostrar texto. Las fuentes monoespaciadas se utilizan ampliamente en la codificación por este motivo.

En este tutorial, crearemos tres impresionantes diseños de fuentes monoespaciadas en Divi. Veremos cómo personalizar correctamente los módulos de texto para colocar y diseñar fuentes monoespaciadas de formas bastante únicas, y mucho más.

Empecemos.

Vistazo

Aquí hay un vistazo rápido a los diseños que crearemos en este tutorial.

Diseño de fuente monoespaciado n. ° 1: estilo de logotipo

Comience el diseño de edificios n. ° 1

Diseño de fuente monoespaciado n. ° 2: bloques de letras grandes

Empiece a construir el diseño n. ° 2

Diseño de fuente monoespaciado n. ° 3: CrossWord Puzzle

Comience el diseño de edificios n. ° 3

Descargue el diseño de diseños de fuentes monoespaciados GRATIS

Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo 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

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active el tema Divi instalado (o el complemento Divi Builder si no usa el tema Divi).
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Sube algunas imágenes simuladas a la biblioteca de medios para usarlas en el tutorial. Usaremos un logotipo de imagen de 200 px por 200 px del paquete de diseño de HVAC y dos imágenes de fondo (de al menos 1920 px de ancho) tomadas del Paquete de diseño de Cake Maker y el Paquete de diseño de mejoras para el hogar.

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Diseño de fuente monoespaciado n. ° 1: estilo de logotipo

Comencemos con un diseño de fuente simple monoespaciado que resalte el equilibrio simétrico de las letras. Debido a que las letras están espaciadas uniformemente, las fuentes monoespaciadas son ideales para gráficos y logotipos. Aquí hay un ejemplo rápido de cómo puede incorporar la fuente monoespaciada con un icono de imagen simple para crear un gráfico agradable.

Primero, cree una sección regular con una fila de una columna.

Antes de agregar el módulo de texto, agregaremos un fondo a la sección. El fondo consistirá en una imagen de icono centrada con un fondo gris oscuro. La imagen del icono que usaremos está tomada del paquete de diseño de HVAC. Asegúrese de que el icono de la imagen sea de aproximadamente 200 px por 200 px, ya que usaremos el tamaño real como imagen de fondo.

Abra la configuración de la sección y actualice lo siguiente:

• Color de fondo: # 121212
• Imagen de fondo: [insertar icono de imagen de 200 px por 200 px]
• Tamaño de la imagen de fondo: tamaño real
• Posición de la imagen de fondo: Centro

Agregar el módulo de texto

Una vez que termine la sección, agregue un módulo de texto a la fila de una columna.

Aquí es donde agregamos el texto con una fuente monoespaciada. El aspecto conveniente de las letras monoespaciadas es que, debido a que cada letra tiene el mismo ancho, puede centrar fácilmente la letra central del texto en la página. Esto facilitará la alineación con el icono de imagen de fondo que agregamos a la sección.

Abra la configuración del módulo de texto y actualice el contenido del cuerpo con la palabra "elegante". En realidad, puede usar casi cualquier palabra que tenga un número impar de letras para que tengamos una letra central que se superponga bien al icono de la imagen de fondo.

Adición del diseño de fuente monoespaciado

Divi tiene alrededor de 12 fuentes monoespaciadas diferentes incluidas en el generador Divi entre las que podemos elegir. Para verlos, podemos hacer clic para seleccionar una fuente de texto e ingresar “mono” en la barra de búsqueda. Esto mostrará la lista de fuentes monoespaciadas disponibles.

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

• Fuente de texto: Droid Sans Mono
• Tamaño del texto del texto: 5vw
• Espaciado de letras de texto: 1.3em
• Altura de la línea de texto: 1em

Esta combinación de la unidad de longitud vw para el tamaño del texto y la unidad de longitud em para el espacio entre letras y la altura de la línea asegurará que el texto responda perfectamente a todos los tamaños de navegador.

Espaciado

Una vez que la fuente esté lista, agregue algo de espacio al módulo de texto para asegurarse de que el texto esté perfectamente centrado. Podemos ver que el texto está un poco descentrado debido al espacio entre letras. Podemos solucionar esto fácilmente agregando un relleno a la izquierda igual al valor que agregamos para el espaciado de letras.

Actualice lo siguiente:

• Margen: 0px inferior
• Acolchado: 2em arriba, 2em abajo, 1.3em izquierdo

Cambiar el color de la letra central

Una forma sencilla de cambiar el color de una sola letra en Divi es utilizar las opciones de estilo en línea cuando se utiliza el generador en la interfaz.

Simplemente resalte la letra que desea cambiar y haga clic en el icono de color del texto en la barra de menú.

Luego agregue el siguiente código de color: rgba (248, 142, 96, 0.54)

¡Eso es todo!

Hacer fila de ancho completo

Necesitamos hacer algo de espacio para el texto que se agregará, así que continúe y haga que la fila sea de ancho completo abriendo la configuración de la fila y actualizando lo siguiente:

• Ancho: 100%
• Ancho máximo: 100%

Resultado final

Aquí esta el resultado final.

Y si lo desea, puede agregar un espacio para el carácter central en el texto para usar el icono de imagen de fondo para el espacio vacío. Así es como se vería.

Diseño de fuente monoespaciado n. ° 2: bloques de letras grandes

Este próximo diseño muestra la estructura de fuente en forma de bloque que es posible con fuentes monoespaciadas. A diferencia de las fuentes regulares (de ancho variable), las fuentes monoespaciadas se apilan unas sobre otras para lograr un diseño equilibrado que es moderno y agradable a la vista.

He aquí cómo hacerlo.

Cree una nueva sección regular con una fila de una columna.

Antes de agregar cualquier módulo, actualice la sección con un diseño de fondo de la siguiente manera:

• Color de degradado de fondo a la izquierda: # fcd1e5
• Gradiente de fondo Color derecho: rgba (255,255,255,0)
• Dirección del gradiente: 135 grados
• Posición inicial: 50%
• Posición final: 76%

Luego agregue una imagen de fondo. Estoy usando uno del paquete de diseño de Cake Maker.

Agregar ancho de fila

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

• Ancho: 100%
• Ancho máximo: 100%

Agregar el módulo de texto

Una vez que tenga una fila de ancho completo, agregue un módulo de texto a la fila.

Luego actualice el contenido del cuerpo con lo siguiente:

<p>dividesign<a href="#">learnmore</a></p>

Luego, diseñe el texto del párrafo de la siguiente manera:

• Fuente de texto: Overpass Mono
• Estilo de fuente de texto: TT
• Color del texto del texto: # 2e298f
• Tamaño del texto del texto: 15vw
• Espaciado de letras de texto: 0.16em
• Altura de la línea de texto: 1em

Agregaremos un estilo diferente al texto del enlace de la siguiente manera:

• Estilo de fuente de enlace: subrayado
• Color del texto del enlace: # 2e298f
• Tamaño del texto del enlace: 3.5vw
• Espaciado de letras de enlace: 0em

Espaciado

Después de aplicar estilo al texto, actualice el espaciado de la siguiente manera:

• Margen: 0px inferior
• Acolchado: 0.16em a la izquierda, 3em a la derecha

Después de eso, guarde la configuración. Luego, use las opciones de estilo en línea para cambiar el color de las letras como hicimos en el primer ejemplo de diseño anteriormente en la publicación.

Para hacer esto, resalte las cuatro letras superiores y cambie el color a blanco.

Cambie el color de la segunda letra por el siguiente: # f34a43

Por último, resalte las primeras cinco letras en el texto del enlace ("aprender") y actualice el color al siguiente: # f34a43.

Diseño final

Ahora veamos el resultado final en una página en vivo.

Diseño de fuente monoespaciado n. ° 3: CrossWord Puzzle

Este último diseño aprovecha las fuentes monoespaciadas para crear un diseño tipo crucigrama para su texto. He aquí cómo hacerlo.

Primero, cree una nueva sección regular con una fila de una columna.

Antes de agregar módulos, abra la configuración de la sección y agregue una imagen de fondo con un degradado de la siguiente manera:

• Imagen de fondo: [insertar imagen]
• Color de degradado de fondo a la izquierda:
• Gradiente de fondo Color derecho:
• Dirección del gradiente: 90 grados
• Posición inicial: 25%
• Posición final: 0%
• Colocar degradado sobre la imagen de fondo: SÍ

Configuración de filas

Una vez que haya terminado el fondo de la sección, abra la configuración de la fila con un nuevo ancho y algo de espacio.

• Ancho: 100%
• Ancho máximo: 100%
• Acolchado: 22vw superior, 5vw izquierdo

Agregar módulo de texto

Después de actualizar la fila, agregue un nuevo módulo de texto a la fila con la palabra "mono" como contenido del cuerpo.

Luego actualice el diseño del módulo de texto de la siguiente manera:

• Fuente de texto: Rubik Mono One
• Color del texto del texto: # faac00
• Tamaño del texto del texto: 8vw
• Espaciado de letras de texto: 0.15em
• Altura de la línea de texto: 1em

Duplica el módulo de texto

Para acelerar el diseño de nuestros próximos dos bloques de texto, dupliquemos el módulo de texto que acabamos de diseñar dos veces para que tenga un total de tres módulos de texto apilados uno encima del otro.

Actualizar el módulo de texto n. ° 2

Una vez que hayamos duplicado el módulo de texto, abra la configuración del segundo módulo de texto (en el medio) y cambie el cuerpo del texto a la palabra "fuentes".

Luego actualice lo siguiente:

• Cuerpo: "fuentes"
• Color de fondo: #dddddd
• Color del texto del texto: # 930565
• Ancho: 0.86em
• Margen: -3em arriba, 2em a la izquierda

Observe cómo cambiar el ancho del módulo de texto hace que el texto se muestre verticalmente. Y debido a que es una fuente monoespaciada, se apilan uniformemente. Y con un ancho igual al tamaño de cada bloque de letras, podemos mover el módulo de texto con incrementos de 1em. Por lo tanto, el margen superior de -3em hará que el texto suba exactamente 3 bloques de letras. Y el margen izquierdo de 2em moverá el módulo de texto exactamente sobre bloques de 2 letras hacia la derecha. Esto facilita la colocación de los elementos en un diseño de crucigrama como este.

Sombra de la caja

Agreguemos una sombra de cuadro para aumentar el tamaño del fondo detrás del módulo de texto.

• Box Shadow: ver captura de pantalla
• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de caja: 0px
• Fuerza de propagación de la sombra de la caja: 0.08em
• Color de sombra: #dddddd (igual que el color de fondo)

Índice Z

Para asegurarse de que este bloque de texto permanezca por encima de los otros módulos de texto, actualice el índice z de la siguiente manera:

• Índice Z: 11

Actualizar el módulo de texto n. ° 3

Una vez que el módulo de texto n. ° 2 esté completo, abra la configuración del tercer módulo de texto y cambie el texto del cuerpo a la palabra "espaciado".

Luego mueva el módulo en su lugar usando nuestros mágicos valores de margen em:

• Margen: -1em arriba, 2em a la izquierda

Diseño final

Móvil

Debido a que estos diseños se construyen usando unidades de longitud vw y em, el diseño seguirá siendo consistente en todos los tamaños de navegadores. Así es como se ve el diseño en la pantalla de la tableta y el teléfono.

Nota: El único elemento que no responde es el icono de la imagen de fondo en el primer diseño. Sin embargo, puede agregar fácilmente una imagen de fondo más pequeña en la tableta y el teléfono para solucionar este problema.

Pensamientos finales

Quizás lo mejor de crear diseños de fuente monoespaciados en Divi es la versatilidad de los estilos de fuente. Solo unos pequeños toques pueden marcar una gran diferencia. Además, las aplicaciones son bastante prácticas para cualquier sitio web.

¿Cuál de estos tres ejemplos te pareció más prometedor?

Espero tener noticias tuyas en los comentarios.

¡Salud!