Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Agregar una imagen de fondo

Las background images (imágenes de fondo) se muestran detrás del contenido de tu sitio y añaden un elemento visual para ayudar a marcar el estilo de tu sitio.

Puedes añadir imágenes de fondo en muchas plantillas de Squarespace. Los estilos de imagen de fondo varían según la plantilla, pero la mayoría se aplican a todo el sitio, es decir, que se mostrará la misma imagen en cada página de tu sitio. Todas las imágenes de fondo se pueden configurar como de pantalla completa para que ocupen la totalidad de la página, hasta los bordes, del navegador. 

Mejores prácticas

El tipo de imagen que eliges depende de tu estética personal y los objetivos de tu sitio, pero aquí tienes algunas pautas generales:

  • Para imágenes de fondo de pantalla completa, te recomendamos cargar imágenes con un ancho de entre 1500 píxeles y 2500 píxeles. 
  • Los patrones abstractos y las imágenes sin texto ni bordes en general funcionan mejor, ya que ofrecen mayor flexibilidad para recortar, lo que siempre ocurrirá en cierta medida.
  • Los patrones repetitivos ofrecen la mayor flexibilidad cuando estás configurando cómo se verá la imagen.
  • Las imágenes de fondo no se transferirán si cambias de plantilla.

Forma de la imagen

Las imágenes de fondo de pantalla completa a menudo se recortan de manera diferente en los dispositivos móviles que en los de escritorio, porque en general los dispositivos móviles se utilizan con orientación vertical.

Cuando elijas una imagen de fondo, ten en cuenta de qué manera los visitantes accederán a tu sitio:

  • Si prevés que la mayoría de tus visitantes visualizarán tu sitio desde dispositivos móviles, puedes minimizar el recorte con una imagen de fondo que sea más alta que ancha.
  • Si la mayoría de los visitantes utilizarán equipos de escritorio, usa una imagen con orientación horizontal o de forma similar a un cuadrado.
  • Para sitios de uso mixto, elige una imagen de fondo que se pueda recortar de varias maneras.

Plantillas admitidas

Las siguientes plantillas admiten imágenes de fondo para todo el sitio. La siguiente lista agrupa las plantillas por familia.

  • Adirondack
  • Avenue
  • Aviator, Aubrey, Encore: Además, la página de información admite una imagen de fondo específica para la página.
  • Five
  • Forte
  • Momentum
  • Montauk, Julia, Kent, Om
  • Native
Consejo: Puedes crear fondos específicos para ciertas páginas en cualquier plantilla si usas las Páginas de Portada. Muchas plantillas también admiten imágenes de cabecera.

Paso 1: Ve al Editor de Estilo

En el Home Menu (Menú Principal), haz clic en Design (Diseño) y luego haz clic en Style Editor (Editor de Estilo).

Nota: para añadir una imagen de fondo específica para la página en las plantillas Aviator Aubrey o Encore, primero ve al panel de Páginas y abre la Página de Información. Abre cualquier otro tipo de página para añadir el fondo para todo el sitio.

Para obtener más ayuda sobre cómo usar el Editor de Estilo, visita Hacer cambios de estilo.

Paso 2: Añade una imagen

El nombre del ajuste varía según la plantilla, pero puedes buscar en el Style Editor (Editor de Estilo) un ajuste denominado Background Image (Imagen de Fondo), Site Background Image (Imagen de Fondo del Sitio) o Page Background Image (Imagen de Fondo de la Página). Haz clic en el ajuste para abrirlo. 

Para usar una de tus propias imágenes, arrastra la imagen al cargador de imágenes. También puedes hacer clic en el cargador de imágenes para abrir el menú de selección de archivos y luego selecciona un archivo desde el equipo.

Otra opción es hacer clic en Getty Images para obtener una imagen de archivo por $10. Es una opción genial si no tienes una imagen para usar. Para obtener más información, visita Getty Images y visión general de Squarespace.

Paso 3: Aplica estilo y recorta la imagen

Tras añadir una imagen de fondo, usa las opciones debajo del cargador de imágenes para ajustar el estilo y arreglar cualquier distorsión que puedas notar.

Position (Posición)

Establece la posición de la imagen de cabecera:

  • Superior izquierda, Superior centrada, Superior derecha
  • Centro a la izquierda, Centro en el centro, Centro a la derecha
  • Inferior izquierda, Inferior centrada, Inferior derecha
