Bloques

Bloques »Bloque Imagen

Utiliza el bloque Imagen para reforzar visualmente tus páginas y entradas.

Tabla de Contenido

Añadir un bloque Imagen

Añade el bloque Imagen a una página haciendo clic en el botón Añadir bloque. También puedes escribir /imagen y pulsar Intro.

Añade imágenes con un comando de combinación de teclas.
Añade imágenes con un comando de barra diagonal.

Encontrarás instrucciones detalladas sobre cómo añadir bloques aquí.


Añadir una imagen

El panel Opciones de medios se cargará con tres opciones, Subir, Elegir imagen e Insertar desde URL.

Hay tres formas de añadir imágenes: Subir, Elegir imagen e Insertar desde URL.
  • Subir te permite elegir una imagen de tu ordenador y subirla a tu sitio.
  • Elegir imagen te permite elegir entre las imágenes actuales de tu sitio (biblioteca multimedia) o elegir en Google Fotos o la biblioteca de Imágenes gratuitas de Pexels.
  • Insertar desde URL permite utilizar una imagen que ya esté disponible en internet.

Obtén más información acerca de la biblioteca de imágenes gratuitas.


Barra de herramientas de bloques

Cada bloque tiene sus propios controles específicos para que puedas modificarlo en el editor. Este es el aspecto de la barra de herramientas del bloque Imagen:

Los iconos de la barra de herramientas del bloque Imagen son estos, de izquierda a derecha:

  • Cambiar tipo de bloque
  • Subir o bajar el bloque
  • Cambiar alineación (izquierda, centro y derecha + opciones de ancho y ancho completo si el tema es compatible)
  • Insertar enlace
  • Reemplazar imagen
  • Más opciones

Alinear imágenes

Si quieres alinear una imagen dentro de un párrafo, antes tendrás que insertarla justo encima del bloque de párrafo en el que la quieras alinear.

Haz clic en la imagen y elige la alineación izquierda o derecha para que la imagen se fusione en el bloque de párrafo.

Finalmente, cambia el tamaño de la imagen hasta que tenga la anchura y la altura que quieres.


Imágenes de Ancho amplio y Ancho completo

A medida que los temas vayan siendo compatibles con el nuevo editor, empezarás a ver iconos para las imágenes de Ancho amplio y Ancho completo. Estos dos tamaños de imagen te permitirán ampliar la imagen más allá del ancho de los contenidos normales de un tema.

Una imagen de Ancho amplio en el editor.

Ajustes del enlace

Con las opciones de configuración de enlace puedes añadir hiperenlaces a tus imágenes. Puedes elegir si, al hacer clic en la imagen, se abre una página de adjuntos, el archivo multimedia original o la URL personalizada que tú prefieras.

Si eliges una URL personalizada, introduce la URL a la que quieres que enlace la imagen en el cuadro de texto que se muestra. Si haces clic en la flecha hacia abajo situada junto al cuadro de texto, puedes elegir si abrir o no el enlace en una nueva pestaña.

Además, si quieres enlazar una imagen a una página o a una entrada en tu sitio, puedes empezar a escribir el título de la página o de la entrada en el campo de búsqueda. Después, puedes elegirlo de entre los resultados y enlazar la imagen a esa página o entrada.

Tu imagen puede enlazar a una Página de adjuntos, un Archivo multimedia o una URL personalizada.

Cambiar el tamaño de las imágenes

En cuanto hayas añadido la imagen al editor, podrás cambiarle el tamaño y alinearla para que encaje mejor en el contenido que la rodea.

Cambia el tamaño de la imagen arrastrando sus controladores.
Cambia el tamaño de la imagen arrastrando sus controladores.

Para cambiar el tamaño de una imagen, haz clic en ella para que se muestren los controladores. Después, haz clic en los controladores y arrastra hasta que la imagen tenga el tamaño que buscas.

Para cambiar el tamaño de una imagen, haz clic en ella para que se muestren los controladores. Después, haz clic en los controladores y arrastra hasta que la imagen tenga el tamaño que buscas.

También puedes cambiar el tamaño de la imagen con precisión ajustando el ancho y la altura en las opciones de configuración del bloque, a la derecha. También tienes opciones de configuración del bloque muy cómodas para que la imagen pase a ocupar un 100 %, un 75 %, un 50 % y un 25 % de su tamaño original.


↑ Tabla de Contenido ↑

Leyendas

Puedes añadir leyendas a las imágenes de dos formas diferentes. Si quieres añadir una leyenda a una única imagen, escríbela en el espacio correspondiente debajo de la imagen, en el editor.

Si quieres añadir la misma leyenda para que aparezca todas las veces que sea vea una imagen, añade la leyenda a la imagen desde la biblioteca multimedia haciendo clic en el botón Reemplazar → Editar en el bloque Imagen.


↑ Tabla de Contenido ↑

Ajustes del bloque

Cada bloque dispone de opciones específicas en la barra lateral del editor que pueden proporcionar más opciones de personalización de las que se encuentran en la barra de herramientas de bloques. Si no ves la barra lateral, haz clic en el icono del engranaje, situado junto al botón Publicar.

Las opciones de configuración del bloque se encuentran en la barra lateral.
Las opciones de configuración del bloque se encuentran en la barra lateral.

↑ Tabla de Contenido ↑

Ajustes de imagen

Las imágenes pueden modificarse a través de los porcentajes o las dimensiones de píxeles.

En las opciones de configuración de imagen hay un campo de texto en el que puedes añadir una descripción de Texto alternativo, que es muy importante para la accesibilidad y la SEO.

También puedes cambiar las dimensiones de ancho o altura de una imagen en incrementos del 25 % o indicando las dimensiones de píxel exactas.

Hay muchas formas de cambiar el tamaño de una imagen desde el editor de WordPress.
Hay muchas formas de cambiar el tamaño de una imagen desde el editor de WordPress.

↑ Tabla de Contenido ↑

Avanzado

La pestaña Avanzado permite añadir una clase CSS al bloque, para escribir CSS personalizado y dar estilo al bloque Imagen. Saber más.

La pestaña Avanzado te permite añadir una clase CSS al bloque.
La pestaña Avanzado te permite añadir una clase CSS al bloque.

↑ Tabla de Contenido ↑

Opciones adicionales de AMP disponibles con los planes Business y eCommerce

En los planes Business y eCommerce, el bloque Imagen incluye las siguientes opciones:

  • AMP noloading: activa esta opción si quieres esconder el símbolo de carga que aparece mientras las incrustaciones de la página AMP se están cargando.
  • Efecto AMP Lightbox: activa esta opción para autorizar el componente AMP image lightbox, que permite que las imágenes AMP se expandan para rellenar toda la ventana gráfica.
Configuración de AMP en el bloque Imagen en los sitios con planes Business y eCommerce

Además, tienes distintas opciones de configuración del diseño de AMP. El diseño HTML de AMP te explica estos atributos.

Páginas: 1 2