Imágenes de fondo de WordPress: cómo agregarlas, editarlas y personalizarlas

Las imágenes de fondo de WordPress vienen en todas las formas. Puede cargar una imagen de fondo para todo su sitio web, colocarla detrás de los botones o establecer un fondo de color sólido para su página de inicio de sesión. Independientemente de dónde desee colocarlos, es esencial comprender los conceptos básicos para cargar una imagen, incluida una imagen de fondo.

Este artículo explica qué es una imagen de fondo y cómo puede editarla para obtener un mejor resultado. También cubriremos cómo activar rápidamente las imágenes de fondo en su sitio y resolver cualquier problema que pueda ocurrir en el camino.

¿Emocionado? ¡Vamos a empezar!

¿Qué es una imagen de fondo de WordPress?

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

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

Independientemente de la opción que elija, la functions.php file maneja la imagen de fondo en un tema de WordPress. También se muestra por el header.php archivo de WordPress.

Como resultado, los desarrolladores de temas tienen un mayor control sobre si la función de fondo personalizado se activa o no para su tema de WordPress. Todavía puedes activar la funcionalidad En o Apagado, pero el tema de su sitio generalmente dicta la configuración predeterminada.

Hay varios tipos de fondos que puede implementar en WordPress. Puede optar por un fondo estándar de sitio web completo o uno que se encuentre detrás de elementos específicos como barras laterales y artículos.

Los fondos personalizados también son posibles para ubicaciones más específicas en el sitio de WordPress:

• Detrás de una página o publicación de WordPress
• En una página de categoría de WordPress
• Dentro de un bloque de contenido para una página o publicación
• 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 capacidad de cargar una imagen o elegir un color para llenar la totalidad del fondo del sitio.

La configuración se encuentra en el panel de WordPress en Apariencia> Personalizar> Imagen de fondo. Sin embargo, otros tipos de fondos son posibles a través de constructores de páginas de arrastrar y soltar, complementos y diferentes opciones.

Cargar una imagen de fondo en el tablero es solo una parte del proceso. Después de eso, debe configurar los ajustes de la imagen de fondo. A veces puede dejar la configuración como está, mientras que otras veces, es importante volver a configurar la configuración para asegurarse de que la imagen se vea excelente.

La configuración para una imagen de fondo de WordPress incluye:

• 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 cubriremos las mejores prácticas al usar imágenes de fondo de WordPress. Luego, veremos cómo configurar una imagen de fondo de WordPress en varias situaciones.

¿Quiere darle a su sitio un nuevo aspecto? ✅ Aprenda a agregar una imagen de fondo, editar el tamaño, personalizarla para personalizarla y más. ✨Haz clic para tuitear

Los muchos estilos de fondos

Una ventaja real de un fondo de WordPress es que no todas son imágenes estáticas. Puede encontrar varios tipos de fondos, que van desde videos hasta patrones de fotos y presentaciones de diapositivas.

A menudo, puede implementar fondos únicos con la ayuda de CSS o complementos personalizados (o ambos). Te mostramos ambos métodos en este artículo.

A continuación, se muestran algunos estilos de fondo a tener en cuenta:

• Imágenes de fondo estándar: Estas 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 ubican detrás del contenido principal. Sus beneficios incluyen simplicidad, opciones para fotos de alta resolución y soporte predeterminado por WordPress Core. Las desventajas van desde su tendencia a interferir con la visibilidad de los elementos en primer plano hasta una imagen grande de alta resolución que ralentiza su sitio.
• Fondos de color sólido: La imagen de fondo de color sólido es útil cuando desea agregar algo de vitalidad a su sitio, pero no tiene una imagen que se ajuste a su 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 tardan en implementarse. Son excelentes para combinar su marca sin necesidad de un código personalizado o un complemento.
• Fondos degradados: Un fondo degradado cambia de un color a otro. Es más atractivo visualmente que un color sólido, no lleva mucho tiempo agregarlo y puede agregar uno con muchos complementos. La principal desventaja es que un primer plano puede verse bien en un extremo del gradiente pero no en el otro.
• Fondos de patrón o textura: Todos los fondos de patrones y texturas son fotos, pero se enfocan en elementos repetitivos en la imagen o en una textura de primer plano, como un panel de madera o un parche de césped. Lo bueno de un patrón o textura es que funciona de maravilla como fondo, al ver cómo se puede estirar, y la mayoría de las personas no notarán si hay una ruptura en el patrón cuando la imagen no es lo suficientemente grande.
• Fondos de presentación de diapositivas de imágenes: Un fondo de presentación de diapositivas de imágenes permite a los propietarios del sitio compartir varios tipos de diseños o fotos en segundo plano, lo que impulsa los esfuerzos para ajustar el estado de ánimo cuando un cliente se desplaza por su sitio. Sin embargo, las presentaciones de diapositivas pueden parecer una distracción o ralentizar su sitio.
• Fondos de video: Los fondos de video son atractivos, divertidos de ver y fáciles de retratar la naturaleza de su marca. Sin embargo, también conducen a problemas de rendimiento si no se hacen correctamente y podrían desviar la atención de su embudo de ventas. Además, los videos de fondo deben tener las dimensiones perfectas y reproducirse en los momentos adecuados. También pueden ser costosos a menos que opte por videos de archivo gratuitos.

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

Establecer una imagen de fondo personalizada parece una tarea fácil. Simplemente cargue la imagen en el lugar correcto y observe cómo aparece en la interfaz, ¿verdad?

La mayoría de las veces, ese es el caso, pero otras veces encontrará que la imagen de fondo puede ser un poco problemática. Es por eso que recomendamos seguir las mejores prácticas para las imágenes de fondo de WordPress para eliminar tantos problemas como sea posible.

Quédese con imágenes de alta calidad

La resolución de la imagen de fondo deseada a menudo hace o rompe su presentación. Puede pensar que una imagen que tomó con su teléfono inteligente es perfecta para una imagen de fondo, pero lo más probable es que deba ser de una calidad mucho mayor.

Puede pagar por una imagen libre de regalías en un sitio como Shutterstock. Por lo general, esos sitios tienen imágenes de nivel profesional que están preparadas y listas para cargarse como una imagen de fondo grande. También puede encontrar muchos de ellos en sitios gratuitos de imágenes de archivo.

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

Si no utiliza una imagen de alta calidad, corre el riesgo de ver un fondo estirado.

Asegúrese de que las imágenes de fondo tengan el tamaño adecuado

Junto con la resolución de la imagen, el tamaño físico de la imagen es muy importante.

Todas las pantallas tienen diferentes relaciones de aspecto. Y los dispositivos móviles lo hacen aún más complicado. Pero el objetivo es utilizar una imagen que se vea genial en la pantalla más grande. De lo contrario, corre el riesgo de que la imagen se estire una vez más o no se muestre correctamente.

En general, una buena regla es ceñirse a un tamaño mínimo de imagen de fondo de WordPress de 1024 x 768 píxeles. Sin embargo, otros expertos recomiendan algo más como 1920 x 1080 píxeles. En general, su mejor curso de acción es permanecer entre 1000 y 3000 píxeles para el ancho, dependiendo de dónde se muestre.

El siguiente factor que debe considerar es la relación de aspecto. ¿La imagen de fondo cubre todo un sitio web o es solo el trimestre superior?

Técnicamente, un sitio web tiene una relación de aspecto vertical (más alto que ancho). Para que pueda mirar ese tipo de imágenes. Sin embargo, los fondos seccionales, como los de los encabezados o los anuncios publicitarios, deben permanecer en formato horizontal (mayor ancho que alto).

Además, la relación de aspecto más común para computadoras de escritorio hoy en día es 16: 9. Permanecer en ese objetivo ayuda. Un tema o complemento receptivo puede ajustar la imagen de fondo automáticamente para dispositivos móviles visita.

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

Optimizar antes de crear una imagen de fondo de WordPress

Al igual que con todas las imágenes cargadas en WordPress, se está haciendo un flaco favor si no las optimiza antes de publicarlas en Internet. Esto es particularmente importante para las imágenes de fondo, ya que a menudo aparecen en varias páginas de su sitio web. Además, son fotos grandes y cubren una cantidad significativa de espacio en la pantalla.

Las imágenes más grandes ejercen una gran cantidad de tensión en su servidor. Mantén la resolución de tu imagen, pero optimiza su tamaño para que tu sitio web se cargue rápidamente.

Tiene dos opciones para optimizar fotos:

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

Lea nuestra guía detallada de optimización de imágenes sobre cómo optimizar las imágenes para mejorar el rendimiento web.

Verifique la compatibilidad en segundo plano antes de instalar un tema

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

Sin embargo, si realmente desea un fondo en su sitio web, es prudente verificar la lista de características al descargar un tema nuevo, especialmente si planea pagar por un tema premium. Muchos sitios web de ventas de temas ofrecen información sobre si un tema admite fondos o no.

Por ejemplo, los temas enumerados en la biblioteca de temas de WordPress indican la compatibilidad con fondos personalizados como etiquetas. También puede encontrar una referencia a un fondo personalizado en la descripción del tema.

Otros sitios temáticos suelen incluir información similar sobre imágenes de fondo personalizadas. De lo contrario, comuníquese con el desarrollador para averiguar si es posible de alguna manera y si anular el bloque de la imagen de fondo (que se describe a continuación) causará problemas con el tema.

Considere la posibilidad de utilizar un generador de páginas visual para facilitar las imágenes de fondo

Los creadores 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 generador de arrastrar y soltar, se vuelve un poco más difícil configurar una imagen de fondo. Es especialmente difícil tratar de resolver cualquier problema que pueda encontrar.

