Los Bloques de Imagen añaden imágenes individuales a las páginas y publicaciones del blog. Puedes subir tus propias imágenes o adquirir licencias para imágenes de Getty Images.
Hay seis diseños del Bloque de Imagen y su diseño y comportamiento se mantiene consistente en todas las plantillas.
Nota: Los estilos de la leyenda en el diseño Alineado los determina tu plantilla.
Consejo: Otras formas de añadir imágenes al sitio incluyen las imágenes de cabecera, las imágenes de fondo, los Bloques de Galería y las Páginas de Galería.
Mira el video
Comparación del Bloque de Imagen
Aquí tienes una descripción de las diferencias entre los seis diseños del Bloque de Imagen, con un ejemplo de cómo se puede ajustar el estilo de cada uno.
Poster (Póster)
El Bloque de Imagen de Póster muestra el texto sobre la imagen.
Card (Tarjeta)
El Bloque de Imagen Tarjeta alinea el texto a la izquierda o a la derecha de una imagen.
Overlap (Superpuesta)
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.
Collage (Collage)
El Bloque de Imagen Collage muestra una imagen a un lado y texto sobre una "tarjeta" de fondo, que desplaza y se superpone a la imagen.
Apilada
El Bloque de Imagen Apilado muestra una imagen con texto debajo, con un color de fondo opcional.
Inline (Alineado)
El Bloque de Imagen Alineado muestra una imagen simple con una leyenda opcional (nuestro Bloque de Imagen clásico).
Mézclalos y combínalos
Puedes mezclar y combinar varios estilos de Bloques de Imagen en una página o publicación.
- Cada diseño tiene sus propias opciones de estilo.
- Las opciones de estilo de diseño son universales para el sitio. Por ejemplo, cada Bloque de Imagen Póster de tu sitio tendrá el mismo estilo.
Leyendas frente a títulos y subtítulos
- The Inline layout supports one basic caption. This is best for displaying an artist name, crediting a media outlet, or displaying the image title. Learn about caption style options, which are set automatically.
Note: Captions won't display if the Image Block is empty.
- Todas las demás leyendas ofrecen campos para títulos y subtítulos. Tienen más opciones de estilo y enfatizan más el texto, creando más interacción entre la imagen y las palabras. Para más información, visita las guías para los diseños Póster, Tarjeta, Superpuesta, Collage y Apilada.
Los estilos de diseños tienen diferentes ventajas:
| Inline (Alineado) | Todos los demás diseños |
|
|
Paso 1 - Agrega el Bloque de Imagen
Para añadir cualquier Bloque de Imagen:
- Abre una página o un editor de publicación.
- Haz clic en un punto de inserción o en el signo +.
- Bajo Image Layouts (Diseños de Imagen), selecciona Poster (Póster), Card (Tarjeta), Overlap (Superpuesta), Collage (Collage) o Stack (Apilada). Para el diseño Inline (Alineado), selecciona Image (Imagen) en la sección Basic (Básico).
Paso 2 - Añade una imagen
Consejo: Te recomendamos mantener tus imágenes por debajo de 500 KB para obtener mejores resultados. Para conocer más, visita Ajustar el formato de las imágenes para exhibirlas en la web.
Opción 1 - Agrega tu propia imagen
In the Edit Image window, drag your image into the image uploader. You can also click Upload an Image to select a file from your computer. Click Apply.
Option 2 - Use a stock image
With our stock image integrations, you can add free and premium stock images directly from your site. This is a great option if you don't already have an image to use.
Click Search For Image to search, preview, and add a stock image for your thumbnail. To learn more, visit Searching and adding stock images.
Paso 3 - Añade y cambia el estilo del texto (opcional)
Haz clic en Write here (Escribir aquí) para añadir una leyenda o un título y subtítulo a la imagen.
Los campos de texto y las opciones de estilo varían según el diseño:
- The Poster, Card, Overlap, Collage, and Stack layouts have style options in the Site Styles panel. They also support buttons.
- El estilo de leyenda para el diseño Alineado se establece automáticamente (en general después del cuerpo del texto).
Para la mejor visualización, mantén el texto 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.
Consejo: También puedes crear un texto alternativo para ayudar a los motores de búsqueda a reconocer tu imagen.
Paso 4 - Ajusta la configuración del diseño
En la pestaña Design (Diseño):
- Para el diseño Alineado, ajusta el aspecto de la leyenda, la configuración de lightbox y los enlaces URL.
- Para los diseños de Póster, Tarjeta, Superpuesta, Collage o Apilada, usa el menú desplegable Image Link (Enlace de Imagen) para añadir un botón o enlace URL.
- Configura la Image Position (Posición de la Imagen) para los diseños Tarjeta, Superpuesta o Collage.
Paso 5: Guarda
Haz clic en Apply (Aplicar) para guardar los cambios en el bloque.
Paso 6 - Personaliza el diseño
The Poster, Card, Overlap, Collage, and Stack Image Blocks have their own style settings in the Site Styles panel. The preview of the image on your page will change so you can view the changes in real time. We recommend playing around with the settings until you find a design you like.
Para conocer más, visita nuestras guías de diseño:
Add animation
We're testing new animation options on a small number of randomly selected sites. If you’re in this group, you can add visual effects to Image Blocks. Visitors will see the animations when they load or refresh the page.
To add animation:
- In any Image Block editor, click the Animations tab. (If you don't see the Animations tab, your site isn't in the test group.)
- Select an effect from the Animate Image Block drop-down menu to apply to the image and any text. As you select an option, you’ll see a preview of how it loads on the page.
Choose from:
- Fade In - Block fades in
- Focus In - Block looks blurry, then comes into focus
- Slide Up - Block slides upward
- Collide - Image and text slide inward from the sides
- Reveal - Image and text slide outward from the center
- Custom - Choose separate image and text animations
- To animate the image and text separately, select Custom, then select options for Animate Image and Animate Image Text.
Choose from:
- Fade In - Image or text fades in
- Slide Up - Image or text slides upward
- Slide Down - Image or text slides downward
- Slide from Left - Image or text slides in from the left
- Slide from Right - Image or text slides in from the right
Animations are only available in a small number of sites, selected randomly. Since we’re currently testing this feature, we can’t add it to sites that don’t have it. We hope to add this feature to all sites in the near future.
Mover el Bloque de Imagen
Después de guardar la imagen, arrastra y suelta el bloque en cualquier lugar de la página. También puedes utilizar este método para ajustar el texto alrededor de la imagen. Para obtener más información, consulta Mover bloques.
Establecer que la imagen se abra en lightbox
Solo el diseño Alineado soporta lightbox. Para que la imagen se abra en lightbox:
- Haz doble clic en la imagen para abrirla en el editor de imagen.
- Haz clic en la pestaña Diseño .
- Asegúrate de que el diseño esté configurado como Alineado.
- Marca la opción Habilitar Lightbox.
- Elige el estilo de tu lightbox con el menú desplegableTema del Lightbox.
Nota: Las leyendas siempre se muestran en lightbox. Una lightbox anula el enlace URL.
Editar la imagen con el Editor de imagen Adobe Creative Cloud
Haz clic en Editar para girar, cortar o añadir filtros a la imagen con el editor de imagen Adobe Creative Cloud.
Elimina o reemplaza la imagen
Para eliminar el bloque, haz clic en el ícono de la papelera de reciclaje en la página o en el editor de la publicación.
Para eliminar la imagen sin quitar el bloque, abre el Editor del Bloque de Imagen y haz clic en Remove (Eliminar). Entonces podrás reemplazarla con otra imagen.
Cambia el diseño
Puedes cambiar el diseño a uno diferente en la pestaña Diseño del Editor del Bloque. De esta manera, podrás cambiar el diseño y el comprotamiento de tu imagen sin eliminar y volver a añadir el bloque.
- Haz doble clic en el editor de página.
- Haz clic en la pestaña Diseño .
- Selecciona el nuevo diseño.
- A medida que haces una selección, la vista previa de la imagen en tu página cambiará para que puedas ver los cambios en tiempo real.
Consejo: Cuando cambies entre el diseño Alineado y otro diseño, tendrás que volver a ingresar el texto de la imagen.
Añade un enlace o botón en la imagen
Hay dos maneras de crear enlaces en el Bloque de Imagen:
- Convierte a la imagen misma en un enlace.
- Añade un botón debajo del título y subtítulo (todos los diseños, excepto Inline [Alineado])
Diseño Alineado
Añade un enlace URL desde la pestaña Design (Diseño) del editor de bloques para crear un enlace en tu imagen.
- Habilitar una lightbox desactiva los enlaces URL.
- El diseño alineado no soporta botones.
Todos los demás diseños
En la pestaña Design (Diseño) del editor de bloque, crea un enlace desde el menú desplegable Image Link (Enlace a Imagen). Elige entre:
- None (Ninguno): sin enlace
- On Image (En la imagen): toda la imagen se convierte en un enlace URL
- Button (Botón): Añade un botón alineado con el texto, por debajo del título y el subtítulo
Usa el campo Clickthrough URL (Enlace URL) para configurar el enlace para la imagen o botón. Puedes crear un enlace de tu imagen con otra página de tu sitio, un sitio externo o un archivo.
Use the Site Styles panel to customize the button. Scroll down to the section for that layout to adjust these tweaks:
- Button Font (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)
- Button Border Color (Color del Borde del Botón): ajusta el color del borde establecido con el ajuste Button Border Width (Ancho del Borde del Botón)
- Button Border Width (Ancho del Borde del Botón)
- Button Padding (Relleno del Botón)
- Button Rounding (Redondeado del botón)
- Button Separation (Separación del Botón): ajusta la posición del botón
Reajusta el tamaño o recorta la imagen
Para todos los diseños:
- Añade bloques a cualquier lado para reducir todo el Bloque de Imagen.
- Para recortar la imagen original, usa el Editor de Imagen Adobe Creative Cloud o un software de terceros.
Cada diseño tiene opciones adicionales para recortarlo y ajustar el tamaño:
Crear todo el texto
El texto alternativo ayuda a que los motores de búsqueda reconozcan tu imagen.
Las leyendas añadidas en el diseño alineado se convertirá en texto alternativo para la imagen. Para añadir un texto alternativo, pero no una leyenda, añade el texto de la leyenda, y seleccione Do Not Display Caption (No Mostrar la Leyenda).
Para todos los demás diseños, las leyendas no se convierten en texto alternativo, pero aún puede configurarlo manualmente en el diseño alineado:
- Abre el editor de bloque.
- En la pestaña Design (Diseño), elige el diseño Inline (Alineado).
- Usa el campo leyenda para añadir el texto alternativo.
- Cambia a cualquier otro diseño y añade cualquier texto que quieras mostrar en la leyenda. El texto que añadiste en el diseño Alineado continuará como texto alternativo.
Consejo: Si no ves el texto Write here (Escribe aquí) con el diseño alineado, cambia temporalmente el diseño de la leyenda a Caption Below (Leyenda Debajo) en la pestaña Design (DIseño).
Usa una imagen como cabecera de página
Para consejos sobre cómo usar un Bloque de Imagen como cabecera de página, visita Añadir una imagen de cabecera.
Bloques de imagen en móvil
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.
- With the exception of Inline and Stack layouts, captions maintain their set width relative to the image. This means that longer captions may be harder to read.
- Captions for the Card, Collage, and Overlap layouts move from alongside the image to below the image.
- The Card, Collage, Overlap, and Stack layouts have a Dynamic Font Sizing option in the Site Styles panel. When this is enabled, text won't resize smaller than 14 pixels.
- Varios Bloques Verticales se alinean verticalmente en móviles.
Preguntas frecuentes
La imagen está de costado
Esto puede ocurrir si la imagen original fue tomada de costado y se carga directamente sin girarla en un programa de edición de imágenes antes.
Para girar la imagen, puedes utilizar el Editor de Imagen Adobe Creative Cloud o editarla en un programa externo y volver a cargarla.
Mis imágenes aparecen en colores diferentes
Esto ocurre cuando una imagen se guarda en modo CMYK en lugar de en modo RGB .
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 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.
¿Cuál es el tamaño de archivo recomendado?
Mientras que el Bloque de Imagen tiene un límite de tamaño de archivo de 20 MB, recomendamos mantener las imágenes en un tamaño menor a 500 KB para obtener los mejores resultados. Para obtener más información, consulta Ajustar el formato de las imágenes para exhibirlas en la web.