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 una imagen de cabecera

Las imágenes del cabecera se muestran encima del contenido de la página y añaden un elemento visual para ayudarte a marcar el estilo de tu sitio. Muchas plantillas admiten imágenes de cabecera: La manera en que se muestran y las opciones de estilo varían según la plantilla. Esta guía te indicará los pasos a seguir para agregar, editar y modificar el estilo de una imagen de cabecera.

Consejo: En algunas plantillas podrás añadir un video a la cabecera en lugar de una imagen.
Nota: Si la cabecera no se ve bien, ve a la sección Problemas para recortar.

Opciones de cabecera según la plantilla

Las imágenes de cabecera sólo están disponibles en las siguientes plantillas. La siguiente lista agrupa las plantillas por familia. Haz clic en los enlaces "Más información" para visitar la guía de plantilla para esa familia.

Nota: Varias plantillas retiradas admiten imágenes de cabecera en toda la página o todo el sitio. Esta guía también se aplica en esos casos.

Adirondack

  • Cabecera de página: Página Normal, de Eventos, Blog y Productos. Sin superposición del texto
  • Cabecera del elemento de colección: Publicaciones de blog, eventos, productos.
  • Efecto de atenuación al desplazarse (vista de escritorio)
  • Cabeceras en video
  • Conoce más

Bedford, Anya, Bryant, Hayden

  • Cabecera de página: Páginas Normales, de Álbum, Blog, Eventos y Productos. Superposición del texto de descripción de la página con opciones especiales de formato
  • Cabecera del elemento de colección: Publicaciones de blog, eventos
  • Admite cabeceras únicas con presentación de diapositivas
  • Cabeceras en video
  • Conoce más

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

  • Cabecera de página: Páginas Normales, de Álbum, Blog, Eventos, Galería y Productos
  • Se muestra en la mitad inferior del encabezado. También se muestra un encabezado específico para la página ("área de introducción") sobre la imagen de cabecera
  • Parallax Scrolling (Efecto Parallax Scrolling)
  • Cabeceras en video
  • Conoce más

Farro, Haute

  • Cabeceras de elementos de colección: Publicaciones de blog
  • Conoce más

Five

  • Cabecera en todo el sitio
  • Cabecera de página: Páginas Normales, de Álbum, Blog, Eventos, Galería y Productos
  • Las cabeceras pueden contener un título de página y descripción, el título/logo del sitio y la descripción, o solo una imagen
  • Cabeceras en video
  • Conoce más

Marquee, Adversary, Alex, Eamon, Shift

  • Cabeceras de la página: Página Normal, de Blog, de Productos y Eventos. Superposición del título y el texto de descripción de la página con opciones especiales de formato
  • Cabecera del elemento de colección: Publicaciones de blog, eventos, productos
  • Parallax Scrolling (Efecto Parallax Scrolling)
  • Cabeceras en video
  • Conoce más

Montauk, Julia, Kent, Om

  • Cabeceras de la página: Página Normal, de Blog y Eventos
  • El título de la página y el texto de la descripción se superponen
  • Cabeceras en video
  • Conoce más

Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi

  • Cabecera de página: Páginas Normales, de Álbum, Blog, Eventos, Galería y Productos
  • El título de la página y el texto de la descripción se superponen. También se puede mostrar detrás del encabezado
  • Cabeceras en video
  • Conoce más

Skye, Foundry, Tudor

  • Cabeceras de elementos de colección: Publicaciones de blog
  • Conoce más

Supply

  • Cabeceras del elemento de colección: Publicaciones de blog y eventos. La cabecera se muestra a la derecha
  • Conoce más

Tremont, Carson, Henson

  • Cabecera de página: Páginas Normales, de Álbum, Blog, Eventos, Galería y Productos
  • Cabeceras en video
  • Conoce más

York, Artesia, Harris, Lange, Jasper, Shibori

  • Cabeceras de la página: Páginas Normales, de Álbum, Blog, Eventos, Galería, Proyecto y Productos
  • El título de la página y el texto de la descripción se superponen
  • Conoce más

Mejores prácticas