Size (Tamaño)
  • Auto (Automático): la imagen conserva el ancho y la altura originales. Es una buena opción para imágenes más pequeñas que quieres repetir.
  • Cover (Cubrir): ajusta la escala de la imagen para que sea lo bastante grande para cubrir completamente el área de fondo (pantalla completa). Como resultado, es posible que no se vea la imagen completa. La imagen puede lucir diferente en cada página según la altura del contenido de la página.
  • Contain (Contener): ajusta la imagen a escala para que el borde más largo (ancho o alto) quepa dentro del navegador.

Para las opciones Auto (Automático) o Contain (Contener), es posible que se vea el color de fondo del sitio detrás de la imagen. Usa los ajustes Repeat (Repetir) para modificarlo.

Repeat (Repetir)

Asegúrate de que Size (Tamaño) esté configurado como Auto (Automático) o Contain (Contener)

    • No-repeat (No repetir): muestra la imagen una vez
    • Repeat (Repetir): repite la imagen para que cubra todo el fondo.
    • Repeat-X (Repetir en X): repite la imagen solamente en el eje horizontal.
    • Repeat-Y (Repetir en Y): repite la imagen por el eje vertical solamente.

Para las opciones No-repeat (No repetir), Repeat-X (Repetir en X) y Repeat-Y (Repetir en Y), usa las opciones de Position (Posición) para ajustar dónde se mostrará la imagen.

Fix Position (Posición fija)

Cuando está marcada esta opción, la posición de la imagen se mantiene estática detrás del contenido que se desplaza. Cuando no está marcada, se desplaza hacia arriba y abajo con la página.

En muchos navegadores móviles, incluso en iOS, esta función no tiene ningún efecto, y la imagen se desplazará con la página.

Paso 4: Ajusta las demás áreas del sitio

Cuánto se ve de tu imagen de fondo depende de la configuración de los demás elementos del sitio. Las opciones de estilo y los nombres de ajustes varían de una plantilla a otra, pero puedes usar el Editor de Estilo para experimentar con algunas o todas las siguientes áreas de tu sitio:

  • Fondo del área de contenido principal (o "canvas")
  • Fondo del encabezado
  • Fondo del pie de página
  • Ancho del sitio y ancho del contenido
Consejo: tal vez quieras que los colores el fondo sean parcialmente opacos para que se pueda ver la imagen de fondo.

Paso 5: Guarda

Haz clic en Save (Guardar) para publicar los cambios.

Paso 6 - Mira cómo se ve tu sitio en dispositivos móviles (opcional)

Se mostrará la misma imagen de fondo en dispositivos de escritorio y móviles. Para ver el efecto, una buena opción es tener cerca tu teléfono y actualizar el sitio desde el teléfono después de guardar los cambios desde una computadora de escritorio. Para una vista previa rápida mientras editas desde un equipo de escritorio, usa Vista de Dispositivo.

Consejos:

  • Cuando elijas una imagen de fondo, la forma de la imagen puede hacer una gran diferencia en la forma en que se ve desde dispositivos móviles.
  • Consulta nuestros consejos de resolución de problemas para los ajustes del Editor de Estilo que funcionan bien en dispositivos móviles.

Resolución de problemas

La imagen de fondo se distorsiona en algunas páginas o en dispositivos móviles.

Esto sucede cuando la imagen de fondo se estira para cubrir el largo de la ventana del navegador. Lo que resulta particularmente cierto en Páginas de Blog o en Páginas de Evento configuradas con la Vista de Lista, ya que en general son más largas que otras páginas, así como en dispositivos móviles, ya que el contenido de la página se apila en forma vertical. Cuanto más alto sea el contenido, más estirado lucirá el fondo para cubrirlo por completo, y más ampliado lucirá.

Para arreglarlo, abre el ajuste de imagen de fondo (ve el Paso 2 más arriba) e intenta alguna de estas opciones:

  • Selecciona Fix position (posición Fija) (Nota: no afectará algunos dispositivos móviles, incluído iOS)
  • Selecciona Size: Contain (Tamaño: Contener) o Size: Auto (Tamaño: automático)

Tal vez también quieras experimentar con las opciones de Position (Posición) para ver qué versión se adapta mejor a páginas largas y a la visualización en dispositivos móviles.

La imagen luce borrosa o pixelada

Esto sucede cuando la imagen se estira más que la dimensión original para cubrir el área del fondo.

Para imágenes de pantalla completa, te recomendamos cargar imágenes con un ancho de entre 1500 y 2500 píxeles para la mayoría de los sitios.