Los creadores de páginas también tienden a reemplazar la funcionalidad de imagen de fondo predeterminada proporcionada a través de WordPress. Puede anular las restricciones del tema o cualquier elemento faltante que ayude a mostrar una imagen de fondo en el código.

Asegúrese de que su imagen de fondo sea legal

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

Eso es falso.

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

Si desea tener los derechos legales para usar la foto de otra persona, necesitaría una declaración por escrito del titular de los derechos de autor que le permita usar sus imágenes; un simple correo electrónico es suficiente. Incluso entonces, es posible que deba atribuir la foto si la persona se lo pide.

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

La parte difícil de las imágenes de fondo es que generalmente no es práctico agregar atribuciones, ya que WordPress no tiene lugar para incorporar un título visible para las imágenes de fondo. Y no, no puede agregar atribución en una publicación o página de blog aleatoria y esperar que sirva como crédito para una imagen de fondo completa del sitio web.

Para protegerse y respetar a quienes toman las fotos, considere uno de los siguientes cuando obtenga una imagen de fondo de WordPress:

• Toma la foto tú mismo. Esa es la forma más fácil de asegurarse de que no está infringiendo la propiedad con derechos de autor de otra persona.
• Pague por fotos en sitios web como Shutterstock y iStockPhoto. A veces son costosos, pero para una imagen de fondo, es posible que se reduzca a su presupuesto.
• Considere un sitio web de imágenes gratuito como Unsplash o Pexels. Sin embargo, asegúrese de que no se requiera atribución. Ocasionalmente, puede ubicar imágenes en estos sitios donde se sugiere atribución, pero no se requiere.
• Ponte en contacto con el fotógrafo o artista y pregúntale si puedes usarlo gratis. Esto puede ser todo lo que necesita, especialmente si ofrece algo a cambio.
• Piense en omitir la imagen de fondo o considere optar por un fondo de color en lugar de una foto.

¿Cómo configuro una imagen de fondo en WordPress?

Hay varias formas de configurar una imagen de fondo en WordPress. Estos métodos generalmente cambian según la ubicación en la que desea colocar la imagen.

Por ejemplo, puede decidir que le gustaría tener una imagen de fondo que permanezca igual en todo su sitio web. Por otro lado, es posible que prefiera encontrar una forma de mostrar imágenes de fondo únicas para todas sus páginas.

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

• Todo el sitio
• Una página de WordPress
• Una publicación de WordPress
• Un bloque de contenido individual
• El encabezado 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

Antes de comenzar: active el soporte de fondo personalizado en WordPress (si es necesario)

Los desarrolladores de temas deciden el destino de las capacidades de fondo de un sitio. WordPress tiene la funcionalidad incorporada en el núcleo, pero un desarrollador de temas podría desactivarla, dejándolo sin una configuración de panel para activarla.

Si en algún momento de los siguientes tutoriales encuentra que su tema es la razón por la que le falta un Fondo personalizado , considere los siguientes pasos para solucionarlo rápidamente.

El principal soporte de fondo personalizado para WordPress lo maneja el functions.php expediente. Abra ese archivo e inserte el siguiente código si falta:

$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 );

Tenga en cuenta que el elemento que realmente activa el soporte de fondo es el add_theme_support() funcionar con todo lo que contiene. Ese código activa la función de fondo en el panel de WordPress, que puede usar en muchos de los siguientes tutoriales de este artículo.

También es posible agregar una imagen de fondo predeterminada para todo el tema a través de la functions.php expediente. Simplemente vaya al área del código anterior con el default-image valor y agregue la URL de la imagen al espacio en blanco entre el ' ' después de la =>.

Esta es una forma rápida y fácil de activar fondos personalizados dentro del panel de WordPress.

Habiendo dicho eso, recomendamos cambiar el tema si no tiene 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 descubrió que estaba causando demasiados problemas con el diseño.

Cómo agregar una imagen de fondo a todo su sitio de WordPress

Si su tema ofrece la capacidad de agregar una imagen de fondo personalizada (y muchos lo hacen), se lo hace mucho más fácil.

Para comenzar, vaya a su panel de WordPress y haga clic en Apariencia> Personalizar.

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

Aquí, busque y haga clic en el Fondo pestaña.

Como alternativa, si puede seleccionar Apariencia> Fondo, puede utilizarlo para una ruta más directa a esta configuración.

La Fondo El área de personalización gestiona los elementos de fondo de todo su sitio web.

Haga clic en el Seleccionar imagen para continuar.

En el Seleccionar imagen ventana, elija una imagen que se ajuste bien como fondo para el estilo de su marca y sitio web. En general, un patrón de color neutro con un tono negro, blanco o gris generalmente ayuda a garantizar que la mayor parte de su texto y contenido se vea bien con el fondo detrás.

Una vez que seleccione su imagen, haga clic en el Elegir imagen botón para seguir adelante.

El fondo que implementó ahora aparece en la vista previa del sitio web.

Vea si su contenido aún se destaca y se ve presentable con la imagen elegida. A veces, es posible que necesite 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 la Ajustes panel, mostrándole que la imagen ha sido implementada.

Hay algunas configuraciones adicionales disponibles para fondos de WordPress, incluida la Preestablecido campo.

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

Puede elegir entre los siguientes ajustes preestablecidos:

• Defecto: Suele ser lo mismo que Repetir, pero puede depender de tu tema. La configuración predeterminada generalmente funciona mejor, pero depende de la imagen que se utilice.
• Llenar pantalla: Esta configuración estira la imagen para garantizar que se cubran todas las partes de la pantalla, incluso si eso significa recortar la imagen, para que se desborde de la pantalla. Funciona bien para muchas imágenes de alta resolución, pero podría causar borrosidad con imágenes de baja resolución.
• Ajustar a la pantalla: Esto mantiene la relación de aspecto de la foto original e intenta utilizar esa relación para adaptarse a la imagen de pantalla actual. Hace un buen trabajo al mantener la imagen cerca de su estado original, pero es posible que no cubra toda el área de fondo.
• Repetir: Esto usa partes del Llenar pantalla función, expandiendo y estirando la imagen, pero también repite la imagen cuando no puede cubrir con éxito toda la pantalla. Para los patrones, esto generalmente se ve muy bien. Pero para algunas imágenes, puede producir una línea dura entre las imágenes repetidas.
• Personalizado: Esta configuración le brinda 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 existe una regla sobre cuál de los ajustes preestablecidos funciona mejor porque las imágenes vienen en diferentes tamaños, resoluciones y detalles. Por lo tanto, es mejor comenzar con el Defecto preestablecido y luego probando cada uno de los otros ajustes preestablecidos para ver cuál se ve mejor para su imagen de fondo.

Si todo lo demás falla, vaya al Personalizado configuración para ser realmente específico con sus elecciones.

La Ajustar a la pantalla el ajuste preestablecido 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ía cambiar el Posición de la imagen hacia Centrar, pero lo más probable es que deje espacios en blanco a los lados.

El siguiente ajuste a considerar es el Posición de la imagen herramienta. Haga clic en las flechas para mover la imagen de fondo, ajustando la orientación para colocar el enfoque de la imagen hacia el centro o para llenar la pantalla.

Al igual que el Preajustes escenario, el Posición de la imagen La herramienta requiere un proceso de adivinar y verificar su trabajo, ya que la imagen original y su contenido dictan cómo se ve.

A continuación, hay un campo de casilla de verificación para hacer la imagen de fondo Desplazarse con la página.

Con esta casilla marcada, la imagen de fondo se adhiere al contenido de primer plano y se desplaza junto con el usuario a medida que esa persona se mueve hacia arriba o hacia abajo en la página.

Desmarcar esa casilla tiende a cambiar la orientación general de la imagen de fondo, pero su característica dominante es decirle al fondo que permanezca estático mientras el usuario se desplaza hacia abajo en 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 ajuste preestablecido personalizado

Al optar por algo además del Personalizado preestablecido, no tiene tantas configuraciones adicionales para configurar.

Sin embargo, elegir el ajuste preestablecido personalizado abre varios otros campos a considerar.

Por ejemplo, puede elegir Llenar la pantalla o Ajustar a la pantalla, y luego combínelo con una imagen de fondo repetida o no repetida, combinando los elementos preestablecidos de antes. Y todavía obtienes el Desplazarse con la página opción.

Vea si es posible usar la imagen original sin ninguna edición o configuración. A veces, la foto original es una combinación casi perfecta para usarla como fondo, así que ¿por qué meterse con lo que ya está listo para usar?

Sin embargo, su tamaño también puede ser demasiado grande para su sitio web, o tal vez la relación de aspecto no sea la adecuada. Independientemente, le sugerimos que experimente con esta configuración para averiguar si es adecuada para usted.

Una vez que decida cuál es la configuración de fondo perfecta (para este tutorial, la opción predeterminada se ve bien), haga clic en el Publicar para representar los cambios en su sitio web.

Vaya a la interfaz de su sitio web para ver los antecedentes en acción.

La página de inicio es un lugar maravilloso para comenzar. Notará que el área del encabezado y la imagen de bienvenida no tienen fondos. Eso es porque la imagen de bienvenida en la parte superior del sitio ya cubre toda la parte horizontal de la pantalla como una imagen de héroe a pantalla completa.

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

Tenga en cuenta que el fondo de WordPress personalizado general se activa en cada página y publicación de su sitio web. Es una función global para aquellos que desean una forma rápida de calificar su sitio y agregar algo de brillo.

Por ejemplo, yendo a la Tienda La página de este sitio revela los antecedentes detrás de la selección de productos.

Cómo establecer un color de fondo en lugar de una imagen para todo su sitio web

