Añadir fondo de color en encabezados de WordPress

El editor de texto Gutenberg de WorPress permite crear páginas y artículos por medio de bloques, cada bloque cuenta con unas propiedades específicas, y si conjugamos algunas de ellas podemos colocar un fondo de color en encabezados de WordPress en h2 a h6 sin necesidad de CSS.

Colocar fondo de color en encabezados de WordPress desde Gutenberg

El proceso es muy sencillo, y podemos hacerlo con todos los encabezados individualmente.

Este proceso es individual y no se replicará automáticamente en el resto de encabezados de la web, para eso tendríamos que aplicar unas reglas CSS.

Escribir el encabezado en un bloque de párrafo

Vamos a escribir el encabezado en un bloque de párrafo normal, el cual añadiremos el color de fondo que queramos desde las opciones de la barra de la derecha.

Cambiar las etiquetas HTML

Editamos el párrafo en formato HTML picando en los tres puntitos que hay en el menú del bloque.

Sustituimos las etiquetas que abren y cierran el párrafo "p" y "/p" por las que corresponden al encabezado "h2" y "/h2" respectivamente.

Para que el editor de WordPress reconozca el cambio hay que picar fuera del bloque en cualquier espacio en blanco.

Aparecerá un mensaje como que el código no es válido, surge porque no concuerda el bloque de párrafo utilizado con la asignación de las etiquetas de encabezado.

Para corregirlo sólo hay que picar en el botón "Resuelve" para que automáticamente nos cambie el bloque a uno de encabezado.

Si no se pone la vista de diseño visual de forma automática la seleccionamos desde el menú de los tres puntitos del bloque.

Configurar el encabezado con fondo de color

Las opciones son muy limitadas, sólo podemos alinear el texto a la derecha, a la izquierda o centrarlo. Y también cambiar el tipo de encabezado de H2 hasta H6 con las opciones de la barra de la derecha.

Con este proceso hay que ajustarse a los condiciones que marca WordPress, y no podemos cambiar el tamaño del contenido si queremos hacerlo más alto o más estrecho.

Si no queremos utilizar CSS esta opción puede sacarnos de del problema de poner un fondo de color en encabezados de WordPress.

Si necesitas algo más personalizado tendrás que echar manos del código CSS, pero eso ya es otra historia.