Añadir fondo de color en encabezados de WordPress

30 de agosto - 2019

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.

Suscríbete:

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.

fondo de color en encabezados de WordPress desde bloque de párrafo
Bloque de párrafo del editor de WordPress

Cambiar las etiquetas HTML

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

Editar como HTML en Gutenberg
Cambiar a vista en HTML

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

Modificar etiquetas HTML
Cambio de etiquetas HTML

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.

Corregir bloque en Gutemberg
Corregir bloque 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.

Bloque de encabezado con fondo de color

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.

Configuración del encabezado

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

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento