¿Cómo utilizar Galerías de imágenes en el Editor de bloques de Waclis?

Las Galerías de imágenes del Editor de bloques de Waclis permiten presentar varias fotografías dentro de una misma composición visual.

Puedes utilizarlas para mostrar:

• productos;

• trabajos realizados;

• instalaciones;

• proyectos;

• eventos;

• ambientes;

• equipos;

• portfolios;

• colecciones;

• procesos;

• fotografías institucionales;

• casos de éxito;

• cualquier conjunto de imágenes que quieras presentar de manera organizada.

Waclis incluye diferentes diseños dentro de:

Secciones → Galerías de imágenes

Puedes elegir una composición prediseñada, incorporarla a tu Página web y después reemplazar las fotografías de ejemplo por tus propias imágenes.

¿Qué es una Galería de imágenes?

Una galería es una sección diseñada para mostrar varias imágenes relacionadas dentro de una composición.

Por ejemplo:

NUESTROS PROYECTOS

[ IMAGEN 1 ] [ IMAGEN 2 ] [ IMAGEN 3 ]

[ IMAGEN 4 ] [ IMAGEN 5 ] [ IMAGEN 6 ]

También puede utilizar una composición con fotografías de diferentes proporciones o tamaños, dependiendo del diseño elegido.

El objetivo es que el visitante pueda recorrer visualmente varias imágenes sin necesidad de crear una sección independiente para cada una.

¿Cuándo conviene utilizar una galería?

Utiliza una Galería de imágenes cuando las fotografías son una parte importante del contenido y quieres que varias estén visibles dentro de una misma área.

Por ejemplo:

Empresa de arquitectura

PROYECTOS REALIZADOS

[ Proyecto 1 ] [ Proyecto 2 ] [ Proyecto 3 ]
[ Proyecto 4 ] [ Proyecto 5 ] [ Proyecto 6 ]

Hotel

CONOCE NUESTRAS INSTALACIONES

[ Habitación ]
[ Piscina ]
[ Restaurante ]
[ Recepción ]
[ Jardín ]
[ Spa ]

Empresa de merchandising

TRABAJOS REALIZADOS

[ Remeras ]
[ Bolsos ]
[ Botellas ]
[ Cuadernos ]
[ Gorras ]
[ Lapiceras ]

Galería, Carrusel y Slider no son lo mismo

Antes de elegir una sección conviene distinguir estas alternativas.

Galería de imágenes

Muestra varias imágenes dentro de una composición donde normalmente el visitante puede visualizar varias fotografías al mismo tiempo.

Por ejemplo:

[ 1 ] [ 2 ] [ 3 ]

[ 4 ] [ 5 ] [ 6 ]

Carrusel

Organiza diferentes contenidos dentro de una estructura que puede desplazarse.

Conceptualmente:

← [ 1 ] [ 2 ] [ 3 ] →

Parte del contenido puede aparecer a medida que se recorre el carrusel.

Slider de imágenes

Está orientado principalmente a presentar una secuencia de imágenes, normalmente dando mayor protagonismo a una imagen o grupo reducido por vez.

Por ejemplo:

← [       IMAGEN PRINCIPAL       ] →

¿Cuál elegir?

Utiliza Galería cuando:

• quieres mostrar varias fotografías;

• quieres que el visitante pueda comparar visualmente varias imágenes;

• las fotografías forman un conjunto;

• no necesitas dar protagonismo exclusivo a una sola imagen.

Utiliza Carrusel cuando necesitas una composición desplazable.

Utiliza Slider cuando quieres presentar imágenes de forma secuencial y con mayor protagonismo individual.

¿Cómo agregar una Galería de imágenes?

Ingresa al Editor de bloques de la sección o área editable donde quieras incorporar la galería.

Después abre:

Secciones

y localiza:

Galerías de imágenes

Paso 1: abre Galerías de imágenes

Selecciona la categoría:

Galerías de imágenes

Waclis mostrará las alternativas disponibles.

Cada diseño puede utilizar una distribución diferente.

Por ejemplo:

• varias imágenes iguales;

• imágenes en distintas proporciones;

• composiciones más compactas;

• diseños con mayor separación;

• distribuciones visuales diferentes.

Elige principalmente según la estructura que necesitas, ya que posteriormente puedes reemplazar las fotografías y personalizar su apariencia.

Paso 2: elige la composición

Antes de seleccionar una alternativa, piensa:

• ¿cuántas imágenes quieres mostrar?

• ¿tienen todas la misma importancia?

• ¿son horizontales, verticales o cuadradas?

• ¿quieres una composición regular o más visual?

• ¿cómo debería verse en celular?

No es necesario que el contenido de ejemplo coincida con tus fotografías.

Lo importante es elegir una estructura adecuada.

