Entre las muchas cosas que puedes personalizar con el tema Divi hasta el más mínimo detalle de manera sencilla y obvia no están los encabezados (h1, h2, h3, h4 , h5, h6).
Hay varios sitios donde puedes personalizar los encabezados, pero en principio cuesta encontrar dónde hacerlo para cada encabezado, no para todos en su conjunto.
Pero sí, sí que se pueden personalizar los encabezados, solo hay que rebuscar un poco, y hay varias maneras de hacerlo.
¿Por qué debería personalizar los encabezados?
No es obligatorio, y de hecho debes ser en cierto modo austero en los cambios de diseño, para que al menos tengan cierta coherencia y relación entre las partes de lo que es todo un conjunto de aspecto visual de tu web, pero sí es fundamental poder controlar los tamaños, incluso en ocasiones tipografía y colores de los encabezados, principalmente por 2 motivos:
- Legibilidad – Facilitar la lectura de tus contenidos deber ser siempre una prioridad, y si un encabezado – por ejemplo – no se distingue bien del texto normal, tus visitantes pueden confundir tus textos.
- Accesibilidad – No todo el mundo tiene una vista perfecta, y ofrecer tipografías de mayor tamaño pueden ayudar a estas personas en particular, y casi siempre a todas, pues más grande siempre se lee mejor ¿verdad?
- Para no caer en la tentación de sustituir a lo bruto todos los H2 por H1 porque nos gusta más el tamaño, por ejemplo, con lo que estaríamos probablemente destrozando el SEO de nuestros contenidos por una mera decisión visual.
Son suficientes motivos, y de importancia, como para que le dediques unos minutos a aprender a personalizar los distintos encabezados ¿no te parece?
Personalizar los encabezados de Divi desde el personalizador
Lo primero que buscará cualquier usuario será tratar de modificar los encabezados globalmente, y se puede, desde el personalizador de temas. Es sencillo, y realmente funciona, solo tienes que ir a Apariencia → Personalizar o Divi → Personalizador de temas, como prefieras.
En ambos casos se abre el personalizador de WordPress, en el que, para personalizar los encabezados, debes ir a la sección de Ajustes generales → Tipografía y, una vez ahí identificar los deslizadores para modificar las cabeceras, que es como está traducido Divi al español.
Como verás en la captura anterior, ahí tienes varias posibles personalizaciones de las «cabeceras»:
- Tamaño del texto de cabecera
- Espacio entre letras de cabecera
- Altura de línea de cabecera
- Estilo de fuente de cabecera (negrita – cursiva – transformar a mayúsculas – subrayado)
- Fuente de la cabecera
- Color de texto de la cabecera
Lo malo es que no especifica a qué cabeceras se refiere, si al H1, al H2, a ninguna en particular o a todas.
¿Sabes la respuesta?
¡Efectivamente, se refiere a todas las cabeceras, o encabezados!
Así que cualquier cambio que hagas en esta sección se aplicará a todos los encabezados, y en especial en lo que se refiere al tamaño de los encabezados, si lo cambias, se cambiará en todas proporcionalmente, con una diferencia de 4 píxeles del H1 al H4 y de 2 píxeles del H4 al H6.
Por defecto, los encabezados en Divi tienen estos tamaños:
- H1 – 30 px
- H2 – 26 px (4 menos)
- H3 – 22 px (4 menos)
- H4 – 18 px (4 menos)
- H5 – 16 px (2 menos)
- H6 – 14 px (2 menos)
Y el número que ves por defecto en estos ajustes (30) es el asignado al H1.
Entonces ¿qué pasa si cambio el tamaño del texto de cabecera en el personalizador de temas?
Pues que Divi cambiará progresivamente los tamaños de los encabezados, a partir del número que asignes a esa sección, que como te he comentado antes es el tamaño por defecto del H1.
Así, si, por ejemplo, subimos el valor de 30 a 40, los tamaños de texto de los encabezados quedarían así:
- H1 – 40 px
- H2 – 34 px (6 menos)
- H3 – 29 px (5 menos)
- H4 – 24 px (5 menos)
- H5 – 21 px (3 menos)
- H6 – 18 px (3 menos)
Y si lo bajamos, de 30 a 28, quedaría tal que así:
- H1 – 28 px
- H2 – 24 px (4 menos)
- H3 – 20 px (4 menos)
- H4 – 16 px (4 menos)
- H5 – 14 px (2 menos)
- H6 – 13 px (1 menos)
Si te fijas, prácticamente respeta la proporción de disminución de los tamaños por defecto, salvo en el último tramo, el H6.
Y sí, el resto de parámetros (altura de línea, estilo, fuente, etc.) se aplican automáticamente a todos los encabezados.
Bueno, pues ya hemos visto un modo de personalizar los encabezados en Divi, pero ¿y si quiero aplicar tamaños o incluso colores y fuentes diferentes a cada encabezado?
Pues aquí tenemos que cambiar de método, porque el personalizador de temas no nos permite hacerlo.
Personalizar los encabezados de Divi en cada módulo
Da igual lo que hayas configurado en el personalizador, el verdadero potencial de Divi ya sabrás que está en los módulos del maquetador visual, donde – aquí sí – puedes personalizar absolutamente todo, sin restricciones.
Por ejemplo, en la misma página que estamos usando, si editamos el módulo (que es un módulo de texto), dejando en el personalizador los valores de tipografía por defecto, puedes cambiar todo lo que quieras en cada encabezado desde la pestaña de diseño del módulo, en la sección llamada «Texto del subtítulo» (odio la traducción de Divi, en cada parte llaman diferente a los mismos elementos).
Y aquí sí puedes ir modificando para cada encabezado (subtítulo/cabecera/título) la fuente, estilos, colores, tamaños, de todo. Y no una configuración de aspecto igual para todos los dispositivos, sino incluso diferente según el dispositivo. Este es el gran potencial de Divi.
Así que, aquí sí que puedes personalizar a tope todo lo que quieras de tus encabezados. Solo tiene un problema, que puedes ver en la siguiente captura.
Como puedes comprobar, los cambios solo se aplican a ese módulo de texto en concreto, no a ningún otro, ni siquiera de la misma página, que seguirán teniendo los mismos ajustes de encabezados por defecto.
Personalizar los encabezados de Divi en varios módulos a la vez
Una solución parcial al problema anterior está en seleccionar varios módulos al mismo tiempo, mediante May+clic en el maquetador visual. De este modo, al abrir los ajustes uno de los módulos en realidad estás configurando los ajustes de ambos.
Es un truco buenísimo, que te ahorrará mucho tiempo, en este tipo de ajustes y en muchos otros.
Personalizar los encabezados de Divi mediante presets
Pero todo lo anterior, como habrás comprobado, no es suficiente, sobre todo si quieres que tu personalización favorita se aplique a más módulos, no solo a los de una página. Para esto tenemos los «presets»
El primer paso es guardar tus ajustes como un preset, desde la misma configuración del módulo.
Despliega la flecha de «Preset» y haz clic en «Create new preset from current styles». A continuación ponle un nombre, y si quieres haz que los ajustes se apliquen como preset por defecto para todos los módulos del mismo tipo.
Guarda los cambios del módulo y del maquetador visual. A partir de este momento tendrás disponible el preset para aplicarlo a cualquier otro módulo de texto.
Con el resultado esperado…
¡He roto Divi!
Igual no te pasa, pero al guardar los presets, en la instalación de pruebas donde preparo estos tutoriales, de repente el Divi se volvió medio loco y se puso al revés.
Igual es una chorrada y a ti no te pasa, pero si te ocurre simplemente sal del constructor visual y todo vuelve a la normalidad … hasta que vuelvas a guardar un preset.
Avisaré en soporte de Divi, de todos modos, por si le ha pasado a más gente, aunque aún no sé el motivo, si es por algo que está mal en la versión actual de Divi, algo del servidor donde lo tengo a pruebas o qué.
Preset por defecto
Ahora, si además marcaste la casilla de «Assign preset to default» la cosa se pone aún mejor.
Da igual si lo hiciste cuando creaste el preset, o posteriormente desde el icono de la ruedecita que verás al seleccionarlo.
Los ajustes del preset se aplicarán a todos los módulos de texto en toda la web, como te indicará el mensaje de advertencia.
A partir de este momento, automáticamente, todos los módulos de texto de tu web se verán con los ajustes de personalización de tu preset.
Por supuesto, puedes crear presets personalizados, y hacerlos globales, para cualquier otro módulo que quieras personalizar.
¿Mucho mejor, verdad?
Pero aún puedes personalizar los encabezados en Divi de otro modo, aún más rápido.
Personalizar los encabezados de Divi con CSS
Pues sí, en realidad el modo más rápido y efectivo de personalizar los encabezados de Divi es mediante código CSS.
Así que te propongo animarte con ello y probar, por ejemplo, a añadir estas líneas de CSS a tu web, desde Apariencia → Personalizar → CSS adicional.
/* Personalizar encabezados Divi */
h1 {
color: red;
font-weight: normal;
font-size: 4em;
font-family: Times;
text-transform: uppercase;
}
h2 {
color: #f78009;
font-weight: normal;
font-size: 2.5em;
font-family: Verdana;
text-transform: uppercase;
}
h3 {
color: #36b3ed;
font-weight: normal;
font-size: 34px;
font-family: Verdana;
text-transform: lowercase;
}
h4 {
color: #f22ed1;
font-weight: normal;
font-size: 30px;
font-family: Serif;
text-transform: none;
}
h5 {
color: #f22ed1;
font-weight: normal;
font-size: 28px;
font-family: Serif;
text-transform: none;
}
h6 {
color: #f22ed1;
font-weight: normal;
font-size: 26px;
font-family: Serif;
text-transform: none;
}
Son cambios, quizás, demasiado vistosos y variados, pero para que se vea claramente el efecto que provocarás.
Además, los cambios de CSS que hagas aquí se aplicarán absolutamente en todas partes, en todos los módulos de Divi. Allí donde aparezca un encabezado, salvo que apliques tú modificaciones posteriores a alguno concreto, se mostrará como definas en el CSS.
Los elementos del CSS, que puedes cambiar, son estos:
color– Color de la fuentefont-weight– El peso de la fuente, o sea, negrita, clara, normal, etc.font-size– El tamaño de la fuente (que puedes poner en px, em o %, tienes varios ejemplos en el código)font-family– La familia de fuentes a aplicar, específica (Verdana) o genérica (Serif)text-transform– Transformación del texto (todo mayúsculas, todo minúsculas, normal, tienes varios ejemplos en el código)
Bueno, hay más, pero con esto tienes un panorama casi completo de cambios ¿no te parece?
Bueno, y hasta aquí el tutorial de cómo cambiar o personalizar los encabezados, cabeceras, subtítulos, títulos en Divi, o como quieras llamarlos.
Espero que te animes a personalizar una parte tan importante de tu web
La entrada Cómo personalizar los encabezados h1, h2, h3, h4, h5, h6 con Divi la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.
0 Commentaires