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

Bloques de imágenes

Usa los Bloques de imagen para añadir imágenes a las páginas o a las publicaciones de blog en distintos diseños. Cada Bloque de imagen muestra una sola imagen.

Mira el video

Añadir un Bloque de imágenes

Para añadir cualquier Bloque de imagen:

  1. Edita una página o publicación, haz clic en un punto de inserción y, a continuación, en Imagen. Para obtener ayuda, visita Añadir contenido con bloques.
  2. Utiliza la pestaña Contenido para agregar una imagen y un enlace de imagen.
  3. Haz clic en la pestaña Diseño para cambiar el diseño y animar el bloque.
  4. Haz clic fuera del editor de bloques cuando hayas terminado. Los cambios se guardan automáticamente.

Si necesitas pasos más detallados, visita las secciones que siguen.

Añadir una imagen

En la pestaña Contenido del editor de bloque de imagen:

  • Para subir tu propia imagen, haz clic en Agregar imagen. También puedes arrastrar el archivo de imagen al cargador de imágenes desde tu equipo.
  • Para agregar una imagen de stock, haz clic en Búsqueda de imágenes o Buscar imágenes. Puedes elegir entre opciones gratuitas o premium. Para obtener más información, visita Cómo buscar y agregar imágenes de stock.
  • También puedes reutilizar imágenes desde la ventana Búsqueda de imágenes.

Ten en cuenta lo siguiente:

Añade un enlace o botón en la imagen

En la pestaña Contenido, puedes convertir la imagen en un enlace o agregar un botón a su diseño.

 

Para convertir la imagen en un enlace en el diseño incorporado, agrega la URL al campo Enlace o haz clic en el icono del engranaje para ver otras opciones.

Ten en cuenta lo siguiente:

  • Habilitar una lightbox desactiva los enlaces URL clickthrough.
  • El diseño incorporado no admite botones.

Para ver todos los demás diseños de bloque de imagen, utiliza el menú desplegable Enlace. Puedes elegir entre:

  • None (Ninguno): sin enlace
  • Sobre imagen: toda la imagen se convierte en un enlace. Agrega una URL en el campo URL que aparece debajo del menú desplegable o bien, haz clic en el icono del engranaje para acceder a opciones adicionales.
  • Botón: aparece un botón incorporado con el texto, debajo del título y el subtítulo. Personaliza el texto del botón y agrega la URL en los campos que aparecen debajo del menú desplegable, o haz clic el icono del engranaje para acceder a opciones adicionales.

Elegir un diseño

Cuando agregas un bloque de imagen, utiliza el diseño incorporado de forma predeterminada. Para cambiar el diseño, haz clic en la pestaña Diseño y, a continuación, elige el diseño que prefieras de las siguientes opciones:

  • Incorporado: bloque de imagen básico, con leyendas opcionales debajo o superponiendo la imagen. Establece cómo se muestra la leyenda en la pestaña Contenido.
  • Póster: muestra texto sobre imágenes, creando el aspecto de un banner o póster.
  • Tarjeta: muestra imágenes con texto a la izquierda o a la derecha. Por lo general, el texto se mueve por debajo de las imágenes en navegadores más pequeños y dispositivos móviles, o cuando se utilizan bloques de imagen en columnas.
  • Superposición: muestra una imagen a un lado con texto en el otro, parcialmente superpuesto a la imagen. Añade un color de fondo al título para lograr un efecto de resaltado. El texto generalmente se mueve hacia la parte inferior de las imágenes en navegadores más pequeños y en dispositivos móviles o cuando se utilizan bloques de imagen en columnas.
  • Collage: muestra imágenes en un lado y texto sobre tarjetas de fondo en el otro, desplazando y superponiendo la imagen. Por lo general, el texto se mueve hacia la esquina inferior de las imágenes en navegadores más pequeños y dispositivos móviles, o cuando se utilizan bloques de imagen en columnas.
  • Apilado: muestra imágenes con texto en la parte inferior.

Cuando selecciones un diseño, verás su vista previa en la página.

Consejo: si cambias entre incorporado y cualquier otro diseño, deberás volver a ingresar el texto de la imagen.

