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:
- 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 Cómo agregar contenido con bloques.
- Utiliza la pestaña Contenido para agregar una imagen y un enlace de imagen.
- Haz clic en la pestaña Diseño para cambiar el diseño y animar el bloque.
- 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:
- Para obtener los mejores resultados, utiliza una imagen de menos de 500 KB. Para obtener más sugerencias sobre el formato de imagen, visita Cómo dar formato a las imágenes para que se muestren en el sitio web.
- Puedes editar la imagen después de cargarla mediante el editor de imágenes.
- El bloque de imágenes no se mostrará en tu sitio web sin una imagen cargada.
Añade un enlace o botón en la imagen
En la pestaña Contenido, puedes convertir la imagen en un vínculo o agregar un botón a su diseño.
Para convertir la imagen en un vínculo en el diseño incorporado, agrega la URL al campo Vínculo o haz clic en 
para ver opciones adicionales.
Ten en cuenta lo siguiente:
- Habilitar una lightbox desactiva los enlaces URL clickthrough.
- El diseño alineado no soporta botones.
Para ver todos los demás diseños de bloque de imagen, utiliza el menú desplegable Vínculo. 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
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 para acceder a opciones adicionales. Infórmate sobre cómo configurar el estilo del botón a continuación.
Diseños del Bloque de imagen
Estos son ejemplos del diseño de cada bloque de imagen, que puedes cambiar en la pestaña Diseño. 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 incorporados muestran leyendas opcionales debajo de la imagen o superpuestos. Establece cómo se muestra la leyenda en la pestaña Contenido.
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 izquierda o a la derecha. 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 elegir en qué lado aparece la imagen, selecciona Imagen izquierda o Imagen derecha en la pestaña Diseño del bloque de imagen.
Los bloques de imagen superpuestos muestran imágenes en un lado con texto en el otro, superponiéndose parcialmente 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 dispositivos móviles o cuando se utilizan bloques de imagen en columnas.
Para elegir en qué lado aparece la imagen, selecciona Imagen izquierda o Imagen derecha en la pestaña Diseño del bloque de imagen.
Los bloques de imagen de Collage muestran imágenes en un lado y texto sobre “tarjetas” de fondo en el otro, desplazando y superponiendo la imagen. El texto generalmente se mueve hacia la esquina inferior de las imágenes en navegadores más pequeños y dispositivos móviles o cuando se usan bloques de imagen en columnas.
Para elegir en qué lado aparece la imagen, selecciona Imagen izquierda o Imagen derecha en la pestaña Diseño del bloque de imagen.
Los bloques de imagen apiladas muestran imágenes con texto debajo de ellas.
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:
- En el editor Bloque de imagen, haz clic en Diseño y, a continuación, en Animaciones.
- 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.
- 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 de collage con estas configuraciones:
- Animación: Personalizado
- Animación de imagen: Deslizar desde la derecha
- Animación de texto: Deslizar desde la izquierda
Añadir texto
En el bloque de imagen, haz clic en Escribir una leyenda aquí, Escribir un título aquí o Escribir un subtítulo aquí para agregar texto a la imagen.
Para obtener los mejores resultados, procura que el texto sea breve. Intenta limitar los subtítulos a una o dos oraciones. Esto mantiene un buen equilibrio entre las palabras y la imagen. También mantiene el texto visible en dispositivos móviles.
Consejo: resalta el texto para hacer cambios básicos de formato con la barra de herramientas de texto, como negrita o cursiva o bien, agregar un vínculo.
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
- Texto de estilo en el panel Estilos del sitio (versión 7.1) o Estilos del sitio para la plantilla (versión 7.0)
- Automáticamente pasa a ser el texto alternativo
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 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 temporalmente el estilo de la 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:
- Dos campos de texto, uno arriba del otro
- Texto de estilo en el panel Estilos del sitio (versión 7.1) o Estilos del sitio para la plantilla (versión 7.0)
- En la versión 7.1, para cambiar la alineación o el espaciado del texto, aplica estilo al bloque de imagen.
- Agrega texto alternativo manualmente en el campo Nombre de archivo de la pestaña Contenido.
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 incorporados conservan el ancho del archivo de imagen original. Si el archivo es más estrecho que el área de contenido, verás espacio en blanco en ambos lados de la imagen. Esto conserva la calidad de la imagen original. Para rellenar el espacio en blanco y mostrar la imagen al ancho completo del bloque, activa la opción Expandir en la pestaña Diseño del bloque. Si una imagen se expande, puede afectarse la 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.
Para cambiar el tamaño y el recorte de 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.
Para cambiar el tamaño y el recorte de la imagen:
- Para cambiar el ancho de la imagen, utiliza el retoque Ancho de imagen al aplicar estilo al bloque de imagen.
- Para recortar la imagen original, utiliza el editor de imágenes.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
Para cambiar el tamaño y el recorte de la imagen:
- Para cambiar el ancho de la imagen, utiliza el retoque Ancho de imagen al aplicar estilo al bloque de imagen.
- Para recortar la imagen original, utiliza el editor de imágenes.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
Para cambiar el tamaño y el recorte de la imagen:
- Para cambiar el ancho de la imagen, utiliza el retoque Ancho de imagen al aplicar estilo al bloque de imagen.
- Para recortar la imagen original, utiliza el editor de imágenes.
- 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.
Para cambiar el tamaño y el recorte de la imagen:
- Para recortar la imagen original, utiliza el editor de imágenes.
- Para reducir todo el Bloque de imagen, añade bloques a cada lado de ella.
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.
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.
Versión 7.1
En la versión 7.1, algunos diseños tienen su propia configuración de estilo en el panel Estilos del sitio. Para dar estilo a fuentes y colores, puedes:
- Cambiar las fuentes del bloque en el panel Fuentes. El tamaño de fuente del botón coincide con el del Párrafo 2.
- Cambiar los colores del bloque de la sección de ese bloque en el panel Colores.
- Personalizar los colores del tema para los elementos de los bloques, como título, superposición de imagen o fondo del botón.
Para aplicar estilo a otros elementos del bloque de imagen, como la alineación del texto o el ancho del contenido:
- Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Bloques de imagen.
- Desplázate hasta la sección de cada diseño para cambiar sus ajustes. Ve los ajustes específicos para cada diseño a continuación.
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.
Desplázate hacia abajo hasta la sección Bloque de imagen: Póster para seleccionar estos ajustes. Estos afectan a todos los bloques de imágenes de póster del sitio:
- Alineación del texto: Izquierda, Centro, Derecha ; alinear el título y el subtítulo
- Ancho del contenido: establece el ancho de la leyenda.
- Separación del título: configura el espacio entre el título y el subtítulo
- Separación del Botón: ajusta la posición del botón
Desplázate hacia abajo hasta la sección Bloque de imagen: Tarjeta para cambiar estos ajustes. Estos afectan todos los bloques de imagen de tarjeta del sitio:
- 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
- Separación de imagen : establece el espacio entre la imagen y el texto
- Separación del título: configura el espacio entre el título y el subtítulo
- Separación del Botón: ajusta la posición del botón
Desplázate hacia abajo hasta la sección Bloque de imagen: Superposición para cambiar estos ajustes. Estos afectan todos los bloques de imágenes superpuestas del sitio:
- 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
- Superposición del título: Elige cuánto del título se superpondrá a la imagen. Esto afecta el tamaño del texto.
- Separación del título: configura el espacio entre el título y el subtítulo
- Separación del Botón: ajusta la posición del botón
Desplázate hacia abajo hasta la sección Bloque de imágenes: Collage para cambiar estos ajustes. Estos afectan todos los bloques de imágenes en collage del sitio:
- 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: establece el ancho de la leyenda.
- Superposición del contenido: Elige cuánto de la leyenda se superpondrá a la imagen. Esto afecta el tamaño del texto.
- Relleno de contenido : establece el relleno a cada lado de la leyenda
- Separación del título: configura el espacio entre el título y el subtítulo
- Separación del Botón: ajusta la posición del botón
Desplázate hacia abajo hasta la sección Bloque de imágenes: Apilar para cambiar estos ajustes. Estos afectan todos los bloques de imágenes apiladas del sitio:
- Alineación del texto: Izquierda, Centro, Derecha ; alinear el título y el subtítulo
- Separación de imagen : establece el espacio entre la imagen y el texto
- Separación del título: configura el espacio entre el título y el subtítulo
- Separación del Botón: ajusta la posición del botón
Versión 7.0
En la versión 7.0, algunos diseños tienen su propia configuración de estilo en Estilos del sitio. 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 : alinea el título y el subtítulo
- 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 retoque de color.
Desplázate hacia abajo hasta la sección Bloque de imagen: Tarjeta para cambiar 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 retoque de color.
Desplázate hacia abajo hasta la sección Bloque de imagen: Superposición para cambiar 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 retoque 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 en 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 retoque de color.
Desplázate hacia abajo hasta la sección Bloque de imagen: Apilada para modificar estos ajustes. Los siguientes ajustes afectan todos los Bloques de imágenes apiladas 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 retoque de color.
Bloques de imágenes en dispositivos móviles
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 Póster, predeterminado para una cantidad limitada de texto.
- Las leyendas para el diseño Tarjeta se desplazan desde junto a la imagen hacia debajo de la imagen. Para los diseños Collage y 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 Verticales se alinean verticalmente en 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.