Imágenes de Fondo de WordPress: Cómo Añadir, Editar y Personalizar el Tema

Las imágenes de fondo de WordPress vienen en todas las formas. Puedes subir una imagen de fondo para todo tu sitio web, colocarla detrás de los botones o establecer un fondo de color sólido para tu página de inicio de sesión. Independientemente de dónde quieras ponerlas, es esencial entender los fundamentos para subir una imagen, incluyendo una imagen de fondo.

En este artículo te explicaremos qué es una imagen de fondo y cómo puedes editarla para obtener un mejor resultado. También repasaremos cómo conseguir rápidamente que las imágenes de fondo se activen en tu sitio y resolver cualquier problema que pueda ocurrir en el camino.

¿Listo? ¡Pongámonos manos a la obra!

Echa un vistazo a nuestra guía de vídeo para añadir imágenes de fondo de WordPress:

¿Qué Es una Imagen de Fondo de WordPress?

Una imagen de fondo de WordPress sirve como fondo completo de tu sitio web. También se llama fondo personalizado.

El fondo también puede ser de un color sólido.

Independientemente de la opción que elijas, el archivo functions.php se encarga de la imagen de fondo en un tema de WordPress. También es mostrada por el archivo header.php de WordPress.

Como resultado, los desarrolladores de temas tienen un mayor control sobre la activación o no de la función de fondo personalizado para tu tema de WordPress. Todavía puedes activar o desactivar la funcionalidad, pero el tema de tu sitio suele dictar la configuración por defecto.

Hay varios tipos de fondos que puedes implementar en WordPress. Puedes optar por un fondo estándar para todo el sitio web o por uno que se sitúe detrás de elementos específicos como las barras laterales y los artículos.

También es posible crear fondos personalizados para lugares más específicos del sitio de WordPress:

• Detrás de una página o entrada de WordPress
• En una página de categoría de WordPress
• Dentro de un bloque de contenido para una página o una entrada
• En la página de inicio de sesión
• Detrás del menú de navegación
• En las páginas de Mantenimiento o Próximamente

En general, si el soporte de fondo personalizado está habilitado en un tema, el usuario tiene la posibilidad de subir una imagen o elegir un color para llenar la totalidad del fondo del sitio.

Los ajustes se encuentran en el panel de control de WordPress en Apariencia > Personalizar > Imagen de fondo. Sin embargo, es posible utilizar otros tipos de fondos a través de constructores de páginas de arrastrar y soltar, plugins y diferentes opciones.

Subir una imagen de fondo en el panel de control es solo una parte del proceso. Después, tienes que configurar los ajustes de la imagen de fondo. A veces puedes dejar los ajustes como están, mientras que otras veces, es importante reconfigurar los ajustes para asegurar que la imagen se vea excelente.

Los ajustes para una imagen de fondo de WordPress incluyen:

• Colores de fondo
• Dimensionamiento
• Posición de la imagen
• Si la imagen debe repetirse o no
• Opciones para llenar la pantalla o estirar la imagen

Primero repasaremos las mejores prácticas al usar imágenes de fondo de WordPress. A continuación, vamos a entrar en cómo establecer una imagen de fondo de WordPress en varias situaciones.

Los Numerosos Estilos de Fondos

Una verdadera ventaja de los fondos de WordPress es que no todos son imágenes estáticas. Puedes encontrarte con varios tipos de fondos, que van desde vídeos a patrones de fotos o presentaciones de diapositivas.

A menudo se pueden implementar fondos únicos con la ayuda de CSS personalizado o plugins (o ambos). En este artículo te mostramos ambos métodos.

Aquí tienes algunos estilos de fondo a tener en cuenta:

• Imágenes de fondo estándar: Son imágenes estáticas (PNG, JPG y otros formatos de imagen) que se extienden por la mayor parte del espacio del sitio web y se sitúan detrás del contenido principal. Sus ventajas son la simplicidad, las opciones para las fotos de alta resolución y la compatibilidad por defecto con el núcleo de WordPress. Las desventajas van desde su tendencia a interferir con la visibilidad de los elementos en primer plano hasta la ralentización del sitio por una imagen grande y de alta resolución.
• Fondos de color sólido: La imagen de fondo de color sólido es muy útil cuando quieres añadir algo de vitalidad a tu sitio, pero no tienes una imagen que se ajuste a tu marca o una que se vea bien como fondo. El fondo de color también presenta una imagen más limpia y profesional, y no lleva mucho tiempo implementarlo. Son estupendos para que coincidan con tu marca sin necesidad de código personalizado o de un plugin.
• Fondos degradados: Un fondo degradado pasa de un color a otro. Es más atractivo visualmente que un color sólido, no lleva mucho tiempo añadirlo, y puedes añadir uno con muchos plugins. El principal inconveniente es que un primer plano puede aparecer bien en un extremo del degradado pero no en el otro.
• Fondos de patrones o texturas: Todos los fondos de patrones y texturas son fotos, pero se centran en elementos repetitivos de la imagen o en una textura de primer plano, como un panel de madera o un trozo de hierba. Lo bueno de un patrón o una textura es que funciona de maravilla como fondo, ya que puedes alargarlo y la mayoría de la gente no se dará cuenta si hay una interrupción en el patrón cuando la imagen no es lo suficientemente grande.
• Fondos de presentación de imágenes: Un fondo de presentación de imágenes permite a los propietarios de sitios compartir múltiples tipos de diseños o fotos en el fondo, impulsando los esfuerzos para ajustar el estado de ánimo cuando un cliente se desplaza a través de tu sitio. Sin embargo, los pases de diapositivas pueden distraer o ralentizar su sitio.
• Fondos de vídeo: Los fondos de vídeo son atractivos, divertidos de ver y fáciles de retratar la naturaleza de tu marca. Sin embargo, también provocan problemas de rendimFento si no se hacen correctamente y podrían restarle atención a tu embudo de ventas. Además, los vídeos de fondo deben tener las dimensiones perfectas y reproducirse en los momentos adecuados. También pueden resultar caros de hacer, a menos que opte por vídeos de stock gratuitos.

Mejores Prácticas para Utilizar las Imágenes de Fondo de WordPress

Establecer una imagen de fondo personalizada parece una tarea fácil. Basta con subir la imagen en el lugar adecuado y ver cómo aparece en el frontend, ¿verdad?

La mayoría de las veces es así, pero otras veces te encontrarás con que la imagen de fondo puede ser un poco problemática. Por eso recomendamos seguir las mejores prácticas para las imágenes de fondo de WordPress para eliminar el mayor número de problemas posible.

Consejos para Utilizar las Imágenes de Fondo de WordPress

Utiliza Imágenes de Alta Calidad

La resolución de la imagen de fondo que quieres utilizar suele ser el factor decisivo para tu presentación. Puede que pienses que una imagen que tomaste con tu smartphone es perfecta para una imagen de fondo, pero lo más probable es que necesites una calidad mucho mayor.

Puedes pagar por una imagen libre de derechos en un sitio como Shutterstock. Esos sitios suelen tener imágenes de nivel profesional que están preparadas y listas para subir como imagen de fondo grande. También puedes encontrar muchas en sitios de imágenes de stock gratuitas.

Es posible que la imagen de fondo no se muestre en su totalidad en tu sitio web, ya que gran parte de ella está cubierta por el contenido. Aun así, la imagen real se muestra en toda la pantalla.

Si no utilizas una imagen de alta calidad, corres el riesgo de ver un fondo estirado.

Asegúrate de que las Imágenes de Fondo Tienen el Tamaño Adecuado

Junto con la resolución de la imagen, el tamaño físico de la misma importa mucho.

Todas las pantallas tienen distintas relaciones de aspecto. Y los dispositivos móviles lo complican aún más. Pero el objetivo es utilizar una imagen que se vea bien en la mayor de las pantallas. De lo contrario, corres el riesgo de que la imagen se estire o no se muestre correctamente.

En general, una buena regla es mantener un tamaño mínimo de imagen de fondo de WordPress de 1024 x 768 píxeles. Sin embargo, otros expertos recomiendan usar algo como 1920 x 1080 píxeles. En general, lo mejor es mantener el ancho entre 1000 y 3000 píxeles, dependiendo de dónde se muestre.

El siguiente factor que hay que tener en cuenta es la relación de aspecto. ¿La imagen de fondo cubre toda la página web, o solo la cuarta parte superior?

Técnicamente, un sitio web tiene una relación de aspecto vertical (mayor altura que anchura). Por lo tanto, puedes buscar ese tipo de imágenes. Sin embargo, los fondos seccionales – como los de las cabeceras o los banners – deben permanecer en formato horizontal (más largo de ancho que de alto).

Además, la relación de aspecto más común para los ordenadores de sobremesa hoy en día es 16:9. Permanecer alrededor de ese objetivo ayuda. Un tema o plugin responsivo puede ajustar la imagen de fondo automáticamente para la visualización móvil.

En última instancia, probar las imágenes de fondo en un sitio real y en varios tipos de dispositivos debería facilitar la decisión final.

Optimiza Antes de Crear una Imagen de Fondo de WordPress

Al igual que con todas las imágenes que se suben a WordPress, te haces un flaco favor si no las optimizas antes de publicarlas en Internet. Esto es especialmente importante en el caso de las imágenes de fondo, ya que suelen aparecer en varias páginas de tu sitio web. Además, son fotos grandes y cubren una cantidad significativa de espacio en la pantalla.

Las imágenes de mayor tamaño suponen una carga importante para tu servidor. Mantén la resolución de tu imagen, pero optimiza su tamaño para que tu sitio web se cargue rápidamente.

Tienes dos opciones para optimizar las fotos:

1. Optimiza las imágenes de fondo (y todas las imágenes del sitio web) antes de subirlas a WordPress. Completa este proceso manual con la ayuda de herramientas como Photoshop Express, GIMP y Pixlr.
2. Automatiza el proceso de optimización instalando un plugin de WordPress que redimensione y reduzca las fotos al subirlas.

Lee nuestra guía de optimización de imágenes en profundidad sobre cómo optimizar las imágenes para mejorar el rendimiento de la web.

Comprueba la Compatibilidad con el Fondo Antes de Instalar un Tema

Por desgracia, no todos los temas admiten imágenes de fondo personalizadas. A menudo, esto se debe a que el fondo no encaja en el diseño general del tema, por lo que el desarrollador optó por desactivarlo por completo.

Sin embargo, si realmente quieres un fondo en tu sitio web, es prudente comprobar la lista de características al descargar un nuevo tema, especialmente si planeas pagar por un tema premium. Muchos sitios web de venta de temas ofrecen información sobre si un tema admite fondos o no.

Por ejemplo, los temas listados en la Biblioteca de Temas de WordPress indican el soporte para fondos personalizados como etiquetas. También puedes encontrar una referencia a un fondo personalizado en la descripción del tema.

Otros sitios de temas suelen incluir información similar sobre las imágenes de fondo personalizadas. Si no es así, ponte en contacto con el desarrollador para averiguar si es posible de alguna manera y si anular el bloque de imagen de fondo (que se explica a continuación) causará algún problema con el tema.

Considera la Utilización de un Constructor de Páginas Visual para Facilitar las Imágenes de Fondo

Los constructores de páginas como Gutenberg, WPBakery, Divi y Elementor, ofrecen impresionantes listas de bloques y módulos para insertar elementos como imágenes y cuadros de texto en cualquier lugar de una página web.

Sin un constructor de arrastrar y soltar, resulta un poco más difícil configurar una imagen de fondo. Es especialmente duro intentar resolver cualquier problema que te puedas encontrar.

Los constructores de páginas también tienden a reemplazar la funcionalidad de la imagen de fondo por defecto proporcionada a través de WordPress. Puedes anular las restricciones del tema o cualquier elemento que falte para mostrar una imagen de fondo en el código.

Asegúrate de que Tu Imagen de Fondo es Legal

