5
(4)

Uno de los elementos que aporta más personalidad a una web es la tipografía.

Dedicar un tiempo a elegir el tipo de letra que quieres para tu marca te puede parecer algo secundario, incluso puedes optar por dejar la tipografía que trae la plantilla por defecto.

Esto es un error, pues la tipografía de una marca la puede definir al completo y hacer que un cliente asocie ese tipo de letra directamente con una marca o un producto.

El tema Divi usa por defecto Open Sans y, en este artículo, vamos a ver paso a paso, dónde y cómo personalizar la tipografía de una web hecha con Divi, así como todos los estilos de tipografías que incluye la plantilla.

Si tu objetivo es ahorrar tiempo y mecanizar la construcción de tu web, en el último apartado te decimos cómo conseguir un pack de 10 combinaciones de tipografías para importar directamente a un diseño con Divi.

¿Dónse se personaliza la tipografía de la plantilla Divi?

Configurar el tipo de letra en la plantilla Divi es muy sencillo e intuitivo.

Lo puedes hacer de forma general para toda la web, en las opciones de la plantilla, o lo puedes hacer de forma concreta para el apartado que desees personalizar, con las opciones de diseño de cada sección.

A continuación te explico cómo hacerlo en cada caso.

Cambiar tipografía general de una web con Divi

Para establecer un tipo de tipografía de forma general en toda la plantilla, sigue estos pasos:

Dirígete a WordPress -> Divi -> Personalizador de temas

dónde cambiar tipo de letra divi

Te aparecerá tu web junto a una barra lateral izquierda con todas las secciones de configuración y diseño. Selecciona Ajustes generales -> Tipografía.

Aquí puedes modificar el tamaño de letra del texto y de la cabecera, la altura de línea, el estilo de letra (mayúscula, minúscula, cursiva o negrita), la fuente y el color.

opciones tipografía con tema divi

 

Recuerda que esta configuración es general y se aplicará tanto a los textos del blog, como a los widgets laterales y los textos de todas las páginas que tengas creadas (Inicio, contacto, tienda, sobre nosotros…)

Cuando configures todas las opciones de tipografía en tu web con Divi, las cuáles puedes ir viendo en pantalla, pulsa en el botón de Guardar cambios.

A continuación te muestro ejemplos de combinaciones de tipografías para un blog con la pantilla Divi:

MONSERRAT + RALEWAY

BLOG CON PLANTILLA DIVI TIPOGRAFÍA

ROBOTO + ROBOTO LIGHT

blog con divi tipo de letra

 RIGHTTEOUS + JUDSON

elegir tipografía de un blog

 YANONE KAFFEESATZ + JOSEFIN SLAB

cómo elegir tipografía web

Si quieres ver todos los estilos de tipografías que puedes utilizar en una web hecha con Divi, echale un ojo a esta web donde además puedes escribir un texto para visualizar como quedará.

Cambiar tipografía de Divi en cada sección individual

Puedes cambiar el tipo y estilo de letra por separado en las secciones y módulos de cada página individual de tu web.

Te pongo el ejemplo de la página de inicio de una web corporativa.

Si entras en la edición de esta página puedes ir personalizando cada módulo uno por uno, seleccionando el estilo de letra que deseas, el tamaño, el color, el interlineado, la separación entre letras…

Estas configuraciones prevalecerán sobre las que hayas establecido anteriormente en las Opciones de plantilla, las cuales permanecerán por defecto en cada apartado siempre que no las modifiques de forma individual.

De esta forma puedes cambiar la tipografía de módulos como títulos, texto, contador de texto, tabla de precios, tienda, blog, anuncio, llamada a la acción, acordeón, formulario de contacto…

¿Y cómo se modifican estos módulos?

Pues muy sencillo. Vamos a ver un ejemplo de cómo modificar la tipografía de un texto en una web con Divi paso por paso.

Para cambiar, por ejemplo, el texto de la siguiente sección de cuatro iconos y texto inferior:

cambiar sección iconos tema divi

Entra en la edición de la página que quieras editar, busca el módulo que vas a modificar, clica sobre el icono de las tres líneas de la izquierda y a continuación en Ajustes avanzados de diseño.

 WordPress -> Editar página -> Editar módulo -> Ajustes avanzados de diseño

dónde personalizar títulos plantilla divi

ajustes diseño tipografía plantilla divi

En este caso, he personalizado la tipografía de la cabecera (título), el tamaño de cabecera, el color de la cabecera, la altura de línea de la cabecera y la tipografía del texto.

A continuación, repito el mismo proceso en los cuatro módulos de Anuncio (icono) y el resultado final se quedaría como en la siguiente imagen.

ajustes diseño texto plantilla divi

En el apartado de Ajustes generales de cada módulo también podrás configurar el texto para que aparezca centrado, a la izquierda o a la derecha, entre otras opciones.

Lo que sí hecho de menos en Divi y que he visto en otras plantillas, es la opción de personalizar los títulos h1, h2, h3. h4. h5 y h6 por separado.

Pack de diseño con Divi y 10 combinaciones de tipografías

Como ya comenté en otra ocasión, una de las grandes ventajas que tiene la plantilla Divi es su Biblioteca, con posibilidad de exportar e importar diseños.

Esto te puede servir, por ejemplo, para descargar las plantillas predefinidas que ofrece Elegant Themes en su web y subirlas a tu Biblioteca. Una vez las subas, las puedes añadir desde el contructor Divi a tu web de forma muy sencilla.

Entre estas plantillas, ofrecen un pack con 10 combinaciones de tipografías ya configuradas en la plantilla.

Para conseguir este pack tan solo tienes que clicar AQUÍ.

Se te descargará un archivo .zip, el cuál debes descomprimir (haciendo doble click) y subir a:

Divi -> Biblioteca Divi -> Importar -> Elegir archivo.

El único archivo que se puede subir desde la Biblioteca Divi es .json. Por eso, cada estilo de tipografía es un archivo diferente:

  • Font Combination #0: Playfair Display + Source Sans Pro
  • Font Combination #1: Roboto Slab + Roboto
  • Font Combination #2: PT Serif + PT Sans
  • Font Combination #3: Lato + Lora
  • Font Combination #4: Montserrat + Crismon Text
  • Font Combination #5: Nunito + Lora
  • Font Combination #6: Droid Sans + Droid Serif
  • Font Combination #7: Lora + Source Sans Prof
  • Font Combination #8: Playfair Display + Open Sans
  • Font Combination #9: PT Sans + Open Sans
  • All.

Elige el que prefieras y se aplicará automáticamente al diseño de la página o entrada que estés editando. También tienes la posibilidad de subir el archivo All.json para subir todas las plantillas a la vez. Se quedarán todas guardadas en la Biblioteca.

plantillas predefinidas tipografía divi

Con estas opciones ya tendrías configurada la tipografía de una web hecha con Divi. Esta no es una configuración complicada pero sí muy importante para la personalización de tu web y de tu marca.

Más abajo en los comentarios puedes compartir qué tipografía usas o cómo la configuras en tu página web con Divi ;).

¿Te ha resultado útil?

¡Danos 5 oks!

Promedio de puntuación 5 / 5. Recuento de votos: 4

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies