¿Cómo cambiar el fondo en WordPress? » Clasificación matemática

¿Está buscando una manera fácil de cambiar el fondo de su sitio web de WordPress?

Muchos temas de WordPress le permiten cambiar el fondo de su sitio cargando una imagen o eligiendo un color.

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. Las imágenes de fondo pueden hacer que su sitio web se vea más atractivo y estéticamente agradable.

En esta publicación, le mostraremos cómo puede cambiar el color de fondo y agregar imágenes de fondo a su sitio de WordPress.

Así que sin más preámbulos, comencemos.

1 ¿Cómo cambiar el color de fondo en WordPress?

Hay varias formas de cambiar el color de fondo en WordPress. Puede hacerlo con la ayuda de un personalizador de temas o usar CSS personalizado. Veamos las diversas formas en detalle.

1.1 Cambiar el color de fondo con el personalizador de temas de WordPress

Usando el personalizador de temas de WordPress, puede cambiar el color de fondo según su tema. Le permite cambiar el aspecto de su sitio en tiempo real sin tener que cambiar el código.

Inicie sesión en su sitio web y navegue hasta Apariencia > Temas > Personalizar para usar el personalizador de temas de WordPress.

Esto abrirá el Personalizador de temas, donde puede modificar su tema de varias maneras. Para cambiar el color de fondo de su sitio web, continúe y haga clic en el Colores pestaña de configuración del menú a su derecha.

El siguiente paso es elegir un color de fondo para su sitio web. Puede usar la herramienta de selección de color o ingresar un código de color hexadecimal para su fondo.

No olvides darle al Guardar/Publicar botón cuando haya terminado de hacer cambios. Ahora puede ver el nuevo color de fondo en acción en su sitio web.

1.2 Cambiar el color de fondo agregando CSS personalizado

Puede agregar un código CSS personalizado para cambiar el color de fondo de su sitio. Para hacerlo, navegue hasta Apariencia > Personalizar desde tu panel de WordPress.

Luego navega a CSS adicional sección y agregue el siguiente código.

body {
 background-color: #FFFFFF;
}

Reemplace el código de color de fondo con el código de color que desea usar en su sitio web. Una vez que haya agregado el código, haga clic en Publicar y visite su sitio para ver el nuevo color de fondo.

1.3 Cambiar el color de fondo para publicaciones individuales

En lugar de tener un solo color en todo su sitio web, puede cambiar el color de fondo de cada publicación de blog en WordPress usando CSS personalizado.

Le permite personalizar el aspecto de las publicaciones individuales y sus fondos. Por ejemplo, puede cambiar el color de fondo de su artículo más comentado o ajustar el diseño de cada publicación según los autores.

Deberá buscar en el CSS de su tema el ID del mensaje clase. Puede hacer esto navegando por cualquier publicación de blog y luego haciendo clic derecho para usar la herramienta Inspeccionar de su navegador.

Una vez que tenga su ID de publicación, puede usar el siguiente CSS personalizado para modificar el color de fondo de una sola publicación. Reemplace la identificación de la publicación con la suya y el código de color de fondo deseado.

.postid-1349 {
background: #D7DEB5
}

El personalizador de temas de WordPress se puede usar para agregar CSS personalizado. Agregue el código a la CSS adicional sección y haga clic en Publicar botón.

Ahora puede consultar la publicación y ver el nuevo color de fondo.

1.4 Cambiar el color de fondo de los patrones

Los patrones son diseños de bloques predefinidos a los que se accede en la pestaña de patrones del insertador de bloques. Para agregar un patrón, haga clic en el signo ‘+’ en la esquina superior izquierda, como se muestra a continuación.

Navegar a la Patrones pestaña donde puede seleccionar categorías como encabezados, pies de página, galería, etc.

Por ejemplo, hemos agregado columnas. Seleccione la columna en la que desea cambiar el color de fondo y navegue hasta la Color en la sección del lado derecho, como se muestra a continuación.

Seleccione el color de fondo del selector de color. Una vez que hayas actualizado la publicación, haz clic en el Publicar botón. A continuación, puede visitar su publicación y ver el color de fondo del patrón.

1.5 Agregar colores de fondo aleatorios en WordPress

El color que eliges para tu sitio web tiene un gran impacto en cómo lo perciben tus visitantes. Los colores respaldan el tema general de su sitio, además de su apariencia. Sin embargo, algunas personas pasan por alto la importancia del color en su sitio web y eligen ignorarlo.

Sus usuarios pueden aburrirse si usa un solo color de fondo. Lo mejor que puede hacer en su sitio web de WordPress es cambiar aleatoriamente los colores de fondo.

Para comenzar, deberá buscar la clase CSS del área donde desea cambiar el color de fondo al azar. Navegue a su publicación y, con la ayuda de la herramienta Inspeccionar, ubique la clase CSS como se muestra a continuación.

Una vez que haya localizado la clase CSS, abra un editor de texto plano como el bloc de notas y cree un nuevo archivo. Guarde el archivo como ‘background.js’ en su escritorio. Agregue el siguiente fragmento de código al archivo JS.

jQuery(function($) {
    $('#masthead').each(function() {
        var $this = $(this),
            colors = ['#e5d1d2', '#d2d1e1', '#c0ebf1'];
        setInterval(function() {
            var color = colors.shift();
            colors.push(color);
            $this.animate({ backgroundColor: color }, 2000);
        }, 4000);
    });
});

