Cómo agregar una imagen de fondo de WordPress en cualquier página web

Mantendré esta presentación muy corta. Esto es lo que discutiremos en este artículo:
¿Cuáles son las imágenes de fondo?
¿Cuál es el trabajo con antecedentes de paralaje?
Cómo agregar imágenes de fondo a su sitio web de WordPress
Cómo abordar el tamaño de la imagen en WordPress
¿Estas listo en lugares? ¡Vamos! ¿Cuáles son las imágenes de fondo? Las imágenes de fondo son imágenes que se aplican al fondo de un elemento en un sitio web, en un correo electrónico, etc. Si bien la imagen del héroe es el principal punto focal de un sitio web o correo electrónico, las imágenes de fondo son más sutiles. Aceptan otros elementos del sitio web, como una segunda capa: acción para la acción, otras imágenes, varias secciones del sitio, etc.
Echemos un vistazo a algunos ejemplos de tales imágenes de fondo: IKEA en la página principal del sitio IKEA, las imágenes de fondo se utilizan para presentar sus historias inspiratorias. El título y la categoría de la historia se colocan sobre la imagen. Se utiliza un gradiente de superposición para que disminuya la opacidad de la imagen real. Este enfoque ayuda a mejorar la visibilidad del texto, pero también crea consistencia en el diseño, por lo que no se observa más color que otro.

Amar a Vincent una de mis películas favoritas, esta. Las imágenes de fondo están detrás de un carrusel que presenta historias detrás de Vincent Van Gogh y la película. Las imágenes de fondo parecen potenciar la historia y emitir emociones fuertes.

Exuberante me gusta mucho el aspecto del exuberante sitio web: colorido y vibrante como los productos en sí. Ahora, las imágenes de fondo pueden usar modelos o formas, como en este ejemplo de una página de registro en el boletín. Estos patrones logran transformar algo potencialmente aburrido, en algo alegre. Fondo de paralax Si mira el sitio web del Museo Británico, notará que hay imágenes en sus páginas, que están en segundo plano por qué el contenido del primer plano se está agotando. Estas son imágenes de fondo de Paralax. El desplazamiento de paralaje es una de esas tendencias de diseño web que logra agregar un efecto brillante a un sitio web si está integrado correctamente.

Puedes tener tal efecto en WordPress, te mostraré cómo más tarde. Cómo agregar imágenes de fondo a su sitio web de WordPress Hay tres formas principales de agregar imágenes de fondo a su sitio web de WordPress. Vamos a verlos, ¿verdad?
Agregar imágenes de fondo a través de su tema de personalizador de WordPress
Los temas de WordPress más populares tienen esta opción disponible. Usaré el tema de Colibri para el propósito de este ejemplo. Otros temas se comportan similar al tema de Colibri. Si el tema elegido no acepta la función, pase a los Métodos 2 y 3. Ahora, comencemos señalando la apariencia -> Personalizar desde el tablero de WordPress. A la izquierda, verá las opciones de edición del cliente del tema, mientras que a la derecha, hay una vista previa en vivo de su sitio web.
El tema le permite colocar imágenes de fondo para:
línea
Columnas
Bloques (secciones completas del sitio web, como: Acerca de mí, cartera, equipo, contacto, etc.)
Componentes (títulos, cartuchos, precios, carruseles, etc.)
La forma en que puede hacer esto es lo mismo, sin importar dónde necesite la imagen de fondo. Supongamos que desea agregar una imagen de fondo al bloque de su sitio de servicio. Comience por seleccionar la sección. A la izquierda, verá las opciones de edición desde un menú estructurado como se muestra a continuación: Apariencia
Estilo
Avanzado
Vaya al estilo -> Tipo de fondo.
Seleccionar imagen”. Ahora verá una imagen que puede reemplazar con la suya.

Al hacer clic en la imagen, se le solicitará una pantalla donde pueda seleccionar una imagen de la Galería de Medios de WordPress o cargar otra imagen.

Como ya puede notar, incluso puede agregar un video como fondo. ¡Y también hay una opción de conmutación para el efecto de paralaje!

Ahora, hay otro orden rápido para hacer que esta imagen de fondo cambie. Al seleccionar un bloque a la derecha, verá el icono de configuración. Haga clic en él y verá algunas opciones de edición.

