¿Quieres añadir una imagen de fondo a tu sitio web de WordPress? Las imágenes de fondo pueden hacer que tu web se vea más atractiva, profesional y llame más la atención.
En este artículo, te mostraremos 3 formas de agregar una imagen de fondo a tu sitio de WordPress.
Método 1. Agregar una imagen de fondo usando tu editor de temas de WordPress
Los temas de WordPress más populares vienen con soporte para fondos personalizados. Esta función te permite configurar fácilmente una imagen de fondo y siempre recomendamos este método si tu tema lo permite.
Para usar el editor, debes acudir a tu panel de WordPress y buscar la opción Apariencia» Personalizar. Esto iniciará el editor de temas de WordPress, donde puedes cambiar diferentes configuraciones de temas mientras ves una vista previa en vivo de tu sitio web.
Una cosa importante que debes tener en cuenta es que las opciones que ves variarán según el tema de WordPress que estés utilizando. En este caso, usaremos el ejemplo del tema Astra, uno de los más utilizados por los usuarios.
- En las opciones de edición, debes hacer clic en “Global” en el panel de la izquierda.
- Haz clic en la sección “Colores”.
- Puedes editar los colores del tema, incluido el color de fondo. También puedes personalizar sus enlaces, cuerpo de texto, encabezados, bordes y más.
- Para agregar una imagen de fondo, desplázate hacia abajo hasta la sección “Color de superficie’. Luego puede hacer clic en la opción “Fondo web” y cambiar a la pestaña “Imagen”.
- Haz clic en el botón “Seleccionar imagen de fondo”. Ahora podrás cargar una imagen y cargarla. Podrás ver una vista previa de la imagen de fondo. Si está todo correcto, pulsa “Publicar”.
Método 2. Agregar una imagen de fondo personalizada usando el editor de sitio completo
Si está utilizando un tema de WordPress basado por bloques, puedes agregar una imagen de fondo personalizada utilizando el editor de sitio completo.
El editor de sitio completo te permite editar el diseño de tu sitio web usando bloques. Es como editar una publicación de blog o una página cualquiera usando el editor de bloques de WordPress.
Para este método, usaremos de ejemplo el tema predeterminado Twenty Twenty-Two. Para iniciar el editor completo del sitio, simplemente:
- Ve a Apariencia» Editor desde tu panel de control de WordPress.
- Una vez que estés en el editor completo del sitio, deberá agregar un bloque de portada a tu plantilla para cargar una imagen de fondo.
- Haz clic en el signo ‘+’ en la parte superior y agrega un bloque de portada.
- Haz clic en el botón “Cargar” o “Biblioteca de medios” en el bloque Portada para agregar una imagen de fondo al bloque. Esto abrirá la ventana emergente del cargador de medios de WordPress.
- Ahora puedes elegir la imagen que te gustaría usar como fondo de tu sitio web.
- Cuando hayas elegido la imagen, simplemente haz clic en el botón “Seleccionar”.
Una vez que la imagen se agrega al bloque Portada, el siguiente paso es configurarlo como fondo de la página.
- Haz clic en el icono “Vista” de la lista en la parte superior (icono con 3 guiones) para abrir una vista de esquema de los elementos del tema, como el encabezado y el pie de página del sitio.
- Arrastra y suelta todos los elementos de la plantilla debajo del bloque “Portada” en la vista de lista.
- Una vez estén todos allí, la imagen del bloque de portada aparecerá como fondo del sitio.
Puedes ajustar la imagen de fondo haciendo clic en el bloque “Portada” y seleccionando el icono de ajustes en la esquina superior derecha de la pantalla. Esto abre el panel de configuración del bloque.
Encontrarás opciones para hacer de la imagen un fondo fijo, ajustar su superposición, editar el color y más.
Método 3. Agrega imágenes de fondo personalizadas en cualquier lugar de WordPress usando código CSS
De forma predeterminada, WordPress agrega varias clases de CSS a diferentes elementos HTML en todo el sitio de WordPress. Puedes agregar fácilmente imágenes de fondo personalizadas a publicaciones individuales, categorías, autores y otras páginas utilizando estos tipos de CSS generados por WordPress.
Por ejemplo, si tiene una categoría en su sitio web llamada “Vídeo”, WordPress agregará automáticamente estas clases de CSS a la etiqueta del cuerpo cuando alguien vea la página de categoría de TV:
| 1 | <body class=»archive category category-video category-4″> |
Puedes usar la herramienta de inspección para ver exactamente qué clases de CSS agrega WordPress a la etiqueta del cuerpo.
Ahora, añadiremos una imagen de fondo personalizada a una página de archivo de categoría. Deberás agregar este CSS personalizado a tu tema:
| 1234567 | body.category-video {background-image: url(«http://example.com/wp-content/uploads/your-background-image.jpg»);background-position: center center;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;} |
¡No olvides reemplazar la URL de la imagen de fondo y la clase de categoría con las de tu propio sitio!
¿Te ha sido útil este artículo? ¿Las encuentras demasiado complicadas para tu nivel de WordPress? No te preocupes, ¡déjalo en nuestras manos! Escríbenos y pondremos solución a las necesidades de tu sitio web de WordPress. Completa este formulario y nos pondremos en contacto contigo.