Como nuestro sitio está optimizado con diseño adaptable, las imágenes de cabecera se pueden adaptar a una variedad de tamaños de navegadores y dispositivos. Estas imágenes siempre tendrán algunos inconvenientes, sobre todo en los dispositivos móviles. En general, te recomendamos lo siguiente:

  • Usa una imagen que sea más ancha que alta (orientación horizontal).
  • Asegúrate de que la imagen que subiste tenga al menos 1500 píxeles en el borde más largo. Las imágenes más pequeñas podrían lucir pixeladas al ser ampliadas para cubrir la cabecera. Las cabeceras en todo el sitio nunca deben medir más de 2500 píxeles, ya que esto podría provocar problemas en los dispositivos móviles.
  • Evita las imágenes con bordes o texto, ya que harán resaltar los problemas al recortarlas. Por ejemplo, una imagen que tiene texto que se aplica perfectamente a un monitor de pantalla panorámica es poco probable que se ajuste de la misma manera a un teléfono inteligente.

Para obtener más ayuda sobre cómo hacer que la cabecera se vea bien, visita nuestras sugerencias de mejores prácticas.

Agregar una imagen de cabecera a una página

Las cabeceras de página usan la imagen en miniatura que se cargó a la Configuración de Página. 

Nota: Bedford, Anya, Bryant y Hayden tienen opciones adicionales para las cabeceras .

Paso 1 - Abre la Configuración de Página

Hay dos maneras de llegar a la Configuración de Página.

Opción 1: Panel de Páginas

  1. Desde el Home Menu (Menú Principal), haz clic en Pages (Páginas).
  2. Posiciona el cursor sobre el título en cualquier página y haz clic en .

Opción 2: Nota

Haz clic en la anotación del Banner (cabecera) que aparece cuando posicionas el cursor sobre la vista previa del sitio. El aspecto de esta nota varía según la plantilla.

Paso 2: Añade una imagen a la cabecera

En la pestaña Media de la Configuración de la Página, haz clic en el cuadro Add an image (Añadir una imagen) .

Consejo: Si tu plantilla admite cabeceras en video, la pestaña Medios se verá algo diferente.

Aparecerá una ventana con dos opciones.

  • Para añadir una imagen desde la computadora, haz clic en Image (Imagen).
  • Haz 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.

Haz clic y arrastra el Punto Focal para determinar cuál es el punto central de la imagen. Esto ayudará a recortarla en la mayoría de las plantillas. 

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

Estilo 

Algunas plantillas te permiten ajustar la altura y el estilo de la imagen de cabecera en el Editor de Estilo. Para obtener información sobre las cabeceras del sitio, visita la guía Estructura y estilo para tu plantilla.

Algunas cabeceras de página admiten texto superpuesto.

Añade una cabecera al elemento de la colección

Alguna plantillas crean cabeceras específicas para el elemento en la parte superior de los elementos individuales como publicaciones del blog, eventos o de producto.

Para crear una imagen de cabecera, añade la miniatura de un elemento de la colección a la publicación, evento o producto. La forma en que se muestra la cabecera del elemento de la colección depende de la plantilla. Algunas plantillas muestran el título del elemento y los metadatos en la cabecera del elemento de la colección.

Aquí tienes un ejemplo de imagen de cabecera de la publicación del blog en la plantilla Farro:

Imágenes de cabecera en todo el sitio

Añade una imagen cabecera para todo el sitio desde el Editor de Estilo.

Nota: Las imágenes del cabecera en todo el sitio no aparecerán en páginas que tengan cabeceras en la página.

Paso 1 -  Haz clic en el ajuste del Editor de Estilo

  1. En el Home Menu (Menú principal), haz clic en Design (Diseño) y luego haz clic en Style Editor (Editor de Estilo).
  2. Haz clic en el ajuste de imagen de cabecera.

El nombre del ajuste varía según la plantilla. Así se verá el ajuste de la cabecera en todo el sitio en la plantilla Five:

Paso 2 - Añade la imagen

Aparecerá una ventana emergente.

  • Haz clic en Add a background image (Añadir imagen de fondo) para subir una imagen. También puedes arrastras una imagen hasta aquí.
  • Haz 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 - Da estilo a la imagen

Luego de agregar la imagen, puedes ajustar estos valores. Te recomendamos ajustarlos en este orden.

Tamaño

Elige de qué manera la cabecera se ajusta al área de la cabecera. Las opciones son:

  • 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 espacio asignado (pantalla completa). Como resultado, la cabecera puede ser diferente entre las páginas.
  • Contener: escala la imagen para que el borde más largo quepa dentro del área de la cabecera.
Repeat (Repetir)

