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

Añadir imágenes de fondo para todo el sitio

En algunos sitios de la versión 7.0, puedes agregar una imagen de fondo para mostrarla detrás del contenido del sitio, creando un elemento visual para ayudar a establecer el tono del sitio. Puedes agregar imágenes de fondo en todo el sitio en estas familias de plantillas:

  • Adirondack
  • Avenue
  • Aviator: LaPágina de información también admite una imagen de fondo específica para cada página.
  • Five
  • Forte
  • Momentum
  • Montauk
  • Native

Todas las imágenes de fondo se pueden configurar sin bordes para que ocupen la totalidad de la página hasta los bordes del navegador. Si tu plantilla no admite fondos para todo el sitio, aprende a crear fondos específicos para cada página.

La versión 7.1 no admite imágenes de fondo en todo el sitio, pero puedes agregar imágenes de fondo que se muestren detrás del contenido del sitio en la mayoría de las secciones de página.

Mira el video

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:

  • Recomendamos cargar imágenes con un ancho de 1,500 píxeles a 2,500 píxeles. 
  • Las imágenes de fondo sin bordes a menudo se recortan de manera diferente en dispositivos móviles que en equipos de escritorio. Es posible que desees elegir una imagen de fondo que se pueda recortar de varias maneras.
  • Los patrones abstractos, las imágenes sin texto o bordes y los patrones repetitivos generalmente funcionan mejor, ya que ofrecen más flexibilidad con el recorte, lo que siempre ocurrirá en cierta medida.
  • Las imágenes de fondo no se transferirán si cambias de plantilla.

Añadir la imagen

Para añadir un fondo para todo el sitio:

  1. En el Menú de Inicio, haz clic en Diseño y, luego, en Estilos del sitio.
  2. Busca un ajuste denominado Imagen de fondo, Imagen de fondo del sitio o Imagen de fondo de la página. Haz clic en el ajuste para abrirlo.
  3. Para agregar un archivo desde tu equipo, haz clic en el cargador o arrastra la imagen hasta el cargador. Haz clic en Buscar imagen para volver a utilizar una imagen o agregar una imagen en stock .
  4. Aplica estilo a la imagen y, a continuación, haz clic en Guardar para publicar los cambios.

En Adirondack, el ajuste luce así:

background-image-tweak.png

Ajusta el 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.

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 (sin bordes). 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.
  • 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.

Position (Posición)

Determina la posición de la imagen de fondo:

  • Superior izquierda, Superior centrada, Superior derecha
  • Centro a la izquierda, Centro en el centro, Centro a la derecha
  • Inferior izquierda, Inferior centrada, Inferior derecha
Repeat (Repetir)

Asegúrate de que Tamaño esté configurado como Automático o 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.

Ajusta el estilo de otras á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 retoques varían de una plantilla a otra, pero puedes usar los Estilos del sitio 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

Ten en cuenta lo siguiente:

  • Tal vez quieras hacer que los colores de fondo sean parcialmente opacos para que la imagen de fondo se trasluzca.
  • Puede aparecer un color de fondo o superposición mientras se carga una imagen de fondo.

Controla cómo se ve tu sitio en dispositivos móviles

La misma imagen de fondo se muestra en equipos de escritorio y dispositivos móviles. Para ver el efecto, es una buena idea mantener el teléfono cerca y actualizar el sitio en el teléfono después de guardar los cambios en un equipo. Para obtener una vista previa rápida mientras editas en un equipo de escritorio, usa Vista en dispositivo.

Consejos:

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 amplía para cubrir el largo de la ventana del navegador. Esto es particularmente así 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, porque el contenido de la página se apila en forma vertical. Cuanto más alto sea el contenido, más se ampliará el fondo para cubrirlo por completo y más aumentado lucirá.

Para arreglarlo, abre el retoque de imagen de fondo (ve el paso 3 más arriba) e intenta alguna de estas opciones:

  • Selecciona Posición fija (esto no afectará a algunos dispositivos móviles, incluido 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 amplía más que la dimensión original para cubrir el área del fondo. 

Para imágenes sin bordes, 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 Tamaño: Contener o 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 Tamaño: Contener o Tamaño: Automático.
  • La imagen no está bien centrada: Usa las opciones de 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 original tenga menos de 2,500 píxeles en el borde más largo, ya que las imágenes más grandes no se mostrarán. En la familia Aviator, verifica que el retoque Imagen de fondo en dispositivos móviles esté marcado.
  • La imagen no cubre todo el contenedor: Selecciona Tamaño: Automático o Tamaño: Contener y 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

Ejemplo de una imagen de fondo en la plantilla Montauk.

Aquí tienes un ejemplo con la plantilla Forte:

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

Ejemplo de una imagen de fondo en la plantilla Forte.

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

Ejemplo de una imagen de fondo en la plantilla Native.

Aquí tenemos la plantilla Aviator con los fondos específicos para todo el sitio en comparación con el de la Página de Información:

Fondos específicos para todo el sitio y para la Página Intro en la plantilla Aviator.

Añade imágenes de fondo específicas para cada página

También hay varias maneras de crear una imagen de fondo en solo una página.

  • Banners: Algunas plantillas admiten imágenes de banner, que se muestran en la parte superior de la página y pueden ser compatibles con la superposición de contenido. En la familia Brine, por ejemplo, puedes usar bloques en un área de introducción para agregar varios tipos diferentes de contenido en tu banner.
  • Páginas de portada: están disponibles en todas las plantillas de la versión 7.0 y admiten texto, botones, títulos, logotipos y formularios. Crean una página independiente con sus propias opciones de estilo y no muestran el encabezado del sitio, la navegación o los pies de página. Esto las convierte en una gran opción si quieres que una página destaque.
  • Sección de Página de Índice: En las familias de plantillas Brine y Pacific, puedes usar un Índice para agregar una imagen de fondo detrás de una sección de una Página de Diseño.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 49 de 345
Añadir imágenes de fondo para todo el sitio