El proceso de activar un color de fondo en todo su sitio web no es muy diferente al de activar una imagen de fondo. Empiece por ir a Apariencia> Fondo en el tablero, luego busque el Color de fondo campo.

Haga clic en el Seleccionar el color para abrir más configuraciones para elegir y cambiar diferentes colores para su fondo.

El panel de color ofrece múltiples opciones para que usted decida un color. La primera es escribiendo o pegando un código de color. Todos los colores tienen códigos de color únicos, y puede encontrar estos colores y sus códigos asociados con una búsqueda rápida en Internet.

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

Para activar un color de fondo, asegúrese de que el color esté seleccionado y se muestre en el Seleccionar el color avance.

Debería ver el fondo de color en la vista previa del Personalizador de WordPress. De lo contrario, lo más probable es que tenga un fondo de imagen instalado que anula el fondo de color.

Todo lo que tiene que hacer para revelar el fondo de color es hacer clic en el Eliminar botón debajo del Imagen de fondo avance.

Ahora el color aparece en la totalidad de su sitio, detrás del contenido. Al igual que lo haría con un fondo de imagen, es prudente mirar en su sitio web para asegurarse de que todo el texto, las imágenes y los enlaces sigan siendo visibles con el nuevo fondo.

Cómo agregar una imagen de fondo a la página de WordPress

Pero, ¿qué sucede si desea insertar una imagen en WordPress para que aparezca como fondo en una sola página de WordPress? La sección anterior describió la configuración global para una imagen de fondo en todo el sitio.

Muchas personas disfrutan agregando fondos a sus páginas porque puedes incorporar un tema o sensación en una página que se aplica al contenido. Por ejemplo, una página Acerca de nosotros podría tener antecedentes de Los Ángeles si la empresa está en Los Ángeles. O una introducción al libro de un autor podría incluir un trasfondo que se ajuste al tema de la historia.

En esta sección, explicaremos cómo agregar una imagen de fondo de WordPress a una página utilizando un método principal y algunas alternativas si no le importa gastar dinero en un complemento u optar por un creador de páginas.

Nota: No importa si usa Gutenberg o Classic WordPress Editor.

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

• Agregar un fondo de página único con CSS personalizado.
• Usando un complemento que permite fondos de página individuales.
• Incorporar un fondo personalizado en cada página con la ayuda de un creador de páginas.

Agregar su propio CSS personalizado a una página implica encontrar el ID de clase para esa página y solicitar una URL de fondo, dentro del módulo CSS personalizado, en la configuración de la página de WordPress. Afortunadamente, no es tan difícil averiguar el ID de clase de una página, considerando que podemos buscarlo, o es posible que ya sepa cuál es.

Vaya a la página de su sitio donde desea un fondo solo para esa página.

Haga clic derecho en cualquier lugar de la página para revelar un menú desplegable en su pantalla. Seleccione 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 CSS personalizado que se utiliza globalmente para su sitio web. Es un área útil para localizar información sobre una página o publicación en su sitio.

El cuadro Inspeccionar 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.

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

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

Desea copiar la parte completa del código con el page-id-# palabra clave, incluidos los guiones.

Con la ID de la página guardada en algún lugar para usarla en los siguientes pasos, regrese a su panel de WordPress y haga clic en Apariencia> Personalizar.

Selecciona el CSS adicional pestaña en el Personalizador de WordPress.

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

Pegue el siguiente código en el campo CSS adicional, pero recuerde reemplazar el «#”Con el número real que extrajo como el ID de página de los pasos anteriores. Además, debe colocar una URL de imagen real en lugar del texto de relleno que tenemos allí (http://YOURIMAGEURL.jpeg).

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

Para este ejemplo, el ID de la página se completa como 352 y tenemos una URL de imagen de fondo pegada desde nuestra Biblioteca de medios.

Si es necesario, cambie la configuración de fondo personalizada si tiene problemas para ajustar la imagen de fondo de la pantalla. Por ejemplo, es posible que desee modificar elementos como el tamaño, el archivo adjunto o la posición de la imagen de fondo de WordPress. De lo contrario, déjelos todos como están en el código de ejemplo.

Haga clic en el Publicar cuando esté satisfecho con el CSS personalizado.

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

Como se mencionó anteriormente, sus otras opciones para agregar un fondo único a una página de WordPress incluyen el uso de un creador de páginas o un complemento que permita 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 que se muestra arriba.

Cómo agregar una imagen de fondo a una publicación de WordPress

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

La función de fondo personalizado predeterminada en WordPress no tiene nada que ver con las publicaciones individuales, además del hecho de que este fondo también se mostrará en las publicaciones del blog. Eso no es ideal para todas las organizaciones porque diferentes publicaciones de blog podrían tener temas drásticamente diferentes.

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

Por lo tanto, tenemos algunas opciones a considerar al agregar una imagen de fondo a una publicación (notarás que son las mismas que cuando trabajas con imágenes de fondo específicas de la página):

• Inserte una imagen de fondo usando CSS personalizado.
• Use un complemento para implementar un fondo en publicaciones individuales.
• Instale un creador de páginas visual para fondos de publicaciones.

Al igual que en la sección anterior sobre fondos de página únicos, puede agregar un fondo específico de publicación utilizando un creador de páginas o un complemento.

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

Al usar CSS personalizado para implementar un fondo específico de una publicación, usa el mismo código que usaría para el fondo de la página, con una diferencia: debe encontrar la ID de la publicación en lugar de la ID de la página.

Por lo tanto, abra la interfaz de una publicación de WordPress donde le gustaría insertar un fondo.

Haz clic derecho en la publicación y elige la opción Inspeccionar. Complete una búsqueda dentro del código para ubicar la sección de clase del cuerpo en el código. Busca el postid-# part: ese es el ID de publicación que debe insertar en el CSS personalizado.

Notará que el formato de la ID de la publicación es ligeramente diferente en este ejemplo en comparación con la ID de la página, donde el postid-# la etiqueta no tiene un guión entre «publicación» e «id» como tiene con page-id-#. Además, estas no son reglas estrictas. Puede encontrar formatos variados para las etiquetas.

Ahora, vaya a su panel de WordPress y haga clic en Apariencia> Personalizar. Navega hasta el CSS adicional pestaña.

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

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

Después de eso, tome el número de identificación de la publicación que encontró en la publicación deseada antes. Reemplace el «#» en el código CSS con el número. Además, cambie el http://YOURIMAGEURL.jpeg texto con la URL real de la imagen de fondo que le gustaría mostrar, manteniendo las comillas alrededor.

Asegúrate de presionar el Publicar antes de salir de la pestaña CSS adicional, ya que esto guarda sus cambios en el sitio web y le permite ver el fondo en la interfaz.

Con esos cambios de CSS en su lugar, ahora puede volver a la interfaz de esa publicación de blog de WordPress para ver el nuevo fondo. Pruebe las otras publicaciones de blog y páginas de su sitio para ver que ninguna de las otras tenga antecedentes, a menos que implemente el mismo código para esas ID de publicación.

Cómo agregar 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, incluidos cuadros de texto, imágenes y galerías.

Estos dividen su contenido en secciones separadas. Por lo tanto, puede agregar un color de fondo o una imagen solo para ese bloque.

Por ejemplo, supongamos que está escribiendo una publicación de blog sobre el estado de la industria minorista de la ropa. Desea finalizar o comenzar la publicación con una llamada a la acción para que las personas se registren en su próximo seminario web. Tendría sentido que esta sección se destaque mediante el uso de un color o una imagen de fondo.

Desafortunadamente, el editor de bloques de WordPress no ofrece una configuración integral en la que pueda agregar 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 que podemos agregar a una imagen de fondo para un bloque en una publicación o página. La portada le permite superponer texto y algunos elementos multimedia, lo que la hace adecuada para nuestro objetivo final.

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

Establecer un fondo de color para un bloque

La forma más sencilla de agregar algo de vitalidad a un solo bloque es agregar un fondo de color. No es tan elegante como el fondo de una imagen, 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, es mejor que use un bloque de cubierta y superponga otros bloques encima, como se explica más adelante en este artículo.

La Párrafo block, por ejemplo, tiene una configuración para activar un fondo de color.

Para activar esto, seleccione el bloque, luego ubique el Configuraciones de color bajo la Cuadra pestaña en el lado derecho.

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

Ve a la Color de fondo área y seleccione un color de la lista de opciones disponibles. También puede elegir el Color personalizado enlace para insertar su propio código de color o elegir un color único.

Como puede ver, una vez que se establece esa configuración, el fondo del bloque de párrafo cambia a un color diferente, en este caso, azul.

Agregar un fondo de color a cualquier bloque de WordPress

Como se mencionó anteriormente, no todos los bloques de WordPress tienen esta función de fondo incorporada. ¿Qué debe hacer si desea hacer una galería, o algún otro elemento de bloque, que no ofrece la opción de fondo?

La solución más rápida es utilizar el Grupo función de bloqueo en WordPress.

Para hacerlo, seleccione varios bloques que ya están en su contenido. Para este ejemplo, seleccionaré un Párrafo bloque y un Galería bloquear simultáneamente.

Haga clic en el icono cuadrado apilado en el menú que aparece.

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

Esto toma los bloques que haya seleccionado actualmente y los combina en un grupo, lo que le permite moverlos o editarlos todos juntos en lugar de bloques separados.

Esto establece el Grupo como su propio bloque. Significa que puedes ir al Configuración de bloque pestaña en el lado derecho de la página para encontrar su configuración.

Busca el Configuraciones de color pestaña y haga clic en eso.

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

Elija el color que más le guste para esta situación para ver que todo dentro de ese grupo ahora debería tener ese color de fondo.