Repite la imagen de cabecera. Esto funciona con la configuracion Size: Auto (Tamaño: automático) y Size: Contain (Tamaño: contener). Repetir es más efectivo para los patrones y menos, para las fotografías.

  • No-repeat (No repetir): muestra la imagen una sola vez.
  • Repeat (Repetir): repite la imagen en todas las direcciones.
  • Repeat-x (Repetir-x):repite en una fila a lo largo del eje horizontal.
  • Repeat-Y (Repetir en Y): repite la imagen en una columna sobre el eje vertical
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
Fix Position (Posición fija)

Cuando está tildada 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.

Este efecto no aparecerá en algunos dispositivos móviles, incluso con iOS.

Consejo: Las imágenes ampliadas en todo el sitio tienen las mismas opciones de estilo que las imágenes de fondo

Paso 4 - Guarda

Cuando hayas terminado, la ventana emergente se cerrará y luego harás clic en Save (Guardar) para publicar los cambios. Para obtener más ayuda sobre cómo usar el Editor de Estilo, visita Hacer cambios en el estilo.

Cabeceras en video

Videos

Algunas plantillas admiten cabeceras en video. La siguiente lista agrupa las plantillas por familia:

  • Adirondack
  • Bedford, Anya, Bryant, Hayden
  • Brine, Clay, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Marta, Mercer, Mojave, Motto, Nueva, Rally, Rover, Sonora, Thorne
  • Five
  • Marquee, Adversary, Alex, Eamon, Shift
  • Montauk, Julia, Kent, Om
  • Pacific, Bryler, Charlotte, Fulton, Horizon, Naomi
  • Tremont

Para obtener más información, visita Añadir un video de fondo.

Nota: En las plantillas Bedford, Anya, Bryant y Hayden, también puedes añadir un video en una cabecera tipo presentación de diapositivas.

Gifs

En cualquier plantilla puedes añadir un archivo .gif como una imagen de cabecera para crear una cabecera móvil.

Añadir texto a las cabeceras

No recomendamos que uses una imagen con texto dentro del archivo de imagen real. Cuando cambie la cabecera para adaptarla a los diferentes anchos del navegador,  probablemente ciertas partes del texto dentro de la imagen se vean cortadas.

Para lograr un aspecto similar, la mayoría de las plantillas con encabezados de página pueden crear una superposición de texto diferente. Esto permitirá que el texto que uses se adapte a diferentes anchos del navegador y resulta mejor para SEO (Optimización para Motores de Búsqueda). Algunas plantillas admiten formatos especiales con encabezados y botones. Para más información, visita Añadir texto a las cabeceras.

Resolver los problemas de imágenes recortadas

Para la mayoría de las plantillas, las imágenes de cabecera experimentan algún recorte, ya sea vertical, horizontal o en los cuatro lados. Esto permite que las imágenes se adapten e diferentes dispositivos, por lo que tu sitio web será sumamente amigable.

  • Sigue las mejores prácticas para las imágenes de cabecera.
  • Para obtener ayuda detallada sobre problemas de recortes y otras dificultades con la visualización de la cabecera, visita nuestras sugerencias de mejores prácticas.
  • Visita la guía de su plantilla para saber cómo se modifica el estilo de sus cabeceras.
  • Usa los Puntos Focales para fijar el centro de la imagen. Los cambios en los puntos focales pueden ser menos evidentes en imágenes con efecto Parallax Scrolling.
  • Explora el Editor de Estilo de tu plantilla para ver si hay ajustes que modifiquen las dimensiones de la cabecera.

Las cabeceras que no se recortan

En algunas plantillas podrás crear cabeceras que no se recorten:

  • Las cabeceras de Montauk, Julia, Kent y Om no se recortan en vertical. Siempre se muestran en el mismo ancho del contenido del sitio. Ten en cuenta que las cabeceras altas y delgadas se pueden pixelar si se las estira para cubrir el ancho.
  • En las plantillas Pacific, Bryler, Charlotte, Fulton, Horizon y Naomi, podrás crear una imagen de cabecera que no se corta al añadir una Página de Galería dentro de una Página de Índice.

También puedes crear el efecto de una cabecera si añades un Bloque de Imagen en la parte superior de una Página Normal. Algunas plantillas también tienen encabezados de página que admiten bloques en páginas fuera de las Páginas Normales. 

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 2 de 10