La legalidad siempre surge cuando se habla de imágenes, especialmente las publicadas en Internet. Existe una tendencia creciente en las redes sociales en la que la gente parece asumir que añadir un crédito a una foto hace que automáticamente se pueda utilizar esa foto.

Eso es falso.

Quien hace la foto es el dueño. Incluso si esa imagen procede de una rápida instantánea del iPhone, tiene inmediatamente la protección de los derechos de autor de esa foto en Estados Unidos y en muchos otros países.

Si quieres tener los derechos legales para utilizar la foto de otra persona, necesitarás una declaración escrita del titular de los derechos de autor que te permita utilizar sus imágenes: un simple correo electrónico es suficiente. Aun así, es posible que tengas que atribuir la foto si la persona te lo pide.

Tenemos una guía completa sobre la protección de las imágenes en tu sitio, pero el artículo también esboza información valiosa para aquellos interesados en utilizar fotos de otras fuentes.

La parte difícil de las imágenes de fondo es que normalmente no es práctico añadir una atribución, ya que WordPress no tiene lugar para incorporar una leyenda visible para las imágenes de fondo. Y no, no puedes añadir la atribución en una entrada o página del blog al azar y esperar que eso sirva como crédito para una imagen de fondo de un sitio web completo.

Para protegerte y respetar a quienes toman las fotos, considera una de las siguientes opciones cuando busque una imagen de fondo para WordPress:

• Haz la foto tú mismo. Es la forma más fácil de asegurarte de no infringir los derechos de autor de nadie.
• Paga por fotos en sitios web como Shutterstock e iStockPhoto. A veces son caras, pero para una imagen de fondo, puede entrar en tu presupuesto.
• Considera un sitio web de imágenes gratuitas como Unsplash o Pexels. Sin embargo, ¡asegúrate de que la atribución no es obligatoria! En ocasiones puedes encontrar imágenes en estos sitios donde se sugiere la atribución, pero no se exige.
• Ponte en contacto con el fotógrafo o el artista y pregúntale si puedes utilizarlo gratuitamente. Esto puede ser todo lo que necesitas, especialmente si ofreces algo a cambio.
• Piensa en omitir la imagen de fondo, o considera optar por un fondo de color en lugar de una foto.

¿Cómo Puedo Configurar una Imagen de Fondo en WordPress?

Hay varias maneras de establecer una imagen de fondo en WordPress. Estos métodos suelen cambiar en función de la ubicación en la que quieras poner la imagen.

Por ejemplo, puedes decidir que te gustaría que la imagen de fondo fuera la misma en todo tu sitio web. Por otro lado, es posible que prefieras encontrar una forma de mostrar imágenes de fondo únicas para todas tus páginas.

Dado que existen tantas posibilidades, cubriremos cómo añadir una imagen o color de fondo en las siguientes secciones:

• Todo el sitio
• Una página de WordPress
• Una entrada de WordPress
• Un bloque de contenido individual
• La cabecera de WordPress
• Una página de archivo de categorías
• La página de inicio de sesión de WordPress
• El menú de navegación
• Una página de mantenimiento

Cómo Añadir una Imagen de Fondo a la Cabecera y Menús de WordPress

Antes de Empezar: Activa el Soporte de Fondo Personalizado en WordPress (Si es Necesario)

Los desarrolladores de temas deciden el destino de las características de fondo de un sitio. WordPress tiene la funcionalidad incorporada en el núcleo, pero un desarrollador de temas podría desactivarla, dejándote sin un ajuste en el panel de control para activarla.

Si en algún momento de los siguientes tutoriales te das cuenta de que tu tema es la razón por la que te falta la opción de fondo personalizado, considera los siguientes pasos para solucionarlo rápidamente.

El principal soporte de fondo personalizado para WordPress es manejado por el archivo functions.php. Abre ese archivo e inserta el siguiente código si no lo tienes:

