Cómo agregar imágenes destacadas

Promociona las entradas de blog, eventos o productos incluidos en tu sitio con una imagen atractiva.

Última actualización: 26 de marzo de 2024

Squarespace usa imágenes destacadas para representar elementos individuales de la colección, como entradas de blog, eventos y productos, en diferentes áreas de tu sitio. Por ejemplo, puedes usar un bloque de sumario para mostrar entradas de tu página de blog que incluyan la imagen destacada de cada una. 

Si tu sitio está en la versión 7.0, también puedes agregar imágenes destacadas de la página para que aparezcan en las páginas de índice y crear imágenes de banner por página en algunas plantillas.

Recomendamos agregar siempre imágenes destacadas cuando la opción esté disponible para crear una gran experiencia visual en tu sitio. Si necesitas ayuda para dar formato a las imágenes antes de cargarlas,consulta Cómo dar formato a las imágenes para mostrarlas en la web.

Consejo

Cuando compartes un enlace desde tu sitio en las redes sociales, es posible que se muestre tu imagen para compartir en redes sociales en lugar de la imagen destacada del elemento o la página. Para obtener más información sobre lo que se muestra, consulta Cómo se muestra el contenido en publicaciones sociales.

Imágenes destacadas de elemento de la colección

La imagen destacada del elemento de la colección representa entradas de blog individuales, eventos y productos en todo el sitio. También pueden mostrarse cuando los elementos se comparten en las redes sociales.

En la versión 7.0, algunas plantillas usan imágenes destacadas de elementos de la colección para crear una imagen de banner.

La forma en que agregas una imagen destacada de un elemento de la colección depende de la versión de Squarespace en la que se encuentre tu sitio.

Para agregar una imagen destacada de una entrada de blog, un evento o una subpágina de portafolio:

  1. Abre el panel Páginas.
  2. En el panel Páginas, haz clic en una página de blog, eventos o portafolio. Si no has agregado imágenes destacadas a una entrada, evento o subpágina, aparecerá un ícono de imagen en su lugar.
  3. Pasa el cursor sobre el elemento (por ejemplo, una publicación de blog), y haz clic en ... y en Configuración
  4. En la pestaña Contenido o General, arrastra tu imagen al cargador de imágenes o haz clic en el cargador de imágenes y elige un archivo de tu equipo. Si el elemento ya tiene una imagen, haz clic en Eliminar imagen y, a continuación, agrega una imagen nueva.
  5. Para reutilizar una imagen o utilizar una imagen de stock, haz clic en Buscar imágenes (solo entradas de blog y eventos).
  6. Haz clic en Guardar.

De manera predetermina, la primera imagen que se muestra en el editor del producto se convierte en la imagen destacada. Para cambiar la imagen destacada del producto:

  1. Abre el panel Páginas.
  2. En el panel Páginas, haz clic en una página de tienda.
  3. Haz doble clic en un producto.
  4. En el editor de productos, desplázate hacia abajo hasta la sección Imágenes y haz clic en Imagen destacada.
  5. Sube una imagen o selecciona una existente de tu biblioteca de imágenes.
  6. Si el producto ya tiene una imagen, haz clic en los tres puntos que están a la derecha de la imagen y luego, en Eliminar.Después, sube una nueva imagen.
  7. Haz clic en Guardar.

Para agregar una imagen destacada personalizada a un video cargado en una página de videos:

  1. Abre el panel de Páginas y haz clic en una página de videos.
  2. En el panel lateral, haz clic en Todos.
  3. Desplaza el cursor sobre el video al que quieras agregar una imagen destacada personalizada y haz clic en ... y, a continuación, en Editar video.
  4. En el editor de video, activa la opción Imagen destacada personalizada. Ten en cuenta que esta opción solo está disponible para los videos cargados directamente en Squarespace. No es posible agregar imágenes destacadas personalizadas a los videos insertados.
  5. Haz clic en Agregar una imagen, luego carga una imagen o selecciona una image de tu biblioteca de imágenes. Si el producto ya tiene una imagen, haz clic en Reemplazar y agrega una imagen nueva.
  6. Haz clic en Guardar.

