Cómo agregar bloques de imágenes en el editor de WordPress Gutenberg - Calendae | Informática, Electrónica, CMS, Ciberseguridad

Cómo agregar bloques de imágenes en el editor de WordPress Gutenberg

Hola, un placer verte por aquí. Te habla Samuel López y en esta ocasión vamos a hablar sobre Cómo agregar bloques de imágenes en el editor de WordPress Gutenberg

En una publicación de blog anterior, explicamos que el nuevo editor de Gutenberg ha movido muchas características de texto clave a bloques. Lo mismo ocurre con las imágenes en Gutenberg.

En el antiguo editor de WordPress, puede hacer clic en «Agregar medios» y usar muchas imágenes y funciones multimedia de esa pantalla emergente. Todo cambió con Gutenberg.

En este tutorial, lo guiaré a través de las opciones para administrar imágenes en Gutenberg. También puede sobrecargar sus bloques de imágenes con plugins como Gutenberg avanzado que agregan más funciones multimedia.


Comience con las imágenes en Gutenberg

Hay al menos cinco formas diferentes de agregar imágenes al contenido con bloques de Gutenberg predefinidos. Hay cuatro bloques de imágenes, denominados Imagen, Galería, Portada y Archivo. También hay un bloque combinado llamado Medios y Texto.


Opción 1. El bloque de imágenes de Gutenberg

Para agregar una imagen base a su contenido de WordPress, haga clic en el icono + y elija el bloque «Imagen».

carga la imagen en el editor de gutenberg

Ahora puede cargar una imagen, seleccionar una de la biblioteca de medios o insertarla desde una URL. Esto es muy similar al proceso de carga de imágenes en el antiguo editor de WordPress.

opciones para cargar imágenes en el editor de gutenberg

La barra de herramientas en la esquina superior derecha del bloque de imagen le permite alinear la imagen. Los puntos azules en el borde de la imagen le permiten cambiar el tamaño de la imagen.

barra de herramientas para imágenes en el editor de gutenberg

Si ha optado por no sangrar la imagen, puede decidir el ancho de la imagen: «Ancho» o «Ancho completo». Ancho lo hará un poco más ancho que los bloques de texto, mientras que Ancho completo lo configurará para que se extienda por la pantalla. Esta configuración puede verse afectada por el tema.

Una función adicional útil le permite agregar fácilmente una imagen directamente desde su computadora sin seleccionar un bloque. Simplemente coloque el cursor del mouse donde desea que vaya la imagen y abra una carpeta con sus imágenes, luego arrastre la imagen de su elección a la página o publicación.

Arrastra para cargar imágenes en el editor de gutenberg

La configuración de la imagen de la derecha le permite ajustar el tamaño de la imagen a un ancho o alto específico o un porcentaje de píxeles. Aquí también puede escribir texto ALT, crear un enlace o agregar su propia clase CSS.

Opciones de imagen actualizadas en el editor de gutenberg


Opción 2. El bloque de texto y medios de Gutenberg

Acabamos de ver el bloque de imágenes más simple en Gutenberg. Este bloque se puede convertir a diferentes formatos: Medios y Texto, Galería, Portada y Archivo. Puede ver estas opciones haciendo clic en las flechas «izquierda y derecha» en la barra de herramientas del bloque.

Cambiar el tipo de bloque para imágenes en el editor de gutenberg

Los medios y el texto le permiten organizar su imagen junto al texto. Aquí hay un ejemplo que usa la configuración de ancho de relleno.

Imágenes de ancho completo en el editor de gutenberg

En la barra de configuración de la derecha, ha elegido apilar esta imagen y su texto relacionado en dispositivos móviles, agregar un color de fondo o una clase CSS adicional. El uso de un color de fondo puede ayudarlo a crear un área destacada en su página, creando un descanso visual. Aquí hay una vista previa:

Texto e imágenes multimedia en el editor de gutenberg


Opción No. 3. Usando el bloque Gallery en Gutenberg

La opción de galería le pide que cargue más imágenes y presenta una galería simple. La configuración en el lado derecho le permite decidir cuántas columnas usar y si recortar las imágenes automáticamente. Esta es una forma muy rápida y poderosa de agregar una galería.

Imágenes de la galería en el editor de gutenberg


Opción No. 4. Usando el bloque de cubierta en Gutenberg

El bloque de portada ofrece una excelente manera de mejorar visualmente su página. Estos bloques le permiten agregar un título o una descripción sobre una imagen.

Imágenes de portada en el editor de gutenberg

La barra de herramientas Bloques que se encuentra arriba le permite determinar el tamaño y la ubicación de la imagen y su texto, pero la columna de la derecha proporciona algunos controles creativos.

Puede seleccionar un color de superposición y decidir su opacidad. Y también puede optar por congelar la imagen de fondo, creando un interesante efecto de desplazamiento. Vale la pena experimentar con estos ajustes, ya que pueden ofrecer efectos maravillosos con gran facilidad. La pestaña Avanzado le permite configurar una clase CSS.

Texto en imágenes en el editor gutenberg


Opción No. 5. Usando el bloque Archivo en Gutenberg

La opción de archivo para bloques de imágenes puede ser útil si desea permitir que las personas descarguen fácilmente sus archivos de imagen. Si usa el bloque Archivo, su imagen se transformará automáticamente en un enlace de descarga. Sus visitantes no podrán ver la imagen, pero podrán descargar el archivo de imagen.

Archivos de imagen en el editor de gutenberg


El video introductorio a Gutenberg

WordPress 5 está aquí con un nuevo editor llamado Gutenberg que cambia la forma en que se crean y editan las publicaciones y las páginas. ¡Este video es tu guía completa de Gutenberg! Gracias a nuestros amigos de Glowhost para hacer posible este video: Ahorre un 60% en su primera factura cuando aloje su sitio de WordPress con GlowHost. Haga clic aquí y utilice el cupón «WPGUTENBURG».



Puedes compartir en en tu Twitter y Facebook para que tus amigos lo sepan

👇👇👇 😘 💪 👇👇👇

Comparte