Paso 3: agrega la galería

Selecciona el diseño que quieres utilizar e incorpóralo al contenido.

Una vez agregado, pasa a formar parte de la página y puedes modificar sus elementos individualmente.

Paso 4: selecciona una imagen

Haz clic sobre una de las fotografías.

Si resulta difícil seleccionarla porque se encuentra dentro de:

• un Link;

• una Card;

• un contenedor;

puedes utilizar Navigator para localizar directamente:

Image

Paso 5: utiliza Set Image

Con Image seleccionada, abre:

Contenido

y utiliza:

Set Image

Selecciona la fotografía que quieres mostrar.

Repite el procedimiento para cada imagen de la galería.

No necesitas mantener las fotografías de ejemplo

Todas las imágenes que forman parte de una sección prediseñada pueden sustituirse.

Por ejemplo:

Galería original:

[ Foto ejemplo 1 ]
[ Foto ejemplo 2 ]
[ Foto ejemplo 3 ]

puede convertirse en:

[ Planta industrial ]
[ Sala de producción ]
[ Depósito ]

La composición permanece, pero el contenido pasa a ser el de tu empresa.

Utiliza fotografías relacionadas entre sí

Una galería suele funcionar mejor cuando existe una relación visual o temática entre las imágenes.

Por ejemplo:

Instalaciones

Recepción
Depósito
Showroom
Oficinas

es más coherente que mezclar sin contexto:

Recepción
Producto
Logo
Empleado
Publicidad

salvo que la sección esté diseñada específicamente como una presentación general de la empresa.

Define el objetivo de la galería

Antes de seleccionar imágenes pregúntate:

¿Qué quiero que comprenda el visitante al recorrer estas fotografías?

Puede ser:

• calidad de los productos;

• tamaño de las instalaciones;

• variedad;

• experiencia;

• trabajos realizados;

• estilo de la marca;

• proceso de fabricación.

Las imágenes deberían ayudar a cumplir ese objetivo.

Utiliza imágenes de buena calidad

La galería suele ser una sección con fuerte protagonismo visual.

Utiliza fotografías:

• nítidas;

• correctamente iluminadas;

• con buena resolución;

• sin deformaciones;

• relacionadas con el contenido.

Evita imágenes excesivamente pequeñas que deban ampliarse demasiado.

Mantén coherencia visual

Si es posible, utiliza fotografías con una estética similar.

Por ejemplo:

• iluminación parecida;

• encuadres relacionados;

• tratamiento de color coherente;

• fondos compatibles.

Esto ayuda a que la galería se perciba como una composición y no como una colección de imágenes desconectadas.

Proporción de las fotografías

Las imágenes pueden tener diferentes proporciones.

Por ejemplo:

Horizontal

──────────────
│            │
│            │
──────────────

Vertical

───────
│     │
│     │
│     │
│     │
───────

Cuadrada

────────
│      │
│      │
│      │
────────

La composición prediseñada puede estar preparada para una proporción determinada.

Por eso es importante comprobar cómo se adapta cada fotografía después de reemplazarla.

¿Qué ocurre si las imágenes tienen proporciones diferentes?

Dependiendo de la configuración visual, puede ocurrir que:

• algunas se recorten;

• algunas se vean completas;

• las alturas sean diferentes;

• se genere espacio libre;

• determinadas zonas de la fotografía queden fuera del encuadre.

Esto no significa necesariamente que la imagen esté mal.

Depende de cómo esté configurado el contenedor.

Cover y Contain

Dos conceptos especialmente importantes en galerías son:

Cover

y

Contain

Cover

Hace que la imagen ocupe todo el espacio disponible.

Si la proporción de la fotografía no coincide con la del contenedor, una parte puede recortarse.

Conceptualmente:

CONTENEDOR

┌────────────────────┐
│████████████████████│
│████   FOTO   ██████│
│████████████████████│
└────────────────────┘

Es especialmente útil cuando quieres mantener:

• tarjetas uniformes;

• una grilla visual consistente;

• fotografías ocupando completamente cada espacio.

Contain

Intenta mostrar la imagen completa dentro del espacio disponible.

Puede dejar zonas libres cuando las proporciones no coinciden.

Conceptualmente:

┌────────────────────┐
│                    │
│   ┌────────────┐   │
│   │    FOTO    │   │
│   └────────────┘   │
│                    │
└────────────────────┘

¿Cuál conviene utilizar en una galería?

Depende del contenido.

Fotografías de ambientes, proyectos o eventos

Cover puede funcionar muy bien porque ayuda a mantener una grilla visual uniforme.

Imágenes donde no quieres recortar nada

Contain puede ser preferible.

Por ejemplo:

• productos;

• logotipos;

• obras completas;

