Agregar imágenes de banner en la versión 7.0

Agrega un punto focal visual a la parte superior de una página para mantener la atención de tus visitantes.

Se muestra una imagen de banner cerca de la parte superior de la página, que agrega un elemento gráfico que establece el tono del sitio. En esta guía se repasan los pasos para agregar imágenes de banner y aplicarles estilo en la versión 7.0. La manera en la que agregas imágenes de banner y cambias su estilo depende de tu plantilla.

Para crear una imagen de banner en la versión 7.1, agrega una imagen de fondo de sección a una sección en la parte superior de una página.

Mira el video

Consejos para formatear la imagen

Comprueba el formato de las imágenes antes de cargarlas en tu sitio web. Para las imágenes de banner, sigue estas pautas:

• Utiliza imágenes de entre 1500 píxeles y 2500 píxeles de ancho
• Asegúrate de que las imágenes sean más anchas que altas
• Utiliza imágenes con patrones abstractos y sin bordes
• No uses imágenes que contengan texto. En su lugar, agrega texto sobre la imagen
• 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
• Si quieres un mensaje de solo texto en la parte superior del sitio, agrega una barra de anuncios en lugar de un banner

Agregar una imagen de banner

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

• Banner de página: se muestra en la parte superior de las páginas individuales. Se agrega como imagen destacada de la página.
• Banner de elemento de la colección: se muestra sobre entradas de blog individuales, productos y eventos. Se agrega como imagen destacada del elemento.
• Anuncio para todo el sitio: Se puede mostrar en cada página. Se agrega desde Estilos del sitio.

Para obtener más información, revisa nuestra tabla comparativa de opciones de banner por plantilla o mira nuestro video de ejemplo para agregar cada opción de banner.

Añade una cabecera de página

Para añadir una cabecera de página:

1. Abre el panel Páginas.
2. Desplaza el cursor sobre el título de la página y haz clic en y , a continuación, en Medios.
3. Haz clic en Agregar imagen para cargar una imagen desde tu computadora de escritorio o en Buscar imágenes para volver a utilizar una imagen o agregar una imagen de 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 .

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

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.

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

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

Para añadir un banner para un elemento de la colección, abre el editor en ese elemento, luego añade una imagen destacada en la pestaña Opciones. Para ver los pasos detallados, consulta Cómo agregar imágenes destacadas.

Algunos elementos de la colección muestran banners de página. Por ejemplo, una entrada 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, visita 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 ajuste de estilo en Estilos 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 agregar la imagen, modifica su estilo con las opciones que aparecen.

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

Opciones de cabecera por plantilla

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

Familia de plantillas	Páginas	Banners en video	Objetos de la colección	Otras opciones
Adirondack	Diseño Blog Eventos Productos	Sí	Publicaciones del blog Eventos Productos	Efecto de atenuación en el desplazamiento
Bedford	Diseño Álbum Blog Eventos Índice Productos	Sí	Publicaciones de blog Eventos	Los banners se pueden mostrar detrás del encabezado. Banners 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	Sí	n/a	Los banners se pueden mostrar detrás del encabezado. Banners 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	Sí	Los banners de página se muestran en publicaciones de blog, eventos y productos	Banners 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	Sí	Los banners 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	Sí	n/a	Los banners se pueden mostrar detrás del encabezado. Banners 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	Sí	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 banner que tenga texto en el archivo de imagen 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.

Diferentes plantillas admiten diferentes tipos de superposiciones de texto:

• Título y descripción de la página: muestra el título y la descripción agregados en la configuración de la página sobre banners de página.
• Texto del banner del elemento de la colección: muestra el texto de la configuración del elemento de la colección sobre publicaciones de blog, eventos o elementos del producto.
• Texto del banner de la página de índice: muestra el texto de descripción que se superpone al banner, o el contenido de la página puede superponerse al banner según la plantilla.
• Texto de superposición de área de intro: los bloques de texto y otro contenido de bloque se superponen al área de encabezado de la página donde se muestra el banner.

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

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

