Índice
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
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.
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
ROBOTO + ROBOTO LIGHT
RIGHTTEOUS + JUDSON
YANONE KAFFEESATZ + JOSEFIN SLAB
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:
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
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.
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.
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 ;).
Hola!!! Segui tus instrucciones pero no se cambia la fuente. Tenia una fuente que subi yo, la elimine y ahi se cambio a arial pero ahora intento cambiarlo siguiendo los pasos y no lo logro. ¿Como puedo hacer?
Hola, tengo la plantilla divi comprada por vida, y tengo una duda, cambiando la tipografia como indicais en esta web, me modifica el footer y algun texto mas de la web, pero los bloques que ya tenia, no se han modificado, y mantienen los titulos y descripciones de palas de padel, el mismo formato que tenia,
Mi pregunta, hay algun comando o zona donde insertar codigo que sirva para toda la web entera y no tenga que ir modulo a modulo cambiandolo?
Hola que tal, un artículo realmente muy interesante, me gustaría saber como actualizar todas las tipografías de un sitio web de forma automática como mencionas en la última sección. Subo el JSON a la biblioteca, pero me importa una página, no me actualiza las tipografías de todo mi blog.
Muchas gracias
Hola,
enhorabuena por la iniciativa y por este post que es muy útil.
Me gustaría saber cómo se pueden personalizar los tipos de letra y estilos de los widgets de la barra lateral. Concretamente en mi blog muestro las categorías de los artículos, pero no se distingue entre categorías padres e hijas. Me gustaría al menos poder tabular las hijas hacia la derecha levemente.
Gracias!
¡Hola Diego!
En el caso de un blog, la tipografía del sidebar se personaliza en las opciones generales, igual que comento en el post. Es decir, en Divi -> Personalizador de temas -> Ajustes generales -> Tipogrofía. Esta será la tipografía general de toda la web.
La plantilla Divi solo te permite personalizar el estilo de un sidebar de forma individual cuando se trata de un módulo de «Barra Lateral» que añades con el constructor a una página.
En el caso de las categorías padres e hijas, si se editan correctamente en Entradas -> Categorías (seleccionando la categoría padre en la pestaña «superior») y marcando la casilla «mostrar jerarquía» en la edición del Widget, la plantilla las tabula ligeramente hacia la derecha.
Espero que te sirva de ayuda.
Bienvenido y gracias por tu comentario 😉
Buenas,
estoy intentando cambiar el tamaño por defecto de la tipografía en Divi, y me es imposible. Está por defecto a 11. Lo pongo a 14 tanto en los ajustes como en los ajustes del módulo de texto, pero cuando voy a escribir en el editor, sigue a 11.
¿Sabéis a qué puede deberse?
Gracias. Un saludo.