Voy a mantener esta introducción muy corta.
Esto es lo que vamos a discutir en este artículo:
- Qué son las imágenes de fondo
- ¿Qué pasa con los fondos 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
¿Listo, estable? ¡Vamos!
¿Qué 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 punto focal principal de un sitio web o un correo electrónico, las imágenes de fondo son más sutiles. Son compatibles con otros elementos del sitio web, como una segunda capa: llamadas a 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 de inicio del sitio web de IKEA, las imágenes de fondo se utilizan para presentar sus historias inspiradoras. El título y la categoría de la historia se colocan en la parte superior de la imagen. Se utiliza una superposición de degradado para que disminuya la opacidad de la imagen real. Este enfoque ayuda a que el texto sea más visible, pero también crea consistencia en el diseño, por lo que ningún color destaca más que otro.
Loving Vincent
Una de mis películas favoritas, esta.
Las imágenes de fondo se encuentran 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 transmitir emociones fuertes.
Lush
Me encanta cómo se ve el sitio web Lush: colorido y vibrante como los productos en sí.
Ahora, las imágenes de fondo pueden usar patrones o formas, como en este ejemplo de página de suscripción al boletín. Estos patrones logran transformar algo potencialmente aburrido, en algo alegre.
Imágenes de fondo de paralaje
Si observa el sitio web del Museo Británico, notará que hay imágenes en sus páginas que se encuentran en segundo plano por las que el contenido en primer plano se desplaza hacia abajo. Estas son imágenes de fondo de paralaje.
El desplazamiento de paralaje es una de esas tendencias de diseño web que logra agregar un efecto brillante a un sitio web si se integra correctamente.
También puedes obtener tal efecto en WordPress, te mostraré cómo un poco más tarde.
Cómo agregar imágenes de fondo a tu sitio web de WordPress
Hay tres formas principales de agregar imágenes de fondo a tu sitio web de WordPress. Vamos a comprobarlos, ¿de acuerdo?
-
Agregar imágenes de fondo a través de su Personalizador de temas de WordPress
Los temas de WordPress más populares tienen esta opción disponible. Voy a usar el tema de Colibri para el propósito de este ejemplo. Otros temas se comportan de manera similar al tema de Colibri.
Si el tema elegido no es compatible con la función, vaya a los métodos 2 y 3.
Ahora, comencemos por Apariencia – > Personalizar desde el panel de WordPress. A la izquierda, verás las opciones de edición del Personalizador del tema, mientras que a la derecha, hay una vista previa en vivo de tu sitio web.
El tema le permite colocar imágenes de fondo para:
- Filas
- Columnas
- Bloques (secciones completas del sitio web como: acerca de mí, portafolio, equipo, contacto, etc.)
- Componentes (títulos, carruseles, tablas de precios, carruseles, etc.)
La forma en que puedes hacer esto es la misma, sin importar dónde necesites tu imagen de fondo.
Supongamos que desea agregar una imagen de fondo al bloque de sitio web de sus servicios. Comience seleccionando la sección. A la izquierda, verá las opciones de edición en un menú estructurado como el siguiente:
- Diseño
- Estilo
- Opciones avanzadas de edición de bloques
Vaya a Estilo – > Tipo de fondo.
Seleccione «Imagen». Ahora verás una imagen que puedes reemplazar con la tuya. 
Cuando haga clic en la imagen, se le solicitará una pantalla donde puede seleccionar una imagen de la galería multimedia de WordPress o puede cargar otra imagen.
Como ya habrás notado, incluso puedes agregar un video como fondo.
Y, también hay una opción de palanca para el efecto de paralaje!
Ahora, hay otro acceso directo para hacer este cambio de imagen de fondo. Cuando selecciones un bloque de la derecha, verás el icono de configuración. Haz clic en él y verás algunas opciones de edición.
Si selecciona «Cambiar fondo», se le indicará dentro de» Estilo » para proceder como se describe anteriormente.
Esto fue todo para gente. Bastante fácil, ¿verdad?
Ahora, si tu tema no tiene la opción de imagen de fondo, hay una forma de hacerlo en el editor predeterminado de WordPress.
-
Agregar una imagen de fondo usando bloques de WordPress
Desde el panel de WordPress, dirígete a «Páginas». Ahora, selecciona «editar» debajo de la página deseada. Verás una interfaz como se muestra a continuación.
El editor de WordPress predeterminado está basado en bloques, lo que significa que cada sección del sitio web está hecha de bloques. Se puede acceder a estos bloques desde cualquier signo » + » que veas en la interfaz. Vamos a hacer clic en el de la parte superior izquierda.
Ahora, seleccione el bloque «Cubierta». Lo verás aparecer de inmediato en tu página.
Puede cargar una imagen almacenada localmente en su computadora o elegir entre las existentes en la Biblioteca de medios.
He seleccionado una imagen de la Biblioteca Multimedia. Ahora puedo añadir algo de texto. Las opciones de edición son bastante limitadas aquí.
Si selecciona la portada, verá un menú que aparece arriba, donde puede alinear su imagen o duplicar todo su bloque. Incluso puede guardar su bloque como reutilizable, para volver a usarlo en otros diseños.
Ahora, en el lado derecho de la pantalla, tiene algunas opciones de edición adicionales.
Dentro de la configuración de medios, si activa la opción fondo fijo, activará el efecto de paralaje.
Cuando la palanca está desactivada, puede ajustar el punto focal.
Este ajuste del punto focal también se puede hacer en forma de porcentaje, teniendo en cuenta el ancho y la altura.
a continuación, puede agregar una superposición. Puede elegir su color y opacidad.
Y, como que ya ha terminado.
-
Agregar imágenes de fondo a través de plugins de WordPress
Aquí hay algunos complementos de WordPress etiquetados como complementos de imagen de fondo. Voy a jugar un poco con el complemento de Imagen de Fondo de Pantalla Completa Simple porque tiene la mayor cantidad de instalaciones y las mejores críticas hasta ahora.
Ahora, aquí hay un tutorial sobre cómo instalar un plugin 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 tienes que hacer es ir a Apariencia -> Imagen BG a pantalla completa. Desde aquí seleccione su imagen.
Cuando presione «Guardar Opciones», verá que todas las secciones de su sitio, sin fondo, recibirán esta imagen como fondo.
Ahora, esto es lo que está sucediendo en la versión gratuita. Es bastante básico y no es para nada flexible. El plan de pago viene con opciones adicionales, como:
- Imágenes de fondo ilimitadas
- Imágenes de fondo específicas de publicaciones / páginas
- Varias imágenes con transiciones de fundido en páginas
Y, hemos terminado, acaba de descubrir los 3 métodos que puede usar para agregar imágenes de fondo a su sitio de WordPress.
Hay una cosa más que quiero que sepas antes de que podamos terminar el día.
Tamaños de imagen
Antes de cargar cualquier imagen en su sitio, preste atención a su tamaño. Sé que todos miramos megapíxeles, pero, en la web, hay una trampa. Las imágenes de alta resolución pueden dañar su sitio al afectar su tiempo de carga. A largo plazo, cualquier segundo de carga adicional puede hacer que pierdas visitantes y conversiones de tu sitio web. Además, disminuirás significativamente tus posibilidades de posicionarte en los motores de búsqueda, porque la velocidad por edad es un factor importante de posicionamiento.
Por otro lado, el uso de imágenes que son demasiado pequeñas también puede dañar su experiencia de usuario. Así que tenemos que llegar a fin de mes.
Una forma de hacer esto es mediante el uso de aplicaciones externas que pueden ayudarlo a cambiar el tamaño de sus imágenes y, al mismo tiempo, garantizar la claridad adecuada.
Pero en WordPress, puedes hacer esto fácilmente usando un complemento…, como ya habrás adivinado.
Aquí, en Colibri, somos fans de Smush. Smush puede comprimir y comprimirá imágenes sin una caída visible en la calidad.
En la versión pro, también convertirá imágenes a WebP, un formato de imagen de próxima generación que puede comprimir tamaños de archivo de imagen de hasta un 35%, sin pérdida de calidad obvia.
Y eso es todo, amigos!
Si te gustó este artículo y quieres aprender más sobre cómo diseñar un sitio web de WordPress, asegúrate de suscribirte al canal de Youtube de Colibri y seguirnos en Twitter y Facebook.