¿Cómo agregar correctamente imágenes de fondo de WordPress a su sitio web?

¿Es fácil agregar imágenes de fondo de WordPress a su sitio web? La respuesta es sí en su mayor parte, a menos que su tema no lo admita.

La verdad es que muchos temas de WordPress en estos días han ofrecido algunas formas sencillas de agregar y cambiar las imágenes de fondo existentes.

También puede cambiar las imágenes de fondo de WordPress usando CSS o un complemento, lo que abre opciones para configurar la imagen de fondo en páginas, publicaciones y categorías.

Este artículo le mostrará cómo hacer todo lo anterior para que su sitio web se destaque con una apariencia llamativa.

¿Qué son las imágenes de fondo de WordPress ?

Una imagen de fondo de WordPress es una imagen aplicada detrás del contenido principal. En lugar de ser el foco principal de su sitio web, como una imagen principal, a menudo son más sutiles y complementan otro contenido en sus páginas web.

Además de ayudar a crear páginas web que brinden una mejor experiencia de lectura, las imágenes de fondo de WP ofrecen muchas posibilidades de diseño que diferencian a su sitio web de los de la competencia.

Ser diferente de la competencia significa aumentar el conocimiento de su marca poniendo un esfuerzo adicional en el diseño de su sitio web, lo que no siempre es fácil. En tales casos, puede solicitar servicios profesionales de diseño web a una agencia digital.

Pero, ¿por qué quieres cambiar el fondo? Bueno, es posible que el predeterminado no le atraiga o no se parezca a su marca. O tal vez no sea una imagen en absoluto, solo un color sólido. O tal vez te encantó el existente al principio, pero ahora te aburriste.

Cualquiera que sea la razón, experimentemos con cambiarlo.

Use el personalizador predeterminado de WordPress para agregar una imagen de fondo de WordPress

Los temas de WordPress generalmente ofrecen una forma sencilla de usar un color o una imagen en el fondo. La mayoría de las personas eligen cambiar el color de fondo para que coincida mejor con la marca y el gusto de su sitio.

En esta guía, utilizaremos Woostify, un tema fantástico para sitios de comercio electrónico. Dependiendo de su tema, el método puede diferir ligeramente.

1. Desde el tablero de WordPress, ve a Apariencia > Fondo de pantalla/Fondo o Apariencia > Personalizar > Fondo de pantalla .

2. Haga clic en el botón Seleccionar imagen para abrir la Biblioteca multimedia.

3. Elija su imagen deseada. Puede cargarlo desde su computadora o seleccionar uno existente de la Biblioteca de medios.

4. Haga clic en el botón Elegir imagen cuando esté satisfecho.
5. Si le gusta lo que ve en la vista previa, haga clic en el botón Publicar . ¡Y eso es todo!

Además, WordPress ofrece una sencilla herramienta de edición de imágenes de fondo. Puede experimentar con él para ver qué tamaño, posición, etc. es el mejor.

No te preocupes por quedarte atascado con nada. Es fácil volver a la configuración y cambiar el fondo (y las opciones relacionadas) cuando lo desee.

Use Elementor Page Builder para agregar imágenes de fondo de WordPress a una publicación/página

Elementor es un creador de páginas predominante que acelera drásticamente la producción de sitios web. Ofrece un complemento gratuito que puede usar para agregar imágenes de fondo de WordPress.

1. Para comenzar, debe instalar y activar el complemento Elementor.
2. Primero, ve a la publicación o página de tu elección. Una vez en el editor de páginas predeterminado de WordPress, haga clic en el botón Editar con Elementor .

Se abrirá el Editor de Elementor. En el lado izquierdo, verá un menú que enumera todos los bloques de arrastrar y soltar para crear y editar su publicación/página.

3. Haga clic en el icono de configuración pequeño en la esquina inferior izquierda del generador de páginas.

4. Luego, elija la pestaña Estilo .

5. Después de eso, haga clic en el ícono del pincel para agregar una imagen de fondo de WordPress .

6. A continuación, haga clic en el botón Elegir imagen para abrir la Biblioteca multimedia.

7. Elija su imagen deseada. Puede cargarlo desde su computadora o seleccionar uno existente de la Biblioteca de medios.

8. Luego, haga clic en el botón 'Insertar medios' en la esquina inferior derecha.

Ahora, la imagen de fondo seleccionada debería aparecer en la vista previa a la derecha. Es posible que deba ajustar otro contenido para garantizar que elementos como imágenes y texto se muestren correctamente.

