Agrega y personaliza imágenes de fondo para las secciones de página de tu sitio.
Puedes agregar imágenes de fondo a la mayoría de las secciones de página de tu sitio y personalizar esas imágenes con una variedad de efectos de imagen. Estas son excelentes opciones para crear banners de página y elementos visuales llamativos que coincidan con tu marca.
Esta guía revisa cómo agregar y personalizar fotos y otras imágenes de fondo que subes a Squarespace. Para generar fondos abstractos directamente en Squarespace, visita Fondos personalizados de sección.
Esta guía se refiere a la versión 7.1. Si tu sitio está en la versión 7.0, puedes agregar imágenes de banner y videos de fondo para obtener efectos similares, según la plantilla.
Mira el video
Antes de comenzar
- Los diseños inteligentes, las secciones de portafolio y todas las secciones de bloques admiten agregar imágenes de fondo. También puedes agregar videos de fondo y fondos personalizados a estas secciones.
- No es posible agregar imágenes de fondo a las secciones de galería, pero puedes agregar un color de fondo o usar el diseño Diapositivas: Completa para un efecto similar.
- Las secciones de blog, eventos y tienda no admiten contenido de fondo, pero puedes agregar un color de fondo.
- Si tu sección incluye texto u otro contenido, asegúrate de que siga siendo visible y legible delante de los fondos personalizados. Para cambiar el color del texto, usa los ajustes de fuente en la combinación de colores de esa sección.
- Las imágenes de fondo se recortan automáticamente según la cantidad de contenido de la sección y el tamaño de la pantalla del navegador del visitante. Para elegir cómo se recorta una imagen, utiliza un bloque de imagen.Para saber cómo aparecen las imágenes de fondo en dispositivos móviles, visita ¿Cómo aparecerá mi sitio en dispositivos móviles?
Consejos de formato de imagen
Comprueba el formato de las imágenes antes de cargarlas en tu sitio. Para las imágenes de fondo, sigue estas pautas:
- Utiliza imágenes de entre 1,500 píxeles y 2,500 píxeles de ancho.
- No uses imágenes que contengan texto dentro del archivo. En su lugar, agrega texto sobre la imagen.
- Si vas a agregar texto sobre la imagen, usa una imagen con un patrón abstracto.
- Para ver los tipos de archivo de imagen y los requisitos de imagen completos, visita Cómo dar formato a imágenes para la web.
Agregar imágenes de fondo
Usa una imagen de fondo para agregar contraste con texto u otro contenido que superpone la sección o crea un banner cuando la sección esté en la parte superior de la página.
Para agregar una imagen de fondo de sección:
- Abre el panel de Páginas y haz clic en la página que tenga la sección que quieres editar.
- En la esquina superior izquierda, haz clic en Editar.
- Haz clic en el ícono de lápiz de la sección y, a continuación, en Fondo.
- Haz clic en Imagen y luego en +. Elige una fuente de imagen en el menú desplegable para subir una imagen, reutilizar una imagen cargada anteriormente o usar una imagen de stock.
- Define el Ancho del fondo y la Opacidad de la superposición.
- Haz clic en Formato para cambiar la altura de la sección, el ancho del contenido y la alineación del contenido.
- Haz clic en Colores para seleccionar una combinación de colores para la superposición y cualquier contenido agregado. Para obtener más información, visita Cómo cambiar los colores. Si eliminas la imagen, la superposición pasa a ser el color de fondo de la sección.
- Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.
Después de agregar una imagen, puedes:
- Agregar texto u otro contenido que superponga la imagen.
- Modifica el estilo de la imagen.
- Agregar efectos de imagen.
- Edita la imagen
- Selecciona el punto focal de la imagen
- Cambia la imagen haciendo clic en Reemplazar.
- Eliminar la imagen.
Agregar texto u otro contenido
Puedes agregar texto u otro contenido sobre una imagen de fondo. Debido a que el texto que agregas se ajusta para adaptarse a cualquier tamaño de pantalla o dispositivo móvil, esta es una excelente manera de agregar texto si estás usando la imagen de fondo como banner.
Consejo: Si quieres un mensaje con solo texto en la parte superior de tu sitio, agrega una barra de anuncios en lugar de un banner.
No recomendamos usar una imagen de fondo que tenga texto en el mismo archivo por los siguientes motivos:
- Las computadoras no pueden leer este texto, así que los motores de búsqueda no podrán indexarlas para que aparezcan en los resultados de búsqueda.
- Cuando la imagen cambie de forma para adaptarse a diferentes anchos del navegador, se recortarán partes del texto.
Para agregar texto u otro contenido:
- Haz clic en Editar en la página con la imagen de fondo.
- Haz clic en Agregar bloque o en un punto de inserción para agregar un bloque de texto. Haz clic en el bloque para agregar texto y luego usa el menú desplegable Formato para elegir un estilo de párrafo.
- Agrega más bloques de texto u otro contenido a la sección (como un bloque de botón).
- Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.
Estilos de texto
La configuración de estilo de tu sitio en el panel Diseño establece cómo se muestra el texto en tu imagen de fondo.
- Para cambiar las fuentes del sitio, elige un paquete de fuentes y un tamaño base en el panel Fuentes. Desplázate hasta Asignar estilos para dar estilo al texto específico. Para obtener más información, visita Cómo cambiar fuentes.
- Para cambiar el color de la fuente, elige una paleta y un tema en el panel Colores. Abre el tema de la sección y haz clic en el ícono de lápiz para dar estilo a elementos específicos de ese tema. Para obtener más información, visita Cómo cambiar colores.
Mira el video
Aplicar estilo a imágenes de fondo
Para aplicar estilo a la imagen de fondo, haz clic en Editar en la página, en el icono de lápiz en la sección de banner y, a continuación, en Fondo. Puedes seleccionar el ancho del fondo y la opacidad de la superposición.
Para el ancho del fondo:
- La imagen sin bordes extiende la imagen de un borde de la ventana del navegador a otro, abarcando el ancho del sitio.
- El recuadro aplica una ligera sangría a la imagen y crea un borde alrededor de ella.
Cuando la imagen se establece en Recuadro, puedes definir el color del borde.
Nota: Si cargas un archivo.png con un fondo transparente, el navegador siempre mostrará un fondo blanco detrás de la imagen. Para cambiar este color de fondo, tendrás que editar la imagen en un software de edición de imágenes de terceros antes de subirla a tu sitio.
Cambiar el tamaño de las imágenes de fondo
Para cambiar la altura de una imagen de fondo:
- Haz clic en Editar en la página y luego haz clic en el icono del lápiz en la sección de la imagen de fondo.
- En la pestaña Formato, en Altura de sección, selecciona una altura preestablecida o haz clic en ... para establecer una altura personalizada. Si estás editando una sección de Editor dinámico, puedes cambiar la altura de la cuadrícula de la sección haciendo clic y arrastrando el icono de flecha azul en la esquina inferior derecha.
- Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.
La altura de la sección afecta al modo en que se recorta la imagen de fondo tanto en computadoras de escritorio como en dispositivos móviles. Recomendamos probar diferentes alturas para obtener el aspecto que deseas.
En las secciones del editor clásico, la altura de la imagen de fondo también depende de la cantidad de contenido de la sección. Para aumentar la altura sin agregar contenido visible, agrega bloques de espacio.
Aunque las imágenes de fondo suelen abarcar el ancho del sitio, puedes aplicar estilo a la imagen de fondo para incluir un borde alrededor de ella. Hacerlo da la apariencia de reducir el ancho de la imagen.
Agregar efectos a imágenes de fondo
Después de agregar una imagen de fondo, puedes agregar efectos para estilizar su aspecto. Algunos efectos agregan una animación para que la imagen siempre se mueva, mientras que otros solo aparecen cuando quien visita el sitio se desplaza por esa sección del sitio.
Para añadir un efecto a una imagen:
- Después de agregar una imagen de fondo en el editor de secciones, desplázate hacia abajo hasta Efecto imagen en la pestaña Fondo.
- Elige un efecto del menú. Para personalizar el efecto, haz clic en el icono de configuración para abrir el panel de detalles. Cualquier cambio que realices en el efecto aparecerá en la vista previa de tu sitio web. Para obtener más información sobre tus opciones, visita la sección a continuación.
- Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.
Ten en cuenta lo siguiente:
- Los efectos de imagen solo aparecen en navegadores y dispositivos compatibles con WebGL, una herramienta que funciona con el procesador gráfico del dispositivo. Para comprobar si el navegador es compatible, visita get.webgl.org. Si el navegador no es compatible con WebGL, el fondo de la sección permanece estático.
- Los efectos de imagen no se aplican a fondos personalizados o videos de fondo, incluso si el video usa una imagen alternativa para dispositivos móviles.
Estilos de efectos de imagen
Puedes elegir entre estos efectos de imagen:
- Ninguno. Sin efecto, aparte del ajuste de opacidad de superposición.
- Líquido. Da a la imagen un efecto ondulante.
- Granularidad de película. Agrega una superposición estática animada a la imagen.
- Parallax. La imagen se mueve mientras los visitantes se desplazan.
- Líneas refractadas. Refracta la imagen a través de un patrón de líneas rectas.
- Círculos refractados. Refracta la imagen a través de un patrón de círculos.
Puedes personalizar tu efecto de imagen en el panel de detalles. Para abrir el panel de detalles, haz clic en un efecto de imagen y luego haz clic en el icono de configuración.
Desplázate por las opciones y la configuración hasta encontrar un patrón que te guste. Haz clic en cualquier categoría para expandir el menú desplegable y mostrar más opciones. Según el tipo de efecto de imagen, aparecerán distintas categorías.
Por ejemplo, puedes hacer lo siguiente:
- Edita el tamaño y la forma del efecto.
- Edita la velocidad y la dirección de los efectos con movimiento, como Líquido.
Otros ajustes son únicos para cada efecto de imagen e incluyen controles deslizantes y conmutadores que cambian los componentes principales del efecto. Para experimentar con una configuración aleatoria de ajustes, haz clic en el icono de variar al elegir un efecto o haz clic en Aleatorio cuando estés en el panel de detalles del efecto.
Recomendamos probar cada efecto para tener una mejor idea de cómo se ve y cómo funciona para tu sitio.
Aquí tienes un ejemplo de una imagen de fondo de sección con el efecto Líquido.
Quitar una imagen de fondo
Para quitar una imagen de fondo:
- Haz clic en Editar en la página y, a continuación, en el ícono de lápiz en la sección del banner.
- Haz clic en Fondo.
- Haz clic en Eliminar.
- Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego Guardar para cerrar el editor.