Agregar animaciones

No es posible agregar animaciones desde la aplicación de Squarespace.

En la pestaña Diseño del editor Bloque de imagen, puedes agregar animaciones que los visitantes vean cuando carguen o actualicen la página.

Para agregar una animación:

  1. En el editor Bloque de imagen, haz clic en Diseño y, a continuación, en Animaciones.
  2. Selecciona un efecto de la lista para aplicarlo a la imagen y a cualquier texto. Al seleccionar una opción, verás una vista previa de esta en la página.
  3. Para animar la imagen y el texto por separado, selecciona Personalizado y, a continuación, las opciones Imagen y Texto.
Consejo: en la versión 7.1, puedes aplicar animaciones de forma global a todas las imágenes de tu sitio.

Elige entre estas opciones de animación para tu imagen, texto o para ambos:

  • Fundido de entrada: El bloque, la imagen o el texto ingresa difuminado.
  • Deslizar hacia arriba: El bloque, la imagen o el texto se desliza hacia arriba.
  • Deslizar hacia abajo: La imagen o el texto se deslizan hacia abajo
  • Recorte horizontal: El bloque o la imagen se carga en capas horizontales.
  • Recorte vertical: El bloque o la imagen se carga en capas verticales.
  • Inclinado hacia arriba: El bloque o la imagen ingresa con una ampliación y una inclinación hacia arriba.
  • Inclinado hacia abajo: El bloque o la imagen ingresa con una ampliación y una inclinación hacia abajo.
  • Foco de ingreso: el bloque, la imagen o el texto aparece borroso y, luego, enfocado
  • Colisionar: La imagen y el texto se desplazan hacia dentro desde los laterales
  • Revelar: la imagen y el texto se desplazan hacia fuera desde el centro
  • Deslizar desde la izquierda: La imagen o el texto se deslizan desde la izquierda
  • Deslizar desde la derecha: La imagen o el texto se deslizan desde la derecha

Este es un ejemplo de un bloque de imagen en collage con estas configuraciones:

  • Animación: Personalizado
  • Animación de imagen: Deslizar desde la derecha
  • Animación de texto: Deslizar desde la izquierda

Ejemplo de un Bloque de imagen con animaciones.

Añadir texto

En el bloque de imagen, haz clic en los campos de texto para agregar texto a la imagen. Es posible que veas texto de marcador de posición como Agregar una descripción de imagen o Hacer que destaque.

Ten en cuenta lo siguiente:

  • Limita los títulos a pocas palabras. Para subtítulos y leyendas, usa una o dos frases. De esta manera, tendrás un buen equilibrio entre las palabras y la imagen. También mantiene visible el texto en dispositivos móviles.
  • Para agregar saltos de línea en el texto del título, pulsa Mayúscula + Enter. Si solo pulsas Enter, los saltos desaparecen después de guardar la página.
Consejo: resalta el texto para hacer cambios de formato con la barra de herramientas de texto, como negrita o cursiva o bien, agregar un enlace.

Leyendas frente a títulos y subtítulos

Los campos de texto y las opciones de estilo varían según el diseño. El diseño incorporado admite una leyenda básica, mientras que otros diseños tienen campos para el título y el subtítulo.

El diseño incorporado admite una leyenda con lo siguiente:

En la pestaña Contenido, selecciona una opción de visualización en el menú desplegable de leyendas:

  • Desactivado: no se muestra ninguna leyenda a menos que la imagen se vea en lightbox.
  • Leyenda inferior: la leyenda se muestra debajo de la imagen.
  • Leyenda superpuesta: La leyenda aparece encima de la imagen en una barra gris oscura.
  • Leyenda superpuesta cuando se pasa el cursor: La leyenda aparece sobre la imagen en una barra gris oscura cuando se posiciona el cursor sobre la imagen.
Consejo: Si no ves Agregar una descripción de imagen, cambia temporalmente el estilo de leyenda a Leyenda inferior en la pestaña Contenido.

Las leyendas siempre aparecen en lightbox. No aparecen en los Bloques de imagen que estén vacíos. Para añadir un texto sin imagen, usa un Bloque de texto.