9. Recuerde presionar el botón 'ACTUALIZAR' para guardar todos los cambios y actualizar la publicación/página.

Además, Elementor proporciona algunos ajustes para las imágenes de fondo de WordPress como Posición, Adjunto, Repetir, etc. Siéntase libre de experimentar con ellos para descubrir el mejor fondo.

Use un complemento para agregar imágenes de fondo de WordPress

Hay varios complementos gratuitos pero excelentes que pueden hacer el trabajo de agregar imágenes de fondo de WordPress . Por ejemplo, imagen de fondo de pantalla completa simple, fondos avanzados de WordPress, administrador de fondo completo, etc.

Agregue una imagen de fondo de WordPress para todo el sitio

En esta guía, utilizaremos la imagen de fondo de pantalla completa simple, ya que es simple, de ahí su nombre.

Este complemento proporciona una instalación y configuración sencillas de una imagen de fondo de WordPress para su sitio web. Escala automáticamente la imagen con el navegador. Por lo tanto, siempre llena la pantalla, sin importar qué dispositivos estén usando sus visitantes.

Ponerlo en acción requiere solo unos pocos pasos simples. Hay una versión paga disponible que agrega funciones adicionales. Sin embargo, el gratuito es todo lo que necesitamos.

1. Instale y active el complemento Imagen de fondo de pantalla simple.
2. Desde el panel de control de WordPress, vaya a Apariencia > Imagen de fondo de pantalla completa .

3. Haga clic en el botón Elegir imagen para abrir la Biblioteca multimedia.

4. Elija su imagen deseada. Puede cargarlo desde su computadora o seleccionar uno existente de la Biblioteca de medios.

5. Haga clic en el botón Elegir imagen cuando esté satisfecho.
6. Finalmente, haga clic en el botón 'Guardar opciones' y visite su sitio web. La imagen ahora debería mostrarse en el sitio como una imagen de fondo de WordPress a pantalla completa.

Tenga en cuenta que la configuración del complemento para las imágenes de fondo de WordPress anula el personalizador predeterminado de WordPress. Esto no es algo malo de ningún tipo, solo algo a tener en cuenta.

Agregue imágenes de fondo de WordPress en una página / publicación específica

En esta guía, utilizaremos el complemento de fondos avanzados de WordPress que mencionamos anteriormente.

Este complemento permite agregar fondos usando bloques de Gutenberg. Puede establecer un color, una imagen o incluso un video como fondo de WordPress. Todos son visibles en dispositivos móviles. Además, puede agregar un efecto de paralaje a las imágenes y videos de fondo de WordPress.

En este caso, solo agregaremos una imagen de fondo estática al área de contenido, específicamente publicaciones/páginas.

Debido a que esto funciona con los bloques de Gutenberg, asegúrese de cambiar del modo Editor clásico si es necesario.

1. Instalar y activar el complemento.
2. Abra una publicación/página existente o cree una nueva.
3. Haga clic en el botón más en la esquina superior izquierda. Luego, desplácese hacia abajo hasta la sección Diseño y elija el bloque AWB. Una barra de iconos superior y una columna de menú lateral aparecerán junto al bloque.

4. Haga clic en el botón Imagen en la columna lateral. Luego haga clic en el botón Seleccionar imagen debajo de él para abrir la Biblioteca multimedia.

5. Elija la imagen deseada. Luego, haga clic en el botón Seleccionar . Una vez que haya hecho eso, debería ver la imagen de fondo.

6. En la barra de iconos superior, haga clic en el icono con forma de hamburguesa. Luego, elija la opción Ancho completo para cubrir todo el ancho. Esto es completamente opcional.

En la columna lateral, puede cambiar el tamaño, el espaciado, la posición y mucho más de la imagen de fondo de WordPress. Siéntase libre de experimentar con él.

Ahora, todo lo que queda es agregar contenido dentro del bloque. Si está editando una publicación/página existente, simplemente corte y pegue el contenido en el bloque.

Recuerde guardar la publicación/página cuando esté satisfecho con el resultado.

Use CSS para agregar imágenes de fondo de WordPress

Ahora, exploraremos cómo cambiar las imágenes de fondo de WordPress usando CSS . Esto se puede hacer para todo el sitio o para categorías específicas usando el Personalizador de WordPress.

1. Desde el panel de control de WordPress, vaya a Apariencia > Personalizar para acceder al Personalizador de WordPress.

