• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Añade gradientes de color personalizados al editor de bloques

Aprende en este tutorial cómo añadir una paleta de gradientes de color personalizada al editor de bloques en tu tema de WordPress mediante código.

WordPress 5.4 introdujo bastantes funcionalidades nuevas y, entre ellas, la opción de usar gradientes de color en algunos bloques.

Por ahora solo se puede utilizar en el bloque de botón y el de fondo, pero lo más probable es que se vaya extendiendo a más bloques con el tiempo.

En dichos bloques, el editor de WordPress ofrece una paleta de gradientes por defecto.

¿El problema?

Que seguramente no estará en consonancia con la paleta del tema.

Paleta de gradientes de color por defecto en editor de WordPress.

Por suerte, esta funcionalidad viene acompañada de una API que te permite definir una paleta de gradientes de color personalizada de forma sencilla.

En su momento te expliqué cómo limitar la paleta de colores del editor en un tema, porque te ayuda a mantener una coherencia estética y le facilita el uso a tu cliente.

Y esta vez no va a ser menos, porque los gradientes «molan mucho» si los sabes usar bien, pero son muy «peligrosos» si no (¡hola, clientes flipados!). 😜

Por eso creo que cualquier child theme moderno que se precie debería implementarlo.

Además, es muy sencillo. Ya verás. 😉 

Snippet para añadir una paleta de gradientes de color personalizada al editor de WordPress

Añade el siguiente fragmento en functions.php:

Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.

Usando este snippet, introduces 5 paletas de gradientes de color en el editor.

Que conste que son más de las que yo añadiría, pero quería que vieras un ejemplo generoso. 😉

Paleta de gradientes de color personalizada en el editor de WordPress.

Por supuesto, te invito a modificarlas por las que tú desees. Para ello solo tendrías que cambiar el CSS de 'gradient'.

En este caso he utilizado el text-domain de Genesis Sample ('genesis-sample') pero puedes usar este snippet en cualquier tema de WordPress.

Y recuerda, la idea es que crees gradientes que respeten la paleta de colores del tema. Esta herramienta te puede venir muy bien para crearlos y copiar el CSS.

Si te fijas en las capturas de pantalla, este fragmento no impide que el usuario pueda modificar los colores, por lo que el usuario seguirá teniendo la opción de escoger cualquier otro.

Sin embargo, si te interesa, también puedes asegurarte de que solo usen los que tú hayas creado.

Conclusiones

La llegada de los gradientes de color al editor de WordPress abre muchas posibilidades. Quizás demasiadas…

Por eso, definir una paleta de gradientes de color personalizada en un tema ayuda a mantener la coherencia visual de la web y le facilita su uso a tu cliente.

Además, como acabas de ver, puedes introducirla en cualquier plantilla de WordPress siguiendo unos pasos muy sencillos.  

¿Alguna duda? Te leo en los comentarios.

Y si quieres darme una sugerencia para próximos tutoriales, déjamela en el formulario de contacto. Ventajas de ser suscriptor. 😉


CSS Editor de bloques PHP WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?