Lo bueno del bloque Grupo es que toma otro bloque que no tiene una función de fondo (como el bloque Galería) y le permite activar un fondo para él de todos modos.

Agregar un fondo de imagen a un bloque de WordPress

Los bloques de WordPress están tanto en páginas como en publicaciones. Por lo tanto, podemos implementar esta táctica en cualquiera de los dos. Puede insertar casi cualquier contenido sobre el fondo del bloque agrupado, o solo en un bloque de WordPress.

Para comenzar con este proceso, haga clic en el Agregar bloque o «+«Botón de icono y busque el Cubrir cuadra.

Elija ese bloque para insertarlo en su publicación o página.

Luego debe hacer clic en el Cargar o seleccionar medios , que le permite buscar imágenes que puede utilizar como fondo.

Elija la imagen que desee y haga clic en el Seleccione botón.

Ahora puede ver esa imagen como fondo para el bloque Portada.

Siéntase libre de hacer clic en ese bloque para comenzar a escribir el contenido del párrafo, ya que la función principal es la superposición de texto.

Lo bueno del bloque Portada es que ofrece varias opciones de formato, lo que le permite pasar de un encabezado a un formato de párrafo en segundos.

Para agregar otros bloques encima de ese fondo, haga clic en el «+”Dentro del bloque de cubierta. Es posible que deba presionar la tecla Intro una vez para revelar el botón.

Al igual que agregar un bloque de contenido en un artículo normal, el bloque de portada le permite desplazarse por todos los bloques de contenido potenciales en WordPress.

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

Para este ejemplo, inserté una imagen y la formateé un poco para que pareciera aceptable dentro del bloque Portada.

Cada bloque que coloque delante del fondo tiene su propia configuración personalizada en la pestaña Bloque del lado derecho, así que considere editarlos a medida que los coloca en el bloque Portada.

En algún momento, es posible que desee editar o personalizar la imagen de fondo en sí. Si ese es el caso, elija el bloque Portada, luego vaya a la pestaña Configuración del bloque en el lado derecho de la página.

Esto revela una gran cantidad de configuraciones para ajustar para la imagen de fondo, incluidas las siguientes:

• Fondo fijo
• Fondo repetido
• Selector de punto focal
• Dimensiones
• Cubrir
• Opacidad
• Avanzado

Una de las configuraciones más importantes a considerar es hacia la parte inferior de la Configuración de bloque panel.

Desplácese hacia abajo para encontrar el Cubrir sección. Abra la sección para revelar una lista de superposiciones de colores y opciones para hacer que esos colores sean sólidos o degradados.

Esta es una excelente opción para cambiar ligeramente el color de fondo para que coincida con su marca o resaltar su contenido en primer plano. También puede ajustar el Opacidad para asegurarse de que la superposición de colores no abrume el fondo por completo.

Como alternativa, considere el complemento Gutenberg Blocks de Stackable Page Builder para abrir herramientas más avanzadas para fondos en bloques individuales.

Cómo poner una imagen de fondo detrás del encabezado de WordPress

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

A veces, todo lo que necesita es un fondo detrás de su encabezado.

Establecer una imagen de fondo para el encabezado agrega un nuevo ambiente a su sitio, especialmente si hay un día festivo o una gran venta que puede resaltar.

Para empezar, ve a Apariencia> Encabezado en el panel de WordPress.

Nota: También puede encontrar la configuración del encabezado yendo a Apariencia> Personalizar> Encabezado sección.

Ahora debería ver una vista previa de su página de inicio en el lado derecho de la pantalla, junto con la configuración del encabezado en el lado izquierdo.

El módulo de encabezado explica las dimensiones preferidas para cualquier imagen de fondo de encabezado, por lo que puede optar por recortar su imagen antes de cargarla o esperar hasta que obtenga la imagen en su panel de WordPress.

Bajo la Encabezado actual título, haga clic en el Agregar nueva imagen botón.

Los encabezados son complicados porque desea asegurarse de que todos los enlaces y elementos de texto (sin mencionar su logotipo) se vean nítidos en la parte superior de la imagen de fondo.

Por lo tanto, recomendamos probar imágenes de fondo y considerar imágenes que se adhieran a colores y patrones más sólidos. No harán que sea tan difícil ver los elementos de su menú y el logotipo.

Seleccione una imagen que se vea ideal para usted, luego haga clic en el Seleccionar y recortar para continuar.

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

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

Una vez que tenga el cultivo perfecto, haga clic en el Delimitar imagen botón.

La imagen de fondo del encabezado se activa inmediatamente en la vista previa del Personalizador de WordPress, lo que le ayuda a ver exactamente lo que verán sus clientes con este tipo de fondo.

Notarás que la imagen de fondo del encabezado no se traspasa al resto del contenido de la página. En cambio, permanece en el encabezado, detrás de cualquier cosa que se encuentre actualmente allí, como un logotipo, un eslogan, un menú y una barra de búsqueda.

Otra opción para el fondo de su encabezado es cargar varias imágenes y hacer que roten aleatoriamente, agregando un poco de brillo y sorpresa a su sitio web cada vez que un usuario llega a la página de inicio.

Para que esto funcione, primero debe tener varias imágenes cargadas en el cuadro de configuración de Encabezado. Haga clic en el Agregar nueva imagen para completar ese proceso.

Una vez que tenga más de una imagen, haga clic en el Aleatorizar encabezados subidos para activar la función que muestra un fondo de encabezado diferente cada vez.

Puede notar que agregar una imagen de fondo al encabezado dificulta ver algunos de los elementos del encabezado, como su menú o un carrito de compras.

Si ese es el caso, le sugerimos que se abstenga de eliminar inmediatamente la imagen del encabezado. En su lugar, vaya al Color de texto y Color de enlace campos para ver si algunos ajustes pueden ayudar.

La configuración de Color del texto controla cualquier texto en el encabezado que no esté vinculado a otra página interna o externa. Muchas veces eso solo significa el lema, si tiene uno, pero a veces puede tener otros elementos como un total del carrito de compras o íconos de redes sociales que también cambian de color con el texto.

El otro cuadro es para el Color del enlace. 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.

A continuación, se muestra un ejemplo de lo que sucede cuando elige un nuevo color tanto para el Color de texto y el Color de enlace. Puede ver que el lema y el nombre del sitio cambiaron, el menú cambió a blanco y también lo hicieron la mayoría de los otros elementos del encabezado, como el ícono del carrito de compras.

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

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

Haga clic en el Seleccionar el color y elija del panel de color para ver los resultados de la vista previa. También puede cambiar los colores del texto cuando usa un color de fondo.

Después de probar qué funciona mejor para su encabezado y decidir cuál es la imagen de fondo perfecta para ese encabezado, haga clic en el Publicar botón para que todos vean los cambios.

Y si tiene algún problema para procesar los cambios en la interfaz, considere borrar su caché de WordPress.

Cómo agregar una imagen de fondo a la categoría de WordPress

Una página de archivo de categorías de WordPress compila todas las publicaciones enumeradas en una categoría determinada. Por ejemplo, muchos sitios web tienen categorías para tipos de publicaciones personalizadas como Productos. De forma predeterminada, todos los sitios web de WordPress tienen categorías para publicaciones. Aquellos que no clasifica se etiquetan con el Sin categorizar categoría.

Dado que las páginas de archivo de 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, puede tener un fondo orientado a la tecnología para una categoría de Diseño web o un fondo con diseño de concha o playa para una categoría de Viajes.

El método CSS personalizado (que se describe a continuación) es la opción más económica. Sin embargo, también puede buscar en los diversos creadores de páginas y complementos para ver cuáles permiten fondos en las páginas de categorías.

Para completar esta tarea con CSS, abra su panel de WordPress y vaya a Apariencia> Personalizar.

Selecciona el CSS adicional pestaña para abrir el módulo que permite escribir su propio CSS.

Abra una de las páginas de archivo de su categoría en su sitio de WordPress. Por lo general, estas páginas tienen URL como esta: http://yourwebsitedomain.com/category/travel. Necesitas cambiar el viaje parte a cualquier categoría que tenga en su propio sitio y cambie el yourwebsitedoman parte de su nombre de dominio real.

Haga clic derecho en cualquier lugar de la página de la categoría y haga clic en Inspeccionar. Mostrará la herramienta Inspeccionar en su navegador, con el código de esa página presentado para que lo vea.

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

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

Guarde la etiqueta CSS para más tarde.

Después de eso, navega de regreso al CSS adicional sección en su Personalizador de WordPress.

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

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

Haga clic en el Publicar para guardar los cambios.

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

Cómo agregar una imagen de fondo a su página de inicio de sesión de WordPress

La página de inicio de sesión de WordPress tiene dos versiones: una para usuarios habituales que visitan su sitio y desean registrarse e iniciar sesión en su sitio web, y la otra para usuarios internos, como administradores y autores.

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

Puede hacer esto mediante el uso de un complemento llamado Personalizador de página de inicio de sesión personalizado. Para comenzar, instale y active el complemento en su sitio de WordPress.

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

Ir Iniciar sesiónPresione> Configuración.

Aquí, puede ajustar la configuración del complemento antes de agregar su fondo y personalizar cualquier otra parte de su 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 caducar sesiones después de un cierto período de tiempo.

Para activar un fondo de imagen personalizado para la página de inicio de sesión, haga clic en Iniciar sesiónPresione> Personalizador.

Esto lo envía al Personalizador de WordPress, donde se ha agregado una nueva página para las herramientas de LoginPress. Notarás pestañas para Temas, Logotipo, Fondo y más.

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