• ilustraciones;

• documentos;

• diseños gráficos.

Ejemplo: galería de productos

Si tienes:

Botella
Mochila
Bolso
Cuaderno

puede ser importante que cada objeto se vea completo.

En ese caso podrías necesitar una configuración equivalente a:

.producto-galeria-imagen {
    object-fit: contain;
}

si el diseño actual utiliza otro comportamiento y no puede resolverse desde las opciones visuales.

Ejemplo: galería de proyectos

Si quieres mostrar:

Casa 1
Casa 2
Edificio
Interior

y todas las fotografías deben ocupar tarjetas uniformes, puede tener más sentido utilizar:

object-fit: cover;

cuando corresponda.

No utilices el mismo criterio para todas las imágenes

El comportamiento correcto depende de la función de la fotografía.

Pregunta:

¿Es más importante mantener la grilla llena o mostrar la fotografía completa?

Eso te ayudará a decidir.

Alt: texto alternativo

Cada imagen puede disponer de:

Alt

Utiliza este campo para describir brevemente lo que muestra.

Por ejemplo:

Showroom principal de la empresa

Botella térmica negra con tapa de acero

Proyecto residencial terminado en 2026

Evita textos alternativos genéricos

Por ejemplo:

imagen1

foto

galeria3

No explican qué contiene la imagen.

No es necesario convertir el Alt en un párrafo

Debe ser breve y descriptivo.

Por ejemplo:

Equipo de trabajo reunido en la oficina

es suficiente en la mayoría de los casos.

Imágenes decorativas

Si una fotografía es puramente decorativa, su tratamiento puede ser diferente.

Pero para imágenes que comunican:

• un producto;

• una instalación;

• un proyecto;

• una persona;

• un trabajo;

es recomendable utilizar una descripción apropiada.

Imágenes con enlaces

Una imagen puede formar parte de un:

Link

Por ejemplo:

[ CATEGORÍA BOTELLAS ]
        ↓
/productos/botellas

En ese caso el visitante puede hacer clic sobre la fotografía para acceder a otro contenido.

Cómo saber si una imagen tiene un Link

Utiliza:

Navigator

Puedes encontrar una estructura como:

Link
└── Image

Si quieres cambiar la fotografía:

selecciona Image.

Si quieres cambiar el destino:

selecciona Link.

Configurar la URL

Cuando seleccionas Link puedes utilizar:

Contenido → URL

para indicar el destino.

Por ejemplo:

/productos

o una dirección específica cuando corresponda.

Comprueba siempre los enlaces después de duplicar imágenes

Si clonas una imagen o tarjeta enlazada, la copia puede conservar la URL original.

Por ejemplo:

Original:

Botellas
→ /botellas

Copia:

Mochilas
→ /botellas

si todavía no cambiaste su enlace.

Después de clonar verifica:

• imagen;

• Alt;

• URL;

• textos;

• ID, si existe.

Agregar más imágenes

Si el diseño utiliza elementos repetidos, puedes utilizar:

Clonar elemento

para agregar nuevas imágenes o tarjetas manteniendo la misma estructura.

Importante: selecciona el contenedor correcto

Supongamos:

Link
└── Image

Si quieres duplicar:

imagen + enlace

selecciona Link o el contenedor correspondiente.

Si clonas solamente Image, la nueva fotografía puede no conservar la estructura de enlace que necesitabas.

Galería construida con Cards

Algunos diseños pueden utilizar una estructura similar a:

Grid Row
├── Grid Column
│   └── Card
│       └── Image
│
├── Grid Column
│   └── Card
│       └── Image
│
└── Grid Column
    └── Card
        └── Image

Si quieres agregar otra unidad completa, identifica la Card o Grid Column correspondiente mediante Navigator.

Eliminar imágenes

Si una galería incluye más imágenes de las que necesitas, puedes eliminar los elementos sobrantes.

Por ejemplo:

Original:

[ 1 ] [ 2 ] [ 3 ]

[ 4 ] [ 5 ] [ 6 ]

Necesitas cuatro:

[ 1 ] [ 2 ]

[ 3 ] [ 4 ]

No borres solamente la imagen dejando un contenedor vacío

Si quieres eliminar una unidad completa, selecciona el contenedor correspondiente.

Por ejemplo:

Grid Column
└── Link
    └── Image

Puede ser preferible eliminar Grid Column si toda esa columna dejará de utilizarse.

Revisa la grilla después de eliminar

Si pasas de seis imágenes a cinco, el último elemento puede quedar solo.

Por ejemplo:

[ 1 ] [ 2 ] [ 3 ]

[ 4 ] [ 5 ]

Esto puede ser correcto o puede requerir ajustar la distribución.

Comprueba el resultado visual y responsive.

