¿Quieres darle a tu sitio web en WordPress un aspecto renovado sin invertir horas en complejos cambios de diseño?
Llevamos creando sitios web en WordPress desde 2008. Y podemos decirte con certeza que cambiar el color de fondo de tu sitio es una de las formas más rápidas de transformar la apariencia de tu sitio web.
Sin embargo, con todos los temas y editores de WordPress disponibles, encontrar el método adecuado puede resultar abrumador para los principiantes.
En esta guía fácil de seguir, le mostraremos exactamente cómo cambiar el color de fondo de WordPress, independientemente del tema o maquetador de páginas que esté utilizando.
Por qué el color de fondo de tu WordPress es realmente importante 🎨
Piense en el color de fondo de su sitio web como si fueran las paredes de su hogar digital. Aunque tu tema de WordPress viene con un color por defecto, elegir el fondo adecuado puede suponer una gran diferencia en la sensación de bienvenida de los visitantes a tu sitio.
He aquí por qué este elemento de diseño de WordPress es tan importante:
- Facilitan la lectura de sus contenidos
- Destacan la información importante
- Establecen el ambiente de su sitio web.
- Pueden hacer que su sitio parezca más profesional.
El color de fondo adecuado puede ayudar a resaltar sus botones importantes y aumentar sus conversiones. También puede utilizar diferentes colores para organizar mejor su contenido, como el uso de colores específicos para diferentes categorías de blog o anuncios especiales.
Y si quiere que su sitio sea aún más atractivo, puede incluso añadir fondos de vídeo para captar la atención de sus visitantes.
Dicho esto, vamos a ver cómo cambiar el color de fondo en WordPress. Te mostraremos diferentes formas de personalizar el color de fondo para que puedas saltar a la sección que prefieras:
- How to Change Background Color in WordPress Theme Customizer
- How to Change Background Color in Full Site Editor (2024 Method)
- How to Change Background Color in WordPress With CSS
- How to Randomly Change Background Colors in WordPress
- How to Change Background Color for Individual Posts
- Bonus Tip: Use a Page Builder for More Design Control
Cómo cambiar el color de fondo en el Personalizador de temas de WordPress
Dependiendo de su tema, es posible que pueda cambiar el color de fondo utilizando el Personalizador de temas de WordPress. Te permite editar la apariencia de tu sitio en tiempo real y sin necesidad de editar código.
Para acceder al Personalizador de temas de WordPress, puede acceder a su sitio web y luego ir a Apariencia ” Personalizar.
Esto abrirá el Personalizador de temas, donde encontrarás múltiples opciones para modificar tu tema. Esto incluye los menús, colores, página de inicio, widgets, imagen de fondo, y mucho más.
Las opciones específicas disponibles dependerán del tema de WordPress que esté usando su sitio. Para este tutorial, estamos utilizando el tema por defecto Twenty Twenty-One.
Para cambiar el color de fondo de su sitio web, siga adelante y haga clic en la pestaña de ajustes “Colores y modo oscuro” del menú de la izquierda.
A continuación, deberá hacer clic en la opción “Color de fondo” y elegir un color para su sitio web.
Puede utilizar la herramienta de selección de color o introducir un código de color hexadecimal para el fondo.
Cuando hayas terminado con los cambios, no olvides hacer clic en el botón “Publicar”.
Ahora puede visitar su sitio web WordPress para ver el nuevo color de fondo en acción.
Puede que tu tema no tenga esta opción disponible en el Personalizador de temas. En ese caso, puede probar uno de los métodos siguientes.
Cómo cambiar el color de fondo en el editor de sitio completo (Método 2024)
El editor de sitio completo (FSE) es una plataforma de edición de WordPress para editar temas en bloque. Este editor hace que sea súper fácil cambiar el color de fondo de su sitio. Vamos a caminar a través del proceso juntos.
Comience por ir a Apariencia ” Editor en su escritorio de WordPress.
Ahora, verás un botón “Estilos” en una de las opciones del menú.
Adelante, haz clic en él.
Ahora, haz clic en el botón de edición del lápiz.
Accederá a la interfaz de edición.
Ahora, usted notará un práctico panel en el lado derecho de su pantalla. Este es tu centro de control de diseño, donde puedes cambiar colores, fuentes y mucho más.
Para cambiar el color de fondo, basta con hacer clic en “Colores” en el panel Estilos.
A continuación, haz clic en “Fondo”.
Ahora puedes elegir entre un color sólido o crear un degradado. No dudes en elegir el que mejor se adapte a tu estilo. Cuando estés satisfecho con tu elección, pulsa “Guardar” y ¡listo!
Cómo cambiar el color de fondo en WordPress con CSS
¿Te preguntas cómo cambiar el color de fondo con CSS?
Otra forma de cambiar el color de fondo de su sitio web en WordPress es añadiendo CSS personalizado en el Personalizador de temas de WordPress.
Para empezar, dirígete a Apariencia ” Personalizador y luego ve a la pestaña ‘CSS adicional’.
A continuación, puede introducir el siguiente código:
1 2 3 | body { background-color: #FFFFFF;} |
Lo único que tienes que hacer es sustituir el código del color de fondo por el código del color que quieras utilizar en tu sitio web. A continuación, siga adelante e introduzca el código en la pestaña CSS adicional.
Cuando hayas terminado, no olvides hacer clic en el botón “Publicar”. Ahora puede visitar su sitio web para ver el nuevo color de fondo.
Para más detalles, consulte nuestra guía sobre cómo añadir fácilmente CSS personalizado a su sitio de WordPress.
Cómo cambiar aleatoriamente los colores de fondo en WordPress
Ahora, ¿estás buscando una manera de cambiar aleatoriamente el color de fondo en WordPress?
Puede añadir un efecto de cambio suave del color de fondo para pasar automáticamente de un color de fondo a otro. El efecto pasa por varios colores hasta llegar al color final.
Para añadir el efecto, tendrás que añadir código a tu sitio web WordPress. A continuación te guiaremos por el proceso.
Lo primero que tienes que hacer es averiguar la clase CSS de la zona en la que quieres añadir el efecto de cambio suave del color de fondo.
Puede hacerlo utilizando la herramienta Inspeccionar de su navegador / explorador. Todo lo que tienes que hacer es llevar el ratón a la zona que deseas cambiar el color y hacer clic con el botón derecho para seleccionar la herramienta Inspeccionar.
Después, tendrás que escribir la clase CSS a la que quieres apuntar. Por ejemplo, en la captura de pantalla anterior, queremos apuntar al área con una clase CSS ‘page-header.’
A continuación, tienes que abrir un editor de texto plano en tu ordenador, como el bloc de notas, y crear un nuevo archivo. Tendrás que guardar el archivo como ‘wpb-background-tutorial.js’ en tu escritorio.
Una vez hecho esto, puedes añadir el siguiente código al archivo JS que acabas de crear:
1 2 3 4 5 6 7 8 9 10 11 12 | jQuery(function($){ $('.page-header').each(function(){ var $this = $(this), colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331']; setInterval(function(){ var color = colors.shift(); colors.push(color); $this.animate({backgroundColor: color}, 2000); },4000); }); }); |
Si estudias el código, te darás cuenta de que hemos utilizado la clase CSS “cabecera de página”, ya que es el área a la que queremos dirigirnos en nuestro sitio web.
También verás que hemos utilizado cuatro colores utilizando el código de color hexadecimal. Puedes añadir tantos colores como quieras para tu fondo. Todo lo que tienes que hacer es introducir los códigos de color en el fragmento de código y separarlos usando una coma y comillas simples, como los otros colores.
Ahora que su archivo JS está listo, tendrá que subirlo a la carpeta JS de su tema de WordPress utilizando un servicio de protocolo de transferencia de archivos (FTP).
Para este tutorial, vamos a utilizar FileZilla. Es un cliente FTP gratuito para Windows, Mac y Linux, y es muy fácil de usar.
Para empezar, tendrás que acceder al servidor FTP de tu sitio web. Puede encontrar las credenciales de acceso en el correo electrónico de su proveedor de alojamiento o en el panel de control cPanel de su cuenta de alojamiento.
Una vez conectado, verás una lista de carpetas y archivos de tu sitio web en la columna “Sitio remoto”. Ve a la carpeta JS del tema de tu sitio.
Si tu tema no tiene una carpeta js, puedes crear una.
Basta con hacer clic con el botón derecho del ratón en la carpeta del tema en el cliente FTP y hacer clic en la opción “Crear directorio”.
A continuación, tendrá que abrir la ubicación de su archivo JS en la columna “Sitio local”.
A continuación, haz clic con el botón derecho en el archivo y pulsa la opción “Subir” para añadir el archivo a tu tema.
Para más detalles, puede seguir nuestro tutorial sobre cómo usar FTP para subir archivos a WordPress.
A continuación, tendrás que introducir el siguiente código en el archivo funtions.php de tu tema. Este código carga correctamente el archivo JavaScript y el script jQuery dependiente que necesita para que este código funcione:
1 2 3 4 | function wpb_bg_color_scripts() {wp_enqueue_script( 'wpb-background-tutorial', get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ); }add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); |
Te recomendamos que utilices el plugin gratuito WPCode para añadir el código a tu sitio de forma segura. Para más detalles, consulta nuestra guía sobre cómo pegar fragmentos de código de la web en WordPress.
Ahora puede visitar su sitio web para ver los colores que cambian aleatoriamente en acción en la zona a la que se dirigió.
Cómo cambiar el color de fondo de entradas individuales
También puede cambiar el color de fondo de cada entrada de blog individual en WordPress en lugar de utilizar un único color en todo su sitio web utilizando CSS personalizado.
Te permite cambiar el aspecto de entradas concretas y personalizar sus fondos. Por ejemplo, puedes personalizar el estilo de cada entrada en función de los autores o mostrar un color de fondo diferente para tus entradas más comentadas.
Incluso puede cambiar el color de fondo de las entradas de una categoría determinada. Por ejemplo, las entradas de noticias pueden tener diferentes colores de fondo en comparación con los tutoriales.
Lo primero que tienes que hacer es encontrar la clase ID de la entrada en el CSS de tu tema. Para ello, visualiza cualquier entrada del blog y, a continuación, haz clic con el botón derecho del ratón para utilizar la herramienta Inspeccionar del navegador.
He aquí un ejemplo:
1 | <article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized"> |
Una vez que tengas el ID de tu entrada, puedes cambiar el color de fondo de una entrada individual usando el siguiente CSS personalizado. Sólo tienes que sustituir el ID de la entrada para que coincida con la suya y el código de color de fondo que desee.
1 2 3 4 | .post-104 {background-color: #D7DEB5;color:#FFFFFF;} |
Para añadir el CSS personalizado, puede utilizar el Personalizador de temas de WordPress. En primer lugar, asegúrate de haber accedido a tu sitio web de WordPress. A continuación, visita la entrada de tu blog y haz clic en la opción “Personalizar” de la parte superior.
A continuación, dirígete a la pestaña CSS adicional del menú de la izquierda.
A continuación, introduzca el CSS personalizado.
Una vez hecho esto, haga clic en el botón “Publicar”.
Ahora puede visitar la entrada de su blog para ver el nuevo color de fondo.
Si desea cambiar el color de fondo en función del autor, los comentarios o la categoría, entonces compruebe nuestro detallado tutorial sobre cómo dar estilo a cada entrada de WordPress de forma diferente.
Consejo adicional: Utilice un maquetador de páginas para un mayor control del diseño
Cambiar los colores de fondo es sólo el principio. Si quiere controlar por completo el diseño de su sitio web, un maquetador de páginas puede abrirle muchas más posibilidades.
Nos gusta usar SeedProd, el maquetador de páginas más popular para WordPress, porque te permite:
- Diseñe cualquier página sin código
- Personalizar colores, disposición y espaciado
- Cree páginas profesionales en cuestión de minutos
- Consigue que tus páginas se vean bien en todos los dispositivos
Empezar es fácil – sólo tiene que instalar y activar SeedProd utilizando nuestra sencilla guía de instalación de plugins de WordPress.
Nota: Puede empezar con la versión gratuita, pero SeedProd Pro le da acceso a más plantillas y opciones de diseño si las necesita.
Una vez que el plugin esté activo, se le pedirá que introduzca su clave de licencia. Puede encontrar la clave en su área de cuenta SeedProd. Después de introducir la clave, haga clic en el botón “Verificar clave”.
A continuación, puede dirigirse a SeedProd ” Páginas.
Desde aquí, haga clic en el botón “Añadir nueva página de destino”.
Después de eso, tendrá que seleccionar un tema para su página de destino. SeedProd ofrece un montón de hermosas plantillas de página de destino para empezar.
También puede utilizar una plantilla en blanco para empezar desde cero. Sin embargo, le sugerimos que utilice una plantilla, ya que es una forma más fácil y rápida de crear una página de destino.
Cuando seleccione una plantilla, se le pedirá que introduzca un Nombre de página y elija una URL.
Después, basta con hacer clic en el botón “Guardar y empezar a editar la página”.
En la siguiente pantalla, verá el maquetador de páginas de SeedProd. Aquí puedes usar el maquetador de arrastrar y soltar para añadir bloques desde el menú de la izquierda. Puedes añadir un titular, un vídeo, una imagen, un botón, etc.
Si se desplaza hacia abajo, encontrará más bloques en la sección Avanzado. Por ejemplo, puedes añadir un temporizador de cuenta atrás para crear urgencia, mostrar perfiles sociales para aumentar el número de seguidores, añadir un formulario de opciones para captar clientes potenciales, etc.
Utilizando el maquetador de arrastrar y soltar, es fácil cambiar la posición de cada bloque en su página de destino. Incluso puedes cambiar la estructura / disposición / tamaño, color y fuente del texto.
Para cambiar el color de fondo de su página de destino, sólo tiene que seleccionar cualquier sección de la página. Ahora verás opciones en el menú de la izquierda para editar el estilo de fondo, el color y añadir una imagen.
Cuando haya terminado de editar su página de destino, no olvide hacer clic en el botón “Guardar” de la parte superior.
A continuación, puedes dirigirte a la pestaña “Conectar” e integrar la página con distintos servicios de marketing por correo electrónico. Por ejemplo, puedes conectar con Constant Contact, Brevo (antes Sendinblue) y otros.
Después, siga adelante y haga clic en la pestaña “Ajustes de página”.
Aquí puede cambiar el estado de la página de Borrador a Publicar para publicar su página.
Además, también puede cambiar los ajustes SEO de la página, ver los análisis, añadir código personalizado en Scripts e introducir un dominio personalizado.
Una vez que haya terminado, puede salir del maquetador de páginas de SeedProd y visitar su página de destino personalizada.
Tutorial en vídeo
Esperamos que este artículo te haya ayudado a aprender cómo cambiar el color de fondo en WordPress. También puedes marcar / comprobar nuestra guía sobre cómo convertir Figma a WordPress y nuestra comparativa del mejor software de diseño web.
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.
Have a question or suggestion? Please leave a comment to start the discussion.