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 banner

Se muestra una imagen de banner cerca de la parte superior de la página, que agrega un elemento visual que establece el tono del sitio. Esta guía revisa los pasos para agregar imágenes de banner y aplicarles estilo.

Consejo: como alternativa a nuestras opciones integradas, puedes agregar un bloque de imagen a la parte superior de una página de diseño en cualquier sitio de Squarespace.

Consejos para formatear la imagen

  • Te recomendamos que cargues imágenes que tengan al menos 1500 píxeles de ancho. Para obtener ayuda sobre cómo elegir una imagen que se vea genial en todos los navegadores, revisa nuestros consejos de diseño adaptable.
  • No recomendamos usar una imagen que tenga texto dentro del archivo de imagen real. En vez de eso, agrega texto sobre la imagen.
  • Puedes usar imágenes.jpg, .png y .gif. Para obtener información completa sobre los requisitos de imagen, visita Cómo ajustar el formato de imágenes para la web.
  • Si deseas un mensaje de solo texto en la parte superior de tu sitio, agrega una barra de anuncios.

Agregar una imagen de banner

La forma en que puedes agregar imágenes de banner y los diseños que puedes crear con ellas depende de la versión de tu sitio.

Puedes crear imágenes de banner en cualquier página agregando una sección de bloque con una imagen de fondo en la parte superior de la página. No es posible agregar imágenes de banner a publicaciones de blog, eventos o productos individuales.

Para agregar una imagen de banner:

  1. En el menú de Inicio, haz clic en Páginas y, a continuación, en la página.
  2. En la esquina superior izquierda, haz clic en Editar.
  3. Haz clic en + en la parte superior de la página para agregar una sección. Elige Agregar en blanco si deseas una imagen de banner sin contenido superpuesto.
  4. Haz clic en el ícono de lápiz de la nueva sección y, a continuación, en Fondo.
  5. Haz clic en Agregar una imagen para cargar una imagen o en Buscar imágenes para volver a utilizar una imagen o agregar una imagen en stock. Para agregar un video, visita Cómo agregar videos de fondo.
  6. Define el ancho del fondo y la opacidad de la superposición.
  7. Haz clic en Formato para ajustar la altura de sección, así como el ancho y la alineación del contenido.
  8. Haz clic en Colores para seleccionar un tema para la superposición y cualquier contenido agregado.

Puedes agregar contenido superponiendo el banner o agregar más secciones para el contenido de la página a continuación. Después de realizar los cambios, desplaza el cursor sobre Listo y haz clic en Guardar.

Diferentes plantillas admiten diferentes tipos de imágenes de banner:

Mira una tabla de comparación entre las opciones de cabecera por plantilla.

Añade una cabecera de página

Para añadir una cabecera de página:

  1. En el Menú de Inicio, haz clic en Páginas.
  2. Desplaza el cursor sobre el título de la página y haz clic en y el icono del engranaje, a continuación, en Medios.
  3. Haz clic en Agregar imagen para cargar una imagen desde tu equipo de escritorio o en Buscar imágenes para volver a utilizar una imagen o agregar una imagen en stock. Algunas plantillas también admiten banners de video.
  4. 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.
  5. Haz clic en Guardar para publicar los cambios.
  6. Usa Estilos del sitio para modificar el estilo de tu banner.

Para editar un banner, desplaza el cursor sobre la página y haz clic en Banner o bien, vuelve a abrir la configuración de la página con el icono del engranaje.

Para informarte mejor sobre qué plantillas admiten banner de página, ve las opciones de Banner por plantilla.

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

Las cabeceras para elementos de la colección se muestran sobre las publicaciones de blog, productos y eventos individuales.

Para añadir una cabecera para un elemento de la colección, abre el editor en ese elemento, luego añade una imagen miniatura en la pestaña Opciones.  Para ver los pasos detallados, visita Agregar imágenes en miniatura.

Algunos elementos de la colección muestran banners de página. Por ejemplo, una publicación de blog podría mostrar el banner de la página de blog. Para obtener más información sobre qué plantillas admiten banners de elementos de la colección, consulta Opciones de banner por plantilla.

