En Bloque de imágenes de WordPress es súper útil para insertar y mostrar una sola imagen en tu sitio web. Pero si quieres mostrar varias fotos a la vez, el bloque Galería es la opción correcta.
Por lo tanto, debes aprender a usar el bloque de galerías en WordPress. Una vez que domines las funciones del bloque de galerías, podrás utilizarlo para mejorar el aspecto visual de tu sitio web, haciéndolo más profesional y atractivo.
Hoy, en este tutorial, hablaremos del bloque de galería de WordPress, las características de la barra de herramientas, las opciones de personalización y cómo usarlo correctamente. Asegúrate de seguirnos de principio a fin.
¿Qué es el bloque de galería de WordPress?
El bloque Galería de WordPress es un bloque central en el Editor de bloques de WordPress. Te permite crear y mostrar una colección de imágenes en un cuadrícula formato. Es perfecto para mostrar fotos de eventos, organizar imágenes en un diseño atractivo o presentar imágenes con el mínimo esfuerzo.
Ciertas características le benefician cuando utiliza el bloque. Descúbralas a continuación.
- Personalización: Ajusta las columnas, el espaciado y los pies de foto para adaptarlos a tu diseño. También puede establecer diferentes resoluciones para imágenes individuales en la galería.
- Diseño adaptable: Las imágenes se adaptan automáticamente a los distintos tamaños de pantalla para ofrecer una experiencia fluida en móviles, tabletas y ordenadores de sobremesa.
- Integración incorporada: No hay necesidad de plugins adicionales; el bloque funciona de forma nativa en WordPress.
- SEO-Friendly: El texto alternativo y las leyendas pueden mejorar la accesibilidad de tu contenido y su posicionamiento en los motores de búsqueda. También puedes configurar el texto ALT para imágenes individuales dentro de la galería.
Funciones de la barra de herramientas del Bloque de Galería
Cuando insertas el bloque de galería, aparece una barra de herramientas en la parte superior del bloque de galería con varias funciones para personalizar tu galería. Estas funciones se muestran a continuación.
- Transfórmate: Puede transformar este bloque en un bloque de Imagen, Columnas, Detalles y Grupo.
- Arrastra: Permite arrastrar y soltar el bloque dedicado en cualquier lugar del editor.
- Asa móvil: Permite mover el bloque arriba y abajo.
- Alinear: La opción de alineación le permite ajustar la alineación de la imagen a Ninguna, Ancho, Ancho completo, Izquierda, Centro y Derecha.
- Enlace: Esta opción le permite añadir enlaces para el contenido seleccionado dentro del bloque.
- Pie de foto: Puedes añadir pies de foto utilizando la opción del editor para cada imagen.
- Añade: La opción de añadir permite añadir o cargar nuevas imágenes en la galería.
- Más opciones: Ofrece más opciones relacionadas con la sección del bloque, como duplicar, copiar, agrupar, etc.
Cómo utilizar el bloque de galería en WordPress
Usar el bloque de Galería en WordPress es simple. Solo sigue los pasos de abajo:
Paso 1: Añadir Bloque de Galería en el Editor
Abre la publicación o página, haz clic en el icono "+" para añadir un bloque y busca "Galería". Selecciona el Bloque de Galería para insertarlo en tu post o página.
Paso 2: Cargue sus imágenes
Puedes subir tus imágenes o seleccionarlas de la mediateca.
Cómo insertar imágenes mediante la opción de carga
Para insertar archivos de imagen, haga clic en el botón de carga, seleccione las imágenes con el cursor mientras que manteniendo pulsado el botón CTRL de tu teclado y haz clic en Abrir. Y ya está. Podrás ver tus imágenes en el editor.
Cómo insertar una imagen a través de la opción de biblioteca multimedia
Haga clic en el botón Biblioteca multimedia, seleccione sus imágenes y haga clic en el botón Crear una nueva galería e Insertar galería para insertar las imágenes en el editor.
Cuando hayas insertado todas las imágenes en la galería, podrás ver todas las funciones de la barra de herramientas del bloque de imágenes. Puedes comprobar esas funciones aquí.
Paso 3: Personalización de la galería
Para personalizar la galería, vaya a Ajustes (1) > Bloquear (2) > Ajustes (3). Encontrará las opciones de selección de columnas, resolución y otras opciones.
- Columnas: Las columnas le permiten determinar cuántas imágenes desea mostrar en su editor. Cuantas más imágenes añadas, más columnas se añadirán a la Galería. (4)
- Resolución: Puedes configurar la resolución de la imagen en Miniatura y Tamaño completo. (5)
- Recortar imágenes para ajustarlas: Esta función mantiene la proporción de cada imagen y hace que su tamaño se ajuste.
- Orden aleatorio: Esta función no mantiene la serie, sino que muestra imágenes en una serie aleatoria.
La opción Estilos presenta las siguientes opciones.
- Color: La opción de color le permite cambiar el color de fondo de su bloque Galería.
- Dimensiones: La opción Dimensiones le permite modificar el Espaciado entre bloques (espacio entre dos bloques como las imágenes), el Margen y el Relleno.
- Borde y radio: Con esta función, puede añadir un borde, un color de borde y un radio de borde a su galería.
Aquí está la demo completa de la galería que he creado.
Crea una galería interactiva con Galleryberg
Si bien el bloque de Galería predeterminado es excelente para cuadrículas simples, carece de funciones como lightbox, efectos de desplazamiento y diseños diversos.
Si quieres una galería más atractiva sin escribir código, la Galleryberg plugin es una alternativa gratuita que amplía el editor de bloques con herramientas adicionales. Te permite alternar entre diseños de mosaico, albañilería, justificado y cuadrado, y añade una luz incorporada para hacer zoom y navegar.
Galleryberg también incluye efectos sutiles al pasar el ratón y controles receptivos para que tus galerías se sientan modernas en escritorio y móvil.
Ahora veamos cómo usar el plugin Galleryberg.
Paso 1: Instalar el plugin Galleryberg
Ve a tu panel de WordPress y navega a Plugins → Añadir nuevo y busca Galleryberg. Luego instala y activa el plugin.
Paso 2: Inserta el bloque de Galería Galleryberg
Crea una nueva publicación/página o edita una existente. Haz clic en el botón “+”, busca Galleryberg y añade el bloque.
Paso 3: Agrega tus imágenes
Sube nuevas imágenes o selecciónalas de la Biblioteca de medios y haz clic en Seleccionar.
Paso 4: Elegir un diseño
Por defecto, el bloque utiliza un diseño de Mosaicos. En la barra lateral del bloque, puedes cambiar a Albañilería, Justificadoo Cuadrado para que coincida mejor con tu diseño.
Cada diseño reorganiza automáticamente las imágenes y puedes ajustar las columnas, el espaciado y los bordes.
Paso 5: Habilitar la lightbox
Conmutar Habilitar Lightbox en la configuración del bloque para permitir que los visitantes hagan clic en una imagen y la vean en una ventana emergente con zoom y navegación deslizante.
La lightbox incluye controles de teclado y táctiles, por lo que funciona perfectamente en ordenadores y teléfonos.
Paso 5: Explora los efectos de desplazamiento y las leyendas
Usa los ajustes de Leyenda para mostrar texto debajo de las imágenes o como una superposición que aparece al pasar el cursor. Las animaciones de paso de cursor de Galleryberg (zoom de entrada/salida y superposiciones) hacen que la galería se sienta interactiva sin distraer
Paso 6: Vista previa y publicación
Una vez satisfecho, previsualiza tu galería y publica o actualiza la entrada. Tu galería será adaptable y estará optimizada en rendimiento gracias a la renderización del lado del servidor.
¿Por qué usar Galleryberg en lugar del bloque principal?
El bloque Galería principal ofrece diseños de cuadrícula básicos pero carece de funciones como lightbox, animaciones al pasar el ratón y diseños variados. Galleryberg proporciona cuatro estilos de galería diferentes, un lightbox adaptable con zoom y navegación por teclado, y controles intuitivos para espaciado, colores y leyendas. Incluso admite efectos adaptables al pasar el ratón para añadir animaciones sutiles. Si necesitas una galería que anime a los visitantes a interactuar con tus imágenes y se integre perfectamente en el editor de bloques, Galleryberg es una solución ligera y fácil de usar.
Reflexiones finales
El Bloque de Galería es una potente herramienta con el editor de bloques Gutenberg. Te permite mostrar tus colecciones de imágenes sin necesidad de plugins adicionales.
Es una opción excelente para todos por su flexibilidad, opciones de personalización y perfecta integración con WordPress.
Pruébelo y vea cómo puede transformar la forma de mostrar imágenes en su sitio web.
Déjame saber tu opinión sobre el tutorial en la sección de comentarios. También, deje que sus compañeros saben acerca de él a través de su plataforma de medios sociales.
Más información