Si selecciona “Cambiar el fondo”, se le dirigirá al “estilo” para continuar como se describió anteriormente.

Ese eran todos. Bastante fácil, ¿verdad? Ahora, si su tema no tiene la opción de imagen de fondo, hay una manera de hacerlo en el editor predeterminado de WordPress.
Agregar una imagen de fondo usando bloques de WordPress

Desde el tablero de WordPress, vaya a “páginas”. Ahora, seleccione “Editar” en la página deseada. Verá una interfaz como se muestra a continuación.
El editor de WordPress predeterminado se basa en bloques, lo que significa que cada sección del sitio web está compuesta por bloques. Se puede acceder a estos bloques desde cualquier signo “+” que verá en la interfaz. Hagamos clic en el de la parte superior izquierda.
Ahora, seleccione el bloque “Cubierta”. Verá que aparece inmediatamente en su página. Cargue una imagen almacenada localmente en su computadora o puede elegir entre los existentes en la biblioteca de medios. Seleccionamos una imagen de la biblioteca de medios. Ahora puedo agregar un texto. Las opciones de edición son bastante limitadas aquí.

Si selecciona la portada, verá un menú arriba, donde puede alinear su imagen o duplicar todo su bloque. Incluso puede guardar el bloque como reutilizable, para ser utilizado nuevamente en otros modelos. Ahora, en el lado derecho de la pantalla, tiene algunas opciones de edición adicionales.


En la configuración de los medios, si enciende la opción de fondo fija, activará el efecto de paralaje. Cuando el interruptor está deshabilitado, puede ajustar el punto focal.

Este ajuste del punto focal se puede hacer en caso de porcentaje, teniendo en cuenta el ancho y la altura. Entonces puedes agregar una superposición. Puedes elegir su color y opacidad.

Y estás bastante listo.
Agregar imágenes de fondo a través de complementos de WordPress

Aquí hay algunos complementos de WordPress etiquetados como complementos para imágenes de fondo. Jugaré un poco con el complemento de fondo de pantalla completa, porque tiene la mayor cantidad de instalaciones y las mejores reseñas hasta ahora.

Ahora, aquí hay un tutorial sobre cómo instalar un complemento de WordPress.
Con este complemento, las imágenes se escalarán automáticamente con el navegador, por lo que independientemente del tamaño del navegador, la imagen siempre llenará la pantalla. Todo lo que tiene que hacer es acceder a la imagen Look -> BG en la pantalla completa. Desde aquí, seleccione la imagen.
Cuando presione “Guardar opciones”, verá que todas las secciones en su sitio, sin fondo, recibirán esta imagen como fondo. Ahora esto está sucediendo en la versión gratuita. Es bastante simple y nada flexible. El plan pagado viene con opciones adicionales como: papel tapiz ilimitado
Publicar / página Fotos de fondo /
Múltiples imágenes con transiciones de decoloración en páginas

Y, he terminado, acabas de aprender los 3 métodos que puedes usar para agregar imágenes de fondo a tu sitio web de WordPress. Quiero que sepas una cosa más antes de decirle un día. El tamaño de la imagen antes de cargar cualquier imagen en su sitio, preste atención a su tamaño. Sé que todos miramos a Megapixel, pero en la web, hay una captura. Las imágenes de alta resolución pueden afectar su sitio afectando su tiempo de carga. A largo plazo, cualquier segundo de carga adicional puede perder los visitantes y las conversiones de su sitio. También reducirá significativamente sus posibilidades de clasificar en los motores de búsqueda, porque la velocidad de edad es un factor de clasificación importante. Por otro lado, el uso de imágenes demasiado pequeñas puede afectar la experiencia del usuario. Entonces tenemos que terminar. Una forma de hacer esto es utilizar aplicaciones externas que pueden ayudarlo a cambiar su tamaño de sus imágenes, al tiempo que garantiza una claridad adecuada. Pero en WordPress, puede hacerlo fácilmente usando un … complemento, como ya podría adivinar. Aquí, en las cabañas, somos fanáticos de Smush. Smush puede y comprimirá las imágenes sin una disminución visible en la calidad.