Blog de Divi en español

Diseña tu propia web con la plantilla y constructor web Divi, de Elegant Themes.

Hemos visto como en cada actualización de la plantilla Divi se han ido añadiendo funcionalidades muy prácticas y mejoras muy significativas, pero hay una cosa que seguimos esperando poder gestionar de forma directa.

Nos referimos a poder personalizar los títulos H1, H2, H3, H4, H5 y H6 de la plantilla Divi, tal y como este constructor web permite gestionar otras tantas funciones básicas.

Pero esta opción se resiste y Divi sigue sin incluirla por defecto, así que si necesitas modificar el tamaño, color o estilo de la tipografía de Divi haciendo distinción entre los diferentes tamaños de títulos o encabezados, tendrás que recurrir a otras formas de hacerlo.

Veamos cómo hacerlo fácilmente 😉

Cómo personalizar los títulos de la plantilla Divi

En este post vamos a ver 3 formas de modificar los títulos o encabezados de Divi:

  1. Personalización general desde opciones de la plantilla.
  2. Personalización individual desde los módulos de Divi.
  3. Personalización general distinguiendo títulos H1, H2, H3, H4, H5 y H6.

Personalización general desde opciones de la plantilla

Si ya has usado alguna vez esta plantilla, habrás visto que en sus opciones generales existe un apartado desde el que personalizar la tipografía general de Divi.

Divi > Personalizador de temas > Ajustes generales > Tipografía

En este apartado podrás modificar el tamaño, el color, el estilo la altura de línea, la fuente y el espacio entre letras, pero SOLO de la cabecera y del cuerpo de texto.

  • Cabecera: se refiere a los títulos. La plantilla engloba todos los títulos en conjunto, de manera que lo que modifiques aquí afectará a la vez a los títulos H1, H2, H3, H4. H5 y H6 de toda la plantilla, ya sean páginas estáticas o posts del blog. La plantilla asigna un tamaño a cada etiqueta de título pero no te permite personalizar estos tamaños, basándose siempre en la referencia del H1 que hayas configurado.
  • Cuerpo de texto: se refiere a los párrafos. Aquí se incluyen todos los textos que haya dentro de la web que no contengan una etiqueta de título. Igualmente afecta tanto a páginas estáticas como a posts del blog.

personalizar títulos plantilla wordpress

Personalización individual desde los módulos de Divi

Por otro lado, si estás utilizando los módulos de Divi para construir tu web, dentro de ellos se incluyen opciones de configuración de los textos. Esta configuración solo afectará al módulo en sí.

personalizar tipografía módulos divi

Probablemente, la plantilla Divi no incluya la personalización por separado de los títulos porque con la ayuda de los módulos puedes “sobreescribir” la configuración general de la tipografía en el bloque que desees.

De igual manera, aunque dentro de cada módulo puedes personalizar “cabecera” o “texto”, no es posible distinguir entre los distintos tamaños de cabecera H1, H2, H3, H4, H5 y H6.

Así que si quieres estabecer diferentes títulos sin tocar el código, tendrás que seguir añadiendo módulos del constructor, lo cual sobrecargará la web innecesariamente.

Personalización general distinguiendo títulos H1 H2 H3 H4 H5 y H6

Antes de nada, ¿por qué añadir encabezados H1, H2, H3, H4, H5 y H6 a tu web?

  1. En primer lugar porque al estructurar adecuadamente un texto, ayudas al lector a encontrar más fácil la información que necesita y a entenderla mejor.
  2. En segundo lugar porque es muy beneficioso para el SEO de tu web, ya que los rastreadores tienen muy en cuenta la calidad de la legibilidad de tus textos.

Sin embargo, como ya hemos comentado antes, la plantilla Divi no permite personalizar por separado cada escalón de estos títulos.

Y la solución es muy sencilla. Simplemente agrega este código al CSS Personalizado de tu pantilla Divi (en Opcines del tema) y modifica los estilos a tu gusto:

h1 {
  color: #6c2eb9;
  font-weight: normal;
  font-size: 40px;
  font-family: Arial;
  text-transform: uppercase;
}
h2 {
  color: #3c1b66;
  font-weight: normal;
  font-size: 35px;
  font-family: Arial;
  text-transform: uppercase;
}
h3 {
  color: #443963;
  font-weight: normal;
  font-size: 30px;
  font-family: Arial;
  text-transform: lowercase;
}
h4 {
  color: #4f4866;
  font-weight: normal;
  font-size: 25px;
  font-family: Arial;
  text-transform: lowercase;
}
h5 {
  color: #656172;
  font-weight: normal;
  font-size: 20px;
  font-family: Arial;
  text-transform: lowercase;
}
h6 {
  color: #747377;
  font-weight: normal;
  font-size: 18px;
  font-family: Arial;
  text-transform: lowercase;
}

IMPORTANTE: Con este código personalizas de forma general los títulos de toda la plantilla, pero si configuras otras funciones de tipografía, como por ejempo un módulo de Divi, los estilos se sobreescribirán.

Ahora, para personalizar a tu gusto y acorde al estilo de tu web estos títulos, modifica las propiedades de cada uno de ellos:

  • color: añade aquí el color en el que desees que se muestre cada título H1, H2, H3, H4, H5 y H6.
  • font-weight: define si quieres que este título se muestre en negrita (bold), normal (normal)…
  • font-size: indica el tamaño en píxeles en el que quieres mostrar cada título.
  • font-family: indica la fuente para cada encabezado (Arial, Helvetica, Sans-serif…)
  • text-transform: establece si quieres mostrar cada encabezado en letras minúsculas (lowercase) o en letras mayúsculas (uppercase).

Estas son las propiedades básicas para modificar los títulos de cabecera de la plantilla Divi, pero podrías utilizar solo aquellos que necesites o añadir algunas más.

Este es un ejemplo de cómo quedarían diseñados los distintos títulos de cabecera al aplicar el código anterior.

divi cómo cambiar títulos

Necesitarás personalizar los títulos H1, H2, H3, H4, H5 y H6 de la plantilla Divi por separado cuando tengas una web con bastante texto o cuando tengas un blog, por ejemplo. Esta configuración es habitual encontrarla incluida en otros constructores y en otras plantillas, pero por el momento Divi no la incluye.

También te puede interesar...

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
¡GRATIS!Esta guía con 7 Trucos de diseño para Divi

¡GRATIS!

Esta guía con 7 Trucos de diseño para Divi

Obtén, de forma totalmente gratuita, estos trucos de diseño que la plantilla Divi no incluye y crea webs únicas.

¡Perfecto! Ahora VE A TU BANDEJA DE ENTRADA y abre el email que te he enviado desde DIVESP. ¡Gracias!