2. Desplácese hacia abajo y haga clic en la sección CSS adicional .

3. Copie y pegue el código apropiado a continuación en el campo CSS:

Agregue una imagen de fondo de WordPress para todo el sitio

 body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Asegúrese de reemplazar el texto del marcador de posición 'imageURL' con la URL del archivo de imagen real. Para ver esto, seleccione la imagen deseada en la Biblioteca multimedia para ver la información de la imagen.

Y si conoces CSS, siéntete libre de modificarlo como quieras.

Agregue imágenes de fondo de WordPress en una página de categoría específica

 body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Asegúrese de reemplazar el texto del marcador de posición 'imageURL' con la URL del archivo de imagen real y 'categoryid' con el nombre de categoría adecuado.

Para conocer el ID de la categoría, siga las instrucciones a continuación:

1. Desde el tablero de WordPress, ve a Publicaciones > Categorías .

2. Pase el mouse sobre el texto Editar de la categoría a la que desea hacer referencia. Verá la URL en la parte inferior izquierda de la página, que muestra el ID de categoría.

Mejores prácticas para usar imágenes de fondo en WordPress

Establecer una imagen de fondo personalizada en WordPress parece una tarea fácil. ¡Sí! Es cierto en la mayoría de los casos, pero no siempre.

Por lo tanto, recomendamos seguir las mejores prácticas de imagen de fondo de WordPress para eliminar tantos problemas como sea posible.

Compruebe la compatibilidad con la imagen de fondo antes de usar un tema de WordPress

Desafortunadamente, no todos los temas de WordPress admiten imágenes de fondo personalizadas. Por lo general, se debe a que los fondos no coinciden con el diseño general del tema. Por lo tanto, los desarrolladores optaron por apagarlo por completo.

Por lo tanto, debe consultar la lista de características cuando descargue un nuevo tema, especialmente si planea pagar uno premium. Muchos sitios web que venden temas brindan información sobre si un tema de WordPress admite imágenes de fondo o no.

Quédese con imágenes de alta calidad

La resolución de las imágenes de fondo previstas a menudo hace o deshace su presentación. Puede pensar que una foto que tomó con su teléfono es lo suficientemente buena como fondo. Pero lo más probable es que tenga que ser de una calidad mucho mayor.

Puede pagar fotos libres de regalías de sitios como Shutterstock. Estos sitios suelen tener imágenes de calidad profesional listas para cargarse como imágenes de fondo de gran tamaño. También puede encontrar muchos de ellos en sitios de imágenes de archivo gratuitos.

Es posible que la imagen de fondo no sea completamente visible en su sitio de WordPress, ya que la mayor parte está cubierta por el contenido. Sin embargo, todavía se muestra en toda la pantalla. Por lo tanto, corres el riesgo de ver un fondo estirado si no usas una imagen de alta calidad.

Optimizar imágenes de fondo

Al igual que con todas las fotos cargadas en su sitio de WordPress, debe optimizar las imágenes de fondo antes de publicarlas.

Esto es especialmente importante para las imágenes de fondo, ya que a menudo aparecen en varias páginas de su sitio. Además, son fotos grandes y ocupan mucho espacio en la pantalla. Además, las imágenes más grandes ejercen una gran presión sobre el servidor. Por lo tanto, recuerde optimizar sus imágenes de fondo para que su sitio se cargue rápidamente.

Tienes dos opciones aquí:

• Optimice las imágenes de fondo (y todas las fotos de su sitio web) antes de subirlas al servidor. Puede completar este proceso manual con la ayuda de herramientas como Photoshop, GIMP y Pixlr.
• Automatice el proceso de optimización instalando un complemento de WordPress que cambia el tamaño y reduce las imágenes al cargarlas.

Pensamientos finales

Agregar imágenes de fondo de WordPress a su sitio web puede parecer una cosa pequeña. Pero si se hace bien, puede tener un gran impacto.

Además, puede ayudar a mantener actualizada su presencia en línea. Por lo tanto, tus visitantes no se aburrirán viendo las mismas fotos una y otra vez.

Idealmente, use el Personalizador de WordPress para agregar una imagen de fondo siempre que sea posible, ya que está diseñado específicamente para funcionar según lo previsto.

Sin embargo, también tiene otras opciones para agregar y cambiar las imágenes de fondo de WordPress, como mostramos arriba.

Ahora, siga adelante y sea creativo con el fondo de su sitio web para atraer visualmente a sus visitantes.