Como crear cajas de color en WordPress con Gutenberg

En este tutorial aprenderás a crear cajas de color en WordPress utilizando unicamente Gutenberg y unas lineas de código CSS. Este tipo de párrafos de colores nos permiten destacar contenidos de nuestro blog de una forma muy elegante.

Para poder hacerlo solo necesitamos seguir los siguientes pasos:

Agregamos la clase CSS al párrafo que queremos destacar

Para ello tenemos que hacer clic en el párrafo, desplegar la opción Avanzado a la derecha y añadir la clase que queramos al párrafo como en la imagen.

Para mi ejemplo yo he elegido crear la clase “parrafo-azul” (Sin las comillas)

Añadimos el código CSS en el personalizador de WordPress

Ahora que el párrafo cuenta con una clase nos queda añadir el código CSS para que el párrafo tenga algo especial. Vamos a añadir este código en la sección Apariencia > Personalizar, en donde pone CSS adicional.

.parrafo-azul{
	background-color: #31A4C6;
	color: white;
	padding: 15px;
	border-radius: 5px;
}

Para elegir un color puedes seleccionar el código RGB en una herramienta como la de HTMLColorCodes. Ten en cuenta que “parrafo-azul” es la clase que yo elegí, si tu elegiste otra deberás cambiarla.

Con darle a publicar una vez lo tengas se guardará.

Puedes usar este truco en todos los párrafos que quieres sin tener que volver a copiar este último código en el personalizador de WordPress.

Recuerda que si cambias de tema el código CSS del personalizador de WordPress se perdería, por lo cual te recomiendo o bien tener una copia y recordarlo o bien utilizar un archivo CSS externo, utilizar un Child Theme (Tema hijo) o utilizar un plugin de CSS para evitar que estos cambios puedan perderse.

Si te ha parecido interesante este artículo te recomiendo echarle un vistazo al blog, seguramente encuentres algo de tu interés.

Espero haberte sido de ayuda y si te ha servido estaría genial que compartieras este tutorial con alguien a quien le pueda interesar. Muchas gracias y hasta la próxima.