• Saltar a la navegación principal
  • Saltar al contenido principal

CarlosMR

Desarrollo web WordPress

  • Tarifas
  • Contactar

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)

Clase CSS  añadida al párrafo destacado utilizando Gutenberg

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.

Codigo CSS en el personalizador de WordPress para las cajas de color

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.

LinkedInTweetFacebookEmail

Interacciones con los lectores

Comentarios

  1. Monica dice

    27/05/2020 a las 11:33

    Hola Carlos, me llamo Mónica y tengo un blog modesto que se llama

    http://www.desayunosymeriendasideales.com

    Estoy profundizando en WordPress para mejorarlo y me ha venido genial tu video.

    Quiero crear una caja de color detras del texto que sea igual de ancha que la pagina web. No sé si me podrías dar algun consejillo.

    Mil gracias
    Un abrazo.

    Responder
    • carlosmr dice

      27/05/2020 a las 14:16

      Buenas Mónica,

      Si lo que quieres es que ocupe el ancho completo de la web es un poco más complejo.
      Imagina que tu web es una caja, dentro de esa caja está la página que estás viendo que ocupa un poco menos y dentro tu párrafo.
      El problema es que no puedes hacer que el párrafo ocupe más que la página en sí.

      La única solución sería trabajar los estilos del tema que utilizas para poder hacer lo que comentas.

      Responder
  2. Luis dice

    03/01/2022 a las 22:28

    Me ha servido mucho, muchas gracias!!.

    Responder

Trackbacks

  1. Aprende gutenberg #31 - Aprende gutenberg dice:
    21/07/2019 a las 21:24

    […] Comenzamos el repaso semanal con un artículo del blog de CarlosMR en el que nos explica cómo crear cajas de color en WordPress con Gutenberg. […]

    Responder

Deja una respuesta Cancelar la respuesta

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

También tengo una Newsletter

Aquí, mediante historias, te cuento errores comunes en negocios
online para que no los cometas en tu proyecto.

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

Carlos MR © 2019-2023 · Aviso legal · Hecho con por Carlos MR

╳

Utilizamos cookies para ofrecerte la mejor experiencia en nuestra web.

Puedes aprender más sobre qué cookies utilizamos o desactivarlas en los ajustes.

Share this ArticleLike this article? Email it to a friend!

Email sent!
Carlosmr.com
Powered by  GDPR Cookie Compliance
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.