Para agregar una entrada de blog o una imagen destacada del evento:

  1. Abre el panel Páginas.
  2. En el panel Páginas, haz clic en un Blog o página de Eventos
  3. Abre la configuración del elemento y haz clic en Opciones.
  4. Arrastra la imagen al cargador de imágenes o haz clic en el cargador de imágenes y selecciona un archivo de tu equipo. Si el elemento ya tiene una imagen, haz clic en Eliminar imagen o en el ícono de la papelera y, a continuación, agrega una imagen nueva.
  5. Para volver a utilizar una imagen o una imagen de stock, haz clic en Buscar imagen.
  6. Haz clic en Guardar.

De manera predetermina, la primera imagen que se muestra en el editor del producto se convierte en la imagen destacada. Para cambiar la imagen destacada del producto:

  1. Abre el panel Páginas.
  2. En el panel Páginas, haz clic en una página de tienda.
  3. Haz doble clic en un producto.
  4. En el editor de productos, desplázate hacia abajo hasta la sección Imágenes y haz clic en Imagen destacada.
  5. Sube una imagen o selecciona una existente de tu biblioteca de imágenes.
  6. Si el producto ya tiene una imagen, haz clic en los tres puntos que están a la derecha de la imagen y luego, en Eliminar.Después, sube una nueva imagen.
  7. Haz clic en Guardar.

Consejo

Usa el editor de imágenes para cambiar el estilo o recortar la imagen destacada después de cargarla. También puedes usar puntos focales para centrar la imagen dentro de sus dimensiones de altura.

Cómo acceder a esta función

La aplicación de Squarespace solo admite agregar imágenes destacadas de elementos de la colección a entradas de blog. Para agregar imágenes destacadas de eventos o productos, usa un equipo.

Para agregar una imagen destacada de un elemento de la colección en un sitio en la versión 7.1:

  1. Toca Más, luego Páginas, el blog y, por último, Contenidos del blog.
  2. Toca ... junto a la publicación, Configuración y, luego, Contenido.
  3. Si el artículo ya tiene una imagen, haz clic en Eliminar imagen y luego presiona Agregar imagen
  4. Elige una imagen:
    • Toma una foto nueva - Toca Tomar foto o Cámara.
    • Elige una imagen de tu dispositivo - Pulsa Biblioteca de fotos o Archivos.
    • Elige una imagen de iCloud - Pulsa Insertar de....
  5. Toca Atrás y, a continuación, Guardar.

Para agregar una imagen destacada de un elemento de la colección en un sitio de la versión 7.0:

  1. Pulsa Más y, a continuación, Páginas
  2. Toca el blog y, luego, la entrada de blog. 
  3. Toca ..., luego toca Configuración de página.
  4. En la configuración de publicación, toca Agregar imagen y luego elige una imagen:
    • Toma una foto nueva - Toca Tomar foto o Cámara.
    • Elige una imagen de tu dispositivo - Pulsa Biblioteca de fotos o Archivos.
    • Elige una imagen de iCloud - Pulsa Insertar de....
  5. Presiona Guardar

Imágenes destacadas de página (versión 7.0)

Cómo acceder a esta función

La versión 7.1 no utiliza imágenes destacadas de la página. Para crear una imagen de banner, agrega una imagen de fondo de sección a una sección de página. Para representar la página en las redes sociales, agrega una imagen alternativa para compartir en redes sociales.

Las imágenes destacadas de página aparecen en páginas de índice y crean imágenes de banner por página en algunas plantillas. Algunas plantillas también admiten agregar videos.

Para agregar una imagen destacada de página:

  1. Abre el panel Páginas.
  2. Posiciona el cursor sobre la página en el panel izquierdo y haz clic para abrir la Configuración de página.
  3. En Configuración de página, haz clic en la pestaña Medios.
  4. Arrastra una imagen al cuadro Imagen destacada o haz clic en Agregar imagen. Si el elemento ya tiene una imagen, haz clic en Eliminar imagen o en el ícono de la papelera y, a continuación, agrega una imagen nueva. También puedes hacer clic en Buscar imágenes para volver a utilizar una imagen o agregar una imagen de stock.
  5. Haz clic en Guardar.

