¿Se pregunta cómo añadir una imagen de fondo a su sitio web de WordPress?
Las imágenes de fondo se pueden utilizar en una variedad de sitios web para hacerlos más atractivos y pueden mejorar el diseño de su sitio.
Te guiaremos paso a paso sobre cómo añadir una imagen de fondo a tu sitio de WordPress fácilmente.
Índice de contenidos
1. Añadir una imagen de fondo a través de la configuración del tema de WordPress
La mayoría de los temas de WordPress ofrecen soporte para fondos personalizados. Esto significa que puede cambiar fácilmente la imagen de fondo de su sitio de WordPress.
Esta es probablemente la forma más sencilla de añadir un fondo, así que si tu tema de WordPress lo soporta, puedes seguir con este método.
Si su tema no ofrece esta característica, tenemos muchos otros métodos que se enumeran a continuación para que usted pueda seguir.
Vaya a Apariencia > Personalizar en su panel de administración de WordPress. Esto le llevará al personalizador de temas de WordPress. Aquí puedes cambiar la configuración del tema con una vista previa en vivo para ver los cambios de tu sitio web.
En la pestaña Colores y fondos , verás las opciones para seleccionar la imagen de fondo o cambiar el color y el patrón del fondo. Localice el botón“Seleccionar imagen” y haga clic en él.
Ahora verá su biblioteca de medios de WordPress donde puede subir una imagen desde su ordenador, o seleccionar una imagen de su biblioteca de medios para aplicarla como imagen de fondo en su sitio web de WordPress.
Haga clic en la imagen que desea establecer como imagen de fondo y pulse “Elegir imagen” para continuar. Esto cerrará la biblioteca de medios y su imagen seleccionada se mostrará en la sección de vista previa del personalizador del tema.
Puedes personalizar aún más tu imagen de fondo seleccionando“Opciones”. Aquí verás la opción de posicionar tu imagen, repetirla (si no es lo suficientemente grande), y más.
2. Utilizar un plugin para personalizar la imagen de fondo en WordPress
Si tu tema no te permite personalizar la imagen de fondo a través del personalizador de temas, puedes utilizar un plugin que funcionará con cualquier tema.
El plugin Full Screen Background Pro le permite establecer fondos para cualquier entrada, página o cualquier otra parte de su sitio web de WordPress.
Todas las imágenes se convertirán automáticamente en pantalla completa y en responsive para móviles, lo que es muy difícil de conseguir a través del personalizador del tema.
Primero, instale el plugin Full Screen Background Pro. Una vez instalado, active el plugin.
Vaya a Apariencia > Imagen BG a pantalla completa donde podrá configurar los ajustes del plugin.
Este plugin es un plugin premium, y por lo tanto no es gratuito. Cuando navegue hasta la ubicación mencionada, es posible que se le pida que introduzca su clave de licencia. Esto se puede encontrar en el correo electrónico que recibió después de comprar el plugin.
Haga clic en“Guardar configuración” para guardar los cambios. Ahora está listo para empezar a añadir imágenes de fondo a sus páginas, entradas y categorías de WordPress.
Seleccione “Añadir imagen” en la página de configuración del plugin. Al igual que en el primer método, seleccione “Elegir imagen” para iniciar la biblioteca de medios en WordPress.
Tendrás que añadir un nombre de imagen, pero éste sólo se mostrará en el backend de WordPress, así que ponle un nombre relevante para la imagen.
Elige dónde quieres que se muestre la imagen:
- Global
- Categoría
- Archivos
- Páginas
- Puestos
- Blog
- Portada
- Busque en
- 404
- Inicio de sesión
3. Añadir una imagen de fondo a través de CSS Hero
CSS Hero es un plugin para WordPress que permite cambiar el tema de su sitio web sin necesidad de codificar.
Esta es una opción perfecta para los principiantes que quieren más flexibilidad que la que ofrece el personalizador de temas, pero que no están preparados para otros métodos más complicados.
Instala y activa CSS Hero, luego navega a tu página de inicio en tu brwoser de internet. En la parte superior, verás la opción“Personalizar con CSS Hero“; haz clic en este enlace en tu barra de administración.
CSS Hero es un plugin premium, con planes a partir de 19 dólares al año. Si sólo vas a personalizar un sitio, puedes elegir la opción Starter.
Una vez que hayas hecho clic en el botón de la barra de administración, obtendrás las opciones de CSS Hero. Pase el ratón por encima de la zona en la que desea cambiar la imagen de fondo.
Elija el enlace de fondo en la barra lateral izquierda y luego seleccione “Imagen”. Puedes subir tus propias imágenes o elegir una de Unsplash, que es un sitio web gratuito de fotos de archivo.
Cuando tengas la imagen que quieres añadir como imagen de fondo a tu sitio web de WordPress, selecciona “Aplicar imagen”. Puedes ajustar el tamaño de la imagen y mucho más a través de las opciones.
Si estás listo para ver tu nueva imagen de fondo en acción, haz clic en “Guardar y publicar”. CSS Hero funciona con una variedad de otros plugins como Elementor, así que asegúrate de comprobar su compatibilidad para comprarlo.
4. Añadir una imagen de fondo mediante CSS
WordPress, por defecto, añade clases CSS a los diferentes elementos de su sitio web. Si estás listo para experimentar con el código CSS, entonces este método puede ser el mejor para ti.
Si tiene una categoría en su sitio de WordPress llamada “Reseñas”, las clases CSS se añadirán automáticamente cuando se vea la página de esta categoría.
Navegue hasta la página de una categoría, haga clic con el botón derecho del ratón y seleccione “Inspeccionar”. Podrás ver las clases CSS que ha añadido WordPress.
En este ejemplo, puede utilizarla clase CSS category-reviews para estilizar esta categoría de forma diferente a las demás de su sitio WordPress.
Agregue el siguiente CSS personalizado a su tema, recordando reemplazar la categoría y la imagen de fondo a sus propios requerimientos.
|
1
2
3
4
5
6
7
|
body.category-reviews { background-image: url("http://example.com/wp-content/uploads/2019/03/your-background-image.jpg"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;} |
5. Roundup
Esperamos que este artículo haya sido útil para enseñarte cómo añadir una imagen de fondo en WordPress. Si quieres ver más tutoriales de WordPress, visita nuestra página del blog y utiliza la función de búsqueda para encontrar más guías de WordPress.