Secciones de Portfolio en el editor de bloques de Waclis

En este tutorial aprenderás a insertar, editar y personalizar secciones de Portfolio utilizando los bloques prearmados del editor de bloques de Waclis.

Las secciones de Portfolio se utilizan para:

• mostrar trabajos realizados

• presentar proyectos, casos de éxito o colecciones

• exhibir productos destacados de forma visual

• reforzar la identidad y credibilidad del negocio

Bloques de Portfolio disponibles

Actualmente, la categoría Portfolio incluye los siguientes bloques:

• Portfolio 001

• Portfolio 002

Cada bloque presenta una estructura visual distinta, pero todos se editan con la misma lógica.

Cómo insertar un bloque de Portfolio

Acceso al editor de bloques

Ruta:

Configuraciones > Editar sitio > Menues

Luego, haz clic en el icono de la paleta de pintor para acceder al editor de bloques.

Insertar el bloque

1. Haz clic en el icono Sections.

2. Selecciona Sections.

3. Busca la categoría Portfolio.

4. Despliega la categoría si está colapsada.

5. Selecciona el bloque deseado.

6. Haz clic en el botón “+”.

7. El bloque se insertará en el área de visualización del sitio.

Cómo editar un bloque de Portfolio

Los bloques de Portfolio están compuestos por:

• imágenes

• títulos

• descripciones

• enlaces (opcional)

• contenedores internos

Puedes editarlos de tres maneras distintas, según el nivel de control que necesites.

Forma 1: Edición directa desde la vista (visual)

Es la forma más rápida y recomendada.

1. Haz clic directamente sobre:

   • una imagen del portfolio

   • el título del proyecto

   • el texto descriptivo

2. Se activará el panel Properties.

3. Desde allí podrás:

   • cambiar la imagen (Set Image)

   • editar textos

   • definir enlaces

   • ajustar alineación y tamaños básicos

Forma 2: Edición desde el Navigator

Ideal cuando el portfolio contiene varios ítems similares.

1. Haz clic en el icono Navigator.

2. Visualiza la estructura:

   • Section

   • Container

   • Portfolio item

   • Image

   • Heading

   • Text

3. Selecciona el elemento específico que deseas editar.

4. El panel Properties se abrirá automáticamente.

Esto te permite modificar un ítem puntual sin afectar el resto del portfolio.

Forma 3: Edición desde el Code editor (HTML)

Pensada para usuarios con conocimientos técnicos.

1. Abre el Code editor desde la parte inferior del editor.

2. Se mostrará el HTML completo del bloque de Portfolio.

3. Desde aquí puedes:

   • duplicar ítems

   • eliminar proyectos

   • modificar estructuras

   • ajustar clases e identificadores

   • personalizar la maquetación

Edición de imágenes del Portfolio

En cada imagen puedes:

• subir una imagen desde tu dispositivo

• usar una imagen ya cargada en el sistema

• pegar una URL externa

• definir texto alternativo (Alt)

• asignar enlaces (si el bloque lo permite)

Esto se realiza desde Properties al seleccionar la imagen.

Uso de Id y Class en Portfolio

Desde el panel Properties > General, puedes:

• asignar un Id único a un ítem

• definir una Class personalizada

Esto es útil para:

• aplicar estilos CSS personalizados

• animaciones

• ajustes visuales avanzados

Limitaciones importantes

Los bloques de Portfolio:

• no se conectan a productos del catálogo

• no son dinámicos

• no se sincronizan con proveedores

Todo el contenido del Portfolio es manual y visual.

Buenas prácticas de uso

• Usa imágenes de tamaño y estilo consistente.

• No satures el portfolio con demasiados ítems.

• Agrupa trabajos similares.

• Usa títulos claros y descripciones breves.

• Verifica siempre la visualización en móvil.

Diferencia entre Portfolio y Galería