Grid de imágenes

Una galería suele depender de una grilla.

Por ejemplo:

Desktop

[ 1 ] [ 2 ] [ 3 ]

[ 4 ] [ 5 ] [ 6 ]

Tablet

[ 1 ] [ 2 ]

[ 3 ] [ 4 ]

[ 5 ] [ 6 ]

Celular

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

[ 5 ]

[ 6 ]

No necesitas necesariamente una imagen por fila en móvil

Dependiendo de las imágenes y del diseño, también puede resultar apropiado:

[ 1 ] [ 2 ]

[ 3 ] [ 4 ]

[ 5 ] [ 6 ]

en celular.

Por ejemplo, si son:

• logotipos;

• miniaturas;

• fotografías cuadradas;

• elementos visuales simples.

La decisión depende del tamaño y contenido de cada imagen.

Revisa siempre la galería en celular

Una galería puede verse excelente en desktop y tener problemas en móvil.

Comprueba:

• cantidad de columnas;

• tamaño de las imágenes;

• separación;

• recorte;

• títulos;

• enlaces;

• espacios laterales;

• scroll horizontal.

Evita miniaturas demasiado pequeñas

Supongamos que en desktop tienes:

[1][2][3][4][5][6]

Intentar conservar seis columnas en una pantalla pequeña puede hacer que las imágenes resulten prácticamente imposibles de apreciar.

Es preferible reorganizar la grilla.

Grid Row

Si la composición utiliza:

Grid Row

puedes configurar las columnas para distintos tamaños de pantalla.

Antes de escribir CSS responsive comprueba primero estas opciones.

No ocultes fotografías importantes solo porque no entran

Si las seis fotografías forman parte de la galería, adapta la distribución.

No conviertas:

6 imágenes

en:

2 visibles
4 ocultas

solamente para solucionar el diseño móvil.

Utiliza:

Hide based on device screen width

solo cuando realmente quieras ofrecer un contenido diferente.

Espacio entre imágenes

La separación entre fotografías influye mucho en el resultado visual.

Una galería puede utilizar:

[IMG][IMG][IMG]

con muy poca separación.

O:

[IMG]   [IMG]   [IMG]

con mayor espacio.

Utiliza Margin y Padding correctamente

Si quieres separar unidades:

Margin puede influir en el espacio exterior.

Si cada imagen se encuentra dentro de una Card y quieres espacio dentro:

Padding puede ser adecuado.

Pero revisa primero la estructura para no agregar espacio al elemento incorrecto.

No agregues grandes márgenes manuales para construir la grilla

Evita utilizar:

Margin Left: 200px

para acomodar fotografías.

Utiliza la estructura de:

• Grid Row;

• columnas;

• alineaciones.

Esto será mucho más estable en responsive.

Bordes

Puedes utilizar:

Estilo → Border

cuando quieras agregar un borde alrededor de:

• la imagen;

• la Card;

• el contenedor.

Selecciona correctamente el elemento

Si quieres:

┌───────────────────┐
│      IMAGEN       │
└───────────────────┘

con borde en la fotografía, selecciona Image.

Si quieres:

┌───────────────────┐
│                   │
│      IMAGEN       │
│                   │
└───────────────────┘

y el borde pertenece a toda una tarjeta, selecciona su contenedor.

Border radius

Border radius permite redondear las esquinas.

Por ejemplo:

┌──────────────┐
│    IMAGEN    │
└──────────────┘

puede transformarse visualmente en una fotografía con esquinas suavemente redondeadas.

Atención si la imagen está dentro de un contenedor

Puede ocurrir que:

• la Card tenga Border radius;

• la imagen siga sobresaliendo visualmente.

En personalizaciones más avanzadas puede ser necesario revisar propiedades como:

overflow: hidden;

sobre el contenedor correspondiente.

Utiliza CSS solamente si la configuración visual no resuelve el resultado.

Hover en galerías

Puedes utilizar Hover para indicar que una fotografía es interactiva.

Por ejemplo:

• modificar Opacity;

• cambiar un borde;

• agregar un efecto suave;

• ampliar ligeramente la fotografía.

Ejemplo con CSS

.galeria-section .galeria-imagen {
    transition: transform .3s ease;
}

.galeria-section .galeria-imagen:hover {
    transform: scale(1.03);
}

Limita el alcance

Evita:

img:hover {
    transform: scale(1.03);
}

porque puede afectar imágenes de toda la Página web.

Utiliza una Class específica de la galería.

Cuidado con ampliar imágenes

Si haces:

transform: scale(1.2);

la fotografía puede:

• superponerse;

• salir de su contenedor;

• cubrir otras imágenes.

Los efectos sutiles suelen ser más fáciles de integrar.

Hover y celular

