Home » WordPress » Cómo cambiar el color de fondo en WordPress

Cómo cambiar el color de fondo en WordPress

¿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:

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.

how to edit wordpress website colors

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.

how to change wordpress webste colors in full site editor

Haga clic en Colores en el menú Estilos.

how to change colors in wordpress

Ahora haga clic en Fondo.

how to change background in full site editor

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.

background color change in wordpress

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.

how to change background color in wordpress full site editor

Best WordPress hosting 2024

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.

how to set gradient color in wordpress full site editor

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.

wordpress where to change background color

Aquí tienes un ejemplo del tema Twenty Twenty-One. Haz clic en la pestaña Colores y modo oscuro.

how to change background color in classic wordpress themes

Puedes seleccionar entre los colores predefinidos en la parte inferior de la pestaña, o seleccionar cualquier color que desees del selector de color.

how to change colors in wordpress

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.

wordpress add css background color

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.

wordpress how to change background color

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.

where to find post or page id in wordpress

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/:

wordpress how to setup gradient color background

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.

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK