Configurar cards, testimonials y stats

Qué vas a lograr

• Insertar y organizar los bloques Tarjetas, Testimonios y Estadísticas en una página del Page Builder v2.
• Entender qué parte de cada bloque se edita desde el inspector y qué parte se edita directamente en el canvas.
• Dejar listas visuales con orden, contenido y estructura coherentes, sin asumir controles que la UI actual no ofrece.

Paso a paso en Flobu

Cómo funciona la interfaz de Flobu en este tutorial

• Menú lateral: para este tutorial ya debes estar dentro del Page Builder v2, trabajando sobre una página con al menos una sección disponible.
• Panel central: usarás el canvas para ver la vista previa de Tarjetas, Testimonios y Estadísticas, y el panel izquierdo Añadir para insertarlos.
• Acciones clave: insertarás bloques desde Añadir o Agregar bloque, y luego usarás el inspector derecho para agregar ítems, reordenarlos, eliminarlos y ajustar su contenido.
• Alcance de este tutorial: aquí te enfocarás en estos tres bloques de listas. No entrarás en Accordion, Tabs, Timeline ni en estilos avanzados de bloque.

1) Configurar el bloque Tarjetas y entender qué se edita en el canvas

1. Abre la pestaña Añadir o usa un Agregar bloque dentro del canvas.
2. Busca Tarjetas y haz clic para insertarlo.
3. Selecciona el bloque para abrir su inspector.
4. En el panel lateral verás el bloque Items.
5. Cada tarjeta existente aparece con su miniatura, un botón para eliminarla y un grip para moverla.
6. Para agregar una nueva, usa Agregar nueva tarjeta.
7. Ese botón abre el gestor multimedia y, en la UI actual, la nueva tarjeta se crea a partir de una imagen seleccionada.
8. Si quieres cambiar la imagen de una tarjeta existente, haz clic en su miniatura desde el inspector o en el ícono de edición sobre la imagen dentro del canvas.
9. Debajo del listado verás Modo de visualización.
10. Ahí puedes elegir entre Carrusel y Tarjetas.
11. Carrusel muestra una experiencia más tipo slider.
12. Tarjetas reparte mejor varias tarjetas visibles según el ancho de pantalla.
13. Aquí viene una diferencia importante del producto: en este bloque el inspector no resuelve todo el contenido.
14. El título del bloque y el texto interno de cada tarjeta se editan directamente en el canvas.
15. Haz clic sobre el título visible del bloque para cambiarlo.
16. Luego haz clic sobre el texto de una tarjeta para editar su descripción con el editor enriquecido.
17. Si estás en mobile dentro del editor, el texto de la tarjeta activa puede verse debajo del slider en vez de dentro de cada card al mismo tiempo. Esto no significa que falte contenido: es parte del comportamiento real de edición de este bloque.
18. Si todavía no agregas ninguna tarjeta, el canvas mostrará un estado vacío para empezar cargando la primera imagen.

Resultado esperado:

• Insertaste el bloque Tarjetas, agregaste al menos una tarjeta y entendiste que combina edición lateral con edición directa en el canvas.
• Sabes cambiar entre Carrusel y Tarjetas sin esperar un formulario lateral completo para todo el contenido.

2) Configurar Testimonios con orden, rating y avatar

1. Inserta el bloque Testimonios.
2. Selecciónalo para abrir el inspector.
3. Primero verás el bloque Título. Ese título sí se edita desde el panel lateral con editor enriquecido.
4. Más abajo verás Testimonios (n), donde n es la cantidad actual de testimonios.
5. Usa Agregar testimonio para crear uno nuevo.
6. Cada ítem del listado tiene:
   • grip para reordenar;
   • botón de avatar;
   • campo Nombre;
   • campo Cargo / empresa;
   • campo de texto para el testimonio;
   • rating de 1 a 5 estrellas;
   • y botón de eliminar.
