Hemos visto como en cada upgrade de la plantilla Divi se han ido añadiendo funcionalidades muy prácticas y mejoras muy significativas, pero hay una cosa que ha costado bastantes actualizaciones que podamos gestionarlo de forma directa.

Me refiero 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.

Actualmente, los títulos de Divi se pueden configurar al detalle, 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, lo muestro a continuación.

Veamos cómo hacerlo fácilmente 😉

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

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 y la estructura de este.

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 con CSS y distinguiendo títulos H1, H2, H3, H4, H5 y H6.

Personalización general desde opciones de la plantilla

Habrás visto que en las opciones generales de la plantilla existe un apartado desde el cual 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 de forma general para TODOS los títulos de la cabecera y los 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. Desde aquí, la plantilla asigna un tamaño a cada etiqueta de título basándose en la referencia del H1 que hayas configurado, pero no te permite personalizar desde aquí los títulos por separado.
• 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.

Es por tanto, la mejor forma de personalizar la tipografía global, por ejemplo, de un blog con Divi.

Personalización individual desde los módulos de Divi

Por otro lado, al utilizar los módulos de Divi para construir una página de tu web, como podría ser una Home, una página de venta, una página de servicios, una página de contacto… Podrás diseñar el formato de cada título de forma individual gracias a las opciones que se incluyen dentro de ellos.

Es decir, entrando en la configuración de cada módulo de texto que tengas incluido en el constructor, podrás elegir cómo quieres que se muestre cada título o texto.

Esta opción la añadió Divi en una de sus últimas actualizaciones y era una de las que más falta nos venía haciendo, pues hasta entonces, no se podía personalizar los títulos de forma individual sino global.

Ahora, simplemente entrando en las opciones de diseño del módulo, tendrás una pestaña para Texto y otra para Heading Text.

Cada una de ellas dispone de todos los campos necesarios para poder diseñar los textos de ese módulo en concreto: la tipografía, el grosor, el formato y la alineación de esta, el color, el tamaño del texto, el espacio entre letras, la altura de línea y el efecto de sombra.

Si quieres personalizar los títulos H1, H2, H3, H4, H5 y H6 del módulo, simplemente tendrás que seleccionarlo en la pestaña superior y darle el estilo que quieras de forma individual.

Automáticamente se aplicarán estos estilos al texto que incluyas en el editor con cada etiqueta.

¡Ojo! los cambios no los verás directamente desde el editor de texto del módulo, sino ya en la previsualización real de la página.

Esta configuración que comento solo afectará al módulo en concreto que estés diseñando. Pero ¿y si quieres ahorrar tiempo personalizando los títulos y textos de varios módulos al mismo tiempo?

Hay un truco de Divi que puedes usar y es simplemente clicar con el ratón en todos los módulos de texto que quieras personalizar mientras dejas pulsada la tecla Shift. Ahora modificas uno de ellos y todos los módulos seleccionados adquirirán los mismos cambios.

Recuerda que la personalización por separado de los títulos «sobreescribe» en el módulo que desees, la configuración general de la tipografía en las opciones de plantilla.

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

Por último, hay una forma de personalizar cada escalón de la estructura de los títulos de Divi de forma general para toda la web; con CSS.

De esta forma, personalizas cada etiqueta de títulos H1, H2, H3, H4, H5 y H6 y se aplica al mismo tiempo a todos los títulos de TODA la web.

Para ello, simplemente agrega este código al CSS Personalizado de tu plantilla Divi (en Opciones 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 ejemplo un módulo de Divi, los estilos se sobre escribirá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).

Ahora ya sabes cómo cambiar el titulo H1, H2, H3, H4, H5 y H6 en html para 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.

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.