Consejo

Usa el editor de imágenes para cambiar el estilo o recortar la imagen destacada después de cargarla. También puedes usar puntos focales para centrar la imagen dentro de sus dimensiones de altura.

Para agregar una imagen destacada de página:

  1. Pulsa Más y, a continuación, Páginas.
  2. Pulsa ... o en la parte superior de la pantalla y, luego, Configuración de página.
  3. En Opciones, pulsa Medios.
  4. Pulsa Agregar imagen en Imagen destacada. Si el elemento ya tiene una imagen, haz clic en Reemplazar y, a continuación, agrega una imagen nueva.
  5. Elige una imagen:
    • Toma una foto nueva - Toca Tomar foto o Cámara.
    • Elige una imagen de tu dispositivo - Pulsa Biblioteca de fotos o Archivos.
    • Elige una imagen de iCloud - Pulsa Insertar de....
  6. Pulsa Configuración de páginay, a continuación, Guardar.

En la mayoría de las plantillas, si la página de la galería no tiene una imagen destacada, se crea automáticamente una a partir de la primera imagen de la galería. Sigue los pasos anteriores para reemplazar esta imagen por otra o eliminarla por completo.

En algunas plantillas, si eliminas la imagen destacada de la página, la primera imagen de la galería se convierte automáticamente en la imagen destacada cuando haces cualquier cambio en la galería. Esto se nota más en las plantillas en las que la imagen destacada crea un banner de página.

En estos casos, puedes quitar la nueva imagen destacada de la configuración de la página para eliminarla después de cada cambio. Ten en cuenta que, si agregas manualmente una imagen destacada en la configuración de la página, la imagen destacada no se actualizará automáticamente cuando realices cambios en la galería. Para dar el aspecto de que no tienes ningún banner, carga una imagen destacada de un color liso que coincida con el fondo.

Cómo se muestran las imágenes destacadas

Las imágenes destacadas se muestran de manera diferente según la versión de tu sitio y el lugar donde aparezcan. 

Utiliza esta tabla para obtener más información sobre cómo se muestran las imágenes destacadas en diferentes áreas del sitio. 

Área del sitio

Visualización de imagen destacada

Páginas de blog, eventos, tienda y videos

Las imágenes destacadas del elemento se muestran en la página principal de la colección para representar cada elemento. Por ejemplo, las páginas de eventos muestran la imagen destacada de cada evento próximo.

Bloques de productos

Las imágenes destacadas aparecen cuando está marcada la opción Mostrar imagen.

Bloques de resumen

Las imágenes destacadas se muestran para los elementos de la colección que aparecen en el bloque. Elige entre varios diseños diferentes.

Usa esta tabla para obtener más información sobre cómo se muestran las imágenes destacadas en diferentes áreas de tu sitio.  

Área del sitio

Visualización de imagen destacada

Banners

Las imágenes destacadas se muestran como banners de páginas y elementos de la colección en algunas plantillas.

Páginas de Índice

Las imágenes destacadas se muestran como cuadrícula, apiladas o en pantalla completa, según la plantilla de tu sitio.

Páginas de blog, eventos y tienda avanzadas

Las imágenes destacadas del elemento de la colección se muestran en la página principal de la colección para representar cada elemento. Por ejemplo, las páginas de eventos muestran la imagen destacada de cada evento próximo.

Bloques de productos

Las imágenes destacadas aparecen cuando está marcada la opción Mostrar imagen.

Bloques de resumen

Las imágenes destacadas se muestran para los elementos de la colección que aparecen en el bloque. Elige entre varios diseños diferentes.

Bloques de enlace de contenido

Las imágenes destacadas se muestran para las páginas o los elementos a los que estás vinculando.

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.