Establece una imagen de fondo para tu sitio web de WordPress

Cada imagen o vídeo que utilices en tu sitio web define tu marca para tu audiencia. Por lo tanto, las imágenes de fondo en su sitio web son importantes, y debe diseñarlas o elegirlas teniendo en cuenta el estilo de su marca y el público objetivo.

En este tutorial, aprenderás varias formas de configurar una imagen de fondo en tu sitio web de WordPress. Te llevaré a través del proceso de configurar tu imagen de fondo de WordPress en detalle para que puedas hacerlo fácilmente por ti mismo.

Si está alojando su sitio de WordPress con WordPress.com o está utilizando un servidor autogestionado, este tutorial es para usted. Aprenderás los siguientes métodos para configurar una imagen de fondo para tu sitio web de WordPress:

  • agregar una imagen de fondo con la configuración del tema de WordPress
  • agregar una imagen de fondo con complementos de WordPress
  • agregar fotos de fondo con CSS

Opción 1. Agregue una imagen de fondo Con la configuración del tema de WordPress

Muchos temas gratuitos de WordPress le permiten establecer una imagen de fondo. Estoy usando el tema Twenty Twenty-One, que es un tema sencillo para blogs, portafolios y pequeñas empresas. Este tema también le permite tener una imagen de fondo.

Inicie sesión en la sección de administración de su sitio de WordPress. Puedes manejar la mayoría de tus configuraciones de WordPress desde aquí.

  • WordPress
    Cómo iniciar sesión en el Panel de Administración de su Sitio de WordPress
    Adi Purdila

Haz clic en Apariencia, que contiene todas las configuraciones de cómo se ve tu sitio web. Se te pedirá que elijas un tema. Elija Veinte Veintiuno como su tema (o cualquier otro tema que le permita tener una imagen de fondo).

Ahora, coloca el cursor sobre el menú Apariencia y haz clic en Fondo. Aparecerá la ventana del personalizador de temas y le permitirá elegir una imagen de fondo.

 imagen de fondo  imagen de fondo  imagen de fondo

Ahora, Seleccione Imagen y elija una imagen de su biblioteca de WordPress o cargue una imagen.

Puede configurar los detalles de la imagen de fondo, como el texto alternativo, el título, el pie de foto y la descripción. Si tu enfoque es SEO, siempre es una gran idea agregar texto alternativo.

 detalles de la imagen de fondo  detalles de la imagen de fondo  detalles de la imagen de fondo

Una vez que haya elegido la imagen y guardado la configuración, su imagen de fondo de WordPress cambiará. Ahora, puede explorar las diferentes opciones preestablecidas (Pantalla de relleno, Ajuste a pantalla, etc.), que le permitirá hacer que su imagen de fondo se vea exactamente como lo desea.

 Ajustes preestablecidos  Ajustes preestablecidos  Ajustes preestablecidos

Recuerde hacer clic en el botón Guardar cambios en la parte superior izquierda o sus cambios no se guardarán.

Opción 2. Agregar una imagen de fondo Usando Plugins de WordPress

El uso de plugins para realizar cambios en la apariencia de su sitio web solo se recomienda si tiene un sitio de WordPress autogestionado o si ha invertido en un plan de pago de WordPress.com. Si elige usar complementos con su WordPress.com cuenta, su dominio cambiará de .wordpress.com para .presentación de wp.com, que no es lo ideal.

Los complementos ofrecen muchas características y funcionalidades para su sitio de WordPress. Por ejemplo, con un complemento de fondo, puede agregar diferentes fondos en varias áreas de su sitio web: publicaciones, páginas y categorías. También puede configurar un video de YouTube como fondo con un complemento. Los complementos también pueden cambiar el tamaño de sus imágenes y videos para teléfonos para que su audiencia pueda disfrutar fácilmente de su sitio web desde sus teléfonos.

  • WordPress
    ¿Qué Es un Plugin de WordPress?
    Rachel McCollin
  • WordPress
    17 Mejores Complementos de fondo de video para WordPress
    Nona Blackman

