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


Las fuentes monoespaciadas son un activo encantador para el diseño web. Son especialmente útiles para crear diseños que tengan una simetría y un equilibrio hermosos. Una fuente monoespaciada se compone de letras y caracteres que tienen el mismo ancho (o espacio horizontal). Como tal, proporcionan una estructura consistente y elegante para mostrar texto. Las fuentes monoespaciadas se usan 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 adecuadamente los módulos de texto para posicionar y diseñar fuentes monoespaciadas de maneras 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 # 1: estilo de logotipo

diseños de fuente divi monospaced
diseños de fuente divi monospaced

Comience a construir el diseño # 1

Diseño de fuente monoespaciado # 2: bloques de letras grandes

diseños de fuente divi monospaced

Comienza a diseñar el edificio # 2

Diseño de fuente monoespaciado # 3: CrossWord Puzzle

diseños de fuente divi monospaced

Comienza a construir el diseño # 3

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

Para poner sus manos en 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=wKMf_TzKIa4 (/ incrustar)

Suscríbase 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 Divi Theme 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 (visual builder).
  3. Cargue algunas imágenes simuladas en la biblioteca de medios para utilizarlas en el tutorial. Utilizaremos un logotipo de imagen de 200 px por 200 px del paquete de diseño HVAC, y dos imágenes de fondo (de al menos 1920 px de ancho) tomadas del paquete de diseño 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 # 1: estilo de logotipo

diseños de fuente divi monospaced

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

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

diseños de fuente divi monospaced

Antes de agregar el módulo de texto, vamos a agregar 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 utilizaremos se toma del paquete de diseño HVAC. Asegúrese de que el ícono de la imagen tenga aproximadamente 200 px por 200 px ya que utilizaremos 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: (inserte un icono de imagen de 200 px por 200 px)
  • Tamaño de imagen de fondo: tamaño real
  • Posición de la imagen de fondo: centro

diseños de fuente divi monospaced

Agregar el módulo de texto

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

diseños de fuente divi monospaced

Aquí es donde agregamos el texto con una fuente monoespaciada. El aspecto conveniente de las letras monoespaciadas es que, dado 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 para superponer muy bien el icono de la imagen de fondo.

diseños de fuente divi monospaced

Agregar el diseño de fuente monoespaciado

Divi tiene alrededor de 12 fuentes monoespaciadas diferentes incluidas en el generador de 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: 5vw
  • Espacio entre letras de texto: 1.3em
  • Altura de la línea de texto: 1em

diseños de fuente divi monospaced

Esta combinación de la unidad de longitud vw para el tamaño del texto y la unidad de longitud em para el espaciado 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 espaciado entre letras. Podemos arreglar esto fácilmente agregando un relleno izquierdo igual al valor que agregamos para el espaciado entre letras.

Actualice lo siguiente:

  • Margen: 0px inferior
  • Relleno: 2em arriba, 2em abajo, 1.3em izquierda

diseños de fuente divi monospaced

Cambiar el color de la letra central

Una manera simple de cambiar el color de una letra en Divi es usar las opciones de estilo en línea cuando se usa el generador en la parte frontal.

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

diseños de fuente divi monospaced

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

¡Eso es!

Hacer fila de ancho completo

Necesitamos dejar espacio para que el texto se agregue, así que adelante y haga el ancho completo de la fila abriendo la configuración de la fila y actualizando lo siguiente:

  • Ancho: 100%
  • Ancho Máx .: 100%

diseños de fuente divi monospaced

Resultado final

Aquí esta el resultado final.

diseños de fuente divi monospaced

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ños de fuente divi monospaced

Diseño de fuente monoespaciado # 2: bloques de letras grandes

diseños de fuente divi monospaced

El siguiente diseño muestra la estructura de fuente tipo bloque que es posible con fuentes monoespaciadas. A diferencia de las fuentes regulares (ancho variable), las fuentes monoespaciadas se apilan unas encima de otras para un diseño equilibrado que es moderno y agradable a la vista.