Otros diseños admiten un título y un subtítulo:

Modificar el estilo del Bloque de imagen

Algunos diseños tienen su propia configuración de estilo para fuentes, colores y botones. El lugar en que aparece esta configuración depende de la versión del sitio.

Para dar estilo a los bloques de imagen de forma global:

Para dar estilo a los elementos específicos del diseño del bloque de imagen, como la alineación del texto o el ancho del contenido:

  1. Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Bloques de imagen.
  2. Desplázate hasta la sección de cada diseño para cambiar sus ajustes.

En la versión 7.0, todos los diseños de bloque de imagen, excepto el diseño incorporado, tienen su propia configuración de estilo en estilos del sitio. Para encontrar estas opciones:

  1. En el menú de Inicio, haz clic en Diseño y, a continuación, en Estilos del sitio.
  2. Desplázate hasta la sección de cada diseño para cambiar sus ajustes.

El bloque de imagen incorporada no tiene sus propios ajustes de diseño en estilos del sitio. Para obtener más información acerca de los estilos, los colores y el tamaño de las fuentes de leyendas, visita Cómo aplicar estilo a las leyendas de imágenes.

Cambiar el tamaño de la imagen

Puedes cambiar el tamaño o recortar bloques de imagen de diversas formas, según el diseño. Para obtener más información, visita Cómo cambiar el tamaño de una imagen.

Consejo: Puedes eliminar el relleno aplicado automáticamente a Bloques de imagen añadiendo código personalizado. Para obtener más información, visita esta publicación en el Squarespace Forum.

Ten en cuenta que las modificaciones al código personalizado están fuera del alcance de nuestro soporte técnico. Esto significa que no podemos ayudarte a configurar ni resolver problemas de las soluciones basadas en código.

Bloques de imagen en móvil

Cada diseño del Bloque de imagen conserva su formato en dispositivos móviles. El texto se moverá en el móvil para ajustarse al dispositivo y conservará una posición similar con relación a la imagen.

  • Para ver cómo lucirá tu bloque de imagen, usa la vista en dispositivo.
  • Con la excepción de los diseños incorporado y apilado, las leyendas mantienen el ancho establecido con respecto a la imagen. Esto significa que las leyendas más largas pueden ser más difíciles de leer o aparecer cortadas en dispositivos móviles. Esto puede ser especialmente visible en el diseño de póster, que fue diseñado para una cantidad limitada de texto.
  • Las leyendas para el diseño en tarjeta se desplazan desde junto a la imagen hacia debajo de la imagen. Para los diseños en collage y en superposición, las leyendas se mueven desde junto a la imagen hacia la parte inferior de la imagen.
  • Los diseños de tarjeta, collage, superpuesto y apilado tienen la opción Tamaño de fuente dinámico en el panel de estilos del sitio. Cuando está habilitada, el tamaño del texto no se ajustará a menos de 14 píxeles.
  • Varios bloques de imagen se apilan verticalmente en dispositivos móviles.

Solucionar problemas de colores de imagen

Si una imagen se guarda en modo CMYK en lugar de RGB, los colores en tu sitio de Squarespace pueden diferir de aquellos en el archivo original de la imagen.

Siempre debes guardar las imágenes en modo RGB o sRGB. El modo de color RGB es un formato compatible con la web, mientras que CMYK es para la impresión y no renderiza en la mayoría de los navegadores. Para obtener más información sobre cómo ajustar el formato de una imagen, consulta Ajustar el formato de las imágenes para exhibirlas en la web.

Próximos pasos

Después de configurar el bloque de imagen, puedes reorganizarlo, editarlo o eliminarlo:

  • Arrastra y suelta el bloque para moverlo o para crear filas y columnas.
  • Usa el editor de imágenes para recortar o rotar las imágenes o agregarles filtro.
  • Para reemplazar la imagen sin agregar un nuevo bloque de imagen, haz clic en Eliminar imagen en la pestaña Contenido del editor de bloques y, a continuación, carga una imagen nueva.
  • Borra el bloque.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 99 de 412