No cubriremos todas las demás configuraciones ya que nos estamos enfocando principalmente en el fondo en este momento.

Haga clic en el Fondo pestaña para continuar.

La primera orden del día es decidir si desea un fondo de color o un fondo de imagen.

Si prefiere un fondo de color, busque el Color de fondo campo y haga clic en Seleccionar el color. Esto revela un panel de color para que pueda elegir exactamente qué color tiene sentido para su negocio.

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

Justo debajo del Color de fondo escenario, hay un Imagen de fondo sección.

Enciende el Habilitar imagen de fondo cambie para mostrar una colección de imágenes de fondo prefabricadas.

No hay muchos para elegir en la versión gratuita, pero el complemento agrega más si decide actualizar a la versión premium.

Continúe y pruebe estos fondos prefabricados para ver si pueden funcionar para su marca.

La ruta más probable es cargar su propia imagen como fondo de la página de inicio de sesión.

Busque el encabezado Imagen de fondo y haga clic en el Seleccionar imagen botón.

Se le lleva a la Biblioteca de medios de WordPress para cargar una imagen desde su computadora o elegir una de ellas que ya está dentro de WordPress.

Seleccione la foto que desee y haga clic en el Elegir imagen botón.

La imagen de fondo activada aparece como una miniatura en el panel Personalizador y la vista previa real de su página de inicio de sesión.

Ahora tiene la opción de hacer clic en el Publicar y quédese con lo que está en la pantalla. O bien, puede desplazarse hacia abajo hasta la configuración adicional para asegurarse de que la mejor vista de la imagen cargada esté actualmente activa.

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

Dependiendo del tamaño de su foto, es posible que vea o no que la imagen se mueva un poco.

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

De forma predeterminada, colocan la imagen en el centro de la pantalla, pero a veces se ve mejor si la tienes ubicada en algún lugar como la parte inferior derecha o la parte superior izquierda. Pruébelos todos para descubrir cuál funciona mejor para su imagen de fondo.

En el futuro, el menú desplegable Tamaño de imagen de fondo de WordPress tiene configuraciones para cómo la imagen cubre el espacio de la pantalla, ajustando su tamaño con cada opción preestablecida.

Nuevamente, pruébelos para decidir cuál se ve mejor. Puede encontrar que algo como la configuración de Contener ofrece una vista mejorada en lugar de la configuración de Auto o Portada.

¡Y eso es todo lo que hay que hacer para cargar y activar una imagen de fondo para su página de inicio de sesión!

La configuración final está ahí si desea mostrar un video como fondo en lugar de una imagen. Active esa configuración si tiene un video interesante relacionado con su negocio y no atrae demasiado la atención de las personas que inician sesión en el sitio.

Una vez hecho todo, haga clic en el Publicar para activar el fondo de la página de inicio de sesión y ver cómo se muestra cada vez que un usuario intenta registrarse o iniciar sesión en el sitio.

Cómo agregar una imagen de fondo a su menú de navegación

Es posible que haya notado algunos sitios web con menús sofisticados que incluyen imágenes de fondo o íconos. Esta es una práctica común en el mundo del comercio electrónico, 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á interesado en agregar fondos a su menú, consulte nuestro artículo sobre los mejores complementos de menú de WordPress. Muchos de estos complementos de menú ofrecen opciones para incluir fondos de imagen y color dentro de su menú.

Dado que hay varios complementos para agregar un fondo determinado para los menús de navegación, proporcionaremos tutoriales para dos, uno de los cuales permite los fondos detrás de su submenú. Por el contrario, el otro agrega un fondo a su menú móvil.

Para agregar una imagen de fondo a diferentes submenús, instale y active el complemento WP Mega Menu. Este complemento le permite activar y administrar un mega menú con múltiples niveles desplegables. Es ideal para grandes tiendas en línea, pero también funciona para menús más pequeños, especialmente si desea agregar una imagen de fondo o íconos.

Comience por buscar la pestaña WP Mega Menu en el panel de WordPress.

Haga clic en el Temas opción del menú.

Aquí, puede ver una lista de temas predeterminados creados para su menú por el complemento.

Puede hacer clic para editar cualquiera de los temas o agregar su propio diseño desde cero.

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

Sin embargo, para el fondo del menú, simplemente necesita saber qué tema desea elegir.

Ir Apariencia> Menús en el tablero.

Verá un nuevo módulo que se vincula al Configuración del mega menú.

Haga clic para Permitir el mega menú, luego elija el que más le guste para su sitio web.

Finalmente, haga clic en el Ahorrar botón.

Ahora, dirija su atención a la Estructura del menú área.

Al desplazarse sobre cualquiera de los elementos de su menú actual, se revela una WP Mega Menú botón. Aquí es donde puede personalizar el diseño y el diseño de cada sección desplegable.

Haga clic en el WP Mega Menú para cualquier elemento del menú que desee. Para este caso, agregaremos un mega menú desplegable a la pestaña Tienda.

Nota: Suponemos que ya tiene un menú configurado en su sitio de WordPress. Lea nuestra guía del menú desplegable de WordPress si necesita ayuda con eso.

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

Luego puede agregar 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ú Comprar.

Para agregar un fondo a esta área desplegable, haga clic en el Opciones en la esquina inferior izquierda.

Encuentra el Cargar imagen de fondo campo.

Haga clic en el Subir para encontrar la foto correcta en su Biblioteca de medios para usarla como fondo.

Aparece una imagen en miniatura después de seleccionarla de la Biblioteca de medios.

Hay algunas otras configuraciones a considerar, así que no dude en verificarlas si lo desea.

Asegúrese de hacer clic en el Guardar cambios botón en la parte inferior de la Opciones panel.

También debe hacer clic en Guardar menú en el área Estructura del menú del panel de WordPress.

Ahora, navegue hasta la interfaz de su sitio web para ver el menú. Si se desplaza sobre el elemento que acabamos de personalizar, debería ver una sección desplegable con el fondo.

Otra forma de agregar una imagen de fondo a un menú es mediante el uso de un menú receptivo móvil que aparece cuando alguien accede a su sitio web a través de un dispositivo móvil.

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

Después de instalar y activar el complemento WP Mobile Menu, vaya a Opciones del menú móvil en el panel de WordPress.

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

Por ejemplo, podemos hacer clic en el Habilitar menú izquierdo interruptor (activando un menú móvil que se encuentra en el lado izquierdo de la pantalla) y elija el Menú principal opción de la Menú Izquierdo desplegable. Esto vincula nuestro menú principal actual con el menú móvil, por lo que los visitantes ven las mismas pestañas.

Depende del tipo de menú móvil que cree, pero dado que estamos creando un menú del lado izquierdo, podemos hacer clic en la pestaña Menú izquierdo para revelar la configuración apropiada para agregar un fondo.

Desplácese hacia abajo hasta el Imagen de fondo del panel campo y haga clic en el «+”Para abrir la biblioteca multimedia.

Seleccione una imagen de su biblioteca de medios y agréguela al campo.

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

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

Dado que el complemento genera menús móviles, es posible que el menú solo se muestre cuando su navegador esté configurado en un ancho reducido o cuando vaya a su sitio en un teléfono o tableta.

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

Haga 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ú móvil para que todos lo vean.

Cómo agregar una imagen de fondo de WordPress a una página de mantenimiento

Todos los sitios web requieren ocasionalmente mantenimiento y, a veces, ese mantenimiento lleva tanto tiempo 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 constan de una imagen de fondo a pantalla completa y tal vez texto o enlaces con más recursos.

Si ya tiene una página de mantenimiento y no incluye una imagen de fondo, considere los siguientes pasos para generar un entorno hermoso para cuando necesite cerrar su sitio web del público durante un período de tiempo.

Puede agregar una imagen de fondo a una página de mantenimiento con la ayuda del complemento de mantenimiento. Instale y active el complemento en su sitio web.

Una vez que esté activo, busque el El mantenimiento está encendido / apagado en la parte superior del tablero.

Haga clic en el botón para ir a la página de Configuración del complemento de mantenimiento.

Otra forma de acceder a la página de Configuración es haciendo clic en el Mantenimiento elemento de menú en el menú lateral del tablero.

La página de configuración del complemento de mantenimiento tiene una colección decente de opciones para personalizar, pero el área principal a considerar es el Configuración general módulo. Aquí, puede escribir un título y una descripción, los cuales sirven como texto que se superpone al fondo que estamos a punto de insertar.

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

Puede usar el complemento de mantenimiento para cualquier cosa, desde páginas de mantenimiento hasta páginas próximas, por lo que puede escribir algo como «Nuestro sitio está en mantenimiento», o puede mostrar un poco de información sobre su empresa e incluir un formulario para que la gente escriba en sus direcciones de correo electrónico.

Continuando, el complemento ofrece una opción para cargar su logotipo, que también se superpone sobre la imagen de fondo.

Haga clic en el Subir logotipo y elija su logotipo para ver su miniatura en el tablero.

Por último, el campo Imagen de fondo le pide que haga clic en Cargar imagen de fondo.

Cargue una imagen desde su computadora o revise su Biblioteca de medios para ubicar un fondo que sea adecuado para la página de mantenimiento.

Nota: Las mejores imágenes de fondo de mantenimiento son grandes, de alta resolución y con orientación horizontal. Una alternativa de fondo de «Modo retrato» está disponible en la configuración a continuación.

Una vez que elija el fondo, aparecerá como una vista previa en miniatura más pequeña. en el tablero.

Aunque una imagen de fondo con orientación horizontal tiene más sentido para computadoras de escritorio y pantallas más anchas, muchas personas terminan en su sitio usando pantallas con orientación vertical, como cuando se sostiene un teléfono verticalmente.