Aquí te explicamos cómo hacerlo.

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

diseños de fuente divi monospaced

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

  • Gradiente de fondo Color izquierdo: # fcd1e5
  • Gradiente de fondo derecho Color: rgba (255,255,255,0)
  • Dirección de degradado: 135 grados
  • Posición de inicio: 50%
  • Posición final: 76%

diseños de fuente divi monospaced

Luego agrega una imagen de fondo. Estoy usando uno del Cake Maker Layout Pack.

diseños de fuente divi monospaced

Agregar ancho de fila

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

  • Ancho: 100%
  • Ancho Máx .: 100%

diseños de fuente divi monospaced

Agregar el módulo de texto

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

diseños de fuente divi monospaced

Luego actualice el contenido del cuerpo con lo siguiente:

dividesignlearnmore

diseños de fuente divi monospaced

Luego peina 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: 15vw
  • Espacio entre letras de texto: 0.16em
  • Altura de la línea de texto: 1em

diseños de fuente divi monospaced

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

diseños de fuente divi monospaced

Espaciado

Después de diseñar el texto, actualice el espacio de la siguiente manera:

  • Margen: 0px inferior
  • Relleno: 0.16em izquierda, 3em derecha

diseños de fuente divi monospaced

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 lo hicimos en el primer ejemplo de diseño anterior en la publicación.

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

diseños de fuente divi monospaced

Cambie el color de la segunda letra a lo siguiente: # f34a43

diseños de fuente divi monospaced

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

diseños de fuente divi monospaced

Diseño final

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

diseños de fuente divi monospaced

Diseño de fuente monoespaciado # 3: CrossWord Puzzle

diseños de fuente divi monospaced

Este último diseño aprovecha las fuentes monoespaciadas para crear un diseño de tipo crucigrama para su texto. Aquí te explicamos cómo hacerlo.

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

diseños de fuente divi monospaced

Antes de agregar cualquier módulo, 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)
  • Gradiente de fondo Color izquierdo:
  • Gradiente de fondo Color correcto:
  • Dirección de degradado: 90 grados
  • Posición de inicio: 25%
  • Posición final: 0%
  • Coloque el gradiente sobre la imagen de fondo: SÍ

diseños de fuente divi monospaced

Configuración de fila

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

  • Ancho: 100%
  • Ancho Máx .: 100%
  • Acolchado: 22vw arriba, 5vw izquierda

diseños de fuente divi monospaced

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.

diseños de fuente divi monospaced

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: 8vw
  • Espacio entre letras de texto: 0.15em
  • Altura de la línea de texto: 1em

diseños de fuente divi monospaced

Duplicar 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.

diseños de fuente divi monospaced

Actualizar el módulo de texto n. ° 2

Después de duplicar el módulo de texto, abra la configuración para el segundo módulo de texto (medio) y cambie el texto del cuerpo 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 izquierda

diseños de fuente divi monospaced

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 de manera uniforme. Y con un ancho igual al tamaño de cada bloque de letras, podemos mover el módulo de texto con incrementos de 1em. Entonces, el margen superior de -3em hará que el texto aparezca exactamente 3 bloques de letras. Y el margen izquierdo de 2em moverá el módulo de texto sobre exactamente 2 bloques de letras a 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 de la caja: 0px
  • Fuerza de desenfoque de sombra de caja: 0px
  • Fuerza de propagación de sombra de caja: 0.08em
  • Color de sombra: #dddddd (igual que el color de fondo)

diseños de fuente divi monospaced

Í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

diseños de fuente divi monospaced

Actualizar el módulo de texto n. ° 3

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

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

  • Margen: -1em arriba, 2em izquierda

diseños de fuente divi monospaced

Diseño final

diseños de fuente divi monospaced

Móvil

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

diseños de fuente divi monospaced

diseños de fuente divi monospaced

Nota: El único elemento que no responde es el icono de 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 esto.

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 pocos toques menores pueden hacer 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 suyas en los comentarios.

¡Salud!