Cambiar el color de fondo del editor de bloques de WordPress puede mejorar su entorno de edición, haciéndolo visualmente atractivo y alineado con sus preferencias generales de diseño.
Un fondo personalizado no sólo añade un toque de creatividad, sino que también puede mejorar la legibilidad y ayudarle a mantener la concentración mientras crea contenidos.
Por ejemplo, si estás trabajando en un proyecto personalizado de un cliente, ajustar el color de fondo del editor de Gutenberg para que coincida con la marca del cliente puede ayudarte a mantener la coherencia visual durante todo el proceso de diseño.
En este artículo, le mostraremos cómo personalizar fácilmente el color de fondo del editor de bloques de WordPress para el área de administrador.
Nota: Esta guía trata sobre cómo cambiar el color del editor en el administrador de WordPress. Si usted está buscando para cambiar el color de fondo en el front-end de WordPress, entonces usted puede desplazarse hacia abajo a la sección de bonificación o ver nuestro tutorial sobre cómo cambiar el color de fondo en WordPress.
¿Por qué cambiar el color de fondo del editor de bloques en WordPress?
Es posible que desee cambiar el color de fondo del editor de bloques de WordPress por varias razones.
Por ejemplo, la mayoría de los temas modernos de WordPress utilizan el mismo color de fondo para el editor de bloques que el sitio web en vivo, incluyendo Astra, OceanWP, GeneratePress, y más.
Sin embargo, si su tema de WordPress no utiliza los mismos colores, entonces la apariencia de su entrada dentro del editor será muy diferente de lo que sus usuarios verán en el sitio web en vivo.
Otra razón para cambiar el color de fondo puede ser una preferencia personal.
Por ejemplo, por defecto, el editor de bloques utiliza un fondo blanco liso. A algunos usuarios puede resultarles un poco estresante mirar la pantalla blanca durante muchas horas. La fatiga visual puede ser un problema real para muchas personas, y el fondo blanco por defecto no es fácil para los ojos.
Dicho esto, veamos cómo cambiar fácilmente el color de fondo del editor de WordPress.
Cómo cambiar el color de fondo del editor de WordPress
Puede cambiar fácilmente el color de fondo del editor de WordPress añadiendo código personalizado al archivo functions. php de su tema.
Sin embargo, hasta el más mínimo error en el código puede romper su sitio web y hacerlo inaccesible.
Por eso recomendamos usar el plugin WPCode . Es el mejor plugin de fragmentos de código WordPress del mercado y es la forma más fácil y segura de añadir código personalizado a tu sitio web WordPress.
Primero, necesitas instalar y activar el plugin WPCode. Para obtener más instrucciones, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: WPCode también tiene un plan gratuito que puedes utilizar para este tutorial. Sin embargo, el plan premium te da acceso a más funciones, como una biblioteca de fragmentos de código y lógica condicional.
Una vez activado, visite la página Fragmentos de código ” +Añadir fragmento desde la barra lateral del administrador de WordPress.
Desde aquí, haga clic en el botón “Usar fragmento de código” situado debajo de la opción “Añadir su código personalizado (nuevo fragmento de código)”.
Esto le llevará a la página ‘Crear fragmento de código personalizado’, donde puede empezar escribiendo un nombre para su fragmento de código. Esto es sólo para usted y puede ser cualquier cosa que le ayudará a identificar el código.
A continuación, elija “Fragmento de código PHP” como “Tipo de código” en el menú desplegable de la esquina derecha de la pantalla.
A continuación, copie y pegue el siguiente código en el cuadro “Vista previa del código”:
add_action( 'admin_footer', function() {
?>
<style>
.editor-styles-wrapper {
background-color: #bee0ec;
}
</style>
<?php
});
Una vez hecho esto, debe buscar el siguiente código en el fragmento de código PHP que acaba de pegar:
background-color: #bee0ec;
A continuación, tienes que añadir el código hexadecimal del color que prefieras junto a la opción de color de fondo. Si no quieres usar un código hexadecimal, puedes usar en su lugar algunos nombres de colores básicos como ‘blanco’ o ‘azul’.
A continuación, desplácese hasta la sección “Inserción” y elija la opción “Inserción automática”.
A continuación, debe seleccionar la “Ubicación” del fragmento de código como “Solo administrador” en el menú desplegable.
Después, vuelve a la parte superior de la página y activa el conmutador “Inactivo”.
Por último, no olvide hacer clic en el botón “Guardar fragmento de código” para guardar los cambios.
Ahora, visita el editor de bloques desde la barra lateral del administrador.
Este es el aspecto del editor de bloques en nuestro sitio después de añadir el fragmento de código PHP.
Tutorial en vídeo
Si prefieres ver un vídeo, echa un vistazo a nuestro tutorial de YouTube sobre cómo personalizar el color de fondo del editor de bloques de WordPress:
Bonificación: Cambiar el color de fondo en WordPress
Si desea cambiar el color de fondo de la interfaz de su sitio web, puede hacerlo accediendo a la pantalla Apariencia ” Personalizar ” desde el escritorio de WordPress.
Esto abrirá el personalizador de temas, donde debe hacer clic en la pestaña “Colores y modo oscuro” de la columna izquierda. Ten en cuenta que tu personalizador puede tener un aspecto diferente dependiendo del tema que estés utilizando.
Se abrirá un nuevo panel en la barra lateral en el que deberá hacer clic en la opción “Seleccionar color”.
El selector de color se abrirá en tu pantalla y podrás elegir el color de fondo que prefieras. Una vez que haya terminado, recuerde hacer clic en el botón “Publicar” en la parte superior para guardar la configuración.
También puedes cambiar el color del texto, el color de resaltado, el color de los botones y mucho más desde el Personalizador de temas. Sin embargo, si estás utilizando un tema de bloques, entonces tendrás que hacer estos cambios en el editor completo del sitio.
Para más detalles sobre todo esto, puede consultar nuestra guía para principiantes sobre cómo personalizar los colores de su sitio web en WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo cambiar fácilmente el color de fondo del editor de WordPress. Puede que también quieras ver nuestra guía definitiva sobre cómo desactivar el editor de pantalla completa en WordPress o echar un vistazo a nuestra selección de los mejores plugins de bloques Gutenberg para WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Shawn
This works better for me;
.editor-styles-wrapper, body.mce-content-body, .wp-block {
background-color: ;
color: ;
}
WPBeginner Support
Thank you for sharing what worked for you!
Administrador
Broc Hite
This was great, but it was only an incomplete solution for me since I spend more time in the code editor vs the visual editor. I’m still Googling trying to figure out how to change the color there.
WPBeginner Support
If you wanted to change the background color in the text/code editor, you could instead target .edit-post-text-editor in the code above.
Administrador