Las plantillas de la familia Brine admiten un área de introducción 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. Abre el panel Páginas.
2. Desplaza el cursor sobre el título de la página en el panel izquierdo y haz clic en .
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. Presiona 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 de alto impacto.

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 enlaces para obtener más información sobre cómo agregar texto a cada tipo de elemento:

• Publicaciones en blogs
• Eventos
• Elementos de producto

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 tu plantilla.

Opciones de texto de banner por plantilla

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

Familia de plantillas	Banners de página	Banners para objetos de la colección
Adirondack	Sin superposición del texto	Entradas del blog, eventos, productos: sin superposición de texto
Bedford	Descripción de página con opciones especiales de formato (botones, encabezados) Los banners con diapositivas y los banners de página de blog tienen otras opciones.	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		Publicaciones de blog: El título de la entrada y hasta cuatro elementos de metadatos
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	Título y descripción de página. También pueden incluir el título del sitio y la navegación.
Skye		Entradas de blog: La fecha se puede mostrar en una leyenda.
Supply		Entradas del blog, eventos: sin superposición de texto
Tremont	Título y descripción de página como superposición de página.
York	Título y descripción de página.

Dar estilo al encabezado

Utiliza los ajustes de estilos del sitio para cambiar fuentes, colores y otros elementos del banner. Los ajustes de estilo de banner suelen afectar a todos los banners de tu sitio web.

Obtén más información sobre las opciones de estilo de los banners 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 aparece detrás del banner.

• Adirondack: Color de fondo del contenido
• Bedford: color de la superposición del banner
• Brine: color 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.
• Five: fondo del encabezado
• Montauk: fondo del lienzo
• Pacific: color de la superposición
• Skye: fondo del sitio
• Supply: Color de página
• Tremont: color del fondo del sitio
• York: color del fondo en la sección Banner.

Por lo general, el color se muestra con una opacidad de 100 %. Si tienes problemas para obtener el color que quieres, cambia la transparencia.

Cambiar el tamaño del banner

Utiliza la tabla siguiente para saber cómo cambiar el tamaño del encabezado en estas familias de plantillas. Ten en cuenta que no es posible cambiar el ancho del banner en la mayoría de las plantillas.

Familia de plantillas	Cómo cambiar el tamaño
Adirondack	Altura
Bedford	Banners de página y en video: añade saltos de línea a la descripción de la página. Más información. Banners con diapositivas, banners del blog con diapositivas y banners de elementos 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 Altura del área del banner o Espacio del área del banner. (La Altura del área del banner no cambia en los dispositivos móviles).
Montauk	Altura fija, según la imagen original. Los banners 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 Ancho de imagen del banner para ajustar el tamaño del banner. La altura se fija de acuerdo con la imagen original, de manera 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.

Agregar un botón a un banner

Anima a los visitantes a hacer clic en un enlace a una página específica, donar a tu organización o suscribirse al newsletter agregando un botón al banner.

Estas familias de plantillas incluyen opciones especiales de superposición para agregar botones sobre imágenes de banner y videos en páginas individuales:

• Bedford: Cambia el formato del texto de descripción de la página para crear un botón en la última línea.
• Brine: Añade un bloque de botón al área de introducción en una página que tiene un banner.

Banners en dispositivos móviles

Las imágenes de cabecera siempre tendrán algunos inconvenientes y aparecerán recortadas en los dispositivos móviles.

Para saber cómo aparecen los banners en dispositivos móviles, visita ¿Cómo aparecerá mi sitio en dispositivos móviles?

Eliminar una imagen de banner

Cómo eliminar una imagen de banner depende de dónde se encuentre en el sitio:

• Banners de página: en la pestaña de Medios de la configuración de la página, haz clic en Eliminar imagen.
• Banners de elementos de la colección: abre el elemento individual (publicación de blog, producto o evento), y haz clic en la pestaña Opciones y, a continuación, en el ícono de papelera.
• Anuncios globales del sitio: Abre el ajuste específico en Estilos del sitio y presiona Eliminar.