Para este tutorial, estamos utilizando un plugin gratuito muy básico. Se llama el complemento de Imagen de Fondo de Pantalla Completa Simple.

Una vez que hayas activado el plugin, pasa el ratón sobre la apariencia. Ahora, haga clic en la nueva opción, Imagen BG de pantalla completa.

 Imagen BG a pantalla completa  Imagen BG a pantalla completa  Imagen BG a pantalla completa

A continuación, haga clic en Elegir imagen y cargue la imagen que desee como imagen de fondo de WordPress. También puede elegir una imagen de su biblioteca multimedia si ha agregado previamente su imagen de fondo preferida allí.

 Elegir imagen  Elegir Imagen  Elegir imagen

Puede agregar los detalles como texto alternativo, leyenda y descripción de la imagen si lo desea. Haga clic en Usar imagen y, a continuación, en Guardar opciones.

Ahora, dirígete a tu sitio web para ver cómo se ve tu imagen de fondo de WordPress.

Opción 3. Agregar Fotos de fondo Usando CSS

De nuevo, para agregar una imagen de fondo usando CSS, deberá tener un sitio WordPress auto hospedado o suscribirse a un plan de pago en WordPress.com. CSS personalizado no solo le permitirá agregar una imagen de fondo, sino que también puede realizar varios cambios en la apariencia de su sitio web para que se vea exactamente como desea.

Vaya al panel de WordPress y haga clic en Apariencia > CSS adicional.

 CSS adicional  CSS adicional  CSS adicional

Ahora, agregue estas líneas de código en el campo CSS para establecer una imagen de fondo de WordPress.

body { background-image: url("https://theimageurl"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}

Reemplace http://theimageurl por la URL de la imagen que desea usar como imagen de fondo de WordPress.

También puede agregar fondos e imágenes personalizados a publicaciones individuales en su sitio web de WordPress. Para hacer eso, necesitará este código:

body.category-slug { background-image: url("http://anotherimageurl"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}

Al igual que antes, tendrá que reemplazar http://anotherimageurl con la URL de la imagen que desea usar. También tendrá que reemplazar slug con el nombre de una categoría existente en su sitio.

Una vez que haya terminado de hacer los cambios en CSS, no olvide hacer clic en el botón Guardar cambios para almacenar todas las modificaciones. ¡Ahora puede visitar su sitio para ver la nueva imagen de fondo!

Presta atención al tamaño de la imagen

Antes de subir cualquier imagen a tu sitio de WordPress, céntrate en su tamaño. Es tentador agregar un aspecto visual de alta calidad. Sin embargo, esto podría aumentar la velocidad de carga de su sitio web. No suena como un gran problema; sin embargo, cuanto más lento sea tu sitio, mayor será la tasa de rebote, lo que significa que más personas abandonan tu sitio web antes de leer o ver su contenido. Esto, a su vez, afecta a tus conversiones. Google ha dicho que dos segundos es la velocidad ideal del sitio, especialmente si tienes un negocio.

Sin embargo, por otro lado, agregar imágenes de mala calidad solo por tener un tamaño más pequeño también puede afectar negativamente la experiencia del usuario. Por lo tanto, la práctica ideal es mantener un equilibrio y agregar imágenes de buena calidad, pero solo cuando sea necesario, es decir, cuando agregan valor a su contenido y solo a la resolución necesaria.

Resumen

En este tutorial, te mostré tres formas de configurar la imagen de fondo de WordPress.

  1. agregar una imagen de fondo a través de la configuración de apariencia del tema
  2. usar un complemento para agregar la imagen de fondo
  3. agregar CSS personalizado

Es posible que necesite o no una imagen de fondo para su sitio web de WordPress. Sin embargo, si eliges tener una imagen de fondo, debes saber que es un elemento importante que establece el estilo de tu marca para tu audiencia. Así que asegúrate de que tu imagen de fondo de WordPress refleje la imagen de tu marca.

Leave a Reply