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 imagen.
Consejo: Para añadir varias imágenes a un bloque, usa Bloques de galería. Para informarte sobre cómo añadir imágenes a otras áreas de tu sitio, consulta nuestras guías sobre los banners, los fondos, las Páginas de Galería y las imágenes de productos.
Mira el video
Añadir un Bloque de imágenes
Para añadir cualquier Bloque de imagen:
- Presiona Editar en una página o en una publicación.
- Presiona un punto de inserción o el icono +. Si necesitas más detalles sobre estos primeros pasos, consulta Agregar bloques.
- Selecciona Imagen para un Bloque de imagen incorporada, o Póster, Tarjeta, Superposición, Collage o Pila para usar otros diseños.
- Usa la pestaña Contenidos para añadir una imagen.
- Utiliza la pestaña Diseño para cambiar el diseño y añadir un enlace de imagen.
- Usa la pestaña Animaciones para animar el bloque.
- Haz clic en Aplicar para guardar los cambios.
Si necesitas pasos más detallados, visita las secciones que siguen.
Añadir una imagen
En la pestaña Contenidos del editor de Bloque de imagen, sube o agrega una imagen usando nuestras integraciones con imágenes de stock. También puedes reutilizar una imagen de stock o una imagen cargada desde la ventana de Búsqueda de imágenes.
Consejo: Para obtener los mejores resultados, sube una imagen que tenga menos de 500 KB. Si necesitas más consejos sobre el formato de imágenes, consulta Cambiar el formato de tus imágenes para que aparezcan en la web.
Opción 1: Subir una imagen
Para subir una imagen propia, haz clic en Subir una imagen. También puedes arrastrar la imagen al cargador de imágenes desde tu computadora.
Opción 2: Añadir una imagen de stock
Para añadir una imagen de stock, haz clic en Buscar imagen. Puedes elegir entre las opciones gratuitas o premium. Para conocer más, consulta Buscar y agregar imágenes de stock.
Diseños del Bloque de imagen
Estos son algunos ejemplos de cada diseño del Bloque de imagen. Puedes cambiar el diseño en la pestaña Diseño del Bloque de imagen. 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.
Los Bloques de imagen incorporada muestran las imágenes con leyendas optativas debajo de ellas o superpuestas a la imagen.
Los Bloques de imágenes en póster muestran el texto sobre las imágenes y crean el aspecto de un banner o póster.
Los Bloques de imagen de tarjeta muestran imágenes con texto a la derecha o a la izquierda y con colores de fondo optativos. Por lo general, el texto se mueve debajo de las imágenes en los navegadores más pequeños y los dispositivos móviles, o cuando se usan los Bloques de imagen en columnas.
Para seleccionar de qué lado aparecerá la imagen, usa el menú desplegable Posición de imagen en la pestaña Diseño del Bloque de imagen.
El Bloque de imagen superpuesta 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. Por lo general, el texto se mueve debajo de las imágenes en los navegadores más pequeños y los dispositivos móviles, o cuando se usan los Bloques de imagen en columnas.
Para seleccionar de qué lado aparecerá la imagen, usa el menú desplegable Posición de imagen en la pestaña Diseño del Bloque de imagen.
El Bloque de imagen de collage muestra una imagen a un lado y texto sobre "tarjetas" de fondo, que se desplaza y se superpone a la imagen. Por lo general, el texto se mueve debajo de las imágenes en los navegadores más pequeños y los dispositivos móviles, o cuando se usan los Bloques de imagen en columnas.
Para seleccionar de qué lado aparecerá la imagen, usa el menú desplegable Posición de imagen en la pestaña Diseño del Bloque de imagen.
Los Bloques de imagen en pila muestran las imágenes con texto debajo y con colores optativos de fondo.
Añade un enlace o botón en la imagen
En la pestaña Diseño del Bloque de imagen, puedes hacer que la imagen pase a ser un enlace o añadir un botón a su diseño.
Para hacer que la imagen pase a ser un enlace en el diseño Incorporado, agrega una URL clickthrough.
Ten presentes estos consejos:
- Habilitar una lightbox desactiva los enlaces URL clickthrough.
- El diseño alineado no soporta botones.
Para todos los demás diseños de Bloques de imagen, usa el menú desplegable de Enlace a imagen. Puedes elegir entre las siguientes opciones:
- Ninguno: Sin enlace.
- En la imagen: Toda la imagen se convierte en un enlace. Añade la URL al campo que aparece cuando seleccionas esta opción.
- Botón: Aparece un botón incorporado con el texto, debajo del título y del subtítulo. Personaliza el texto del botón y añade la URL a los campos que aparecen cuando seleccionas esta opción. Puedes modificar el estilo del botón en el panel Estilos del sitio.
Agregar animaciones
En la pestaña Animaciones del editor del Bloque de imagen, puedes agregar animaciones que ven los visitantes cuando cargan o actualizan la página. Recomendamos experimentar con diferentes opciones para encontrar las animaciones que te gusten.
Para agregar una animación:
- En el editor del Bloque de imágenes, haz clic en Animaciones.
- Selecciona un efecto del menú desplegable del Bloque de imágenes animadas para aplicarlo a la imagen y a cualquier posible texto. Cuando selecciones una opción, verás una vista previa de cómo se cargará en la página.
- Para animar la imagen separada del texto, selecciona Personalizada, luego elige las opciones Animar imagen y Animar texto de imagen.
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, se hace foco.
- 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 de collage con estas configuraciones:
- Animar Bloque de imagen: Personalizada
- Animar imagen: Deslizar desde la derecha
- Animar el texto de imagen: Deslizar desde la izquierda
Añadir texto
Después de hacer clic en Aplicar para guardar el bloque, presiona Escribe una leyenda aquí, Escribe un título aquí o Escribe un subtítulo aquí para añadir el texto correspondiente a la imagen.
Para obtener los mejores resultados, haz que tu texto sea breve. Intenta limitar los subtítulos a una o dos oraciones. Esto conserva un buen equilibrio entre las palabras y la imagen. También mantiene visible el texto en dispositivos móviles.
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:
- Un campo de texto básico
- Estilo preconfigurado según la plantilla
- Automáticamente pasa a ser el texto alternativo
En la pestaña Diseño, selecciona una opción de visualización del menú desplegable de las leyendas:
- No incluir la leyenda: No aparece la leyenda, a menos que la imagen se visualice en lightbox.
- Leyenda abajo: La leyenda aparece debajo de la imagen, alineada a la izquierda.
- 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 Escribir leyenda aquí, cambia transitoriamente el diseño de la leyenda a Leyenda abajo en la pestaña Diseño.
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:
- Dos campos de texto, uno arriba del otro
- Estilos que se configuran en Estilos del sitio
- El texto alternativo debe añadirse manualmente
Cambiar el tamaño de la imagen
Puedes modificar el tamaño de la imagen o recortar los Bloques de imagen de distintos modos. Tus opciones dependen del diseño.
Los Bloques de imagen incorporada conservan el ancho del archivo original de la imagen. Si el archivo de la imagen es más angosto que el área de contenidos, verás un espacio en blanco a ambos lados de la imagen. Esto preserva la calidad original de la imagen. Para completar el espacio en blanco y para mostrar la imagen en el ancho completo del bloque, marca Ampliar en la pestaña Diseño del bloque. Ampliar una imagen puede afectar su calidad.
También puedes ajustar el tamaño de la imagen o recortarla de otros modos:
- Para recortar el archivo original de la imagen, usa el Editor de imágenes.
- Para recortar la imagen horizontal o verticalmente, usa la función de recortar.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
- Para ajustar dónde se centrará la imagen, usa el punto focal.
En el diseño Póster, las imágenes se amplían automáticamente para ocupar todo el ancho del bloque.
Hay varios modos de ajustar el tamaño y de recortar la imagen:
- Para recortar el archivo original de la imagen, usa el Editor de imágenes.
- Para recortar la imagen horizontal o verticalmente, usa la función de recortar.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
- Para ajustar dónde se centrará la imagen, usa el punto focal.
Hay varios modos de ajustar el tamaño y de recortar la imagen:
- Para ajustar el ancho de la imagen, usa el ajuste del Ancho de la imagen en el panel de Estilos del sitio.
- Para recortar la imagen original, usa el Editor de imágenes incorporado.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
Hay varios modos de ajustar el tamaño y de recortar la imagen:
- Para ajustar el ancho de la imagen, usa el ajuste del Ancho de la imagen en el panel de Estilos del sitio.
- Para recortar la imagen original, usa el Editor de imágenes incorporado.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
Hay varios modos de ajustar el tamaño y de recortar la imagen:
- Para ajustar el ancho de la imagen, usa el ajuste del Ancho de la imagen en el panel de Estilos del sitio.
- Para recortar la imagen original, usa el Editor de imágenes incorporado.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
En el diseño Pila, las imágenes se amplía automáticamente para ocupar todo el ancho del bloque.
Hay varios modos de ajustar el tamaño y de recortar la imagen:
- Para recortar la imagen original, usa el Editor de imágenes incorporado.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
Modificar el estilo del Bloque de imagen
Algunos diseños tienen sus propias configuraciones de estilo para las fuentes, los colores y los botones.
Para encontrar estas opciones:
En el Menú de Inicio, haz clic en Diseño y, luego, en Estilos del sitio.
El Bloque de imagen incorporada no tiene opciones exclusivas para los Estilos del sitio. Los estilos de las leyendas están preconfigurados para cada plantilla.
Desplázate hacia abajo hasta la sección Bloque de imagen: Póster para seleccionar estos ajustes. Los siguientes ajustes afectan todos los Bloques de imagen de póster de tu sitio:
- Alineación del texto: Izquierda, Derecha, Centro
- Fuente del título: Elige la fuente y el tamaño del título
- Color del título
- Fuente del subtítulo: Elige la fuente y el tamaño del subtítulo
- Color de subtítulo
- Color del enlace incorporado: Configura el color del enlace del título y del subtítulo
- Separación del título: Configura el espacio entre el título y el subtítulo
- Color de la superposición de la imagen: Agrega un filtro de color sobre la imagen
- Ancho del contenido: Elige el ancho de la leyenda
- Color de fondo del título: Añade un color detrás del título
Si agregaste un botón, usa estos ajustes para personalizarlo:
- Fuente del botón: Establece la fuente y el tamaño del botón
- Button Font Color (Color de la Fuente del Botón)
- Button Background Color (Color de Fondo del Botón)
- Color del borde del botón: Ajusta el color del borde establecido con el ajuste Ancho del borde del botón
- Button Border Width (Ancho del Borde del Botón)
- Button Padding (Relleno del Botón)
- Redondeado del botón
- Separación del Botón: Ajusta la posición del botón
Luego de que hayas terminado, haz clic en Guardar.
Consejo: Puedes ajustar la opacidad de cada ajuste de color.
Desplázate hacia abajo hasta la sección Bloque de imagen: Tarjeta para seleccionar estos ajustes. Los siguientes ajustes afectan todos los Bloques de imagen de tarjeta en tu sitio:
- Tamaño dinámico de la fuente: Modifica el tamaño del texto según el ancho del bloque y del navegador. El texto del título y del subtítulo no se modificará a un tamaño menor que 14 píxeles.
- Posición de los contenidos: Arriba, Centro, Abajo
- Alineación del texto: Izquierda, Centro, Derecha, Coincidente, Opuesta: Alinea el título con el subtítulo. Coincidente alinea el texto del mismo lado que la imagen. Opuesto alinea el texto del otro lado.
- Ancho de la imagen: Configura el tamaño de la imagen
- Fuente del título: Elige la fuente y el tamaño del título
- Color del título
- Fuente del subtítulo: Elige la fuente y el tamaño del subtítulo
- Color de subtítulo
- Color del enlace incorporado: Configura el color del enlace del título y del subtítulo
- Separación del título: Configura el espacio entre el título y el subtítulo
- Color de fondo de la tarjeta: Ajusta el fondo que aparece detrás del texto
- Relleno de la tarjeta: Elige el relleno a ambos lados del texto
- Separación de la tarjeta: Añade espacio entre la imagen y el fondo de la tarjeta
- Color de la superposición de la imagen: Agrega un filtro de color sobre la imagen
- Color de fondo del título: Añade un color detrás del título
Si agregaste un botón, usa estos ajustes para personalizarlo:
- Fuente del botón: Establece la fuente y el tamaño del botón
- Button Font Color (Color de la Fuente del Botón)
- Button Background Color (Color de Fondo del Botón)
- Color del borde del botón: Ajusta el color del borde establecido con el ajuste Ancho del borde del botón
- Button Border Width (Ancho del Borde del Botón)
- Button Padding (Relleno del Botón)
- Redondeado del botón
- Separación del Botón: Ajusta la posición del botón
Luego de que hayas terminado, haz clic en Guardar.
Consejo: Puedes ajustar la opacidad de cada ajuste de color.
Desplázate hacia abajo hasta la sección Bloque de imagen: Superposición para modificar estos ajustes. Los siguientes ajustes afectan todos los Bloques de imagen superpuesta de tu sitio:
- Tamaño dinámico de la fuente: Modifica el tamaño del texto según el ancho del bloque y del navegador. El texto del título y del subtítulo no se modificará a un tamaño menor que 14 píxeles.
- Posición de los contenidos: Arriba, Centro, Abajo
- Alineación del texto: Izquierda, Centro, Derecha, Coincidente, Opuesta: Alinea el título. Coincidente alinea el texto del mismo lado que la imagen. Opuesto alinea el texto del otro lado.
- Ancho de la imagen: Configura el tamaño de la imagen
- Superposición del título: Elige cuánto del título se superpondrá a la imagen. Esto afecta el tamaño del texto.
- Fuente del título: Elige la fuente y el tamaño del título
- Color del título
- Fuente del subtítulo: Elige la fuente y el tamaño del subtítulo
- Color de subtítulo
- Color del enlace incorporado: Configura el color del enlace del título y del subtítulo
- Separación del título: Configura el espacio entre el título y el subtítulo
- Color de la superposición de la imagen: Agrega un filtro de color sobre la imagen
- Color de fondo del título: Añade un color detrás del título
Si agregaste un botón, usa estos ajustes para personalizarlo:
- Fuente del botón: Establece la fuente y el tamaño del botón
- Button Font Color (Color de la Fuente del Botón)
- Button Background Color (Color de Fondo del Botón)
- Color del borde del botón: Ajusta el color del borde establecido con el ajuste Ancho del borde del botón
- Button Border Width (Ancho del Borde del Botón)
- Button Padding (Relleno del Botón)
- Redondeado del botón
- Separación del Botón: Ajusta la posición del botón
Luego de que hayas terminado, haz clic en Guardar.
Consejo: Puedes ajustar la opacidad de cada ajuste de color.
Desplázate hacia abajo hasta la sección Bloque de imagen: Collage para modificar estos ajustes. Los siguientes ajustes afectan todos los Bloques de imagen de collage en tu sitio:
- Tamaño dinámico de la fuente: Modifica el tamaño del texto según el ancho del bloque y del navegador. El texto del título y del subtítulo no se modificará a un tamaño menor que 14 píxeles.
- Posición de los contenidos: Arriba, Centro, Abajo
- Alineación del texto: Izquierda, Centro, Derecha, Coincidente, Opuesta: Alinea el título con el subtítulo. Coincidente alinea el texto del mismo lado que la imagen. Opuesto alinea el texto del otro lado.
- Ancho de la imagen: Configura el tamaño de la imagen
- Ancho del contenido: Elige el ancho de la leyenda. Esto afecta el tamaño del texto.
- Superposición del contenido: Elige cuánto de la leyenda se superpondrá a la imagen. Esto afecta el tamaño del texto.
- Fuente del título: Elige la fuente y el tamaño del título
- Color del título
- Fuente del subtítulo: Elige la fuente y el tamaño del subtítulo
- Color de subtítulo
- Color del enlace incorporado: Configura el color del enlace del título y del subtítulo
- Separación del título: Configura el espacio entre el título y el subtítulo
- Fondo de la tarjeta: Ajusta el color del fondo que aparece detrás de la leyenda
- Relleno de la tarjeta: Elige el relleno a ambos lados de la leyenda
- Color de la superposición de la imagen: Agrega un filtro de color sobre la imagen
Si agregaste un botón, usa estos ajustes para personalizarlo:
- Fuente del botón: Establece la fuente y el tamaño del botón
- Button Font Color (Color de la Fuente del Botón)
- Button Background Color (Color de Fondo del Botón)
- Color del borde del botón: Ajusta el color del borde establecido con el ajuste Ancho del borde del botón
- Button Border Width (Ancho del Borde del Botón)
- Button Padding (Relleno del Botón)
- Redondeado del botón
- Separación del Botón: Ajusta la posición del botón
Luego de que hayas terminado, haz clic en Guardar.
Consejo: Puedes ajustar la opacidad de cada ajuste de color.
Desplázate hacia abajo hasta la sección Bloque de imagen: Pila para modificar estos ajustes. Los siguientes ajustes afectan todos los Bloques de imagen en pila de tu sitio:
- Tamaño dinámico de la fuente: Modifica el tamaño del texto según el ancho del bloque y del navegador. El texto del título y del subtítulo no se modificará a un tamaño menor que 14 píxeles.
- Alineación del texto: Izquierda, Derecha, Centro
- Fuente del título: Elige la fuente y el tamaño del título
- Color del título
- Fuente del subtítulo: Elige la fuente y el tamaño del subtítulo
- Color de subtítulo
- Color del enlace incorporado: Configura el color del enlace del título y del subtítulo
- Separación del título: Configura el espacio entre el título y el subtítulo
- Fondo de la tarjeta: Ajusta el color del fondo que aparece detrás de la leyenda
- Relleno de la tarjeta: Elige el relleno a ambos lados de la leyenda
- Color de la superposición de la imagen: Agrega un filtro de color sobre la imagen
Si agregaste un botón, usa estos ajustes para personalizarlo:
- Fuente del botón: Establece la fuente y el tamaño del botón
- Button Font Color (Color de la Fuente del Botón)
- Button Background Color (Color de Fondo del Botón)
- Color del borde del botón: Ajusta el color del borde establecido con el ajuste Ancho del borde del botón
- Button Border Width (Ancho del Borde del Botón)
- Button Padding (Relleno del Botón)
- Redondeado del botón
- Separación del Botón: Ajusta la posición del botón
Luego de que hayas terminado, haz clic en Guardar.
Consejo: Puedes ajustar la opacidad de cada ajuste de color.
Bloques de imágenes en dispositivos móviles
Cada diseño del Bloque de Imagen conserva su formato en móviles. El texto se moverá en el móvil para ajustarse al dispositivo y que conservará una posición similar con relación a la imagen.
- Para ver cómo lucirá tu Bloque de Imagen, usa la Vista de Dispositivo.
- Excepto con los diseños Incorporado y Apilado, las leyendas conservan su ancho establecido con relación a la imagen. Esto significa que las leyendas más largas pueden ser más difíciles de leer.
- Las leyendas de los diseños de Tarjeta, Collage y Superpuesto se mueven por la imagen hasta quedar debajo 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 Verticales se alinean verticalmente en móviles.
Próximos pasos
Una vez configurado el Bloque de imagen, puedes seguir estos pasos para reorganizarlo, editarlo o eliminarlo:
- Arrastra y suelta el bloque para moverlo o para crear filas y columnas. Si deseas informarte mejor, consulta Mover bloques.
- Usa el Editor de imágenes para recortar, rotar o añadir filtros a las imágenes.
- Reemplaza la imagen con un clic en Borrar, en la pestaña Contenidos del editor de bloques y, luego, sube una imagen nueva. De este modo, no deberás agregar un nuevo Bloque de imagen.
- Para crear un efecto de imagen de anuncio con el bloque, muévelo a la parte superior de la página. Para informarte mejor, visita Añadir una imagen de banner.
- Borra el bloque.
Preguntas frecuentes
La imagen está de costado
Si el archivo de la imagen aparece de costado cuando lo subes, aparecerá así en tu sitio. Para rotar la imagen, usa el Editor de imágenes.
Cuando las subo, mis imágenes tienen otros colores
Si una imagen está guardada en modo CMYK, en lugar de en modo RGB, sus colores en tu sitio de Squarespace pueden diferir de lo que ves 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.