Cómo cambiar el color de fondo en WordPress (Guía para principiantes)

¿Está buscando una manera fácil de cambiar el color de fondo de su sitio de WordPress? El color de fondo de su sitio web juega un papel importante en su diseño y marca, y en hacer que su contenido sea más legible. En este artículo, le mostraremos cómo cambiar fácilmente el color de fondo de su sitio de WordPress.

¿Por qué cambiar el color de fondo en WordPress?

Un tema de WordPress viene con un color de fondo predeterminado. Cambiar el color de fondo puede ayudar a personalizar el diseño de su sitio web y mejorar la legibilidad. Por ejemplo, puede resaltar una sección específica de una página utilizando un color de fondo diferente. Ayuda a resaltar su llamado a la acción (CTA) y aumentar las conversiones. Puede usar diferentes colores de fondo para diferentes publicaciones en su blog de WordPress según los autores, comentarios o categorías. Esto ayuda a diferenciar los artículos de otros contenidos de su sitio web. También hay una forma de agregar fondos de video para captar instantáneamente la atención de sus visitantes y aumentar el compromiso. Dicho esto, veamos cómo cambiar el color de fondo en WordPress. Le mostraremos diferentes formas de personalizar el color de fondo, para que pueda ir directamente a la sección que prefiera:

Cambiar el color de fondo con 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 cambiar el aspecto de tu sitio en tiempo real y sin necesidad de cambiar el código. Para acceder al personalizador de temas de WordPress, puede iniciar sesión en su sitio web y luego ir a Apariencia »Personalizar. Esto abrirá el Personalizador de temas, donde encontrará varias opciones para cambiar su tema. Esto incluye menús, colores, página de inicio, widgets, imagen de fondo, etc. Las opciones específicas disponibles dependerán del tema de WordPress utilizado por su sitio. Para este tutorial, usamos el tema Twenty Twenty-One predeterminado. Para cambiar el color de fondo de su sitio web, siga adelante y haga clic en la pestaña de configuración "Colores y modo oscuro" en el 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 usar la herramienta de selección de color o ingresar un código de color hexadecimal para su fondo.

Cuando haya terminado de editar, no olvide hacer clic en el botón "Publicar". Ahora puede visitar su sitio web para ver el nuevo color de fondo en acción.

Es posible que su tema no tenga esta opción disponible en el personalizador de temas. En este caso, puede probar uno de los métodos siguientes.

Cambie el color de fondo agregando CSS personalizado

Otra forma de cambiar el color de fondo de su sitio web de WordPress es agregar CSS personalizado en el personalizador de temas de WordPress. Para empezar, vaya a Apariencia »Personalizar luego vaya a la pestaña 'CSS adicional'.