Añade una cabecera para todo el sitio

Los anuncios para todo el sitio están disponibles en la plantilla Five y en algunas plantillas descontinuadas. Se muestran en todas las páginas que no tengan un anuncio de página.

Para agregar un banner a todo el sitio, haz clic en su retoque de estilo enEstilos del sitio.

  • En Five, el ajuste es Imagen de fondo del encabezado
  • En las plantillas descontinuadas, el ajuste podría tener otro nombre.

Después de que hayas añadido la imagen, cambia su estilo con las opciones que aparezcan.

Nota: 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.

Estas familias de plantillas admiten uno o más tipos de banners:

Familia de plantillas

Páginas

Cabeceras en video

Objetos de la colección

Otras opciones

Adirondack

Diseño
Blog
Eventos
Productos

Publicaciones de blog
Eventos
Productos

Efecto de atenuación en el desplazamiento

Bedford

Diseño
Álbum
Blog
Eventos
Índice
Productos

Publicaciones de blog
Eventos

Los banners se pueden mostrar detrás del encabezado.

Cabeceras tipo presentación de diapositivas

Banners de índice apilados

Banners con diapositivas para la página de blog

Brine

Diseño
Álbum
Blog
Eventos
Galería
Índice
Productos

n/a

Los banners se pueden mostrar detrás del encabezado.

Cabeceras tipo presentación de diapositivas

Banners de índice apilados

Efecto parallax scrolling

Farro n/a No Publicaciones en blogs n/a

Five

Diseño
Álbum
Blog
Eventos
Galería
Productos

Las cabeceras de página se muestran en publicaciones de blog, eventos y productos

Cabeceras en todo el sitio

El título, el logotipo y el eslogan del sitio pueden superponerse a los banners.

Montauk

Diseño
Blog
Eventos
Índice

Las cabeceras de página se muestran en publicaciones de blog, eventos

Los banners no se recortan verticalmente.

Pacific

Diseño
Álbum
Blog
Eventos
Galería
Índice
Productos

n/a

Los banners se pueden mostrar detrás del encabezado.

Cabeceras tipo presentación de diapositivas

Banners de índice apilados

Banners que no se recortan

Skye n/a No Publicaciones en blogs n/a

Supply

Diseño
Blog
Álbum
Eventos

No

Publicaciones de blog
Eventos

La cabecera se muestra a la derecha, excepto en los dispositivos móviles.

Tremont

Diseño
Álbum
Blog
Eventos
Galería
Productos

n/a 

Los banners se pueden mostrar detrás del encabezado.

Superposiciones de página

York

Diseño
Álbum
Blog
Eventos
Galería
Índice
Productos
Proyecto

No n/a

Banners de índice

Efecto de difuminado

Agregar texto a un banner

Dependiendo de tu sitio, puedes agregar texto u otro contenido superpuesto a las imágenes de banner. Debido a que el texto que agregas se adapta a cualquier tamaño de pantalla o dispositivo móvil, esta es una excelente manera de agregar texto a tu banner.

No recomendamos que uses una imagen de anuncio que tenga texto en la imagen real 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 el banner cambie de forma para adaptarse a diferentes anchos del navegador, se recortarán partes del texto.

La forma en que se agrega el texto del banner depende de la versión del sitio.

Para agregar texto u otro contenido:

  1. Haz clic en Editar en la página con el banner.
  2. Si agregaste una sección en blanco, ya incluye un bloque de texto. Haz clic en el bloque para agregar texto y, a continuación, utiliza el menú desplegable Formato para elegir un estilo de párrafo.
  3. Haz clic en un punto de inserción para agregar más bloques de texto u otro contenido.
  4. Posiciona el cursor sobre Listo y haz clic en Guardar.

Diferentes plantillas admiten diferentes tipos de superposiciones de texto:

Para obtener más información sobre qué plantillas admiten qué tipos de texto superpuesto, consulta Opciones de texto de banner por plantilla.

Añadir texto superpuesto en el área de introducción

Las plantillas de la familia de Brine admiten un área de intro que se muestra sobre el banner. Puedes personalizar esta área con bloques, como un bloque de texto o un bloque de botones

