Galerías de imágenes en el editor de bloques de Waclis

En este tutorial vas a aprender a insertar y editar las secciones prearmadas de Galerías de imágenes dentro del editor de bloques de Waclis.

Vas a ver:

• dónde se insertan las galerías (paso a paso)

• qué tipos de galerías están disponibles

• 3 formas de editar imágenes y contenido:

  1. desde la vista (visual)

  2. desde el Navigator (árbol de elementos)

  3. desde el Code editor (HTML)

Qué son las galerías de imágenes

Las galerías de imágenes son secciones listas para usar, pensadas para mostrar varias imágenes de forma visual y ordenada dentro de una página.

Son ideales para:

• trabajos realizados / portfolio

• fotos del local o showroom

• eventos

• identidad de marca

• inspiración o ambiente visual del sitio

Tipos de galerías disponibles

Actualmente tenés estas secciones:

1. Galería 001 – Masonry

2. Galería 002 – 4 columnas

3. Galería 004 – 3 columnas

4. Galería 005 – 3 columnas con espaciado

Cómo insertar una galería de imágenes

1) Acceder al editor de bloques

Para entrar al editor de bloques, seguí esta ruta:

Configuraciones > Editar sitio > Menues

Luego, hacé clic en el icono de la paleta de pintor para abrir el editor de bloques.

2) Insertar una sección desde “Sections”

Ya dentro del editor:

1. Haz clic en el icono de Sections (barra superior izquierda).

2. En el panel lateral, haz clic en Sections para ver el listado completo.

3. Verás:

   • un buscador (“Search sections”)

   • un listado de categorías

   • cada categoría se puede desplegar o colapsar

4. Busca la categoría Galerías de imágenes.

   • Si está colapsada, haz clic en la categoría para desplegarla.

   • Si ya está desplegada, no hace falta hacer nada.

5. Elige la galería que deseas insertar y haz clic en el botón “+” (Add section).

6. La sección se agrega en el área derecha, que es la vista previa / visualización del sitio.
   
   

Cómo editar una galería de imágenes

En Waclis puedes editar una galería de tres maneras, según lo que necesites hacer.

Forma 1: Editar desde la vista (visualización)

Esta es la forma más rápida y la más usada.

1. Haz clic directamente sobre una imagen dentro de la galería (en el área derecha).

2. Se selecciona el elemento (verás el marco/selección).

3. En el panel lateral se activará el icono de Properties (engrane).

4. Dentro de Properties vas a ver opciones típicas de una imagen, como:

   • Image: miniatura + URL de la imagen actual

   • Botón Set Image

   • Width / Height (si deseas forzar dimensiones)

   • Alt (texto alternativo)

   • Align (alineación)

   • Opciones de Link (para que la imagen tenga un enlace)

   • Campos generales como Id y Class (si necesitas identificadores para estilos avanzados)

Qué hace “Set Image”

Cuando haces clic en Set Image:

• se abre un modal con las imágenes disponibles

• puedes seleccionar una imagen ya cargada

• puedes subir una imagen nueva (upload)

• y también puedes pegar una URL externa en lugar de subirla (por ejemplo, una imagen alojada en otro servidor)

Forma 2: Editar desde el “Navigator” (árbol de elementos)

Esta forma es ideal cuando hay muchas imágenes y querés seleccionar una con precisión, sin hacer clic en la vista.

1. Haz clic en el icono de Navigator (icono de “capas”, arriba a la derecha).

2. Se abre un panel con la estructura del bloque (por ejemplo: Section > Container > Image…).

3. Haz clic sobre el elemento Image que quieres editar.

4. Automáticamente se selecciona y se habilita el panel de Properties.

5. Desde ahí, el proceso es el mismo que en la forma 1:

   • Image / URL

   • Set Image

   • Alt

   • Link, Id, Class, etc.

Forma 3: Editar desde el “Code editor” (HTML)

Esta forma es la más avanzada y se usa cuando querés editar directamente el código del bloque.

1. Abre el Code editor, que se despliega desde la parte inferior.

2. Allí verás el HTML de la sección, por ejemplo una lista de imágenes con etiquetas como:

   • <img src="..." alt="...">

3. Desde aquí puedes:

   • cambiar manualmente URLs (src)

   • editar el texto alternativo (alt)

   • duplicar o eliminar imágenes (según la estructura del bloque)

   • hacer ajustes de estructura si sabes lo que estás tocando

Buenas prácticas al trabajar con galerías

• Mantén imágenes con estilo similar (colores/estética) para que se vea profesional.

• Usa texto Alt descriptivo (ayuda a SEO y accesibilidad).

• Si vas a usar links en imágenes, asegúrate de probarlos al previsualizar.

• Si el bloque tiene muchas imágenes, el Navigator te ahorra tiempo.

Limitación importante

Las galerías prearmadas trabajan con contenido estático.

No sirven para:

• mostrar productos del catálogo automáticamente

• armar carruseles dinámicos de productos

• modificar contenido dinámico como fichas de producto o tarjetas del listado