Recuerda que los dispositivos táctiles no utilizan Hover de la misma forma que una computadora con mouse.

No hagas que información importante aparezca únicamente al pasar el cursor.

Texto sobre las imágenes

Algunos diseños pueden incluir:

• título;

• categoría;

• descripción;

• botón;

sobre o junto a las imágenes.

En esos casos comprueba especialmente:

• contraste;

• tamaño;

• responsive;

• legibilidad.

Overlay

Cuando existe texto encima de una imagen, puede ser útil utilizar una capa visual u Overlay cuando la estructura lo permita.

Conceptualmente:

IMAGEN
+
CAPA OSCURA
+
TEXTO BLANCO

Esto mejora la legibilidad cuando la fotografía tiene zonas claras.

No dependas del color de la fotografía

Una misma galería puede contener:

Foto oscura
Foto clara
Foto con muchos colores

Si colocas texto blanco directamente encima, funcionará sobre algunas y no sobre otras.

Una capa uniforme puede ayudar a mantener la lectura.

Títulos de fotografías

Si utilizas títulos, intenta mantener una longitud razonablemente similar.

Por ejemplo:

Showroom
Depósito
Sala de reuniones

funciona mejor visualmente que combinar:

Showroom

Esta es nuestra nueva sala de reuniones ubicada en la planta superior del edificio

como títulos de igual jerarquía.

Para textos largos utiliza un componente descriptivo aparte cuando sea necesario.

Galería con categorías

También puedes utilizar fotografías como accesos visuales.

Por ejemplo:

[ BOTELLAS ]
[ BOLSOS ]
[ CUADERNOS ]
[ REMERAS ]

Cada imagen puede dirigir hacia la categoría correspondiente.

En este caso la galería cumple también una función de navegación.

Comprueba que sea evidente que las imágenes son clicables

Puedes utilizar:

• títulos;

• botones;

• Hover;

• cursor;

• tratamiento visual coherente.

El visitante debería poder comprender que existe una acción.

Ejemplo: galería de categorías

NUESTRAS CATEGORÍAS

[ Botellas ] [ Mochilas ] [ Bazar ]

[ Escritura ] [ Textil ] [ Tecnología ]

Cada Card puede contener:

Link
├── Image
└── Heading

Galería institucional

Otra alternativa es utilizarla únicamente como contenido visual:

CONOCE NUESTRAS INSTALACIONES

[ Oficina ]
[ Producción ]
[ Depósito ]
[ Showroom ]

En este caso no necesariamente necesitas enlaces.

Galería de trabajos realizados

Puedes mostrar:

NUESTROS TRABAJOS

[ Proyecto A ]
[ Proyecto B ]
[ Proyecto C ]
[ Proyecto D ]

y utilizar debajo:

CTA → Solicitar presupuesto

La galería aporta evidencia visual y el CTA dirige hacia la acción.

Galería y rendimiento

Las galerías pueden contener muchas imágenes.

Por eso conviene utilizar archivos apropiados para web.

Evita incorporar fotografías mucho más pesadas o grandes de lo necesario.

Una página con numerosas imágenes de gran tamaño puede tardar más en cargar.

No confundas resolución con peso innecesario

La fotografía debe tener calidad suficiente para verse correctamente, pero no necesariamente necesita conservar el tamaño original de una cámara profesional si en la Página web ocupará un área relativamente pequeña.

Utiliza imágenes preparadas para su uso web cuando sea posible.

Cantidad de imágenes

No existe una cantidad universal correcta.

Depende del objetivo.

Una galería de:

4 imágenes

puede ser suficiente para mostrar instalaciones.

Una galería de portfolio puede necesitar:

12 imágenes

o más.

Lo importante es que cada imagen aporte valor.

No agregues fotografías solo para completar una grilla

Si tienes cinco buenas fotografías, no es obligatorio agregar una sexta de baja calidad solamente para completar:

3 + 3

Puedes adaptar la distribución.

Si tienes muchas imágenes

Cuando la cantidad crece considerablemente, considera si sigue siendo conveniente mostrar todas simultáneamente.

Tal vez resulte más apropiado:

• dividir por categorías;

• utilizar varias galerías;

• utilizar un carrusel;

• crear diferentes secciones.

Depende de la experiencia que quieras ofrecer.

Orden de las fotografías

La primera imagen suele recibir más atención.

Ordena la galería pensando en un recorrido visual.

Por ejemplo:

1. Imagen principal
2. Segunda más relevante
3. Detalle
4. Otro ángulo
5. Complementaria
6. Cierre

No es necesario seguir siempre un orden cronológico.

Crea un recorrido

En una galería de instalaciones podrías utilizar:

1. Fachada
2. Recepción
3. Showroom
4. Producción
5. Depósito
6. Equipo