Agregar un título de página y una descripción

La mayoría de las plantillas muestran el título y la descripción de la página sobre banners de página. Para agregar texto a un banner en plantillas:

  1. En el Menú de Inicio, haz clic en Páginas.
  2. Desplaza el cursor sobre el título de la página en el panel izquierdo y haz clic en el icono del engranaje.
  3. Agrega texto a los campos Título de la página y Descripción de la página en la pestaña General.
  4. Haz clic en Guardar y actualiza la página. Los cambios en el anuncio, en ocasiones, no aparecen en la vista previa del sitio hasta que actualizas la página.

Ten en cuenta lo siguiente:

  • Para estas plantillas, las descripciones de páginas no deben utilizarse únicamente para agregar contenido basado en el SEO. Usar descripciones de páginas para el banner no tendrá un efecto negativo en el SEO.
  • Para mostrar un título diferente en los resultados de búsqueda e interacciones en redes sociales, agrega un título de SEO.
  • Puedes aumentar la altura en la mayoría de las plantillas agregando espacios en blanco a la descripción. Presione la tecla Return o Intro alrededor del texto de la descripción para mostrar más de la imagen. Esto puede ayudar a solucionar los problemas de recorte y aumentar la altura del banner para lograr un efecto impactante.

Agregar texto de banner del elemento de la colección 

Los banners de elementos de la colección suelen crear su texto superpuesto a partir de la configuración de esa publicación de blog, evento o producto. Utiliza los siguientes vínculos para obtener más información sobre cómo agregar texto a cada tipo de elemento:

Solución de problemas

Si el texto no se muestra, intenta con estos pasos de solución de problemas:

  • Actualiza la página.
  • Verifica la tabla de plantillas para confirmar que la plantilla admite texto de banner para ese tipo de página.
  • Abre Estilos del sitio y comprueba si tu plantilla tiene opciones de estilo que ocultan el anuncio o el texto del anuncio.
  • Asegúrate de que agregaste una imagen de banner, ya que algunas plantillas la requieren para mostrar el texto.
  • Revisa la guía de la plantilla.  

Estas son las opciones de textos de banners para dispositivos móviles en estas familias de plantillas:

Familia de plantillas

Cabeceras de página

Cabeceras para objetos de la colección

Adirondack

  • Sin superposición del texto
  • Entradas del blog, eventos, productos: sin superposición de texto

Bedford

  • Entradas del Blog: título, un elemento de metadatos.
  • Eventos:  sin superposición de texto

Brine

  • Área de bloques abiertos ("área de introducción")
  • El contenido del anuncio (como el título del sitio y los enlaces de navegación) se pueden mostrar sobre el anuncio.

 

Farro

 

Five

  • El título y descripción de la página, el título/logotipo y eslogan del sitio web o solo una imagen de banner. Más información.
  • Igual que los banners de página 

Montauk

  • Título y descripción de página.

 

Pacific

 

Skye

 

Supply

 

  • Entradas del blog, eventos: sin superposición de texto

Tremont

 

York

  • Título y descripción de página.

 

Este video se refiere a la versión 7.1.

Dar estilo al encabezado

El estilo del banner depende de la versión del sitio.

Imagen de cabecera

Para aplicar estilo a la imagen de banner, haz clic en Editar en la página, en el ícono de lápiz en la sección de banner y, a continuación, en Fondo. Puedes establecer 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.

Texto del banner

La configuración de estilo del sitio en el panel Diseño establece cómo se muestra el texto en la sección de banner.

  • Para cambiar las fuentes del sitio, elige un paquete de fuentes y un tamaño base en el panel Fuentes. Haz clic en el icono del engranaje para aplicar estilo a 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. Desplaza el cursor sobre el tema 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

Utiliza los retoques de Estilos del sitio para ajustar fuentes, colores y otros elementos de banner. Los retoques de estilo de banner suelen afectar cada banner de tu sitio web.

Obtén más información sobre las opciones de estilo de banner en la guía de tu plantilla:

Imágenes transparentes