Nota: no recomendamos cargar imágenes de fondo de más de 2500 píxeles en el borde más largo. Las imágenes de fondo para todo el sitio se cargan en el tamaño de imagen original. Si tu imagen de fondo tiene más de 2500 píxeles de ancho, los visitantes podrían tener problemas.

Imágenes de fondo y código personalizado

El código personalizado que hayas añadido al sitio podría interferir con la forma en que se ve tu imagen de fondo. Si estás resolviendo problemas con tu imagen de fondo, deshabilita momentáneamente cualquier código personalizado para ver si el problema tiene alguna relación con el código. Para obtener más información, visita Añadir HTML, CSS y JavaScript personalizados.

Visualización en dispositivos móviles

Así es como podrás usar los ajustes de estilo para arreglar problemas comunes de visualización en móviles. Dado que no existen ajustes por separado para equipos móviles y de escritorio, es una buena idea que experimentes con estas opciones para ver cuál te ofrece el mejor aspecto.

  • Imagen aumentada o distorsionada: Establece la imagen con un Size: Contain (Tamaño: Contener) o Size: Auto (Tamaño: Automático). También puedes tener que subir una imagen más grande, de hasta 2500 píxeles en su borde más largo.
  • El tamaño de la imagen de fondo cambia en páginas diferentes: Establece tu imagen con un Size: Contain (Tamaño: Contener) o Size: Auto (Tamaño: Automático).
  • La imagen no está bien centrada: Usa las opciones de Position (Posición) para ajustar dónde se mostrará tu imagen dentro de la página.
  • No se muestra la imagen de fondo: El color de fondo de tu contenido principal puede estar cubriendo la imagen. Ajusta la transparencia para revelar la imagen de fondo. (Esto también afectará la vista de escritorio). Asegúrate de que la imagen tenga menos de 2500 píxeles en el borde más largo, ya que las imágenes más grandes no se mostrarán. En Aviator, Aubrey y Encore, asegúrate de que el ajuste Mobile Background Image (Imagen de Fondo Para Móviles) esté marcado.
  • La imagen no cubre todo el contenedor: Selecciona Size: Auto (Tamaño: Automático) o Size: Contain (Tamaño: Contener) y Repeat (Repetir) la imagen para cubrir cualquier área en blanco.

Ejemplos

Experimenta con las opciones del ajuste de imagen de fondo para encontrar la colocación perfecta para la imagen de fondo. Incluimos algunos ejemplos abajo para que te sirvan de inspiración:

Aquí tienes un ejemplo en la plantilla Montauk:

  • Size: Cover (Tamaño: Cubrir)
  • Fixed position (Posición fija)
  • Canvas Background (Fondo del área de contenido principal) para que el color de fondo sea parcialmente opaco

Aquí tienes un ejemplo con la plantilla Forte:

  • Size: Auto (Tamaño: Automático)
  • Repeat: Repeat (Repetir: Repetir)

Aquí tienes un ejemplo con la plantilla Native:

  • Position: Top Left (Posición: Superior izquierda)
  • Size: Auto (Tamaño: Automático), Repeat-Y (Repetir en Y)
  • Color del fondo del sitio: azul

Aquí tenemos la plantilla Encore, con los fondos específicos para todo el sitio y para la Página de Información:

  • Aviator, Aubrey y Encore tienen esta función.

  • Bedford, Anya, Bryant, Hayden
  • Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift

Formatea el texto de descripción de la página para crear un botón en la última línea.

  • Brine, Basil, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Juke, Keene, Lincoln, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne

Añade un Bloque de Botón al área de introducción en una página con una cabecera.

Así se verá la plantilla Brine:

Otras opciones

Algunas plantillas tienen otras áreas editables en las que puedes añadir un Bloque de Botón:

Consejos

  • Para maximizar tu impacto, te recomendamos mantener tu llamado a la acción breve y atractivo. Prueba con una sola palabra, como "Dona", o una frase breve, como "Entra en acción".
  • Para ayudarte a formatear el enlace del botón, visita Cómo añadir enlaces a tu sitio.
  • Para modificar el estilo del botón, visita el Editor de Estilo, luego haz clic en el botón para ver ajustes relevantes. Las opciones de estilo disponibles dependen del tipo de botón y de tu plantilla, pero en general puedes elegir el color, la forma y el fondo.
  • Si quieres que los visitantes se suscriban a un boletín, usa un Bloque de Boletín Informativo. Para reunir información, usa un Bloque de Formulario. Para las donaciones, prueba con el Bloque de Donación. Todos estos bloques incluyen un botón personalizable.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 13 de 95