Galería

El campo Galería permite a los editores elegir un conjunto completo de imágenes a la vez para un widget personalizado creado con los complementos maestros Creador de widgets. Su plantilla recorre el conjunto e imprime un elemento por imagen, por lo que el widget crece o se reduce con el número de fotos. Úselo para cuadrículas de fotos, paredes de portafolios, filas de logotipos y controles deslizantes de imágenes.

La galería es un campo profesional. El complemento gratuito incluye un Widget Builder limitado y viene con el conjunto completo de campos Complementos maestros Pro.

Qué hace el campo Galería #

• Agrega un cuadro de galería al panel de su widget en Elementor. Los editores eligen varias imágenes de la biblioteca multimedia de una sola vez.
• Las imágenes se almacenan como una lista, en el orden en que las organizó el editor. Cada imagen tiene un id y a url.
• Su plantilla imprime la lista con a {% for %} bucle.
• El diseño depende de su CSS. El bucle imprime los elementos y una cuadrícula o contenedor flexible los organiza.

Si aún no ha creado un widget, lea el Descripción general del creador de widgets primero.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Master Addons para Elementor y Master Addons Pro, ambos activos. El guía de instalación configuración de cubiertas.
• Algunas imágenes en tu Mediateca.
• Un widget abierto en Widget Builder. El ejemplo de esta guía es un widget “Photo Grid” con un campo Galería llamado photos.

Cómo agregar un campo de Galería #

1. Ir a Complementos maestros > Creador de widgets y abre tu widget.
2. En el Contenido pestaña, agregue una sección, por ejemplo “Galería”.
3. Tipo gallery en el cuadro de búsqueda de campo de la izquierda.
4. Arrastrar Galería en la sección. Su configuración se abre en la barra lateral izquierda.

Se explicaron las opciones del campo de galería #

• Etiqueta es el texto encima del cuadro de la galería en Elementor, por ejemplo “Fotos”.
• Nombre es el ID único del campo y la lista sobre la que realiza un bucle, por ejemplo photos. Sólo letras, números y guiones bajos.
• Descripción aparece bajo el control en Elementor.
• Imágenes predeterminadas tiene un Agregar imágenes botón que agrega una ranura de marcador de posición. Pase el cursor sobre una ranura para que una cruz la retire y un lápiz para elegir una imagen real para esa ranura.

En nuestras pruebas, las imágenes configuradas en Imágenes predeterminadas no se pasaron a Elementor. En su lugar, una nueva copia del widget comenzó con un único marcador de posición, que el bucle se lee como dos elementos vacíos. La siguiente plantilla se los omite, así que planifique que los editores agreguen sus propias imágenes después de soltar el widget en una página.

Los entornos comunes funcionan más abajo que en otros campos.

Pase las imágenes en su plantilla #

Una galería es una lista, entonces {{ photos }} por sí solo no imprime nada útil. Pásalo sobre él e imprime cada imagen dentro del bucle:

{% if photos %}
<div class="photo-grid">
  {% for img in photos %}
    {% if img.url %}
      <figure class="photo-cell">
        <img src="{{ img.url }}" alt="">
      </figure>
    {% endif %}
  {% endfor %}
</div>
{% endif %}

• photos es el nombre del campo. img es un nombre que elige para la imagen actual del bucle.
• {{ img.url }} es la URL del archivo de imagen y {{ img.id }} es su ID de biblioteca multimedia.
• El exterior {% if photos %} se salta toda la cuadrícula cuando la galería está vacía.
• El interior {% if img.url %} omite cualquier elemento sin URL, como el marcador de posición con el que comienza un nuevo widget.

Organice los elementos en la pestaña CSS. Esta cuadrícula forma tres columnas iguales y recorta cada foto con la misma forma:

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.photo-cell { margin: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

Hacer clic Guardar configuración cuando hayas terminado.

Utilice el control Galería en Elementor #

Agregue el widget a una página o recargue el editor si la página ya estaba abierta. El cuadro de la galería muestra cuántas imágenes se seleccionan y una miniatura de cada una. El icono de la papelera borra todo el conjunto.

Haga clic en las miniaturas para abrir la ventana de la galería de WordPress. Arrastre imágenes para cambiar su orden, haga clic Orden inverso para voltearlo, úsalo Añadir a la galería para elegir más imágenes y haga clic en la cruz de una imagen para eliminarla. Haga clic Insertar galería para guardar el conjunto. La cuadrícula se actualiza en el mismo orden.

Casos de uso comunes #

• Cuadrículas de fotografías y portafolios.
• Paredes con logotipos para clientes o socios.
• Deslizadores de imágenes, con el bucle imprimiendo una diapositiva por imagen.
• Antes y después o conjuntos de imágenes de producto dentro de una tarjeta.

Consejos para trabajar con el campo Galería #

• Envuelva siempre el marcado {% if img.url %} dentro del bucle, por lo que un nuevo widget no muestra cuadros de imagen vacíos.
• Usar aspect-ratio y object-fit: cover entonces se alinean fotos de diferentes tamaños.
• Deje que CSS decida las columnas. Una cuadrícula envuelve cualquier número de imágenes sin cambios de plantilla.
• Agregue un alt atributo. El bucle le proporciona el ID de la imagen si necesita imprimir un título o texto alternativo desde otro campo.
• Para una imagen, utilice el Campo de medios. Para imágenes que cada una necesita su propio texto o enlace, utilice el Campo repetidor.

Preguntas frecuentes #

Envolviendo #

Agregue el campo Galería, ensóquelo con {% for %}, omite elementos vacíos con {% if img.url %}, y deje que una cuadrícula CSS maneje el diseño. Luego, los editores agregan, eliminan y reordenan imágenes de Elementor. Ver el Guía de sintaxis de ramita para obtener más información sobre bucles y comprobaciones, y precios por lo que incluye cada plan.