El visitante recorre visualmente la empresa.

Fotografías repetidas

Evita utilizar varias imágenes casi idénticas salvo que exista una razón.

Es preferible mostrar:

• diferentes ángulos;

• diferentes productos;

• diferentes ambientes;

• diferentes etapas.

Navigator en galerías complejas

Una galería puede contener muchos elementos similares:

Grid Row
├── Grid Column
│   └── Link
│       └── Image
├── Grid Column
│   └── Link
│       └── Image
├── Grid Column
│   └── Link
│       └── Image
...

Navigator puede ayudarte a seleccionar cada estructura de forma precisa.

Identifica la unidad repetida

Antes de:

• clonar;

• eliminar;

• mover;

descubre cuál es la unidad completa.

Puede ser:

• Link;

• Card;

• Grid Column;

• otro contenedor.

Mover fotografías

Puedes reorganizar el orden mediante las herramientas de movimiento.

Después comprueba Navigator para verificar que el elemento continúa dentro de la estructura correcta.

Si mueves solamente Image

Puedes dejar atrás:

• su Link;

• su título;

• su Card.

Por eso, si quieres mover una unidad completa, selecciona su contenedor.

Ejemplo

Tienes:

Card
├── Link
│   └── Image
└── Heading

Quieres mover:

foto + título + enlace

Selecciona:

Card

No solamente Image.

Classes en una galería personalizada

Si necesitas CSS avanzado, utiliza nombres específicos.

Por ejemplo:

galeria-proyectos
galeria-grid
galeria-item
galeria-link
galeria-imagen
galeria-titulo

CSS con scope

Por ejemplo:

