¿Quieres cambiar el color de fondo de tu sitio web WordPress? Hay varias maneras de hacerlo. Aquí tienes todo lo que necesitas saber sobre cómo añadir o cambiar colores de fondo en WordPress.
Lo que aprenderá en este tutorial:
- cómo cambiar el color de fondo en WordPress usando temas de Full Site Editing
- cómo cambiar el color de fondo en WordPress usando temas clásicos de WordPress
- cómo cambiar el color de fondo en WordPress usando CSS (funciona con cualquier tema)
- cómo cambiar sólo el color de fondo de la página de inicio en WordPress
- cómo cambiar el color de fondo sólo en determinadas páginas o entradas de WordPress (funciona con cualquier tema)
- cómo establecer un color degradado en WordPress usando CSS
Comencemos con la configuración del color de fondo en los temas de Full Site Editing (FSE).
Cómo cambiar el color de fondo en los temas de WordPress Full Site Editing
Los últimos temas por defecto de WordPress como Twenty Twenty-Three son temas Full Site Editing. Casi cualquier elemento del tema puede ser configurado usando el Editor de temas incorporado. Le permite cambiar el color de fondo del sitio web también.
Primero haga clic en Apariencia >> Editor en el menú de administración.
Una vez que se abra el Editor completo del sitio, mire en la parte superior derecha de la página: encontrará el icono Estilos. Haga clic en él.
Haga clic en Colores en el menú Estilos.
Ahora haga clic en Fondo.
Una vez que esté en la sección Fondo, encontrará algunas opciones. Puedes seleccionar Color sólido o Degradado.
Si desea utilizar un color sólido, puede seleccionar cualquier color de los colores predefinidos a continuación, o haga clic en el código de color (FFFFFF en el ejemplo) para seleccionar cualquier color que desee.
WordPress literalmente le permite seleccionar cualquier color que desee para el fondo utilizando el selector de color incorporado. Seleccione cualquier color que desee, y verá cómo se ve en vivo – no hay necesidad de guardar y actualizar la página cada vez.
Si quieres usar un fondo degradado en WordPress, te permite seleccionar el fondo entre algunos predefinidos. O, de nuevo, puedes crear cualquier color de fondo degradado que desees utilizando el selector de color incorporado.
No olvide hacer clic en el botón Guardar para guardar los cambios si desea que el fondo se aplique a su sitio web.
Cómo cambiar el color de fondo en temas clásicos de WordPress
Muchos temas de WordPress tienen ajustes en el personalizador de temas para establecer el color de fondo.
Si su tema de WordPress tiene esta función, la encontrará en Apariencia >> Personalizar. También puede acceder a la misma herramienta mientras está viendo su sitio como visitante – simplemente haga clic en el enlace Personalizar en la parte superior de la página.
Aquí tienes un ejemplo del tema Twenty Twenty-One. Haz clic en la pestaña Colores y modo oscuro.
Puedes seleccionar entre los colores predefinidos en la parte inferior de la pestaña, o seleccionar cualquier color que desees del selector de color.
Todos los cambios de color que hagas serán visibles inmediatamente. No olvide guardar los cambios para actualizar el color de fondo de su sitio WordPress.
Cómo cambiar el color de fondo usando código CSS
Algunos temas de WordPress pueden no tener herramientas para cambiar el color de fondo. Y eso no es un gran problema en realidad – no es tan difícil cambiar el color de fondo usando código CSS. Funciona con CUALQUIER tema de WordPress.
Para añadir código CSS a WordPress necesitas abrir el Personalizador usando el enlace Personalizar desde Apariencia >> Personalizar, o desde el menú superior mientras navegas por la web como visitante.
En la parte izquierda verá el menú Personalizar. Abra la pestaña CSS adicional.
Una vez abierta la pestaña, introduce este código en la casilla CSS adicional:
body {
background-color: pink;
}El resultado se mostrará inmediatamente mientras introduces el código.
Puede que quieras elegir un color más específico para tu fondo en lugar de los nombres de los colores principales. Eso también es fácil de hacer – puede reemplazar el nombre del color con su código HEX.
HEX es un código de 6 símbolos (con # delante) que puede representar cualquier color que desee. Por ejemplo, #FF0000 significa rojo, #FFFFFF es blanco, #000000 es negro, y así sucesivamente. Puede obtener el código HEX para cualquier color que desee utilizando los selectores de color en línea (como https://htmlcolorcodes.com/ ).
Entonces, ¿cómo establecer el color de fondo utilizando el código HEX? Fácilmente. Aquí está el ejemplo de la imagen de arriba que se debe introducir en la pestaña CSS adicional:
body {
background-color: #d1e4dd;
}Cómo cambiar el color de fondo de la página de inicio en WordPress
Cambiar sólo el color de fondo de la página de inicio en WordPress no es complicado en absoluto. Todos los temas de WordPress correctamente construidos utilizan clases de cuerpo. Cada página de inicio tiene una clase llamada home.
Así que todo lo que necesita hacer para cambiar sólo el color de fondo de la página de inicio está en este ejemplo:
body.home {
background-color: #d1e4dd;
}No olvide cambiar el código de color (d1e4dd) por el color HEX que desee.
Cómo cambiar el color de fondo sólo para una entrada o página específica en WordPress
Para cambiar el color de fondo de una página o entrada específica en WordPress necesita conocer un par de trucos sencillos.
Primero – necesita saber el ID de esa página o entrada específica de WordPress. Para averiguar qué página tiene qué ID debe ir a Páginas >> Todas las páginas en el panel de administración de WordPress. Intente editar cualquier página que desee, y mire el enlace de la página en la URL del navegador. La parte que muestra ?post=[NUMBER] indica el ID de la página. En el ejemplo puede ver que el ID de la página es 2.
La misma regla se aplica si quieres saber el ID del post. Sólo tienes que abrir cualquier entrada(Entradas >> Todas las entradas), y buscar el ID de la entrada en la URL.
Para establecer el fondo sólo para una página específica, tendrás que introducir este código en la pestaña CSS adicional (class: page-id-[ID de página que has encontrado en la URL]):
body.page-id-2 {
background-color: #d1e4dd;
}Establecer el fondo para un post específico tiene una ligera diferencia en el código (class: postid-[POST ID] ):
body.postid-2 {
background-color: #d1e4dd;
}Eso es todo – ahora ya sabes cómo añadir un color de fondo personalizado sólo a entradas o páginas específicas en WordPress.
Cómo establecer un color de fondo degradado en temas clásicos de WordPress
Establecer colores de fondo degradados en temas clásicos de WordPress es tan fácil como establecer un color sólido. Sólo necesita un poco de ayuda de los generadores de degradado CSS en línea. Por ejemplo – este https://cssgradient.io/:
Puede cambiar los colores como desee y la herramienta generará un código de degradado de fondo personalizado. Todo lo que necesita hacer es introducirlo en WordPress de la misma forma que introdujo los colores sólidos – usando Personalizar >> CSS adicional:
body {
background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}Eso es todo – ¡tu fondo degradado para WordPress está listo!
Autor de la imagen del post – David Pisnoy.