$defaults = array(
    'default-color'          => '',
    'default-image'          => '',
    'default-repeat'         => '',
    'default-position-x'     => '',
    'default-attachment'     => '',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

Ten en cuenta que el elemento que realmente activa el soporte de fondo es la función add_theme_support() con todo lo que contiene. Ese código activa la función de fondo en el tablero de WordPress, que puedes utilizar dentro de muchos de los siguientes tutoriales en este artículo.

También es posible añadir una imagen de fondo por defecto para todo el tema a través del archivo functions.php. Simplemente dirígete al área del código anterior con el valor de default-image y añade la URL de la imagen en el espacio en blanco entre el ' ' después del =>.

Esta es una forma rápida y sencilla de activar los fondos personalizados dentro del panel de control de WordPress.

Dicho esto, te  recomendamos cambiar el tema si no tienes soporte de fondo en primer lugar. La eliminación de la función de fondo personalizado podría tener su propio propósito, o tal vez el desarrollador del tema encontró que estaba causando demasiados problemas con el diseño.

Cómo Añadir una Imagen de Fondo a Todo Tu Sitio de WordPress

Si tu tema ofrece la posibilidad de añadir una imagen de fondo personalizada (y muchos lo hacen), te lo pone mucho más fácil.

Para empezar, dirígete a tu panel de control de WordPress y haz clic en Apariencia > Personalizar.

Eso te lleva al personalizador de temas de WordPress, con los ajustes de personalización a la izquierda y una vista previa del sitio web a la derecha.

Aquí, busca y haz clic en la pestaña Imagen de fondo.

Como alternativa, si puedes seleccionar Apariencia > Fondo, puedes utilizarlo para una ruta más rápida a este ajuste.

El área de personalización de la Imagen de fondo gestiona los elementos de fondo de toda tu página web.

Haz clic en el botón Seleccionar imagen para continuar.geEn la ventana Seleccionar imagen, elige una imagen que se adapte bien como fondo a tu marca y al estilo de tu sitio web. En general, un patrón de color neutro con un tono negro, o blanco, o gris suele ayudar a garantizar que la mayor parte de tu texto y contenido siga viéndose bien con el fondo detrás.

Una vez seleccionada la imagen, haz clic en el botón Elegir imagen para continuar.

El fondo que has implementado aparece ahora en la vista previa del sitio web.

Comprueba si tu contenido sigue destacando y parece presentable con la imagen elegida. A veces, es posible que tengas que cambiar completamente el fondo o cambiar cosas como el texto o los colores de los enlaces.

También aparece una pequeña miniatura del fondo en el panel de Ajustes, que te indica que la imagen ha sido implementada.

Hay algunos ajustes adicionales disponibles para los fondos de WordPress, incluyendo el campo Preajuste.

Haz clic en el campo Preajuste para cambiar el formato de la imagen utilizando diseños y alineaciones preestablecidos.

Puedes elegir entre los siguientes preajustes:

• Por defecto: Suele ser lo mismo que Repetir, pero puede depender de tu tema. La configuración por defecto suele funcionar mejor, pero depende de la imagen que se utilice.
• Rellenar pantalla: Este ajuste estira la imagen para asegurar que todas las partes de la pantalla queden cubiertas, incluso si esto significa recortar la imagen, por lo que se desborda de la pantalla. Funciona bien con muchas imágenes de alta resolución, pero podría causar desenfoque con imágenes de baja resolución.
• Ajustar a la pantalla: Mantiene la relación de aspecto de la foto original e intenta utilizar esa relación para ajustarse a la imagen de la pantalla actual. Hace un buen trabajo al mantener la imagen cerca de su estado original, pero puede no cubrir toda el área de fondo.
• Repetir: Utiliza partes de la función Rellenar pantalla, expandiendo y estirando la imagen, pero también repite la imagen cuando no puede cubrir toda la pantalla con éxito. En el caso de los patrones, esto suele quedar muy bien. Pero para algunas imágenes, puede producir una línea dura entre las imágenes repetidas.
• Personalizado: Esta configuración te da el mayor control sobre el fondo, ofreciendo varias opciones para personalizar el tamaño de la imagen de fondo de WordPress, como la forma en que se repite en la página, se estira o se mueve a medida que el usuario se desplaza.

No hay una regla que indique cuál de los preajustes funciona mejor porque las imágenes tienen diferentes tamaños, resoluciones y detalles. Por lo tanto, lo mejor es comenzar con el preajuste Por defecto y luego probar cada uno de los otros preajustes para ver cuál se ve mejor para tu imagen de fondo.

Si todo lo demás falla, dirígete a la configuración personalizada para ser realmente específico con tus opciones.

El ajuste preestablecido Ajustar a la pantalla no es suficiente para esta imagen, principalmente porque la imagen original es mucho más larga que ancha, dejando una cantidad significativa de espacio a la derecha. Podrías cambiar la Posición de la Imagen al Centro, pero lo más probable es que deje espacio en blanco a los lados.

El siguiente ajuste a tener en cuenta es la herramienta Posición de la imagen. Haz clic en las flechas para mover tu imagen de fondo, ajustando la orientación para colocar el foco de la imagen hacia el centro o llenando la pantalla.

Al igual que la configuración de los preajustes, la herramienta Posición de la imagen requiere un proceso de adivinación y revisión de tu trabajo, ya que la imagen original y su contenido dictan su aspecto.

A continuación, hay un campo de selección para que la imagen de fondo se desplace con la página.

Con esta casilla marcada, la imagen de fondo se adhiere al contenido en primer plano y se desplaza junto con el usuario cuando éste se desplaza hacia arriba o hacia abajo en la página.

Desmarcar esa casilla tiende a cambiar la orientación general de la imagen de fondo, aunque su función principal es indicar que el fondo permanezca estático mientras el usuario se desplaza por la página.

Los elementos de contenido en primer plano (como los productos en este caso) se deslizan sobre la imagen de fondo, creando un efecto atractivo.

Trabajar con un Preajuste Personalizado

Cuando se opta por algo más que el preajuste personalizado, no hay muchos ajustes adicionales para configurar.

Sin embargo, al elegir el preajuste Personalizado se abren otros campos a tener en cuenta.

Por ejemplo, puede elegir Llenar la pantalla o Ajustar a la pantalla, y luego combinar eso con una imagen de fondo repetida o no repetida, combinando los elementos de los preajustes de antes. Y sigue teniendo la opción de Desplazamiento con la página.

Comprueba si es posible utilizar la imagen original sin ninguna edición o ajuste. A veces, la foto original es casi perfecta para usarla como fondo, así que ¿por qué estropear lo que ya está listo?

Sin embargo, su tamaño también puede ser demasiado grande para tu sitio web, o tal vez la relación de aspecto no sea la adecuada. En cualquier caso, te sugerimos que experimentes con esta configuración para saber si es la adecuada para ti.

Una vez que decidas la configuración perfecta del fondo (para este tutorial, la opción predeterminada se ve bien), haz clic en el botón Publicar para hacer los cambios en tu sitio web.

Dirígete al frontend de tu sitio web para ver la imágen de fondo en acción.

La página de inicio es un lugar maravilloso para empezar. Verás que la zona de la cabecera y la imagen de bienvenida no tienen fondo. Esto se debe a que la imagen de bienvenida en la parte superior del sitio ya está cubriendo toda la parte horizontal de la pantalla como una imagen heroica a pantalla completa.

En cuanto a la cabecera y el menú, aprenderás a configurar esos fondos en algunos de los siguientes tutoriales.

Ten en cuenta que el fondo general personalizado de WordPress se activa en todas las páginas y entradas de tu sitio web. Es una característica global para aquellos que quieren una forma rápida de marcar su sitio y añadir algo de brillo.

Por ejemplo, al ir a la página de la tienda de este sitio se puede ver el trasfondo de la selección de productos.

Cómo Establecer un Color de Fondo en Lugar de una Imagen para Todo Tu Sitio Web

El proceso de activar un color de fondo en todo el sitio web no es muy diferente al de activar una imagen de fondo. Empieza por ir a Apariencia > Fondo en el panel de control, y luego busca el campo Color de fondo.

Haz clic en el botón Seleccionar color para abrir más ajustes para elegir y alternar diferentes colores para tu fondo.

El panel de colores te ofrece múltiples opciones para decidir un color. La primera es escribir o pegar un código de color. Todos los colores tienen códigos de color únicos, y puedes encontrar estos colores y sus códigos asociados con una rápida búsqueda en Internet.

La otra opción es hacer clic en el panel de colores para encontrar el color perfecto para el fondo. Incluso tienen muestras de colores comunes hacia la parte inferior del panel si prefieres tomar uno de los colores más simples.

Para activar un color de fondo, asegúrate de que el color está seleccionado y se muestra en la vista previa de Seleccionar color.

Deberías ver el fondo de color en la vista previa del personalizador de WordPress. Si no es así, lo más probable es que tengas instalado un fondo de imagen que está anulando el fondo de color.

Todo lo que tienes que hacer para revelar el fondo de color es hacer clic en el botón Eliminar debajo de la vista previa de la Imagen de fondo.

Ahora el color aparece en la totalidad de tu sitio, detrás del contenido. Al igual que con un fondo de imagen, es prudente mirar a través de tu sitio web para asegurarte de que todo el texto, las imágenes y los enlaces siguen siendo visibles con el nuevo fondo.

Cómo Añadir una Imagen de Fondo a una Página de WordPress

¿Pero qué pasa si quiere insertar una imagen en WordPress para que aparezca como fondo en una sola página de WordPress? En la sección anterior se describen los ajustes globales para una imagen de fondo para todo el sitio.

Echa un Vistazo a Nuestro Videotutorial para Añadir Imágenes de Fondo a Páginas Únicas, Entradas y Bloques de Contenido de WordPress

Mucha gente disfruta añadiendo fondos a sus páginas porque se puede incorporar un determinado tema o sensación a una página que se aplica al contenido. Por ejemplo, una página sobre nosotros podría tener un fondo de Los Ángeles si la empresa está en esa ciudad. O una introducción a un libro de un autor podría incluir un fondo que se ajuste al tema de la historia.

En esta sección, veremos cómo añadir una imagen de fondo de WordPress a una página utilizando un método principal y algunas alternativas si no te importa gastar dinero en un plugin u optar por un constructor de páginas.

Nota: No importa si usas el editor Gutenberg o el clásico de WordPress.

Para los fondos de páginas específicas, estos métodos parecen funcionar mejor:

• Añadir un fondo de página único con CSS personalizado.
• Utilizar un plugin que permita crear fondos de página individuales.
• Incorporar un fondo personalizado en cada página con la ayuda de un constructor de páginas.

Añadir tu propio CSS personalizado a una página implica encontrar el ID de clase de esa página y pedir una URL de fondo, dentro del módulo de CSS personalizado, en la configuración de la página de WordPress. Por suerte, no es tan difícil averiguar el ID de clase de una página, teniendo en cuenta que podemos buscarlo, o puede que ya sepas cuál es.

Dirígete a la página de tu sitio para la que quieres una imagen de fondo solo para esa página.

Haz clic con el botón derecho del ratón en cualquier parte de la página para que aparezca un menú desplegable en tu pantalla. Selecciona la herramienta Inspeccionar en la parte inferior del menú desplegable.

El módulo Inspeccionar muestra la codificación de la propia página, junto con el CSS personalizado utilizado globalmente para tu sitio web. Es un área útil para localizar información sobre una página o una entrada en tu sitio.

El cuadro de inspección tiene líneas de código de la página, pero solo nos interesa la etiqueta de clase asignada a esta página en particular. Para aclarar, cada página de WordPress tiene una etiqueta de clase como código de identificación.

Utiliza la función de búsqueda y escribe body o class para localizar la línea de código con la etiqueta page-id.

En este caso, el ID es page-id-352, pero el tuyo será diferente.

Querrás copiar toda la parte del código con la palabra clave page-id-#, incluyendo los guiones.

Con el ID de la página guardado en algún lugar para usarlo en los próximos pasos, vuelve a tu panel de control de WordPress y haz clic en Apariencia > Personalizar.

Selecciona la pestaña CSS adicional en el personalizador de WordPress.

Esta sección te permite escribir o pegar cualquier CSS personalizado que desee para manipular elementos en todo tu sitio web. En este caso, resulta útil para anular la imagen de fondo por defecto y habilitar una imagen de fondo para una página y no para las demás.

Pega el siguiente código en el campo CSS adicional, pero recuerda sustituir el «#» por el número real que sacaste como ID de la página en los pasos anteriores. Además, debes poner una URL de imagen real en lugar del texto de relleno que tenemos ahí (http://YOURIMAGEURL.jpeg).

body.page-id-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

En este ejemplo, el ID de la página se ha rellenado como 352, y tenemos una URL de imagen de fondo pegada desde nuestra biblioteca multimedia.

Si es necesario, cambia la configuración del fondo personalizado si tiene problemas para adaptar la imagen de fondo de la pantalla. Por ejemplo, es posible que quieras modificar elementos como el tamaño de la imagen de fondo de WordPress, su fijación o su posición. Si no es así, déjalos todos como están en el código de ejemplo.

Haz clic en el botón Publicar cuando estés satisfecho con el CSS personalizado.

Con ese CSS personalizado, la página especificada incluye una imagen de fondo utilizando los ajustes de tamaño y posicionamiento del código. Ninguna otra página de tu sitio mostrará el mismo fondo a menos que repita el CSS para diferentes ID de página.

Como se mencionó anteriormente, tus otras opciones para agregar un fondo único a una página de WordPress incluyen el uso de un constructor de páginas o un plugin que permite imágenes de fondo en páginas individuales.

Sin embargo, la forma más barata y rápida de colocar una imagen de fondo en una página individual es utilizar el método de código CSS mostrado anteriormente.

Cómo Añadir una Imagen de Fondo a una Entrada de WordPress

La mayoría de las imágenes de fondo se insertan detrás de las páginas de WordPress o en cada página de un sitio web.

La función de imágen de fondo personalizado por defecto en WordPress no tiene nada que ver con las entradas individuales, además del hecho de que este fondo se mostrará para las entradas del blog también. Esto no es ideal para todas las organizaciones, ya que diferentes entradas del blog podrían tener temas drásticamente diferentes.

Estos blogs podrían beneficiarse de sus propias imágenes de fondo. Sin embargo, las entradas de WordPress no tienen su propia configuración de imagen de fondo, lo que hace que sea un poco más complicado.

Por lo tanto, tenemos unas cuantas opciones a tener en cuenta a la hora de añadir una imagen de fondo a una entrada (verás que son las mismas que cuando se trabaja con imágenes de fondo específicas de la página):

• Insertar una imagen de fondo usando CSS personalizado.
• Utilizar un plugin para implementar un fondo en las entradas individuales.
• Instalar un constructor de páginas visual para los fondos de los posts.

Al igual que en la sección anterior sobre los fondos de página únicos, puedes añadir un fondo específico para un puesto utilizando un constructor de páginas o un plugin.

Dado que la creación de un fondo específico para una entrada no es muy diferente a la de uno específico para una página, solo tocaremos brevemente los pasos para manejar este proceso para una entrada individual.

Cuando se utiliza el CSS personalizado para implementar un fondo específico para una entrada, se utiliza el mismo código que para el fondo de la página, con una diferencia: se debe encontrar el ID de la entrada en lugar del ID de la página.

Por lo tanto, abre el frontend de una entrada de WordPress en la que quieres insertar una imágen de fondo.

Haz clic con el botón derecho del ratón en la entrada y elige la opción Inspeccionar. Realiza una búsqueda dentro del código para localizar la sección de la clase body en el código. Busca la parte postid-#, que es el ID de la entrada que debes insertar en el CSS personalizado.

Notarás que el formato del ID de la entrada es ligeramente diferente en este ejemplo comparado con el ID de la página, donde la etiqueta postid-# no tiene un guión entre «post» e «id» como ocurre con page-id-#. Además, no se trata de reglas estrictas. Puedes encontrar formatos variados para las etiquetas.

Ahora, ve a tu panel de control de WordPress y haz clic en Apariencia > Personalizar. Ve a la pestaña CSS adicional.

Pega el siguiente código en ese campo CSS personalizado:

body.postid-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

Después de eso, apunta el número de identificación del puesto que has encontado en la entrada deseada antes. Sustituye el «#» en el código CSS por el número. Además, cambia el texto http://YOURIMAGEURL.jpeg con la URL real de la imagen de fondo que deseas mostrar, manteniendo las comillas alrededor de ella.

Asegúrate de pulsar el botón Publicar antes de salir de la pestaña CSS adicional, ya que esto guarda tus cambios en el sitio web y te permite ver la imágen de fondo en el frontend.

Con esos cambios CSS, ahora puedes volver al frontend de esa entrada de blog de WordPress para ver la nueva imágen de fondo. Prueba las otras entradas del blog y las páginas en tu sitio para ver que ninguno de los otros tienen un fondo a menos que implementar el mismo código para los ID de los puestos.

Cómo Añadir una Imagen de Fondo a un Bloque de Contenido Individual

Los bloques de contenido individuales del editor de bloques de WordPress Gutenberg permiten una amplia gama de opciones de visualización de contenido, incluyendo cuadros de texto, imágenes y galerías.

Estos bloques dividen el contenido en secciones separadas. Así, puedes añadir un color o imagen de fondo solo para ese bloque.

Por ejemplo, digamos que estás escribiendo un post en tu blog sobre el estado de la industria de la ropa al por menor. Quieres terminar o empezar el post con una llamada a la acción para que la gente se inscriba en tu próximo seminario web. Tendría sentido que esta sección destacara utilizando un color o imagen de fondo.

Lamentablemente, el editor de bloques de WordPress no ofrece una configuración completa en la que se pueda añadir un fondo a cualquier bloque. Sin embargo, algunos bloques tienen la opción de incorporar un fondo de color.

También hay un bloque, llamado bloque de portada, que es lo más parecido a añadir una imagen de fondo para un bloque en un post o página. La portada permite superponer texto y algunos elementos multimedia, por lo que es adecuada para nuestro objetivo final.

A continuación se muestran las técnicas que se deben utilizar para establecer una imagen o un color de fondo para un bloque individual de WordPress.

Establecer un Fondo de Color para un Bloque

La forma más sencilla de añadir algo de vivacidad a un bloque individual es añadir un fondo de color. No es tan elegante como una imgen fondo, pero el fondo de color es en realidad el único tipo de fondo en el editor de bloques de WordPress disponible para los bloques estándar.

Nota: Algunos bloques no tienen ninguna configuración de fondo. Si ese es el caso, lo mejor es que utilices un bloque de portada y superpongas otros bloques sobre él, como te explicaremos más adelante en este artículo.

El bloque Párrafo, por ejemplo, tiene un ajuste para activar un fondo de color.

Para activarlo, selecciona el bloque y, a continuación, localiza la Configuración del color en la pestaña Bloque del lado derecho.

Esta sección revela los campos Color de texto y Color de fondo.

Dirígete al área de Color de fondo y seleccioa un color de la lista de opciones disponibles. También puedes elegir el enlace Color personalizado para insertar tu propio código de color o elegir un color único.

Como puedes ver, una vez que la configuración está en su lugar, el fondo del bloque de párrafo se convierte en un color diferente, en este caso, azul.

Añadir un Fondo de Color a Cualquier Bloque de WordPress

Como se ha mencionado antes, no todos los bloques de WordPress tienen esta función de fondo incorporada. ¿Qué debes hacer si quieres hacer una galería, o algún otro elemento del bloque, que no ofrezca la opción de fondo?

La solución más rápida es utilizar la función de bloques de grupos de WordPress.

Para ello, selecciona varios bloques ya en tu contenido. Para este ejemplo, seleccionaré simultáneamente un bloque de Párrafo y un bloque de Galería.

Haz clic en el icono del cuadrado apilado en el menú que aparece.

Elige la opción Grupo en el menú desplegable.

Esto toma los bloques que tengas seleccionados en ese momento y los combina en un grupo, lo que te permite moverlos o editarlos todos juntos en lugar de los bloques separados.

Esto establece el Grupo como su propio bloque. Esto significa que puedes ir a la pestaña de Configuración del bloque en la parte derecha de la página para encontrar tu configuración.

Busqca la pestaña Configuración de color y haz clic en ella.

Al igual que un bloque de párrafo estándar, el bloque de grupo también tiene una función de color de fondo.

Elige el color que más te guste para esta situación para ver que todo dentro de ese grupo debe tener ahora ese color de fondo.

Lo bueno del bloque Grupo es que toma otro bloque que no tiene fondo (como el bloque Galería) y te permite activar un fondo de todas formas.

Añadir una Imagen de Fondo a un Bloque de WordPress

Los bloques de WordPress están tanto en las páginas como en las entradas. Por lo tanto, podemos implementar esta táctica en cualquiera de ellos. Puedes insertar casi cualquier contenido por encima del fondo del bloque agrupado – o solo en un bloque de WordPress.

Para comenzar con este proceso, haz clic en el botón Añadir bloque o en el icono «+» y busca el bloque de la portada.

Elige ese bloque para insertarlo en tu entrada o página.

A continuación, debes hacer clic en el botón Subir o Seleccionar medios, que te permite buscar imágenes que puedas utilizar como fondo.

Elige la imagen que quieras y haz clic en el botón Seleccionar.

Ahora puedes ver esa imagen como fondo del bloque de la portada.

No dudes en hacer clic en ese bloque para empezar a escribir el contenido de los párrafos, ya que la función principal es la de superponer el texto.

Lo mejor del bloque de la portada es que ofrece varias opciones de formato, lo que te permite pasar de un título a un formato de párrafo en segundos.

Para añadir otros bloques sobre ese fondo, haz clic en el botón del icono «+» dentro del propio bloque de la portada. Es posible que tengas que pulsar la tecla Enter una vez para revelar el botón.

De forma similar a la adición de un bloque de contenido en un artículo normal, el bloque de portada te permite desplazarte por todos los posibles bloques de contenido en WordPress.

Esto significa que puedes colocar una imagen, una galería, columnas o cualquier tipo de bloque de WordPress dentro del bloque de la portada, lo que lo convierte en la solución ideal para los fondos de imagen con un bloque individual.

Para este ejemplo, he insertado una imagen y la he formateado un poco para que parezca aceptable dentro del bloque de la portada.

Cada bloque que coloques delante del fondo tiene sus propios ajustes personalizados en la pestaña Bloque del lado derecho, así que considera la posibilidad de editarlos mientras los colocas en el bloque de la portada.

En algún momento, es posible que quieras editar o personalizar la propia imagen de fondo. Si ese es el caso, elige el bloque de la portada y luego ve a la pestaña Configuración del bloque en la parte derecha de la página.

Esto revela una miríada de configuraciones para ajustar la imagen de fondo, incluyendo las siguientes:

• Fondo fijo
• Antecedentes repetidos
• Recogida de puntos focales
• Dimensiones
• Superposición
• Opacidad
• Avanzado

Una de las configuraciones más importantes a tener en cuenta se encuentra hacia la parte inferior del panel de Configuración de Bloqueo.

Desplázate hacia abajo para encontrar la sección Superposición. Abre la sección para revelar una lista de superposiciones de color y opciones para hacer esos colores sólidos o degradados.

Esta es una gran opción para cambiar ligeramente el color de fondo para que coincida con tu marca o resalte su contenido en primer plano. También puedes ajustar la Opacidad para asegurarte de que la superposición de color no abrume el fondo por completo.

Como alternativa, considera el plugin Stackable Page Builder Gutenberg Blocks para abrir herramientas más avanzadas para los fondos en bloques individuales.

Cómo Poner una Imagen de Fondo Detrás de la Cabecera de WordPress

Hasta ahora, hemos hablado de cómo añadir una imagen de fondo a todo tu sitio de WordPress, junto con métodos para fondos en áreas específicas como bloques de WordPress, entradas y páginas. Pero, ¿qué pasa con el área que contiene el menú y el logotipo?

A veces, un fondo detrás de tu cabecera es todo lo que necesitas.

Poner una imsagen de fondo en la cabecera da un nuevo aire a tu sitio, sobre todo si hay alguna festividad o alguna gran venta que puedas destacar.

Para empezar, dirígete a Apariencia > Cabecera en el panel de control de WordPress.

Nota: También puedes encontrar la configuración de la cabecera yendo a Apariencia > Personalizar > Cabecera.

Ahora debería ver una vista previa de tu página de inicio en la parte derecha de la pantalla, junto con la configuración del encabezado a la izquierda de la misma.

Elzódulo de cabecera explica las dimensiones preferidas para cualquier imagen de fondo de la cabecera, por lo que puedes optar por recortar tu imagen antes de subirla o esperar a tenerla en tu panel de WordPress.

Bajo el título de la cabecera actual, haz clic en el botón Añadir nueva imagen.

Las cabeceras son complicadas porque hay que asegurarse de que todos los enlaces y elementos de texto (por no mencionar el logotipo) se vean con claridad sobre la imagen de fondo.

Por lo tanto, te recomendamos que pruebe las imágenes de fondo y considera las que se ciñen a colores y patrones más sólidos. No dificultarán tanto la visión de los elementos del menú y el logotipo.

Selecciona una imagen que te parezca ideal y haz clic en el botón Seleccionar y Recortar para continuar.

Nos gusta la herramienta de recorte incorporada, ya que proporciona automáticamente las dimensiones adecuadas para la imagen de fondo de la cabecera. Esto debería acelerar el proceso en comparación con la edición de una foto de antemano en algo como Photoshop.

Mueve el cuadro de recorte a la ubicación que tenga más sentido para tu imagen de fondo. Siéntate libre de arrastrar una de las esquinas si necesita recortar la imagen aún más.

Una vez que tengas el recorte perfecto, haz clic en el botón Recortar imagen.

La imagen de fondo de la cabecera se activa inmediatamente en la vista previa del personalizador de WordPress, ayudándote a ver exactamente lo que tus clientes verán con este tipo de fondo.

Observarás que la imagen de fondo de la cabecera no se traslada al resto del contenido de la página. En cambio, permanece en la cabecera, detrás de todo lo que se encuentra allí, como el logotipo, el eslogan, el menú y la barra de búsqueda.

Otra opción para el fondo de tu cabecera es subir varias imágenes y hacerlas rotar aleatoriamente, añadiendo un poco de brillo y sorpresa a tu sitio web cada vez que un usuario aterrice en la página de inicio.

Para que esto funcione, primero debes tener varias imágenes cargadas en el cuadro de configuración de la cabecera. Haz clic en el botón Añadir nueva imagen para completar ese proceso.

Una vez que tengas más de una imagen, haz clic en el botón Aleatorizar cabeceras cargadas para activar la función que muestra un fondo de cabecera diferente cada vez.

Puedes notar que añadir una imagen de fondo a la cabecera hace que sea difícil ver algunos de los elementos de la cabecera, como el menú o el carrito de la compra.

Si ese es el caso, le sugerimos que no elimine inmediatamente la imagen de la cabecera. En su lugar, vaya a los campos Color del texto y Color del enlace para ver si algún ajuste puede ayudar.

La configuración del color del texto controla cualquier texto en la cabecera que no esté hipervinculado a otra página interna o externa. Muchas veces eso solo significa el eslogan, si tienes uno, pero a veces puedes tener otros elementos como el total del carrito de la compra o los iconos de las redes sociales que también cambian de color con el texto.

La otra casilla es para el Color de los enlaces. Lo más probable es que vea más cambios cuando ajuste este color, ya que incluye todos los elementos del menú vinculados a otras páginas.

Este es un ejemplo de lo que ocurre cuando se elige un nuevo color tanto para el Color del Texto como para el Color del Enlace. Puedes ver que el eslogan y el nombre del sitio han cambiado, el menú ha cambiado a blanco y también la mayoría de los demás elementos de la cabecera, como el icono del carrito de la compra.

Para aquellos que no estén interesados en utilizar una imagen de fondo para su cabecera, también tienen la opción de utilizar un fondo de color sólido.

Para ello, busca el campo Color de fondo en la misma área de Configuración de la cabecera.

Haz clic en el botón Seleccionar color y elige en el panel de colores para ver los resultados de la vista previa. También puedes cambiar los colores del texto cuando se utiliza un color de fondo.

Después de probar lo que funciona mejor para su cabecera, y de decidir la imagen de fondo perfecta para esa cabecera, haz clic en el botón Publicar para que todos vean los cambios.

Y si tienes algún problema para visualizar los cambios en el frontend, considera la posibilidad de borrar la caché de WordPress.

Cómo Añadir Imágenes de Fondo a la Categoría de WordPress y a la Página de Inicio de Sesión

Cómo Añadir una Imagen de Fondo a una Categoría de WordPress

Una página de archivo de categorías de WordPress recopila todas las entradas listadas bajo una determinada categoría. Por ejemplo, muchos sitios web tienen categorías para tipos de entradas personalizadas como Productos. Por defecto, todos los sitios web de WordPress tienen categorías para las entradas. Las que no se categorizan se etiquetan con la categoría Sin categoría.

Dado que las páginas de archivo de las categorías agregan contenido similar, tiene sentido incluir una imagen de fondo relevante en esas páginas para mostrar mejor la categoría. Por ejemplo, podrías tener un fondo orientado a la tecnología para una categoría de Diseño Web o un fondo con conchas marinas o motivos de playa para una categoría de Viajes.

El método de CSS personalizado (descrito a continuación) es la opción más barata. Sin embargo, también puedes buscar en los diferentes constructores de páginas y plugins para ver cuáles de ellos permiten fondos en las páginas de categorías.

Para completar esta tarea con CSS, abre tu panel de control de WordPress y dirígete a Apariencia > Personalizar.

Selecciona la pestaña CSS adicional para abrir el módulo que permite introducir tu propio CSS.

Abre una de sus páginas de archivo de categorías en tu sitio de WordPress. Normalmente, estas páginas tienen URLs como esta: http://yourwebsitedomain.com/category/travel. Tienes que cambiar la parte de viajes por la categoría que tengas en tu propio sitio y cambiar la parte de yourwebsitedoman por tu nombre de dominio real.

Haz clic con el botón derecho en cualquier parte de la página de la categoría y haz clic en Inspeccionar. Aparecerá la herramienta de inspección en su navegador, con el código de esa página presentado para que lo veas.

Busque «body» o «class» para localizar la clase CSS de las páginas de categoría, junto con la clase de esta categoría en particular.

Para esta situación, nuestra clase CSS es «category-travel», ya que tengo una categoría llamada «Travel» en el sitio.

Guarda la etiqueta CSS para más tarde.

Después de eso, navega de nuevo a la sección de CSS adicional en su personalizador de WordPress.

Pega el siguiente código en ese cuadro, cambiando la clase category-travel por la Tuya propia y colocando una URL de imagen real en el lugar que dice http://YOURIMAGEURL.jpeg.

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

Pulsa el botón Publicar para guardar los cambios.

Por último, vuelve a la página del archivo de categorías en el frontend de tu sitio de WordPress. Ahora debería mostrar la misma página de antes, pero con el fondo especificado en el código CSS. Si tienes algún problema con el formato de la imagen de fondo de WordPress, vuelve al panel de CSS adicional para ajustar elementos como la posición, el tamaño y la función de repetición del fondo.

Cómo Añadir una Imagen de Fondo a Tu Página de Inicio de Sesión de WordPress

La página de inicio de sesión de WordPress tiene dos versiones: una para los usuarios normales que llegan a tu sitio y quieren registrarse e iniciar sesión en tu sitio web, y la otra para los usuarios internos, como los administradores y los autores.

Estas páginas de inicio de sesión están separadas del funcionamiento principal de tu sitio web (la mayoría de los archivos se encuentran en el archivo wp-login.php). Por lo tanto, la herramienta de imagen de fondo personalizada no se extenderá a los módulos de inicio de sesión.

Puedes hacerlo utilizando un plugin llamado Custom Login Page Customizer. Para empezar, instala y activa el plugin en tu sitio de WordPress.

A la izquierda, aparece una nueva pestaña en el menú del panel de control de WordPress para LoginPress.

Dirígete a LoginPress > Configuración.

Aquí, puedes ajustar la configuración del plugin antes de añadir tu imagen de fondo y personalizar cualquier otra parte de tu página de inicio de sesión.

Por ejemplo, ofrece configuraciones para recordar automáticamente a los usuarios, mostrar campos de contraseña personalizados y expirar las sesiones después de un determinado período de tiempo.

Para activar un fondo de imagen personalizado para la página de inicio de sesión, haz clic en LoginPress > Customizer.

Esto te envía al Personalizador de WordPress, donde se ha añadido una nueva página para las herramientas de LoginPress. Verás que hay pestañas para Temas, Logotipo, Fondo y muchos más.

También es posible personalizar la página de inicio de sesión haciendo clic en los botones de la vista previa.

No cubriremos todos los demás ajustes, ya que ahora nos centramos principalmente en el fondo.

Haz clic en la pestaña Fondo para continuar.

Lo primero es decidir si quieres un fondo de color o de imagen.

Si prefieres un fondo de color, localiza el campo Color de fondo y haz clic en Seleccionar color. Esto revela un panel de colores para que elijas exactamente qué color tiene sentido para tu negocio.

Como puedes ver, el cambio entra en vigor también en la vista previa del Personalizador de WordPress.

Justo debajo de la configuración del color de fondo, hay una sección de imagen de fondo.

Activa el interruptor de Habilitar Imagen de Fondo para mostrar una colección de imágenes de fondo ya hechas.

No hay muchos para elegir en la versión gratuita, pero el plugin añade más si decides actualizar a la versión premium.

Prueba estos fondos prefabricados para ver si pueden funcionar para tu marca.

El camino más probable es subir tu propia imagen como fondo de la página de inicio de sesión.

Busca el apartado Imagen de fondo y haz clic en el botón Seleccionar imagen.

Se te llevará a la biblioteca multimedia de WordPress para que suba una imagen desde tu ordenador o elijas una de las que ya están dentro de WordPress.

Selecciona la foto que desees y haz clic en el botón Elegir imagen.

La imagen de fondo activada aparece como una miniatura en el panel del Personalizador y en la vista previa real de tu página de acceso.

Ahora tienes la opción de hacer clic en el botón Publicar y quedarte con lo que hay en la pantalla. O bien, puedes desplazarte hacia abajo hasta los ajustes adicionales para asegurarte de que la mejor vista de la imagen cargada está actualmente activa.

Haz clic en el campo desplegable Repetición de fondo y prueba opciones como Repetir, No repetir y Repetir-x.

Dependiendo del tamaño de tu foto, puede que veas que la imagen se mueve un poco o no.

A continuación, busca en las opciones de Seleccionar posición para mover aún más la imagen de fondo.

Por defecto, colocan la imagen en el centro de la pantalla, pero a veces queda mejor si la tienes situada en algún lugar como la parte inferior derecha o la superior izquierda. Prueba todos ellos para averiguar cuál funciona mejor para tu imagen de fondo.

Avanzando, el menú desplegable de Tamaño de la Imagen de Fondo de WordPress tiene la configuración de cómo la imagen cubre el espacio de la pantalla, ajustando su tamaño con cada opción preestablecida.

De nuevo, prueba estos ajustes para decidir cuál es el que mejor se ve. Es posible que descubras que algo como el ajuste Contain ofrece una vista mejorada en lugar de los ajustes Auto o Cover.

Y eso es todo lo que hay que hacer para subir y activar una imagen de fondo para tu página de acceso.

El último ajuste está ahí si quieres mostrar un vídeo como fondo en lugar de una imagen. Activa esta opción si tienes un vídeo interesante relacionado con tu negocio y que no desvíe demasiado la atención de las personas que se conectan al sitio.

Una vez que todo esté hecho, haz clic en el botón Publicar para activar el fondo de tu página de inicio de sesión y ver que se muestra cada vez que un usuario intenta registrarse o iniciar sesión en el sitio.

Cómo Añadir una Imagen de Fondo a Tu Menú de Navegación

Es posible que hayas observado algunos sitios web con menús extravagantes que incluyen imágenes de fondo o iconos. Esta es una práctica común en el mundo del eCommerce, donde la marca puede tener un mega menú con categorías e imágenes de fondo para cada botón de categoría.

Si estás interesado en añadir fondos a tu menú, mira nuestro artículo sobre los mejores plugins de menú para WordPress. Muchos de estos plugins de menú ofrecen opciones para incluir fondos de imagen y de color dentro de tu menú.

Dado que existen varios plugins para añadir un fondo determinado a los menús de navegación, proporcionaremos tutoriales para dos de ellos, uno de los cuales permite crear fondos detrás de tu submenú. En cambio, el otro añade un fondo a tu menú móvil.

Para añadir una imagen de fondo a diferentes submenús, instala y activa el plugin WP Mega Menu. Este plugin te permite activar y gestionar un mega-menú con múltiples niveles desplegables. Es ideal para grandes tiendas online, pero también sirve para menús más pequeños, especialmente si quieres añadir una imagen de fondo o iconos.

Comienza por encontrar la pestaña WP Mega Menu en el panel de control de WordPress.

Haz clic en la opción de menú Temas.

Aquí puedes ver una lista de temas por defecto creados para tu menú por el plugin.

Puedes hacer clic para editar cualquiera de los temas o añadir tu propio diseño desde cero.

Cada tema tiene su propia configuración donde se especifican elementos como el título del tema, las opciones de la barra de menús y el logotipo de la marca. Casi todas las partes de tu menú son personalizables, desde el menú desplegable hasta los submenús.

Sin embargo, para el fondo del menú, solo tienes que saber qué tema quieres elegir.

Dirígete a Apariencia > Menús en el panel de control.

Verás un nuevo módulo que enlaza con la configuración del Mega Menú.

Haz clic para habilitar el mega menú y luego elige el que más te guste para tu sitio web.

Por último, haz clic en el botón Guardar.

Ahora, desplaza tu atención hacia el área de la Estructura del Menú.

Si se desplaza sobre cualquiera de tus elementos de menú actuales, aparecerá un botón de WP Mega Menu. Aquí es donde se personaliza la disposición y el diseño de cada sección desplegable.

Haz clic en el botón WP Mega Menu para cualquier elemento del menú que desees. Para este caso, vamos a añadir un mega menú desplegable a la pestaña Tienda.

Nota: Asumimos que ya tienes un menú configurado en tu sitio de WordPress. Lee nuestra guía de menús desplegables de WordPress si necesitas ayuda con eso.

En la nueva ventana emergente, acciona el interruptor para activar el Mega Menú para ese elemento de menú en particular.

A continuación, puedes añadir una fila desplegable y arrastrar algunos de los muchos widgets del lado izquierdo a esa fila. Por ejemplo, arrastraremos una lista de productos para que aparezcan cuando alguien se desplace sobre el elemento del menú Tienda.

Para añadir un fondo a esta zona desplegable, haz clic en el botón Opciones de la esquina inferior izquierda.

Busca el campo Cargar imagen de fondo.

Haz clic en el botón Cargar para encontrar la foto adecuada en tu biblioteca multimedia y utilizarla como fondo.

Una imagen en miniatura aparece después de seleccionarla en la biblioteca de medios.

Hay otros ajustes a tener en cuenta, así que no dudes en comprobarlos si quieres.

Asegúrate de hacer clic en el botón Guardar cambios en la parte inferior del panel de opciones.

También tienes que hacer clic en Guardar menú de nuevo en el área de la estructura del menú del panel de control de WordPress.

Ahora, navega al frontend de tu sitio web para ver el menú. Si te desplazas sobre el elemento que acabamos de personalizar, deberías ver una sección desplegable con el fondo.

Otra forma de añadir una imagen de fondo a un menú es utilizando un menú móvil y responsivo que se muestra cuando alguien accede a tu sitio web a través de un dispositivo móvil.

Puedes colocar un fondo detrás del menú móvil con la ayuda del plugin WP Mobile Menu.

Después de instalar y activar el plugin WP Mobile Menu, dirígete a las opciones de menú móvil en el panel de control de WordPress.

El plugin ofrece varias formas de configurar tu menú móvil. El requisito general es habilitar uno de los formatos de menú e indicar qué menú de WordPress quieres usar para ese menú móvil.

Por ejemplo, podemos hacer clic en el interruptor de Habilitar Menú Izquierdo (activando un menú móvil que se sitúe en el lado izquierdo de la pantalla) y elegir la opción de Menú Principal en el desplegable de Menú Izquierdo. Esto enlaza nuestro Menú Principal actual con el menú móvil, de modo que los visitantes ven las mismas pestañas.

Depende del tipo de menú móvil que crees, pero como estamos haciendo un menú del lado izquierdo, podemos hacer clic en la pestaña Menú izquierdo para revelar la configuración adecuada para añadir un fondo.

Desplázate hasta el campo Imagen de fondo del panel y haz clic en el signo «+» para abrir la biblioteca multimedia.

Selecciona una imagen de tu biblioteca multimedia y añádela al campo.

Deberías ver una versión en miniatura de la imagen de fondo como confirmación.

Selecciona el botón Guardar cambios para activar el fondo.

Dado que el plugin genera menús para móviles, es posible que el menú solo aparezca cuando tu navegador esté configurado con un ancho reducido o cuando vayas a su sitio en un teléfono o una tableta.

El nuevo menú se consolida bajo un icono de hamburguesa (tres líneas horizontales).

Haz clic en eso para probar el nuevo menú con el fondo.

Como se muestra en la captura de pantalla, el fondo se coloca detrás de todo el menú del móvil para que todos lo vean.

Cómo Añadir una Imagen de Fondo de WordPress a una Página de Mantenimiento

Todos los sitios web requieren ocasionalmente mantenimiento, y a veces ese mantenimiento dura tanto que mostrar una página de mantenimiento ayuda.

Las imágenes de fondo juegan un papel importante cuando se trabaja con páginas de mantenimiento. La mayoría de las páginas de mantenimiento consisten en una imagen de fondo a pantalla completa y quizás algún texto o enlaces con más recursos.

Si ya tienes una página de mantenimiento y no incluye una imagen de fondo, considera los siguientes pasos para generar un entorno bonito para cuando necesites cerrar tu sitio web al público durante un periodo de tiempo.

Puedes añadir una imagen de fondo a una página de mantenimiento con la ayuda del plugin de Maintenance. Instala y activa el plugin en tu sitio web.

Una vez que esté activo, busca el botón Maintenance is On/Off  en la parte superior del panel de control.

Haz clic en el botón para ir a la página de configuración del plugin de Maintenance.

Otra forma de llegar a la página de Configuración es haciendo clic en el elemento de menú de Mantenance en el menú lateral del panel de control.

La página de Configuración del plugin de Maintenance tiene una buena colección de opciones para personalizar, pero el área principal a considerar es el módulo de Configuración General. Aquí, puedes escribir un Titular y una Descripción, ambos sirven como texto que se superpone sobre el fondo que vamos a insertar.

El título de la página se muestra en la pestaña del navegador, por lo que debería considerar personalizarlo también.

Puedes utilizar el plugin de mantenimiento para cualquier cosa, desde páginas de mantenimiento hasta páginas de próxima aparición, por lo que podrías escribir algo como «Nuestro sitio está en mantenimiento», o podrías mostrar un poco de información sobre tu empresa e incluir un formulario para que la gente escriba sus direcciones de correo electrónico.

Además, el plugin ofrece una opción para subir tu logotipo, que también se superpone a la imagen de fondo.

Haz clic en el botón Subir logotipo y elige tu logotipo para ver su miniatura en el panel de control.

Por último, el campo Imagen de fondo te pide que haz clic en el botón Subir imagen de fondo.

Cargue una imagen desde su ordenador o busque en su biblioteca multimedia un fondo adecuado para la página de mantenimiento.

Nota: Las mejores imágenes de fondo de mantenimiento son grandes, de alta resolución y en orientación horizontal. Una alternativa de fondo en «modo vertical» está disponible en la configuración de abajo.

Una vez que elijas el fondo, aparecerá como una vista previa en miniatura más pequeña en el panel de control.

Aunque una imagen de fondo con orientación horizontal tiene más sentido para los ordenadores de sobremesa y las pantallas más anchas, muchas personas terminan en tu sitio utilizando pantallas con orientación vertical, como cuando se sostiene un teléfono en posición vertical.

Por lo tanto, una imagen de fondo más amplia no se verá tan bien. Por ello, el plugin ofrece una imagen de fondo en modo vertical que sirve como alternativa, y que se cambia de forma responsiva cada vez que un usuario visita la página utilizando una pantalla orientada al vertical.

Es importante incluir una imagen en este campo, así que haz clic en el botón Subir imagen para la orientación vertical del dispositivo.

Esta vez, busca una imagen que sea más alta que ancha (modo retrato). Siempre puedes recortar la imagen de fondo original para convertirla en un retrato, o tienes la opción de subir una imagen completamente diferente para ocupar el lugar.

Resalta la imagen que desee y haz clic en el botón Seleccionar imagen para insertarla en el panel de control.

Todos estos ajustes no significan nada si no se activa el modo de mantenimiento.

Para ello, localiza el interruptor de activación/desactivación del mantenimiento en la parte superior de la página de configuración.

Activa el interruptor para que se lea «On», y luego selecciona el botón Guardar cambios.

Ve al frontend de tu sitio web para asegurarte de que la imagen de fondo y la página de mantenimiento se muestran correctamente.

Es muy probable que no lo haga.

Hay dos razones para esto: En primer lugar, debes salir de la cuenta de administración de WordPress para ver el sitio web en modo de mantenimiento. En segundo lugar, es posible que tengas que borrar la caché del sitio para actualizar el cambio de contenido.

Por ejemplo, cuando salgo de la cuenta de administrador, ahora aparece la página de mantenimiento cuando voy a cualquier página.

La imagen de fondo está ahí, junto con mis personalizaciones como el logotipo y la descripción del texto.

Además, al cambiar el tamaño de las ventanas del navegador a una orientación más vertical, el fondo del modo vertical se ajusta a tu lugar.

También deberías ver el modo vertical cuando visite el sitio en un teléfono o una tableta.

Otro tipo de imagen de fondo con el plugin se llama Preloader Image. Esto esencialmente carga una imagen rápida con un efecto animado antes de revelar la página de mantenimiento real, el fondo y el contenido.

Al igual que la imagen de fondo normal, haz clic en el botón Subir Preloader para encontrar una imagen que se vea bien y añadirla al panel de control.

Una vez más, haz clic en el botón Guardar cambios y borra la caché.

Por defecto, el efecto de la Preloader Image gira durante un momento y luego desaparece para presentar la página de mantenimiento y la imagen de fondo.

Depende de ti si quieres mantener este tipo de efecto o no.

En el panel de configuración del plugin de mantenimiento hay disponibles otros elementos de fondo para que puedas experimentar.

Por ejemplo, puedes querer añadir un color de fondo en lugar de una imagen de fondo.

Si ese es el caso, dirígete al campo Color de fondo y selecciona un color que se ajuste a tu marca.

El color de fondo no se muestra para la página de mantenimiento a menos que desactives todas las demás imágenes de fondo.

Por lo tanto, asegúrate de eliminar la imagen de fondo.

También debes eliminar la imagen de fondo del Modo Retrato.

Guarda los cambios y borre la caché. A continuación, dirígete al frontend de tu sitio para ver el color de fondo en efecto.

Otros ajustes a tener en cuenta son elementos como el color de la fuente, la familia de la fuente y el desenfoque del fondo.

También te recomendamos que pienses si necesitas tener un inicio de sesión en el frontend o no. Esto proporciona una forma de que los usuarios inicien sesión en sus cuentas y accedan a los perfiles si es necesario.

Una vez que todo esté hecho, haz clic en el botón Guardar cambios.

El plugin Maintenance también ofrece varios temas prefabricados con bellas imágenes de fondo y diseños y textos profesionales.

Puedes encontrar temas para la página «Próximamante y diseños de mantenimiento, junto con páginas para recoger direcciones de correo electrónico y otra información de contacto.

Debes comprar los temas para utilizarlos.

Dependiendo de tu presupuesto, son bastante económicos y quedan muy bien.

Para aquellos que no estén interesados en comprar un tema, todos los ajustes mencionados anteriormente están a su disposición. También puedes entrar en el módulo de CSS personalizado para configurar la página de mantenimiento y la imagen de fondo como quieras.

Recuerda que la configuración de la página de mantenimiento rara vez entra en vigor a menos que salga de la cuenta de administrador y has clic en el botón Borrar caché.

Puedes encontrar el botón de Borrar Caché en la esquina superior derecha del panel de control cuando usas Kinsta. Si usas un host diferente, considera uno de los muchos plugins de caché que hay en el mercado.

Una vez que borres la caché y guardes la configuración, deberías ver una hermosa imagen de fondo que complementa la página de mantenimiento.

Cómo Añadir un Fondo a WordPress con un Constructor de Páginas de Terceros

Nuestro artículo sobre los mejores constructores de páginas ofrece una lista de opciones para elegir un constructor de páginas con funciones de arrastrar y soltar. WordPress ya incluye un constructor de páginas en Gutenberg, pero muchos propietarios de sitios web prefieren otras soluciones.

La siguiente sección explica cómo implementar un fondo utilizando algunos constructores de páginas populares, incluyendo Elementor, Beaver Builder y Page Builder by SiteOrigin.

Añadir un Fondo a WordPress con Elementor

Elementor, el popular constructor de páginas destinado a acelerar la producción de sitios web de forma espectacular, ofrece un plugin gratuito con varias herramientas de imagen de fondo.

Además, Elementor presenta flexibilidad de fondos visuales para varias partes de tu sitio web en lugar de restringir los fondos a todo el sitio web. Por ejemplo, puedes añadir un fondo detrás de casi cualquier sección de bloques de construcción y mostrar diferentes fondos de página a página.

Para empezar, instala y activa el plugin Elementor.

Elementor dispersa sus ajustes de fondo por todo el constructor, lo que facilita la selección de un elemento y la implementación de un fondo si es necesario. Por lo tanto, técnicamente se puede ir a cualquier página o post con la expectativa de tener acceso a un botón de carga de fondo.

En este caso, vamos a la página de inicio de nuestro sitio de prueba. Visita la página de tu elección seleccionando de la lista en Páginas > Todas las páginas. También puedes hacer lo mismo con las Entradas.

Una vez en el editor de páginas por defecto de WordPress, haz clic en el botón de Editar con Elementor.

Esto cambia la vista en tu pantalla al Editor de Elementor. Aquí, el lado izquierdo tiene un menú con módulos de arrastrar y soltar para construir y editar tu página.

La funcionalidad de fondo no está disponible en una sección o bloque, sino en la Configuración principal de esa página.

Por lo tanto, haz clic en el pequeño icono de Configuración (parece un engranaje) en la esquina inferior izquierda del editor.

Esto muestra una sección para la configuración general de la página.

Haz clic en la pestaña Estilo en la parte superior de la sección Configuración de la página.

En Estilo, localiza el campo Tipo de fondo y haz clic en el icono Pincel para añadir un fondo estándar.

A continuación, elige el tipo de fondo que deseas que aparezca. Por ejemplo, el campo Color te permite cambiar el fondo a un color sólido. También hay una opción de degradado en el campo Tipo de fondo si es más tu estilo.

Haz clic en el botón Elegir imagen bajo el campo «Imagen» para que aparezca tu biblioteca multimedia y elige una imagen de fondo adecuada para esta página.

Como siempre, prueba tus imágenes de fondo y quédate en las dimensiones óptimas y las mejores prácticas (alta resolución y orientación vertical para la mayoría), luego seleccione la imagen que funciona bien y haga clic en el botón Insertar medios.

La imagen de fondo seleccionada aparece ahora en la vista previa del sitio web de Elementor a la derecha. Es posible que tengas que ajustar otras partes de tu contenido para asegurarte de que elementos como el texto y las imágenes se muestren cuando estén sobre el fondo.

Elementor proporciona ajustes de fondo de imagen como Posición, Adjuntar, Repetir y Tamaño de la imagen de fondo de WordPress. Modifica los ajustes para determinar si tu fondo puede quedar mejor como un adjunto fijo, o quizás con una orientación superior derecha o un tamaño alternativo.

Pulsa el botón Actualizar para guardar todos los cambios en la página y publicar el nuevo fondo de tu sitio web.

Sección de Fondos con Elementor

Elementor ofrece una funcionalidad de fondo avanzada para la mayoría de las secciones añadidas a tus páginas.

Todo lo que tienes que hacer es seleccionar una sección en una página de Elementor y modificar los ajustes de Fondo para limitar el fondo solo a esa área.

Por ejemplo, podemos seleccionar esta sección del Editor de Texto para ver la configuración de la sección de Texto.

Elige la pestaña Avanzado y encuentra la sección Fondo dentro de esa pestaña.

La configuración del fondo incluye el tipo de fondo, el color, la imagen, etc., de forma muy parecida a la configuración que vimos para la configuración general del fondo de la página. La única diferencia es que limita estos ajustes a la sección seleccionada.

Elige el icono del Pincel para el Tipo de Fondo, y luego haz clic en el botón Elegir Imagen bajo el campo Imagen.

Elige una imagen de la biblioteca de medios y haz clic en el botón Insertar medios.

Como puedes ver, la imagen de fondo se mantiene dentro de los límites de esa sección mientras que se sitúa detrás del contenido ya creado para esa sección.

Utiliza los selectores de Posición, Adhesión, Repetición y Tamaño para modificar cómo se presenta la imagen de fondo en la sección.

Por último, haz clic en el botón Actualizar para guardar los cambios.

Añadir una Imagen de Fondo con Beaver Builder

El plugin Beaver Builder incluye una versión Lite con algunas herramientas básicas de fondo. Es uno de los constructores de páginas más populares del mercado, que ofrece muchos módulos de contenido para elementos como vídeo, imágenes, párrafos y muchos más.

Además de todo eso, te permite implementar una imagen, color o vídeo de fondo, utilizando herramientas visuales y CSS para colocar el elemento de fondo en todo tu sitio web, una página o una sección individual en una página.

Primero, instala el plugin Beaver Builder para empezar.

Ve a cualquier página o entrada para editarla con Beaver Builder.

Debes convertir las páginas creadas anteriormente al formato de Beaver Builder. Como alternativa, tienes la opción de crear una página desde cero y elegir editar la página en Beaver Builder.

Para convertir una página actual en Beaver Builder, abre el editor de esa página y haz clic en el icono de tres puntos para abrir el menú Ver en la esquina superior derecha.

Desplázate hacia abajo para encontrar y elegir el enlace Convertir a Beaver Builder.

Intenta compilar todo el contenido que tienes en tu página y cambiar esos elementos en módulos compatibles de Beaver Builder.

Para crear una página desde cero, dirígite Páginas > Añadir nueva.

A continuación, haz clic en el botón Lanzar Beaver Builder.

El plugin Beaver Builder te lleva a una vista frontal de la página web. Ocupa la mayor parte de la pantalla actuando como un verdadero editor frontend, donde se hace clic en los elementos y se mueve alrededor de las cajas con el ratón.

La primera forma de añadir un fondo a través de Beaver Builder es subiendo un fondo a un bloque de sección. Esto podría ocupar la mayor parte de la página o una fracción de la página, dependiendo del tamaño de su bloque de sección.

Una vez seleccionado, busca el botón de configuración de filas (el icono ⚙).

Haz clic en ese icono para revelar la configuración de esa fila. También puede hacer esto con secciones y columnas, y otros tipos de bloques.

En la parte superior de la vista previa de su sitio web aparece un panel de configuración. Haz clic en la pestaña Estilo y busca la sección Fondo.

En Fondo, haz clic en el menú desplegable para mostrar todos los tipos de fondo.

Tienes que considerar varios tipos de fondo, uno de los cuales es para una foto. Los otros incluyen:

• Color
• Gradiente
• Vídeo
• Código integrado

No dudes en probar los diferentes tipos de fondos.

Por ejemplo, puedes encontrar que un fondo de degradado se ve mejor que una imagen. Cada uno de los tipos de fondo incluye sus propios ajustes. El tipo Gradiente, en este caso, pide dos colores para que el gradiente se mueva de uno a otro.

Si se opta por el fondo de foto, se presentan los campos para elegir de la biblioteca de medios o pegar una URL para la imagen. Haz clic en el enlace Seleccionar foto si utilizas la fuente de fotos de la biblioteca multimedia.

Busca tu foto de fondo favorita y haz clic en el botón Seleccionar foto.

Beaver Builder coloca la foto en el espacio de fondo elegido anteriormente. La sección de configuración de la foto le pregunta cómo le gustaría formatear la foto. Elige entre opciones como Tamaño, Repetición, Posición y Adjuntar.

Fotos de Fondos Globales y de Página Completa de Beaver Builder

Beaver Builder trabaja con las herramientas de diseño por defecto de WordPress para aprovechar las características de fondo incorporadas.

Por lo tanto, puedes ir a la pestaña Apariencia > Fondo para activar un fondo de foto para todo tu sitio web.

Como alternativa, abra cualquier página web en Beaver Builder y haga clic en el menú desplegable Herramientas en la esquina superior izquierda.

Aquí, haz clic en la opción Configuración global.

El panel de configuración global ofrece la posibilidad de cambiar todo el sitio web, anulando o modificando la codificación integrada de WordPress. Por lo tanto, nos gustaría insertar un bloque de código CSS para cambiar la imagen de fondo de todo el sitio web (globalmente).

Haz clic en la pestaña CSS en la Configuración Global, y pega el siguiente segmento de código en el campo:

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

Tiene más sentido utilizar Beaver Builder para los fondos de página personalizados, ya que cada página tiene tu propia imagen como fondo.

En tu editor de páginas, abra de nuevo el menú Herramientas.

Selecciona la opción Layout CSS & Javascript.

Pega el mismo código en la pestaña CSS, cambiando el texto de URL a Imagen por la URL real y ajustando los parámetros que desee:

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

Añade una Simple Línea o Fondo de Widget con Page Builder By SiteOrigin

El Page Builder de SiteOrigin es otra herramienta visual de creación de sitios web de arrastrar y soltar. Es limitada en su capacidad para insertar fondos para todo el sitio web (tendrías que recurrir a la herramienta estándar de fondos personalizados de WordPress). Sin embargo, proporciona ajustes para añadir imágenes y colores de fondo para las líneas y los widgets utilizados por SiteOrigin.

Primero, descarga y activa el plugin Page Builder by SiteOrigin.

Navega a una nueva página o considera la posibilidad de añadir una fila de SiteOrigin a una página actual del sitio web.

Cada sección de SiteOrigin te pide que Añadas un widget o una Línea. También tienes la oportunidad de navegar a través de los diseños pre-construidos si prefieres no empezar un diseño desde cero.

La buena noticia es que tanto los widgets como las filas en SiteOrigin tienen ajustes para incluir imágenes de fondo.

Por lo tanto, haz clic en el botón Añadir Widget o Añadir Línea para proceder.

En este ejemplo, veremos la biblioteca Widgets.

Aquí podrás elegir uno de los muchos widgets que proporciona SiteOrigin, desde menús de navegación y páginas hasta contenido de publicaciones y listas de productos.

Elegiremos el widget Productos para este ejemplo, pero puedes elegir uno de los muchos otros widgets según las necesidades de tu diseño. Además, puedes agrupar estos widgets con una Línea, y luego añadir una imagen de fondo a esa línea para que el fondo aparezca detrás de varios widgets.

El nuevo widget o fila termina en el editor de páginas de SiteOrigin. La mayor parte de SiteOrigin permanece en el panel de control de WordPress, por lo que no hay tanto editor frontal como en otros constructores de páginas.

Para añadir un fondo a cualquier elemento de SiteOrigin, desplázate sobre el elemento y haz clic en el enlace Editar.

He elegido el widget Productos para este ejemplo, pero cada widget tiene sus propios ajustes para configurar su aspecto en tu sitio web.

Las herramientas de fondo están debajo del menú desplegable de Diseño. Haz clic en él para avanzar.

Busca el campo Imagen de fondo y haz clic en el botón Seleccionar imagen.

También tienes la opción de pegar una URL externa para la imagen de fondo.

La biblioteca de medios te muestra las imágenes actuales que has subido a WordPress. Haz clic en la imagen que mejor funcione para este fondo y selecciona el botón Hecho para soltarla en el módulo SiteOrigin.

Ahora el campo Imagen de fondo presenta una versión en miniatura de esa foto.

Desplázate por los ajustes para configurar todo, desde la visualización de la imagen de fondo hasta el color de la fuente para el texto superpuesto.

En general, deberías ser capaz de obtener los resultados deseados mediante la elección de la pantalla de la cubierta. Parece que el plugin de SiteOrigin tiene por defecto la visualización en mosaico, por lo que es posible que tengas que cambiarla.

Asegúrate de hacer clic en el botón Hecho cuando hayas completado los ajustes personalizados para el fondo.

El widget (en este caso, el widget de Productos) va en el editor de SiteOrigin WordPress para esa página. Puedes arrastrar este elemento a cualquier lugar de la página que quieras y añadir nuevos widgets y líneas por encima y por debajo de él.

Debes hacer clic en el botón de Vista previa o de Actualización y luego navegar por el frontend de la página para ver los resultados.

El fondo actual que he añadido aparece dentro de las restricciones del widget Productos de antes. Este fondo obviamente necesita algo de edición para que se vea más bonito, pero es un comienzo de calidad para archivar en el espacio con una imagen de fondo de aspecto mucho más creativo.

Añadir Imágenes de Fondo Únicas con Brizy

El último constructor de páginas para esta demostración, Brizy, ofrece plantillas elegantes y una interfaz frontend superior para añadir diseños inusuales y personalizaciones rápidas.

El Brizy Page Builder incluye un amplio conjunto de módulos de arrastrar y soltar para incorporar a tu sitio web actual. También te permite comenzar desde una plantilla en blanco y construir tu sitio web completo con Brizy.

Por ello, te alegrará saber que Brizy también tiene una herramienta de fondo para casi todos los elementos que incluyas a través del constructor de páginas. Por no hablar de que Brizy cuenta con varios estilos de fondo únicos, como añadir un vídeo en bucle al fondo o un mapa completo.

Para aprovechar estos ajustes de fondo, instala y activa el plugin Brizy para empezar.

Gran parte del proceso de diseño de Brizy requiere que comiences con una plantilla en blanco. Brizy intentará convertir tus diseños más antiguos en módulos de Brizy, pero creemos que es mejor empezar de nuevo.

Dirígete a una Página o Publicación en tu panel de control de WordPress y comienza a construir la página con un título y tal vez algo de contenido.

Deberías ver un botón para Editar con Brizy. Haz clic en él para acceder al constructor de páginas completo de Brizy.

El constructor de páginas de Brizy muestra una vista previa completa de tu sitio web con botones, texto e imágenes. Si la página está en blanco, haz clic en el botón Empieza a construir tu página.

Busca las pestañas Plantillas y Bloques en la barra de menú superior.

Las plantillas proporcionan páginas web pre construidas, llenas de contenido de demostración y listas para funcionar siempre que personalices el contenido de tu empresa. Los bloques son trozos más pequeños de páginas web, pero siguen siendo pre-construidos y a menudo son más fáciles de usar y manipular que si tuvieras que hacer un bloque por tu cuenta.

No importa la dirección que tomes. Navega por las plantillas y bloques y añade todos los que quieras a la página. Estos son simplemente los elementos que utilizarás para formar una página web completa.

Después de tener unos cuantos bloques o plantillas en la página web, vuelve a la pantalla del editor para ver tu trabajo.

Verás que cada sección de bloques tiene un icono de Configuración en la parte superior derecha del bloque, que suele aparecer cuando te desplazas por la sección.

Haz clic en esto para el bloque de su elección. Añadiremos un fondo a ese bloque.

El panel de configuración de los bloques permanece en la esquina superior derecha. Desplázate por los iconos del menú para ver qué hacen todos ellos.

Uno de ellos es para Colores, y con ello se refieren a un fondo de color. Puedes cambiar eso y añadir un degradado si te apetece seguir con una vista de fondo de color sólido o degradado.

El botón del icono de la izquierda contiene la configuración del Fondo.

Haz clic en ese botón para abrir las herramientas rápidas para cargar una imagen de fondo en este bloque.

Brizy ofrece tres elementos de fondo multimedia:

• Imágenes
• Vídeos
• Mapas

Primero, prueba el tipo de imagen para entender cómo funciona con tu diseño actual.

Haz clic en el área de carga de imágenes para buscar una foto en la biblioteca multimedia y añadirla al fondo.

Encontramos una foto de un panel de madera para este tutorial y te indicamos que nos gustaría no tener efecto de paralaje.

Esto añade un efecto agradable, ya que el fondo de color sirve como una superposición, pero seguimos viendo la textura de la madera detrás de ella.

Recuerda que siempre puedes ajustar el campo Parallax para que la imagen de fondo sea fija, animada o con desplazamiento.

¡Y así es como se inserta una imagen de fondo con Brizy!

Lo mejor de Brizy es que puedes seguir moviéndote por el diseño y hacer clic en el botón de configuración de cada sección.

Una sección más abajo, podemos insertar otra imagen de fondo sin dedicarle mucho tiempo.

Y para demostrar la potencia de los otros tipos de fondo, podemos hacer clic en el tipo de fondo Mapa, introducir una dirección y ver cómo aparece un mapa de esa ubicación justo detrás del contenido en primer plano.

El mapa se sitúa como fondo completo y tiene una función de zoom si no sale del todo bien con la configuración por defecto.

Por último, te recomendamos que eches un vistazo a la herramienta de vídeo de fondo Brizy, situada en la misma sección que la herramienta de fondo de imagen. Funciona insertando una URL de vídeo (YouTube o Vimeo), y mostrando un vídeo completo justo detrás del contenido de primer plano. Incluso ofrece una configuración para reproducir el vídeo en bucle y elegir cuándo debe comenzar cuando el usuario se desplaza por la sección.

El gif animado que se muestra a continuación es un breve ejemplo del vídeo en acción, aunque probablemente se podría editar un poco.

El Tamaño de la Imagen de Fondo, Obtención y Edición Básica

Hemos mencionado anteriormente en el artículo que, aunque no hay un tamaño perfecto para una imagen de fondo, recomendamos empezar con no menos de 1024 x 768 píxeles y ceñirse a una relación de aspecto común como 16:9. La relación de aspecto no importa tanto como el tamaño y la resolución reales de la imagen, ya que puedes recortarla o dejar que WordPress lo haga por ti.

También es esencial encontrar los lugares adecuados para comprar o tomar prestadas las imágenes de fondo de WordPress si no piensas hacer tus propias fotos.

Dónde Encontrar Imágenes de Fondo Adecuadas

Para la búsqueda de imágenes de fondo, consulta nuestra guía para encontrar y añadir fotos de stock sin salir de WordPress. También tenemos una lista de fuentes de mercado útiles para buscar fotos de stock de alta resolución, muchas de las cuales son gratuitas.

En general, te recomendamos que intentes hacer tú mismo las imágenes de fondo. Si no es posible o no tienes experiencia con la fotografía o el diseño gráfico, piensa en utilizar recursos gratuitos de fotografía de archivo. También puedes optar por pagar por una imagen de fondo de uno de los muchos sitios web de imágenes de stock premium, algunos de los cuales cobran una cuota mensual para descargar un montón de fotos.

Algunos de los aspectos más destacados de esos enlaces son:

• Unsplash – Gratis y sin necesidad de atribución.
• Visual Hunt – Fotos gratuitas. La mayoría de las imágenes no requieren atribución.
• Pexels – Gratis sin necesidad de atribución.
• Pixabay – Gratis con la mayoría de las imágenes que no requieren atribución.
• iStockphoto – Una suscripción premium bastante económica para imágenes libres de derechos.
• Shutterstock – Imágenes libres de derechos por una cuota de suscripción razonable.

Cómo Cambiar la Imagen de Fondo de WordPress con CSS personalizado

Como hemos aprendido, puedes añadir una imagen de fondo de WordPress con las herramientas estándar incorporadas a WordPress o con un plugin. No importa la ruta que elijas, siempre y cuando obtengas el resultado deseado. También existe la opción de utilizar CSS personalizado para estilizar la imagen de fondo o añadirla a tu sitio.

No cubriremos las complejidades del CSS personalizado, ya que cada imagen de fondo y tema tendrá un proceso diferente. Sin embargo, recomendamos la lectura de nuestra guía sobre la edición, adición y personalización de CSS en WordPress. El artículo tiene consejos útiles para añadir imágenes de fondo a casi cualquier sección del sitio web, desde elementos de menú hasta bloques de página específicos.

Solución de Problemas Comunes con una Imagen de Fondo de WordPress

Todos los sitios de WordPress vienen con la posibilidad de añadir un fondo. Sin embargo, eso no significa que la característica principal funcione para todos los sitios web. Por ejemplo, puedes encontrarte con que el tema que utilizas no admite fondos personalizados. O tal vez subas un fondo, pero no se ve del todo bien (demasiado grande o demasiado borroso).

Encontrarse con un problema de fondo en WordPress es frustrante y, por desgracia, algo común. A continuación, hemos recopilado algunos de los problemas más comunes con las imágenes de fondo y hemos trazado cada curso de acción.

Cómo Solucionar los 5 Problemas Más Comunes con las Imágenes de Fondo en WordPress

Mi Tema no Admite una Imagen de Fondo de WordPress

Los desarrolladores de temas controlan la función de fondos personalizados en WordPress. Pueden activarla o desactivarla, dependiendo de si quieren activar el soporte de fondos personalizados. El fondo se desactiva cuando no es necesario o cuando entra en conflicto con el diseño general del tema.

Si encuentras que tu tema no admite un fondo personalizado o limita tus posibilidades a la hora de añadir un fondo, considera estas soluciones:

• Cambia el tema por uno que admita fondos personalizados. Busca los fondos personalizados en las listas de características cuando compres o descargues los temas.
• Utilizar un plugin de fondo para anular la función de fondo personalizado por defecto que se está bloqueando.

Aunque es posible incluir tu propia codificación personalizada o entrar en los archivos del tema para reaccionar los fondos personalizados, normalmente recomendamos no usar ambas opciones. Lo mejor que puedes hacer es buscar un tema que soporte fondos o añadir un plugin que permita los fondos, pero que no interfiera con la funcionalidad del tema.

Mi Imagen de Fondo de WordPress es Demasiado Oscura o Tiene el Color Equivocado

Una imagen de fondo oscurecida puede provenir de muchos ajustes que se ejecutan junto a la propia imagen de fondo. La mayoría de las veces, tiene que ver con un filtro superpuesto o un fondo mal coloreado.

En la mayoría de los casos en los que el fondo está descolorido, debes comprobar el tema o el plugin que controla el fondo en sí.

Busca un ajuste cerca del campo de fondo que pida un filtro o una superposición. También puedes encontrar una característica de opacidad que debe ser despejada para que su fondo se muestre correctamente.

Si todo lo demás falla, el tema puede tener un filtro de fondo codificado en los archivos del tema. En ese caso, ponte en contacto con el desarrollador del tema para que te dé una idea de las posibilidades de corregir el color de fondo.

Mi Imagen de Fondo de WordPress No Está en la Posición Correcta

La imagen de fondo que aparece en una posición incorrecta tiende a estropear el diseño general de tu sitio web. Es posible que el fondo esté demasiado a la izquierda o a la derecha, o que lo que se supone que es el foco central del fondo no aparezca en la pantalla.

Por suerte, moverse por el fondo solo requiere unos pocos clics del botón.

Dirígete a Apariencia > Fondo en el panel de control de WordPress. Busca la imagen que has subido actualmente como fondo y busca el campo Posición. Este campo te permite mover el posicionamiento del fondo, con opciones para moverlo a la izquierda, derecha, arriba, abajo o en las esquinas.

Te recomendamos que hagas clic en todos los botones de posicionamiento para ver los resultados que producen. Después de encontrar la posición correcta, guarda la página.

La Imagen de Fondo de mi WordPress se Repite Una y Otra Vez

Las texturas y los fondos sólidos suelen tener mejor aspecto cuando se repiten, ya que pasarían por alto las interrupciones de la imagen. Sin embargo, muchas imágenes tienen un aspecto horrible cuando se repiten como fondo, sobre todo las que tienen muchos detalles y distintos grados de color.

Un diseño de imagen de fondo repetido es útil si tu imagen de origen no es lo suficientemente grande como para cubrir todo el fondo sin parecer estirada. Por lo tanto, WordPress a veces utiliza por defecto un diseño repetido para mantener la resolución de la imagen.

La principal solución a este problema se encuentra en la sección de Fondo en Apariencia > Fondo en WordPress. Con una foto subida como fondo, prueba con preajustes como Rellenar pantalla, Ajustar a pantalla o Personalizado, en lugar de la opción de preajuste Repetir.

Sin embargo, es posible que al intentar que una imagen más pequeña cubra la totalidad de la pantalla de fondo se obtengan resultados desagradables. En ese caso, la mejor solución es reemplazar completamente la imagen de origen del fondo y buscar una que sea grande, de alta resolución y que esté lista para ser publicada en la web.

La Imagen de Fondo de Mi WordPress Está Estirada

Una imagen de fondo estirada significa que tu configuración de fondo personalizada intenta tomar una imagen más pequeña y cubrir toda la pantalla con la imagen.

Esto también puede ocurrir con imágenes más grandes y de alta resolución si no se ajustan a la relación de aspecto requerida. En el caso de las imágenes de fondo estiradas, piensa en el archivo de origen. Elige una imagen diferente que sea adecuada es la mejor opción.

Otro problema es que puedes tener la configuración del fondo mal configurada. Comprueba cosas como la posición de la imagen de fondo y que se extienda sobre el lienzo en el modo Rellenar pantalla. Puede que solo tengas que mantener las dimensiones originales o añadir una función de repetición para que todo funcione.

Otros Consejos para Solucionar Problemas con las Imágenes de Fondo

• Los desarrolladores de temas tienen pleno poder sobre la función de fondo personalizado en WordPress. Si has instalado un tema y no consigues que el fondo funcione, lo mejor es que te pongas en contacto con el desarrollador del tema o que instales un tema nuevo para ver si se soluciona el problema.
• Los colores e imágenes de fondo personalizados suelen anular cualquier código CSS personalizado que implementes para controlar el tamaño, la ubicación o la fuente de tu imagen de fondo. Es posible que tengas que seguir la configuración de fondo del tema en lugar de utilizar CSS personalizado.
• Un tema puede venderse con un fondo personalizado ya activado. Normalmente, todo lo que tienes que hacer es sustituir la imagen de fondo por una nueva. A veces, es necesario intervenir en los archivos del tema o utilizar CSS personalizado para anular la configuración del tema.

Los Mejores Plugins de Imágenes de Fondo para WordPress

Si quieres tener más posibilidades de edición para una imagen de fondo, estás interesado en fondos de vídeo o en herramientas que permitan crear fondos específicos para cada página, puedes considerar los siguientes plugins de imágenes de fondo para WordPress:

Simple Full Screen Background Image

El plugin Simple Full Screen Background Image no es muy diferente de la herramienta de imagen de fondo por defecto en WordPress, excepto que añade funciones automatizadas para cosas como el cambio de tamaño y la escala para los navegadores.

En general, este plugin funciona mejor para aquellos que encuentran que su tema bloquea la capacidad de añadir un fondo, o tal vez están teniendo problemas con la herramienta de fondo de WordPress incorporado. Anula lo que tienes en WordPress y añade un botón especial de Fondo en tu panel de control de WordPress para subir al instante una imagen desde tu ordenador.

Eso es todo.

El plugin también tiene una versión Premium que ofrece un escalado mejorado, soporte para un número ilimitado de fondos y efectos únicos, y mucho más.

Advanced WordPress Backgrounds

El plugin Advanced WordPress Backgrounds adopta un enfoque diferente para los fondos de WordPress, permitiéndote aprovechar los efectos únicos que dan vida a tu fondo. Un ejemplo de esto es el fondo de paralaje, que puede moverse lentamente junto con el usuario a medida que se desplaza por tu sitio web.

El plugin también ofrece soporte para vídeos. Los fondos de vídeo se extraen de lugares como YouTube y Vimeo, o incluso puedes autoalojarlos.

También es posible tener un fondo de color sólido o con textura. Todos estos tipos de fondos incluyen características avanzadas que no puedes encontrar con la herramienta básica de fondos de WordPress. Algunas de ellas incluyen efectos de desplazamiento y escalado, efectos de opacidad y opciones de velocidad personalizadas.

Es compatible con Gutenberg y puede ir junto con el editor estándar de WordPress y muchos otros constructores de páginas visuales. Por último, puedes utilizar sus opciones CSS personalizadas para añadir aún más estilo a tus fondos.

Perfect Images + Retina

El plugin Perfect Images + Retina es una solución dos en uno. Permite gestionar el tamaño y la apariencia de la imagen de fondo de WordPress, al tiempo que regenéralas miniaturas y sustituye las imágenes. La gestión de la imagen es bastante impresionante, y es particularmente crucial para los fondos de alta resolución.

El plugin también ofrece una función de fondo si se opta por su versión premium. Genera un equivalente retina para esa imagen de fondo para que las imágenes se vean como se supone que deben ser, incluso en pantallas de alta resolución.

Maintenance

Maintenance es un plugin sencillo y fácil de usar para diseñar páginas de mantenimiento y de próxima aparición. El plugin Maintenance tiene versiones gratuitas y premium, pero la gratuita es suficiente para activar una página de mantenimiento y añadir una imagen de fondo con texto y campos superpuestos.

Incluso puedes subir tu propio logotipo, personalizar cosas como las fuentes y los iconos, y elegir varias plantillas con sus propias y hermosas imágenes de fondo. También puedes instalar sus numerosas plantillas preconstruidas, pero la mayoría de ellas requieren la licencia premium del plugin.

Resumen

Una imagen de fondo básica de WordPress no requiere ningún esfuerzo para añadirla y mostrarla en todo el sitio web. Es una funcionalidad incorporada en el núcleo de WordPress, por lo que es fácil cambiar los fondos para ciertos eventos o vacaciones. También puedes quedarte con un fondo para toda la vida.

Además del fondo estándar de WordPress, puedes utilizar código CSS personalizado, plugins y constructores de páginas para implementar todo tipo de fondos en tu sitio de WordPress. Desde fondos de imagen en páginas específicas hasta fondos para el botón del menú, las posibilidades son infinitas.

Ahora es el momento de añadir ese fondo que siempre has querido a tu sitio de WordPress.

¿Nos hemos dejado algo? Deja un comentario si tienes problemas para añadir o gestionar las imágenes de fondo de WordPress.