Índice
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?
- 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.
- 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:
- Personalización general desde opciones de la plantilla.
- Personalización individual desde los módulos de Divi.
- 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:
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.
¿ es posible volver h2 un texto dentro de un botón de elementor?
Como puedo agregar una fuente diferente a las que me ofrece el sistema?
Hola!
Una duda del método 2 (PERSONALIZACIÓN INDIVIDUAL DESDE LOS MÓDULOS DE DIVI).
No encuentro la opción de guardar y añadir a la biblioteca. Entonces, cuando selecciono un texto y le digo que sea un header 3, no me respeta los cambios que le he dicho al anterior cuadro de texto y he marcado como header 3. Gracias
Hola, yo tengo un problema estoy haciendo el seo de mi web y me indica que todos los títulos son H1, intente cambiarlos pero al momento de guardar los cambios se vuelven a poner en H1; a que se debe esto???
Hola,
pues yo tengo un problema que no sé qué hacer. resulta que en el blog donde pone que hay <> me aparece el <> no sé cómo quitarlo para que se un párrafo o algo.
Gracias
Hola,
pues yo tengo un problema que no sé qué hacer. resulta que en el blog donde pone que hay ‘2 comentarios» me aparece en H1 no sé cómo quitarlo para que se un párrafo o algo.
Gracias
Hola Lucía, el título de «Comentarios» lo tendrás que modificar con CSS. Un saludo!
Hola. He pegado el código que das en CSS personalizado de un módulo de texto de DIVI, en la parte de elemento principal, pero no lo pilla. Siguen apareciendo las características que el tema trae por defecto.
Muchas gracias de antemano por tu atención
Muy buen blog
Hola Ignacio!
Con las nuevas versiones de Divi ya es posible personalizar los títulos desde el mismo módulo sin tener que añadir CSS.
Se personalizan en la parte de «Diseño» -> «Heading Text», seleccionando la pestaña del título que deseas modificar (H1, H2, H3…) y añadiendo los valores que le quieras dar.
En cuanto pueda actualizaré el post 😉
Gracias!
Hola, soy nuevo con el tema de las etiquetas, cuando personalizo desde el divi un texto y le agrego la etiqueta H3 por ejemplo ¿Debería cambiar el tamaño o las características del texto?