Por lo tanto, una imagen de fondo más amplia no se verá tan bien. Es por eso que el complemento ofrece una imagen de fondo en modo vertical que sirve como alternativa, y se intercambia de manera receptiva cada vez que un usuario visita la página utilizando una pantalla orientada al retrato.

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

Esta vez, busque una imagen que sea más alta que ancha (modo retrato). Siempre puede recortar la imagen de fondo original para convertirla en un retrato, o tiene la opción de cargar una imagen completamente diferente para llenar el lugar.

Resalte la imagen que desee y haga clic en el Seleccionar imagen para insertarlo en el tablero.

Todas estas configuraciones no significan nada a menos que active el Modo de mantenimiento.

Para que eso suceda, ubique el interruptor de encendido / apagado de mantenimiento en la parte superior de la página de configuración.

Mueva el interruptor para que diga «Activado», luego seleccione el Guardar cambios botón.

Vaya a la interfaz de su sitio web para asegurarse de que la imagen de fondo y la página de mantenimiento se muestren correctamente.

Hay muchas posibilidades de que no sea así.

Hay dos razones para esto: en primer lugar, debe cerrar la sesión de la cuenta de administrador de WordPress para ver el sitio web del modo de mantenimiento. En segundo lugar, es posible que deba borrar la memoria caché del sitio para actualizar el cambio en el contenido.

Por ejemplo, cuando salgo de la cuenta de administrador, la página de mantenimiento ahora aparece 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 retrato encaja en su lugar.

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

Otro tipo de imagen de fondo con el complemento se llama imagen de precargador. Básicamente, esto carga una imagen rápida con un efecto animado antes de revelar la página de mantenimiento, el fondo y el contenido reales.

Al igual que la imagen de fondo normal, haga clic en el Cargar precargador para encontrar una imagen que se vea bien y agregarla al tablero.

Nuevamente, haga clic en el Guardar cambios y borre el caché.

Por defecto, el Imagen de precargador El efecto gira por un momento y luego desaparece para presentar la página de mantenimiento y la imagen de fondo.

Depende completamente de usted si desea mantener este tipo de efecto o no.

Varios otros elementos de fondo están disponibles para que experimente en el panel de Configuración del complemento de mantenimiento.

Por ejemplo, es posible que desee agregar un color de fondo en lugar de una imagen de fondo.

Si ese es el caso, vaya al Color de fondo campo y seleccione un color que se adapte a su marca.

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

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

También debe eliminar la imagen de fondo del modo retrato.

Guarde los cambios y borre la caché. Luego, vaya a la interfaz de su sitio para ver el color de fondo en efecto.

Otras configuraciones a considerar incluyen elementos como el color de la fuente, la familia de fuentes y el desenfoque de fondo.

También recomendamos pensar si necesita tener un inicio de sesión frontend o no. Esto proporciona una forma para que los usuarios inicien sesión en sus cuentas y obtengan acceso a los perfiles si es necesario.

Una vez hecho todo, haga clic en el Guardar cambios botón.

El complemento de mantenimiento también ofrece varios temas prefabricados con hermosas imágenes de fondo y diseños y texto diseñados profesionalmente.

Puede encontrar temas para las próximas páginas y diseños de mantenimiento, junto con páginas para recopilar direcciones de correo electrónico y otra información de contacto.

Debes comprar los temas para usarlos.

Dependiendo de su presupuesto, son bastante económicos y se ven muy bien.

Para aquellos que no estén interesados ​​en comprar un tema, todas las configuraciones mencionadas anteriormente están a su disposición. También puede acceder al módulo CSS personalizado para configurar su página de mantenimiento y la imagen de fondo como desee.

Recuerde, la configuración de la página de mantenimiento rara vez entra en vigor a menos que cierre la sesión de la cuenta de administrador y haga clic en el Limpiar cache botón.

Puedes encontrar el Limpiar cache en la esquina superior derecha del tablero al usar Kinsta. Si usa un host diferente, considere uno de los muchos complementos de almacenamiento en caché del mercado.

Una vez que borre el caché y guarde su configuración, debería ver una hermosa imagen de fondo que complementa la página de mantenimiento.

Cómo agregar un fondo de WordPress con un creador de páginas de terceros

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

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

Agregar un fondo de WordPress con Elementor

Elementor, el popular creador de páginas destinado a acelerar drásticamente la producción de sitios web, ofrece un complemento gratuito con varias herramientas de imagen de fondo.

Además, Elementor presenta flexibilidad de fondo visual para varias partes de su sitio web en lugar de restringir los fondos a todo el sitio web. Por ejemplo, puede agregar un fondo detrás de casi cualquier sección de bloques de construcción y mostrar diferentes fondos de una página a otra.

Para comenzar, instale y active el complemento Elementor.

Elementor dispersa su configuración 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 puede ir a cualquier página o publicación con la expectativa de tener acceso a un botón de carga en segundo plano.

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

Una vez en el editor de páginas de WordPress predeterminado, haga clic en el botón para Editar con Elementor.

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

La funcionalidad en segundo plano no está disponible en una sección o bloque, sino en el principal Ajustes para esa página.

Por lo tanto, haga 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.

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

En Estilo, busque el Tipo de fondo campo y haga clic en el Cepillo de pintura icono para agregar un fondo estándar.

A continuación, elija el tipo de fondo que desea que aparezca. Por ejemplo, el Color El campo le permite cambiar el fondo a un color sólido. También hay un Degradado opción en el Tipo de fondo campo si ese es más tu estilo.

Haga clic en el Elegir imagen botón debajo del campo Imagen para abrir su Mediateca y elija una imagen de fondo adecuada para esta página.

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

La imagen de fondo seleccionada ahora aparece en la vista previa del sitio web de Elementor a la derecha. Es posible que deba ajustar otras partes de su contenido para asegurarse de que elementos como texto e imágenes aparezcan en la parte superior del fondo.

Elementor proporciona configuraciones de fondo de imagen como Posición, Adjunto, Repetir y Tamaño de imagen de fondo de WordPress. Modifique la configuración para determinar si su fondo puede verse mejor como un archivo adjunto fijo, o tal vez con una orientación superior derecha o un tamaño alternativo.

Empuja el Actualizar para guardar todos los cambios en la página y publicar el nuevo fondo de su sitio web.

Fondos de sección con Elementor

Elementor ofrece una funcionalidad de fondo avanzada para la mayoría de las secciones agregadas a sus páginas.

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

Por ejemplo, podemos seleccionar esto Editor de texto sección para ver la configuración de la sección de texto.

Elegir la Avanzado pestaña y encontrar el Fondo sección dentro de esa pestaña.

La Fondo los ajustes incluyen Tipo de fondo, Color, Imageny más, muy similar a la configuración que vimos para la configuración general del fondo de la página. La única diferencia es que restringe estos ajustes a la sección seleccionada.

Elegir la Cepillo de pintura icono para Tipo de fondo, luego haga clic en el Elegir imagen botón debajo del Imagen campo.

Elija una imagen del Mediateca y haga clic en el Insertar medios botón.

Como puede ver, la imagen de fondo permanece dentro de los límites de esa sección mientras se encuentra detrás del contenido ya creado para esa sección.

Utilizar el Posición, Adjunto archivo, Repetir, y Tamaño selectores para modificar cómo se presenta la imagen de fondo en la sección.

Por fin, haga clic en el Actualizar para guardar los cambios.

Agregar una imagen de fondo con Beaver Builder

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

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

Primero, instale el complemento Beaver Builder para comenzar.

Vaya a cualquier página o publique para editarlo con Beaver Builder.

Debe convertir las páginas creadas previamente al formato Beaver Builder. Como alternativa, tiene 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 a Beaver Builder, abra ese editor de página y haga clic en el icono de tres puntos para abrir el menú Ver en la esquina superior derecha.

Desplácese hacia abajo para buscar y elegir el Convertir a Beaver Builder Enlace.

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

Para crear una página desde cero, vaya a Páginas> Agregar nuevo.

Luego haga clic en el Iniciar Beaver Builder botón.

El complemento Beaver Builder lo lleva a una vista frontal de la página web. Ocupa la mayor parte de la pantalla actuando como un verdadero editor de interfaz, donde haces clic en los elementos y te mueves por los cuadros con el mouse.

La primera forma de agregar un fondo a través de Beaver Builder es cargando un fondo en un bloque de sección. Esto podría ocupar la mayor parte de la página o una fracción de la página, según el tamaño del bloque de sección.

Una vez seleccionado, busque el Configuración de filas botón (el ⚙ icono).

Haga 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.

Aparece un panel de Configuración en la parte superior de la vista previa de su sitio web. Haga clic en el Estilo pestaña, luego busque la sección Fondo.

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

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

• Color
• Degradado
• Video
• Código incrustado

No dude en probar los diferentes tipos de fondos.

Por ejemplo, puede encontrar que un fondo degradado se ve mejor que una imagen. Cada uno de los tipos de fondo incluye su propia configuración. La Degradado type, en este caso, solicita dos colores para que el degradado se mueva de uno a otro.

Optar por el fondo de la foto presenta campos para elegir de la biblioteca de medios o pegar una URL para la imagen. Haga clic en el Seleccione Foto enlace si utiliza la fuente de fotografías de la biblioteca multimedia.

Encuentra tu foto de fondo favorita y haz clic en el Seleccione Foto botón.

Beaver Builder coloca la foto en el espacio de fondo elegido anteriormente. La sección Configuración de la foto le pregunta cómo le gustaría formatear la foto. Elija entre opciones como Tamaño, Repetir, Posición, y Adjunto archivo.

Global y Fotos de fondo de Beaver Builder de página completa