Luego puede ingresar el siguiente código: body {background-color: #FFFFFF; } Todo lo que tiene que hacer es reemplazar el código de color de fondo con el código de color que desea utilizar en su sitio web. Luego continúe e ingrese el código en la pestaña CSS adicional.

Cuando haya terminado, no olvide hacer clic en el botón "Publicar". Ahora puede visitar su sitio web para ver el nuevo color de fondo. Para obtener más detalles, consulte nuestra guía sobre cómo agregar fácilmente CSS personalizado a su sitio de WordPress.

Cambiar aleatoriamente los colores de fondo en WordPress

Ahora, ¿está buscando una forma de cambiar aleatoriamente el color de fondo en WordPress? Puede agregar un efecto de cambio de color de fondo suave para cambiar automáticamente de un color de fondo a otro. El efecto pasa por varios colores hasta llegar al color final. Para agregar el efecto, deberá agregar código a su sitio web de WordPress. Lo guiaremos a través del proceso a continuación. Lo primero que debe hacer es encontrar la clase CSS del área donde desea agregar el efecto de cambio de color de fondo fluido. Puede hacer esto usando la herramienta Inspeccionar en su navegador. Todo lo que necesita hacer es pasar el mouse sobre el área cuyo color desea cambiar y hacer clic derecho para seleccionar la herramienta Inspeccionar.

Después de eso, deberá escribir la clase CSS a la que desea dirigirse. Por ejemplo, en la captura de pantalla anterior, queremos apuntar al área con una clase CSS de 'encabezado de página'. Luego, debe abrir un editor de texto sin formato en su computadora como un bloc de notas y crear un nuevo archivo. Deberá guardar el archivo con el nombre 'wpb-background-tutorial.js' en su escritorio. Una vez hecho esto, puede agregar el siguiente código al archivo JS que acaba de crear: 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 estudia el código, notará que usamos la clase CSS 'encabezado de página' porque esta es el área que queremos apuntar en nuestro sitio web. También verá que hemos utilizado cuatro colores utilizando el código de color hexadecimal. Puede agregar tantos colores como desee para su fondo. Todo lo que necesita hacer es ingresar los códigos de color en el fragmento y separarlos usando comas y comillas simples como otros colores. Ahora que tiene su archivo JS listo, debe cargarlo en la carpeta JS de su tema de WordPress utilizando un servicio de protocolo de transferencia de archivos (FTP). Para este tutorial, usamos FileZilla. Es un cliente FTP gratuito para Windows, Mac y Linux, y es muy fácil de usar. Para comenzar, deberá conectarse al servidor FTP de su sitio web. Puede encontrar las credenciales de inicio de sesión en el correo electrónico de su anfitrión o en el panel de control de cPanel de su cuenta de alojamiento. Una vez que haya iniciado sesión, verá una lista de las carpetas y archivos de su sitio web en la columna "Sitio remoto". Continúe y navegue hasta la carpeta JS en el tema de su sitio.

Si su tema no tiene una carpeta js, puede crear una. Simplemente haga clic derecho en la carpeta de su tema en el cliente FTP y haga clic en la opción "Crear directorio".

A continuación, deberá abrir la ubicación de su archivo JS en la columna "Sitio local". Luego haga clic derecho en el archivo y haga clic en la opción "Cargar" para agregar el archivo a su tema.

Para obtener más detalles, puede seguir nuestro tutorial sobre el uso de FTP para cargar archivos en WordPress. Luego, deberá ingresar el siguiente código en el archivo funtions.php de su tema. Este código carga correctamente el archivo JavaScript y el script jQuery dependiente que necesita para que este código funcione. 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', verdadero); } add_action ('wp_enqueue_scripts', 'wpb_bg_color_scripts'); Le recomendamos que utilice el complemento Fragmentos de código para agregar código de forma segura a su sitio. Para obtener más detalles, consulte nuestra guía sobre cómo pegar fragmentos de la web en WordPress. Ahora puede visitar su sitio web para ver los colores que cambian aleatoriamente en acción en el área que ha seleccionado.

Cambiar el color de fondo de publicaciones individuales

También puede cambiar el color de fondo de cada publicación de blog en WordPress en lugar de usar un solo color en todo su sitio web usando CSS personalizado. Te permite cambiar el aspecto de publicaciones específicas y personalizar sus fondos. Por ejemplo, puede personalizar el estilo de cada publicación para que se adapte a los autores o mostrar un color de fondo diferente para su publicación más comentada. Incluso puede cambiar el color de fondo de las publicaciones en una categoría en particular. Por ejemplo, los artículos de noticias pueden tener diferentes colores de fondo en comparación con los tutoriales. Lo primero que debe hacer es encontrar la clase de identificación de publicación en el CSS de su tema. Puede hacerlo viendo cualquier publicación de blog y luego haciendo clic derecho para usar la herramienta Inspeccionar en su navegador.

A continuación, se muestra un ejemplo de cómo se vería:

Una vez que tenga su ID de publicación, puede cambiar el color de fondo de una publicación individual usando el siguiente CSS personalizado. Simplemente cambie la ID de publicación para que coincida con la suya y el código de color de fondo que desee. .post-104 {color de fondo: # D7DEB5; color: #FFFFFF; } Para agregar el CSS personalizado, puede usar el personalizador de temas de WordPress. Primero, asegúrese de haber iniciado sesión en su sitio web de WordPress. Luego, visite la publicación de su blog y haga clic en la opción "Personalizar" en la parte superior. Después de eso, dirígete al CSS adicional pestaña en el menú de la izquierda.

A continuación, ingrese el CSS personalizado y haga clic en el botón "Publicar".

Ahora puede visitar la publicación de su blog para ver el nuevo color de fondo. Si desea cambiar el color de fondo según el autor, los comentarios o la categoría, consulte nuestro tutorial detallado sobre cómo diseñar cada publicación de WordPress de manera diferente.

Usar video de fondo

Usar videos como fondo de su sitio web es una excelente manera de captar la atención de sus visitantes y ...