7. Si haces clic en el avatar, Flobu abre el gestor multimedia para asignar una foto del cliente.
8. Si no cargas avatar, la tienda pública puede mostrar una versión simple con la inicial del nombre.
9. Usa las estrellas para dejar la valoración real que quieres mostrar.
10. Si cambias el orden arrastrando, ese será el orden que Flobu usará para renderizar los testimonios.
11. Una diferencia importante de este bloque: aquí casi todo se configura desde el inspector; no estás editando cada cita directamente sobre el canvas como en Tarjetas.
12. También conviene saber su límite básico: si el bloque no tiene ítems, en la tienda pública no se muestra.

Resultado esperado:

• Configuraste al menos un testimonio con nombre, rol, cita y rating.
• Entendiste que el bloque Testimonios vive principalmente en el inspector derecho y que el orden del listado importa.

3) Configurar Estadísticas sin prometer una grilla manual que no existe

1. Inserta el bloque Estadísticas.
2. Selecciónalo para abrir el inspector.
3. Verás el bloque Estadísticas (n).
4. Usa Agregar estadística para crear un nuevo ítem.
5. Cada estadística tiene:
   • grip para moverla;
   • una casilla opcional de ícono;
   • campo Pre para prefijo;
   • campo principal para el valor;
   • campo Suf para sufijo;
   • y campo Etiqueta.
6. Un ejemplo real de uso sería:
   • Pre = +
   • Valor = 3500
   • Suf = % (o vacío)
   • Etiqueta = Clientes satisfechos
7. Puedes reordenar las estadísticas con el grip y eliminar cualquiera con el ícono de basura.
8. Un matiz importante para no prometer de más: el valor central del bloque está en prefijo + valor + sufijo + etiqueta. El ícono es opcional y conviene validarlo en vista previa antes de publicarlo si decides usarlo.
9. En la UI actual no existe un control manual para definir cuántas columnas tendrá el bloque. Flobu distribuye automáticamente la grilla según la cantidad de ítems.
10. En términos prácticos: con pocos ítems se ve más simple; con más ítems el bloque se acomoda hasta una grilla más ancha.
11. Si dejas el bloque sin ítems, no se mostrará en la tienda pública. Por eso conviene terminar al menos una estadística completa antes de considerar el bloque listo.

Resultado esperado:

• Configuraste estadísticas reales con orden, valor y etiqueta claros.
• Entendiste que la grilla de Estadísticas se ajusta sola según la cantidad de ítems y que no existe un selector manual de columnas en esta UI.

Checklist final rápido

• Inserté Tarjetas, Testimonios y Estadísticas.
• Agregué al menos una tarjeta con imagen.
• Cambié el modo de Tarjetas entre Carrusel y Tarjetas si hacía falta.
• Edité el título o el texto de Tarjetas directamente en el canvas.
• Creé al menos un testimonio con nombre, rol, cita y rating.
• Reordené un ítem en Testimonios o Tarjetas.
• Creé al menos una estadística con prefijo, valor, sufijo o etiqueta.
• Entendí que Testimonios y Estadísticas dependen casi por completo del inspector.
• Entendí que Estadísticas no tiene un selector manual de columnas.
• Validé el resultado en Escritorio, Tablet y Móvil.

Errores comunes

• Buscar en la UI los nombres exactos del roadmap. En la biblioteca real verás Tarjetas, Testimonios y Estadísticas.
• Intentar editar todo el bloque Tarjetas desde el inspector. En este caso el título y los textos de cada tarjeta se trabajan directamente en el canvas.
• Pensar que una nueva tarjeta se crea sin imagen desde el flujo lateral. En la interfaz actual, Agregar nueva tarjeta parte abriendo el gestor multimedia.
• Olvidar reordenar ítems después de agregar varios testimonios o estadísticas. El orden del listado sí afecta el resultado final.
• Esperar un control manual para decidir cuántas columnas tendrá Estadísticas. Hoy esa distribución es automática según la cantidad de ítems.
• Dar por hecho que el ícono de Estadísticas es el centro del bloque. La parte más confiable y esencial sigue siendo prefijo + valor + sufijo + etiqueta.