Beaver Builder funciona con las herramientas de diseño predeterminadas de WordPress para aprovechar las funciones de fondo integradas.

Por lo tanto, puede ir a la Apariencia> Fondo pestaña para activar una foto de fondo para todo su sitio web.

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

Aquí, haga clic en el Configuración global opción.

El Panel de configuración global ofrece la posibilidad de cambiar todo su sitio web, anulando o modificando la codificación incorporada 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).

Haga clic en la pestaña CSS en la Configuración global y pegue 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;
}

Reemplace la URL a la imagen texto con la URL de la foto de fondo deseada. También puede cambiar cosas como la función de repetición, el archivo adjunto y el tamaño del fondo con el código CSS.

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

En el editor de su página, abra el Herramientas menú de nuevo.

Selecciona el Diseño CSS y Javascript opción.

Pegue el mismo código en la pestaña CSS, cambiando el URL a la imagen texto a la URL real y ajuste la configuración 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;
}

Como puede ver, todo el fondo cambia a la imagen de URL que tiene en la codificación CSS. Tenga en cuenta que el Diseño CSS / Javascript El panel controla solo la página actual. No verá el fondo en ninguna página además de esta.

Agregue una fila simple o un fondo de widget con Page Builder por SiteOrigin

Page Builder de SiteOrigin es otra herramienta de creación de sitios web visual de arrastrar y soltar. Tiene una capacidad limitada para insertar fondos para todo el sitio web (volvería a recurrir a la herramienta estándar de fondo personalizado de WordPress). Aún así, proporciona configuraciones para agregar imágenes de fondo y colores para filas y widgets utilizados por SiteOrigin.

Primero, descargue y active el complemento Page Builder by SiteOrigin.

Navegue a una nueva página o considere agregar una fila SiteOrigin a una página actual en el sitio web.

Cada sección de SiteOrigin le pide que Agregar widget o Añadir fila. También tiene la oportunidad de navegar a través del Diseños prediseñados si prefiere no empezar un diseño desde cero.

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

Por lo tanto, haga clic en el Agregar widget o Añadir fila para continuar.

En este ejemplo, veremos el Widgets Biblioteca.

Aquí, puede elegir uno de los muchos widgets proporcionados por SiteOrigin, desde menús de navegación y páginas hasta publicar contenido y listas de productos.

Elegiremos el Productos widget para este ejemplo, pero puede optar por uno de los muchos otros widgets según las necesidades de su diseño. Además, puede agrupar estos widgets con una fila y luego agregar una imagen de fondo a esa fila 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 WordPress, por lo que no hay tanto editor de frontend como con otros creadores de páginas.

Para agregar un fondo a cualquier elemento de SiteOrigin, desplácese sobre el elemento y haga clic en el Editar Enlace.

Elegí el Productos widget para este ejemplo, pero cada widget tiene su propia configuración para configurar cómo se ve en su sitio web.

Las herramientas de fondo viven debajo del Diseño Menú desplegable. Haga clic en eso para avanzar.

Encuentra el Imagen de fondo campo y haga clic en el Seleccionar imagen botón.

También tiene la opción de pegar en un URL externa para la imagen de fondo.

La biblioteca de medios le muestra las imágenes actuales que ha subido a WordPress. Haga clic en la imagen que mejor se adapte a este fondo y seleccione la Hecho para colocarlo en el módulo SiteOrigin.

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

Desplácese hacia abajo por los ajustes para configurar todo, desde el Visualización de imagen de fondo hacia Color de fuente para el texto superpuesto.

En general, debería poder obtener los resultados deseados eligiendo la pantalla Portada. Parece que el complemento SiteOrigin está predeterminado en la pantalla en mosaico, por lo que es posible que deba cambiar eso.

Asegúrese de hacer clic en el Hecho cuando haya completado su configuración personalizada para el fondo.

El widget (en este caso, el widget Productos) se coloca en el editor de WordPress de SiteOrigin para esa página. Puede arrastrar este elemento a cualquier lugar que desee en la página y agregar nuevos widgets y filas por encima y por debajo de él.

Debe hacer clic en el Avance o Actualizar y luego navegue por la interfaz de la página para ver los resultados.

El fondo actual que agregué aparece dentro de las restricciones del Productos widget 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.

Adición de imágenes de fondo únicas con Brizy

El creador de páginas final para esta demostración, Brizy, ofrece elegantes plantillas y una interfaz de interfaz superior para agregar diseños inusuales y personalizaciones rápidas.

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

Como tal, le alegrará saber que Brizy también tiene una herramienta de fondo para casi todos los elementos que incluye a través del generador de páginas. Sin mencionar que Brizy presenta varios estilos de fondo únicos, como agregar un video en bucle al fondo o un mapa completo.

Para aprovechar estas configuraciones de fondo, instale y active el complemento Brizy para comenzar.

Gran parte del proceso de diseño de Brizy requiere que comience con una plantilla en blanco. Brizy intentará convertir sus diseños más antiguos en módulos Brizy, pero descubrimos que es mejor comenzar de nuevo.

Ir a Página o Correo en su panel de WordPress y comience a construir la página con un título y tal vez algo de contenido.

Debería ver un botón para Editar con Brizy. Haga clic en eso para ser enviado al creador de páginas completo de Brizy.

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

Busca el Diseños y bloques pestañas en la barra de menú superior.

Los diseños proporcionan páginas web prediseñadas, llenas de contenido de demostración y listas para usar siempre que personalice las suyas propias. contenido de la empresa. Los bloques son trozos más pequeños de páginas web, pero aún están preconstruidos y, a menudo, son más fáciles de usar y manipular que si tuviera que hacer un bloque por su cuenta.

No importa en qué dirección vayas. Explore los diseños y bloques y agregue tantos como desee a la página. Estos son simplemente los elementos que utilizará para formar una página web completa.

Después de tener algunos bloques o diseños en la página web, vuelva a la pantalla del editor para ver su trabajo.

Verá que cada sección de bloque tiene un ícono de Configuración en la parte superior derecha del bloque, que generalmente aparece cuando se desplaza sobre la sección.

Haga clic en este para el bloque de su elección. Agregaremos un fondo a ese bloque.

La Configuración de bloque El panel permanece en la esquina superior derecha. Desplácese sobre los íconos del menú para ver qué hacen todos.

Uno de ellos es para Colores, y con eso, se refieren a un fondo de color. Puede cambiar eso y agregar un degradado si está más interesado en ceñirse a una vista de fondo de color sólido o degradado.

El botón de icono a la izquierda contiene el Fondo ajustes.

Haga 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 de medios:

Primero, pruebe el tipo de imagen para comprender cómo funciona con su diseño actual.

Haga clic en el Carga de imagen área para buscar una foto en la biblioteca de medios y agregarla al fondo.

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

Esto agrega un efecto agradable ya que el fondo de color sirve como una superposición, pero aún vemos la textura de la madera detrás de él.

Recuerde que siempre puede ajustar el campo Parallax para hacer que la imagen de fondo sea un fondo fijo, animado o desplazable.

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

La mejor parte de Brizy es que puedes seguir moviéndote por el diseño y haciendo clic en cada sección Ajustes botón.

Una sección hacia abajo, podemos insertar otra imagen de fondo sin perder mucho tiempo en ella.

Y para demostrar el poder de los otros tipos de fondos, podemos hacer clic en el Mapa escriba en segundo plano, introduzca una dirección y observe cómo aparece un mapa de esa ubicación justo detrás del contenido en primer plano.

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

Finalmente, recomendamos revisar la herramienta de video de fondo Brizy, ubicada en la misma sección que la herramienta de fondo de imagen. Funciona insertando una URL de video (YouTube o Vimeo), lo que genera un video completo justo detrás del contenido en primer plano. Incluso proporciona una configuración para repetir el video y elegir cuándo debe comenzar a medida que el usuario se desplaza por la sección.

El gif animado a continuación ofrece un breve ejemplo del video en acción, aunque probablemente podría necesitar algo de edición.

Tamaño de la imagen de fondo, origen y edición básica

Mencionamos anteriormente en el artículo que aunque no hay un tamaño perfecto para una imagen de fondo, recomendamos comenzar con un tamaño no menor a 1024 x 768 píxeles y mantener una relación de aspecto común como 16: 9. La relación de aspecto no importa tanto como el tamaño real y la resolución de la imagen, ya que puede recortar la imagen o dejar que WordPress lo haga por usted.

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

Dónde encontrar imágenes de fondo adecuadas

Para su búsqueda de imágenes de fondo, consulte nuestra guía sobre cómo encontrar y agregar fotos de archivo sin salir de WordPress. También tenemos una lista de fuentes de mercado útiles para buscar fotografías de archivo de alta resolución, muchas de las cuales son gratuitas.

En general, le recomendamos que intente tomar imágenes de fondo usted mismo. Si eso no es posible o no tiene experiencia con la fotografía o el diseño gráfico, piense en utilizar recursos de fotografía de archivo gratuitos. También puede optar por pagar una imagen de fondo de uno de los muchos sitios web de imágenes de stock premium, algunos de los cuales cobran una tarifa mensual para descargar un montón de fotos.

Algunos aspectos destacados de esos enlaces incluyen:

• Unsplash: gratis y no se requiere atribución.
• Visual Hunt – Fotos gratis. La mayoría de las imágenes no requieren atribución.
• Pexels: gratis sin atribución necesaria.
• Pixabay: gratis con la mayoría de las imágenes que no requieren atribución.
• iStockphoto: una suscripción premium de costo bastante bajo para imágenes libres de derechos.
• Shutterstock: imágenes libres de derechos por una tarifa de suscripción razonable.