Notarás que hemos usado el código de color hexadecimal para crear cuatro colores diferentes. Para su fondo, puede usar tantos colores como desee. Simplemente agregue los códigos de color en el fragmento y sepárelos con una coma y comillas simples. Asegúrate de cambiar el selector de CSS #masthead del ejemplo anterior al que sea relevante para su sitio web.

Ahora deberá cargar el archivo JS en la carpeta JS de su tema de WordPress mediante un servicio de protocolo de transferencia de archivos (FTP). Inicie sesión en el servidor FTP de su sitio. Navegue a la carpeta JS en el tema de su sitio bajo el Sitio remoto columna.

Puede crear una carpeta js si su tema no tiene una. Simplemente haga clic derecho en la carpeta de su tema en su cliente FTP y seleccione Crear directorio opción.

Luego navegue hasta el sitio local columna y abra la ubicación de su archivo JS. Luego haga clic derecho en el archivo y haga clic en el Subir opción para incluirlo en su tema.

Agregue el siguiente fragmento de código en el archivo funtions.php de su tema

function wpb_bg_color_scripts() {    
wp_enqueue_script( 'background',  get_stylesheet_directory_uri() . '/js/background.js', array( 'jquery-color' ), '1.0.0', true ); 
 } 
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); 

Ahora puede visitar su sitio web para ver los colores de fondo que cambian aleatoriamente en su sitio.

2 ¿Cómo agregar una imagen de fondo en WordPress?

Las imágenes de fondo pueden hacer que su sitio web sea más atractivo y atractivo visualmente. Ahora veamos cómo agregar imágenes de fondo a su sitio de WordPress.

2.1 Agregue una imagen de fondo usando la configuración del tema de WordPress

Navegar a Apariencia > Personalizar configuración desde su panel de WordPress. Accederá al personalizador de temas, donde puede administrar diferentes configuraciones de temas.

Después de eso, seleccione el Imagen de fondo opción. La ventana se deslizará y revelará las opciones para cargar o seleccionar una imagen de fondo para su sitio web. Haga clic en el Seleccionar imagen botón.

Aparecerá la ventana emergente del cargador de medios de WordPress, que le permitirá cargar una imagen desde su computadora. También puede usar la biblioteca de medios para encontrar una imagen cargada anteriormente.

Una vez seleccionada, verá la vista previa de la imagen seleccionada en el personalizador de temas.

También notará las opciones de imagen de fondo debajo de la imagen. Puede elegir si desea que la imagen de fondo llene la pantalla, se ajuste a la pantalla, se repita o sea personalizada en Preestablecido.

Al usar las flechas a continuación, también puede cambiar la posición de la imagen de fondo. La imagen se alineará con el centro de la pantalla si hace clic en el botón central.

Una vez que haya actualizado la configuración de la imagen, haga clic en el Publicar y su imagen de fondo se agregará a su sitio.

2.2 Agregue una imagen de fondo en WordPress usando un complemento

Si la configuración de su tema no le permite agregar una imagen de fondo, puede agregar una imagen de fondo con la ayuda de un complemento.

Uno de los complementos de creación de páginas de arrastrar y soltar más populares para WordPress es Elementor. El complemento tiene varias características que le permiten crear un sitio web completamente funcional utilizando un tablero interactivo sin escribir una sola línea de código.

Para empezar, debe instalar y activar el complemento Elementor desde su panel de WordPress.

Navegue a su página/publicación donde desea agregar la imagen de fondo. Haga clic en el Editar con Elementor en el editor de páginas para abrir el tablero.

Para agregar una imagen de fondo a su página, haga clic en el icono de configuración, como se muestra a continuación.

Haga clic en el menú desplegable Fondo en la Estilo pestaña. Después de eso, haga clic en el icono del lápiz y luego en Elija Imagen.

Ahora puede elegir una imagen de la biblioteca de medios de WordPress o cargar una nueva. Haga clic en Publicar y la imagen de fondo se agregará a su sitio.

2.3 Agregue imágenes de fondo en WordPress usando código CSS

Si eres un experto en tecnología, puedes usar códigos CSS personalizados y agregar fondos a tus páginas y publicaciones.

Tienes mucha flexibilidad y control sobre la apariencia y ubicación de las imágenes cuando usas CSS personalizado.

Para hacerlo, navegue hasta Apariencia > Personalizar desde tu panel de WordPress. Navegar a la CSS adicional sección. En la sección CSS adicional, agregue el siguiente fragmento de código.

body
{
	background: url(example-image.jpg);
}

Asegúrese de reemplazar ejemplo-imagen.jpg con la URL que desea usar como imagen de fondo.

El código anterior establecerá una imagen de fondo global para todas las páginas de su sitio web. Puede visitar su sitio y ver la nueva imagen de fondo agregada a su sitio.

Conclusión

No se necesita tiempo ni esfuerzo para cambiar el fondo que aparecerá en su página. Es una característica incorporada en WordPress Core, lo que facilita cambiar los fondos para ocasiones especiales. También puedes elegir un solo fondo para el resto de tu vida.

Puede usar código CSS personalizado, complementos y creadores de páginas para cambiar los fondos en su sitio de WordPress. Las posibilidades son infinitas, desde fondos de imágenes en ciertas páginas hasta colores de fondo para su sitio.

Ahora es el momento de cambiar el fondo que siempre has querido en tu sitio de WordPress.

Si te gusta este artículo, háznoslo saber por Tuiteando @rankmathseo. 💬