Si usas el tema Divi, y yo mismo lo utilizo en muchas de mis webs y de clientes, a pesar de sus enormes ventajas hay algunos pequeños inconvenientes. Uno de ellos es que no permite de manera rápida y sencilla definir un tamaño de encabezados según el dispositivo.
El resultado es que – especialmente – los encabezados H2, de los más utilizados en entradas y páginas, se ven genial en ordenadores de sobremesa, con pantallas grandes, incluso en tabletas, pero son muy pequeños por defecto en teléfonos móviles.
Es más, para ponerlo aún peor, resulta que los encabezados H3 de Divi se ven más grandes que los H2 en móviles, lo que es una incongruencia de estilo y de jerarquía.
El problema viene derivado porque en los ajustes de personalización de Divi no existen opciones para aplicar estilos diferentes a los distintos encabezados, sino un ajuste general para cabeceras, que heredan en proporción el resto de encabezados, y sin tener en cuenta desde qué dispositivo se visualizarán.
Ahora bien, esto no es del todo cierto, pues hay maneras de personalizar cada encabezado, ya sea mediante módulos o patrones, como explico en detalle en esta guía:
Cómo personalizar los encabezados h1, h2, h3, h4, h5, h6 con Divi
Pero ¿y si solo quiero personalizar el encabezado H2 en móviles? ¿tengo que ir personalizando cada módulo o patrón según la guía?
En realidad no, puedes realizar un cambio rápido, añadiendo unas líneas de CSS desde la sección de «CSS adicional» del mismo personalizador de temas o desde la pantalla general de opciones de Divi, lo que prefieras, que sería así:
/* Cambiar tamaño de H2 de Divi en móviles */
@media screen and (max-width: 767px) {
.et_pb_post h2 {
font-size: 30px!important;
}
}Lo que hace este código es que, mediante jQuery, para pantallas de un ancho máximo de 767 píxeles, aplica un tamaño de fuente de 30 píxeles a los encabezados H2 (.et_pb_post h2), da igual lo que tengas configurado en el personalizador de temas.
Esto, por supuesto, puedes cambiarlo, ya sea definiendo un ancho máximo diferente, un tamaño de fuente a tu gusto, o incluso cambiando a qué encabezado se aplicará el cambio.
Publica los cambios y ya lo tienes, unos encabezados H2 en móviles de un tamaño decente, sin tener que abrir el constructor Divi ni tener que hacer montones de clics en sus opciones.
La diferencia entre el antes y el después es notable…
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