Cómo cambiar la imagen de fondo de WordPress con CSS personalizado

Como hemos aprendido, puede agregar una imagen de fondo de WordPress con herramientas estándar integradas de WordPress o un complemento. No importa qué ruta elija, siempre que obtenga el resultado deseado. También existe la opción de utilizar CSS personalizado para estilizar la imagen de fondo o agregarla a su sitio por completo.

No cubriremos las complejidades del CSS personalizado, ya que veremos cómo cada imagen de fondo y tema tendrá un proceso diferente. Sin embargo, recomendamos leer nuestra guía sobre cómo editar, agregar y personalizar CSS en WordPress. El artículo cubre consejos útiles para agregar imágenes de fondo a casi cualquier sección del sitio web, desde elementos de menú hasta bloques de página específicos.

Solucionar problemas comunes con una imagen de fondo de WordPress

Todos los sitios de WordPress vienen con la capacidad de agregar un fondo. Sin embargo, eso no significa que la función principal funcione para todos los sitios web. Por ejemplo, puede encontrar que el tema que está utilizando no admite fondos personalizados. O tal vez sigues cargando un fondo, pero no se ve del todo correcto (demasiado grande o demasiado borroso).

Encontrar un problema con WordPress en segundo plano es frustrante y, desafortunadamente, algo común. Compilamos algunos de los problemas más comunes con imágenes de fondo a continuación y trazamos cada curso de acción.

Mi tema no admite una imagen de fondo de WordPress

Los desarrolladores de temas controlan la función Fondos personalizados en WordPress. Pueden activarlo o desactivarlo, dependiendo de si desean habilitar el soporte de fondo personalizado. El fondo se apaga cuando no es necesario o tal vez entra en conflicto con el diseño general del tema.

Si encuentra que su tema no admite un fondo personalizado o limita sus habilidades al agregar un fondo, considere estas soluciones:

• Cambie el tema por uno que admita fondos personalizados. Busque fondos personalizados en las listas de funciones al comprar o descargar temas.
• Utilice un complemento de fondo para anular la función predeterminada de fondo personalizado que se está bloqueando.

Aunque es posible incluir su propia codificación personalizada o ir a los archivos del tema para reactivar fondos personalizados, generalmente recomendamos no usar ambas opciones. Su mejor curso de acción es ubicar un tema que admita fondos o agregar un complemento que permita fondos pero que no altere mucho la funcionalidad del tema.

Mi imagen de fondo de WordPress es demasiado oscura o tiene el color incorrecto

Una imagen de fondo oscura podría provenir de muchas configuraciones que se ejecutan junto con la imagen de fondo. La mayoría de las veces, tiene que ver con un filtro superpuesto o un fondo mal coloreado.

Para la mayoría de los casos en los que el fondo está descolorido, debe verificar su tema o complemento que controla el fondo en sí.

Busque una configuración cerca del campo de fondo que solicite un filtro o superposición. También puede encontrar una función de opacidad que debe borrarse 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, comuníquese con el desarrollador del tema para tener una idea de lo que es posible corregir el color de fondo.

Mi imagen de fondo de WordPress no está en la derecha Posición

La imagen de fondo que aparece en la posición incorrecta tiende a alterar el diseño general de su sitio web. Puede encontrar que el fondo está demasiado hacia la izquierda o hacia la derecha, o tal vez lo que se supone que es el foco central del fondo no aparece en la pantalla.

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

Ir Apariencia> Fondo en el panel de WordPress. Busque la imagen que ha subido actualmente como fondo y busque la Posición campo. Este campo le permite mover la posición del fondo, con opciones para moverlo hacia la izquierda, derecha, arriba, abajo o esquinas.

Recomendamos hacer clic en todos los botones de posicionamiento para ver los resultados que producen. Después de encontrar la posición correcta, guarde la página.

Mi imagen de fondo de WordPress se repite una y otra vez

Las texturas y los fondos sólidos a menudo se ven mejor cuando se repiten, viendo cómo pasarían por alto las roturas de la imagen. Sin embargo, muchas imágenes se ven horribles cuando se repiten repetidamente como fondo, especialmente aquellas con muchos detalles y diferentes grados de color.

Un diseño de imagen de fondo repetido es útil si la imagen de origen no es lo suficientemente grande como para cubrir todo el fondo sin verse estirada. Por lo tanto, WordPress a veces utiliza de forma predeterminada 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 Antecedentes de Apariencia> Fondo en WordPress. Con una foto cargada como fondo, pruebe ajustes preestablecidos como Llenar pantalla, Ajustar a la pantalla, o Personalizado, en vez de Repetir opción preestablecida.

Sin embargo, puede encontrar que tratar de obtener una imagen más pequeña para cubrir la totalidad de la pantalla de fondo genera resultados desagradables. En ese caso, la mejor solución es reemplazar completamente la imagen de origen de fondo y buscar una que sea grande, de alta resolución y lista para publicarse en la web.

Mi imagen de fondo de WordPress está estirada

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

También puede ver que esto sucede con imágenes más grandes y de alta resolución si no coinciden con la relación de aspecto requerida. Para imágenes de fondo extendidas, piense en el archivo de origen. Elegir una imagen diferente que sea adecuada es la mejor opción.

Otro problema es que puede tener la configuración de fondo mal configurada. Verifique cosas como la posición de la imagen de fondo y que se estire sobre el lienzo en el Llenar pantalla modo. Es posible que solo necesite ceñirse a las dimensiones originales o agregar un Repetir función para que todo funcione.

Otros consejos para la resolución de problemas en segundo plano

• Los desarrolladores de temas tienen pleno poder sobre la función de fondo personalizado en WordPress. Si instaló un tema y no puede hacer que el fondo funcione, lo mejor que puede hacer es comunicarse con el desarrollador del tema o instalar un tema nuevo para ver si eso soluciona el problema.
• Los colores e imágenes de fondo personalizados a menudo anulan cualquier código CSS personalizado que implemente para controlar el tamaño, la ubicación o la fuente de la imagen de fondo. Es posible que deba ceñirse a la configuración de fondo del tema en lugar de utilizar CSS personalizado.
• Un tema puede venderse con un fondo personalizado ya activado. Por lo general, todo lo que tiene que hacer es reemplazar la imagen de fondo por una nueva. A veces, es necesario acceder a los archivos del tema o usar CSS personalizado para anular la configuración del tema.

Los mejores complementos de imagen de fondo de WordPress

Si desea tener más capacidades de edición para una imagen de fondo, está interesado en fondos de video o herramientas que permiten fondos específicos de la página, puede considerar los siguientes complementos de imagen de fondo de WordPress:

Imagen de fondo de pantalla completa simple

El complemento Imagen de fondo de pantalla completa simple no es muy diferente de la herramienta de imagen de fondo predeterminada en WordPress, excepto que agrega funciones automatizadas para cosas como cambiar el tamaño y escalar para los navegadores.

En general, este complemento funciona mejor para aquellos que encuentran que su tema bloquea la capacidad de agregar un fondo, o tal vez tienen problemas con la herramienta de fondo incorporada de WordPress. Anula lo que tiene en WordPress y agrega un botón de fondo especial en su panel de WordPress para cargar instantáneamente una imagen desde su computadora.

¡Eso es todo al respecto!

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

Fondos avanzados de WordPress

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

El complemento también ofrece soporte para videos. Los fondos de video se obtienen de lugares como YouTube y Vimeo, o incluso puede alojarlos usted mismo.

También es posible tener un fondo de color sólido o texturado. Todos estos tipos de fondo incluyen funciones avanzadas que no puede encontrar con la herramienta básica de fondo de WordPress. Algunos de estos incluyen efectos de desplazamiento y escala, 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 creadores de páginas visuales. Finalmente, puede usar sus opciones CSS personalizadas para agregar aún más estilo a sus fondos.

Imágenes perfectas + Retina

El complemento Perfect Images + Retina es útil como solución dos en uno. Le permite administrar el tamaño y la apariencia de la imagen de fondo de WordPress al mismo tiempo que regenera miniaturas y reemplaza imágenes. La gestión de imágenes es bastante impresionante y es particularmente crucial para fondos de alta resolución.

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

Mantenimiento

El mantenimiento es un complemento simple y fácil de usar para diseñar el mantenimiento y las próximas páginas. El complemento de mantenimiento tiene versiones gratuitas y premium, pero la gratuita es suficiente para activar una página de mantenimiento y agregar una imagen de fondo con texto y campos superpuestos.

Incluso puede cargar su propio logotipo, personalizar elementos como fuentes e íconos y elegir varias plantillas con sus propias imágenes de fondo hermosas. También puede instalar sus muchas plantillas prediseñadas, pero la mayoría requiere la licencia premium del complemento.

Su guía todo en uno para agregar, editar y personalizar las imágenes de fondo de su sitio para una apariencia y sensación únicas 🎨Haz clic para tuitear

Resumen

Una imagen de fondo básica de WordPress no requiere ningún esfuerzo para agregar y mostrar en todo su sitio web. Es una funcionalidad integrada en el núcleo de WordPress, por lo que es fácil intercambiar fondos para ciertos eventos o días festivos. También puedes quedarte con un trasfondo de por vida.

Además del fondo estándar de WordPress, puede usar código CSS personalizado, complementos y creadores de páginas para implementar todo tipo de fondos en su sitio de WordPress. Desde fondos de imágenes en páginas específicas hasta fondos para su botón de menú, las posibilidades son infinitas.

Ahora es el momento de agregar ese fondo que siempre ha querido a su sitio de WordPress.

¿Nos perdimos algo? Deje un comentario si tiene problemas para agregar o administrar imágenes de fondo de WordPress.