.galeria-proyectos .galeria-imagen {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

Esta regla queda relacionada con la galería.

Evita

img {
    width: 100%;
    height: 300px;
}

porque puede alcanzar imágenes que no pertenecen a esta sección.

Personalización individual

Si una fotografía necesita un comportamiento particular, puedes utilizar:

• Class adicional;

• ID único.

Por ejemplo:

class="galeria-imagen galeria-imagen-destacada"

sin eliminar la Class común.

Linked styles

Si todas las fotografías comparten:

galeria-imagen

es normal que determinados cambios se apliquen a todas.

Waclis puede mostrar:

Linked styles

Esto puede ser deseable si quieres mantener:

• mismo Border radius;

• mismo tamaño;

• misma Opacity;

• mismo Hover.

¿Y si quiero modificar solamente una?

No elimines automáticamente la Class común.

Puedes:

• agregar un ID único;

• agregar una Class específica.

Así mantienes el estilo general y aplicas una excepción.

Animaciones

Puedes utilizar:

Avanzado → Animate on scroll

para animar:

• toda la galería;

• una fila;

• cada Card;

• determinadas imágenes.

¿Qué conviene animar?

En muchos casos puede resultar más ordenado animar:

Grid Row completo

o las Cards con una misma animación.

Evita utilizar un efecto completamente diferente en cada fotografía sin una razón visual.

Delay progresivo

Si quieres una aparición secuencial:

Imagen 1 → primero
Imagen 2 → después
Imagen 3 → después

puedes utilizar Delay de manera moderada.

No retrases demasiado la galería

Las imágenes son el contenido principal.

Evita que el visitante tenga que esperar demasiado para verlas.

Galería en Home

Una galería puede utilizarse en Home para:

• mostrar categorías;

• destacar proyectos;

• presentar ambientes;

• mostrar trabajos;

• reforzar identidad visual.

Puedes incorporarla en cualquiera de las áreas editables disponibles según la estructura que necesites.

Galería en una sección personalizada

También puedes crear una página independiente:

Proyectos

Galería

Trabajos realizados

Instalaciones

y construir allí una galería mucho más amplia.

Galería alrededor de contenido dinámico

También puedes complementar páginas existentes.

Por ejemplo:

PRODUCTOS

Bloque editable debajo del menú
↓
Galería de categorías

CATÁLOGO DINÁMICO

Bloque editable inferior
↓
Galería de trabajos realizados

La galería no reemplaza el catálogo dinámico.

Simplemente agrega contenido visual complementario.

Ejemplo práctico: galería de seis proyectos

Queremos:

Desktop

NUESTROS PROYECTOS

[ 1 ] [ 2 ] [ 3 ]

[ 4 ] [ 5 ] [ 6 ]

Tablet

[ 1 ] [ 2 ]

[ 3 ] [ 4 ]

[ 5 ] [ 6 ]

Celular

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

[ 5 ]

[ 6 ]

Paso 1

Agrega:

Secciones → Galerías de imágenes

Paso 2

Elige una estructura cercana a la distribución que necesitas.

Paso 3

Reemplaza cada fotografía utilizando:

Image → Set Image

Paso 4

Completa Alt.

Por ejemplo:

Proyecto residencial moderno terminado

Paso 5

Utiliza Navigator para identificar la unidad completa de cada imagen.

Paso 6

Clona o elimina unidades si necesitas adaptar la cantidad.

Paso 7

Configura la distribución responsive.

Paso 8

Comprueba las fotografías.

¿Necesitan:

Cover

o

Contain?

Paso 9

Personaliza:

• separación;

• Border radius;

• fondo;

• Hover;

si corresponde.

Paso 10

Comprueba:

• desktop;

• tablet;

• celular.

Paso 11

Haz clic en:

Guardar Cambios

Paso 12

Utiliza:

Ver página

Ejemplo práctico: galería de categorías clicables

Quieres:

COMPRA POR CATEGORÍA

[ Botellas ] [ Mochilas ] [ Tecnología ]

[ Textil ] [ Bazar ] [ Escritura ]

Cada unidad puede utilizar:

Link
├── Image
└── Heading

Configura cada enlace

Ejemplo:

Botellas
→ /productos/botellas

Mochilas
→ /productos/mochilas

Comprueba después

• que la fotografía correcta corresponda al enlace;

• que el título sea correcto;

• que la URL sea correcta;

• que el Hover indique interacción;

• que todos los enlaces funcionen.

Ejemplo práctico: galería de instalaciones

No necesitas enlaces.

Puedes utilizar:

NUESTRAS INSTALACIONES

[ Showroom ]
[ Producción ]
[ Depósito ]
[ Oficinas ]

Cada imagen puede tener:

• fotografía;

• Alt;

• opcionalmente un pequeño título.

Aquí la prioridad es la presentación visual.

¿Qué hacer si las fotografías quedan recortadas?

Primero identifica:

• Image;

• contenedor;

• Width;

• Height;

• Background Image si corresponde.

Después decide si realmente quieres:

• Cover;

• Contain.

Si el comportamiento no puede configurarse visualmente, utiliza CSS localizado.

¿Qué hacer si las imágenes se deforman?

Comprueba si estás forzando simultáneamente:

• Width;

• Height;

de una forma que no respeta la proporción.

Evita estirar la fotografía.

Utiliza un comportamiento de adaptación adecuado.

¿Qué hacer si todas las imágenes tienen alturas diferentes?

Puedes:

• utilizar fotografías con proporciones similares;

• configurar un contenedor común;

• utilizar una altura uniforme;

• definir Cover o Contain según el objetivo.

Si utilizas una altura fija, comprueba el resultado responsive.

¿Qué hacer si la última fila queda desbalanceada?

Por ejemplo:

[ 1 ] [ 2 ] [ 3 ]

[ 4 ]

Puedes:

• modificar la cantidad de columnas;

• cambiar la composición;

• centrar la última unidad;

• utilizar otra estructura;

• agregar más contenido si realmente corresponde.

No agregues una imagen irrelevante únicamente para completar el diseño.

¿Qué hacer si aparece scroll horizontal?

Revisa:

• Width;

• Min Width;

• columnas;

• Margin;

• imágenes;

• CSS;

• elementos posicionados.

Utiliza Navigator para localizar la estructura que excede el ancho.

¿Qué hacer si un Hover afecta otras imágenes?

Revisa el selector.

Por ejemplo:

img:hover {
}

es demasiado amplio.

Utiliza:

.galeria-proyectos .galeria-imagen:hover {
}

¿Qué hacer si cambio una imagen y cambian estilos de todas?

Puede deberse a una Class compartida.

Si aparece:

Linked styles

recuerda que los estilos pueden estar relacionados, aunque el contenido de cada Image sea independiente.

Cambiar la fotografía desde Set Image no implica necesariamente que debas modificar la Class compartida.

¿Qué hacer si quiero destacar una sola imagen?

Puedes mantener:

galeria-item

y agregar:

destacado

a esa unidad.

Por ejemplo:

class="galeria-item destacado"

Después puedes aplicar una regla específica.

Utilizar IA para modificar una galería

ChatGPT, Claude o Gemini pueden ayudarte.

Por ejemplo:

Tengo una galería dentro del Editor de bloques de Waclis.

La sección utiliza:
.galeria-proyectos

Cada imagen utiliza:
.galeria-imagen

Quiero que:
- todas las imágenes tengan la misma altura;
- mantengan su proporción;
- cubran completamente la tarjeta;
- tengan Border radius de 12 px;
- en celular se muestre una por fila.

No modifiques otras imágenes de la Página web.

No agregues JavaScript.

Devuélveme solamente el CSS necesario.

Si necesitas mostrar las imágenes completas

Aclara:

No quiero que las imágenes se recorten.

Utiliza contain si corresponde.

Si quieres que llenen el espacio

Aclara:

Las fotografías pueden recortarse ligeramente.

Quiero que cubran completamente cada tarjeta.

Esto orientará hacia Cover.

Buenas prácticas para Galerías de imágenes

Recomendamos:

• definir el objetivo de la galería;

• elegir una composición adecuada antes de personalizarla;

• utilizar imágenes de buena calidad;

• mantener una estética visual coherente;

• utilizar Alt descriptivo;

• comprobar enlaces;

• utilizar Navigator antes de clonar o eliminar;

• elegir conscientemente entre Cover y Contain;

• no deformar fotografías;

• revisar todas las vistas responsive;

• evitar una cantidad excesiva de imágenes sin organización;

• utilizar Hover solamente como refuerzo visual;

• limitar el CSS a la galería;

• comprobar Ver página después de guardar.

Errores frecuentes

Utilizar una Galería cuando en realidad necesitas un Slider

Elige la sección según la forma en que quieres presentar las imágenes.

Utilizar fotografías de baja calidad

La galería les da mucho protagonismo.

Mezclar proporciones sin comprobar el resultado

Puede producir recortes inesperados.

Utilizar Cover cuando necesitas mostrar el producto completo

En ese caso puede resultar más apropiado Contain.

Utilizar Contain cuando quieres fotografías cubriendo toda la tarjeta

Puede dejar espacios vacíos.

No completar Alt

Agrega una descripción cuando la imagen aporta contenido.

Clonar y olvidarse de cambiar el Link

Comprueba la URL de cada unidad.

Eliminar solamente Image y dejar una Card vacía

Selecciona el contenedor completo cuando quieras eliminar la unidad.

Mantener demasiadas columnas en celular

Adapta la grilla.

Ocultar imágenes importantes para resolver móvil

Reorganiza primero.

Utilizar CSS global sobre img

Limita la regla a la galería.

Aplicar un Hover excesivo

Los efectos sutiles suelen integrarse mejor.

No comprobar el resultado en Ver página

Prueba también el frontend.

Flujo recomendado

Cuando utilices una Galería de imágenes:

1. DEFINIR OBJETIVO
↓
2. ELEGIR GALERÍA
↓
3. AGREGAR SECCIÓN
↓
4. REEMPLAZAR IMÁGENES
↓
5. COMPLETAR ALT
↓
6. CONFIGURAR LINKS SI EXISTEN
↓
7. AJUSTAR CANTIDAD
↓
8. REVISAR GRID
↓
9. COVER / CONTAIN
↓
10. PERSONALIZAR ESTILO
↓
11. REVISAR RESPONSIVE
↓
12. PROBAR LINKS
↓
13. GUARDAR CAMBIOS
↓
14. VER PÁGINA

Checklist de una galería antes de publicar

• Todas las imágenes fueron reemplazadas.

• No quedan fotografías de ejemplo.

• Las imágenes tienen buena calidad.

• Las proporciones funcionan correctamente.

• Elegí conscientemente Cover o Contain.

• Las fotografías no están deformadas.

• Completé los Alt correspondientes.

• Los enlaces apuntan al destino correcto.

• Revisé enlaces de elementos clonados.

• La cantidad de imágenes es adecuada.

• La grilla está correctamente organizada.

• Desktop se ve correctamente.

• Tablet se ve correctamente.

• Celular se ve correctamente.

• No existe scroll horizontal inesperado.

• Los Hover no afectan otras imágenes.

• Las animaciones son moderadas, si existen.

• Utilicé CSS localizado si agregué personalizaciones.

• Probé la galería mediante Ver página.

En resumen

Las Galerías de imágenes permiten mostrar varias fotografías dentro de una composición visual organizada.

Puedes utilizarlas para:

• proyectos;

• productos;

• categorías;

• instalaciones;

• trabajos;

• portfolios;

• eventos;

• contenido institucional.

El procedimiento principal es:

Secciones → Galerías de imágenes → elegir diseño → reemplazar imágenes → configurar Alt y enlaces → adaptar la grilla → revisar responsive.

Uno de los puntos más importantes es decidir cómo deben adaptarse las fotografías:

Cover

cuando priorizas que llenen el espacio.

Contain

cuando priorizas mostrar la imagen completa.

También debes comprobar:

• qué elemento estás seleccionando;

• si las imágenes están dentro de Links o Cards;

• qué estructura debes clonar o eliminar;

• cómo se reorganiza la galería en celular.

Una galería efectiva no depende únicamente de la cantidad de fotografías.

Debe tener:

• un objetivo claro;

• imágenes de calidad;

• una estructura coherente;

• buena adaptación responsive;

• navegación correcta cuando existen enlaces.