Si usas un archivo .png con fondo transparente, los siguientes ajustes modifican el color que muestra detrás del anuncio.

  • Adirondack: Color de fondo del contenido
  • BedfordColor de la superposición del banner
  • BrineColor de la superposición en la sección Principal: Superposición
  • Farro: Color de fondo de la publicación. El Color de la superposición también afecta el color.
  • FiveFondo del encabezado
  • MontaukFondo del lienzo
  • PacificColor de la superposición
  • SkyeFondo del sitio
  • SupplyColor de página
  • Tremont: Color del fondo del sitio
  • YorkColor del fondo en la sección Banner.

En la mayoría de los casos, el color se muestra con 100% de opacidad. Si tienes problemas para obtener el color que deseas, cambia la transparencia.

Cambia la altura de la cabecera

La forma en que cambies la altura del banner depende de la versión del sitio.

Para cambiar la altura del banner:

  1. Haz clic en Editar en la página y, a continuación, en el ícono de lápiz en la sección del banner.
  2. En la pestaña Formato, en Altura de sección, selecciona una altura preestablecida o haz clic en ... para establecer una altura personalizada.
  3. Posiciona el cursor sobre Listo y haz clic en Guardar.

La altura de la sección afecta al modo en que se recorta la imagen de fondo tanto en equipos como en dispositivos móviles. Recomendamos probar diferentes alturas para obtener el aspecto que deseas.

La altura del banner también depende de la cantidad de contenido de la sección. Para aumentar la altura del banner sin añadir contenido visible, agrega bloques espaciadores.

Para seleccionar la altura de los banners en estas familias de plantillas:

Familia de plantillas

Cómo cambiar la altura

Adirondack

Altura

Bedford

Banners de página y de video: Añade saltos de línea a la descripción de la página. Infórmate mejor.

Banners con diapositivas, banners del blog con diapositivas y banners de objetos de la colección: altura fija.

Brine

Añade saltos de línea al área de introducción. Los banners de índice tienen distintas opciones de altura.

Farro

Usa el ajuste Header (Encabezado) en la sección Blog: Item (Blog: Elemento) para ajustar el tamaño de la cabecera.

Five

Usa los ajustes Banner Area Height (Altura del Área de Cabecera) o Banner Area Spacing (Espacio del Área de Cabecera). (Banner Area Height [Altura del Área de Cabecera] no afecta a los móviles.)

Montauk

Altura fija, según la imagen original. Las cabeceras de página siempre se muestran al ancho del contenido del sitio. No se recortan de manera vertical.

Pacific

Añade saltos de línea a la descripción de página o usa el ajuste Relleno. Más información. Los banners de índice tienen distintas opciones de altura.

Skye

Usa el ajuste Banner Image Width (Ancho de la Imagen de Cabecera) para ajustar el tamaño de la cabecera. La altura queda establecida por la imagen original y es proporcional al ancho.

Supply

El ancho de página es fijo, de modo que la cabecera llena el espacio restante del navegador.

Tremont

Ajuste Altura de la Imagen de Cabecera de Página

York

Altura

 Si el banner no se ve bien, visita Solución de problemas de recorte.

Cabeceras en dispositivos móviles

Cuando visualices tu sitio en dispositivos móviles, ten en cuenta que:

  • Las imágenes de cabecera siempre tendrán algunos inconvenientes y aparecerán recortadas en los dispositivos móviles.
  • La configuración de altura de cabecera no siempre se aplica a los dispositivos móviles.
  • Para banners de video, debes configurar una imagen de reserva para dispositivos móviles para que aparezca cuando el video no pueda cargarse debido a la velocidad de conexión o al tipo de navegador.
  • Para las cabeceras para todo el sitio, el ajuste Fix position (posición Fija) aparecerá en algunos dispositivos móviles, incluido iOS.

Eliminar una imagen de banner

La forma de eliminar una imagen de banner depende de la versión del sitio web.

Para eliminar una imagen de banner:

  1. Haz clic en Editar en la página y, a continuación, en el ícono de lápiz en la sección del banner.
  2. Haz clic en Fondo.
  3. Haz clic en Eliminar.
  4. Posiciona el cursor sobre Listo y haz clic en Guardar.

Mira el video

Este video corresponde a la versión 7.0.

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