Qué vas a lograr
- Insertar y organizar los bloques Acordeón, Pestañas y Línea de tiempo en una página del Page Builder v2.
- Entender qué parte de cada bloque se edita desde el inspector y qué parte se trabaja directamente en el canvas.
- Dejar estructuras navegables y ordenadas 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 Acordeón, Pestañas y Línea de tiempo, 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 completar contenido.
- Alcance de este tutorial: aquí te enfocarás solo en estos tres bloques. No entrarás en Tarjetas, Testimonios, Estadísticas ni en estilos avanzados del bloque.
1) Configurar el bloque Acordeón sin confundir título de ítem con contenido
- Abre la pestaña Añadir o usa un Agregar bloque dentro del canvas.
- Busca Acordeón y haz clic para insertarlo.
- Selecciona el bloque para abrir su inspector.
- En el panel lateral verás el bloque Ítems.
- Cada ítem aparece como una fila con su título visible, botón de eliminar y grip para moverlo.
- Usa Agregar nuevo ítem para crear una nueva entrada.
- Cuando agregas un ítem nuevo, Flobu lo crea con un título y un contenido base, y además lo deja listo para editar.
- Si haces clic sobre una fila del listado, el editor abre el subpanel de ese ítem.
- En ese subpanel solo verás Título del Ítem.
Importante: en la UI actual, el título de cada ítem se edita desde el inspector, no directamente en el encabezado del acordeón dentro del canvas. En cambio, el contenido interno de cada ítem sí se edita dentro del canvas.
- Haz clic en el acordeón en el canvas y abre el ítem que quieras revisar.
- Dentro del panel desplegado verás el editor enriquecido para modificar su contenido.
- También puedes editar el Título general del bloque directamente en el canvas, encima del acordeón.
- Si vuelves al inspector, verás el switch Abrir primer ítem. Si lo activas, el primer ítem aparece abierto por defecto.
Nota del producto: si el bloque no tiene ítems, en la tienda pública no se muestra; en el editor solo verás un aviso para agregar ítems desde el panel lateral.
Resultado esperado:
- Configuraste un acordeón con ítems ordenados y entendiste que el título de cada ítem se edita en el inspector, mientras su contenido se edita dentro del canvas.
- Sabes usar Abrir primer ítem sin confundirlo con un control de apertura individual por cada fila.
2) Configurar Pestañas completamente desde el inspector
- Inserta el bloque Pestañas.
- Selecciónalo para abrir el inspector.
- Verás el bloque Pestañas (n), donde n es la cantidad actual.
- Usa Agregar pestaña para crear una nueva.
- Cada pestaña se muestra como una tarjeta del inspector con:
- grip para reordenar;
- campo de título;
- editor enriquecido para el contenido;
- y botón para eliminar.
Diferencia clave: a diferencia del Acordeón, aquí el flujo de edición vive casi por completo en el panel lateral. No esperes editar el contenido principal de cada pestaña directamente en el canvas.
- Cambia el título de cada pestaña desde su campo correspondiente.
- Luego usa el editor enriquecido del mismo panel para redactar su contenido.
- Si cambias el orden arrastrando, ese será el orden que Flobu usará en la navegación superior del bloque.
- En el canvas verás la primera pestaña activa como referencia visual.
- En la tienda pública el usuario puede cambiar entre pestañas para ver su contenido.
Limitación importante: este bloque no tiene un título general separado como Tarjetas o Acordeón. Todo gira en torno a las pestañas y sus contenidos. Si el bloque queda sin ítems, tampoco se mostrará en la tienda pública.
Resultado esperado:
- Configuraste pestañas con títulos y contenido completos.
- Entendiste que Pestañas se administra prácticamente por completo desde el inspector derecho y que no tiene un título global independiente.
3) Configurar Línea de tiempo entendiendo que imagen y orden van al lateral, pero fecha y texto viven en el canvas
- Inserta el bloque Línea de tiempo.
- Selecciónalo para abrir el inspector.
- En la interfaz actual verás un panel llamado Tarjetas. Ese panel lista los hitos de la línea de tiempo.
- Cada ítem tiene miniatura, botón de eliminar y grip para reordenar.
- Para agregar uno nuevo, usa Agregar nueva tarjeta.
- En la UI actual, un nuevo hito se crea a partir de una imagen seleccionada desde el gestor multimedia.
- Si luego quieres cambiar la imagen de un hito existente, haz clic en su miniatura en el inspector o en el ícono de edición sobre la imagen dentro del canvas.
Importante: el inspector lateral no muestra formularios directos para la fecha o el texto del hito. Esos campos se editan directamente en el canvas.
- Haz clic sobre el título general del bloque en la parte superior del timeline para cambiarlo.
- Dentro de cada hito, edita la fecha desde el bloque de texto superior.
- Luego edita la descripción desde el bloque de texto inferior.
- Si reordenas los hitos con el grip del inspector, también cambia el orden visual de la línea de tiempo.
- Si no hay hitos todavía, el canvas mostrará una estructura vacía lista para empezar cargando la primera imagen.
Recomendación: este bloque depende mucho de la composición visual entre imagen, fecha y texto; por eso conviene validar el resultado en Escritorio, Tablet y Móvil antes de publicarlo. La tienda pública sí renderiza el timeline aunque no haya ítems, pero se verá como una estructura vacía con placeholder; no lo consideres terminado hasta tener hitos reales cargados.
Resultado esperado:
- Configuraste al menos un hito de la línea de tiempo con imagen, fecha y texto.
- Entendiste que en Línea de tiempo el inspector lateral maneja principalmente orden e imagen, mientras el contenido textual se trabaja dentro del canvas.
Checklist final rápido
- Inserté Acordeón, Pestañas y Línea de tiempo.
- Agregué al menos un ítem en Acordeón.
- Edité el Título del Ítem del acordeón desde el inspector.
- Edité el contenido de un ítem del acordeón dentro del canvas.
- Agregué al menos una pestaña y completé su contenido desde el panel lateral.
- Reordené pestañas o ítems con el grip cuando hizo falta.
- Agregué al menos un hito en Línea de tiempo.
- Cargué o cambié una imagen para un hito del timeline.
- Edité la fecha o el texto del timeline directamente en el canvas.
- Validé el resultado en Escritorio, Tablet y Móvil.
Errores comunes
- Buscar los nombres exactos del roadmap dentro de la biblioteca. En la UI real verás Acordeón, Pestañas y Línea de tiempo.
- Intentar editar el título de cada ítem del acordeón directamente en el encabezado del canvas. En la interfaz actual ese título se cambia desde el subpanel del ítem.
- Esperar que Pestañas tenga un título general separado. Hoy el bloque se compone solo de sus pestañas y contenidos.
- Pensar que la Línea de tiempo se completa entera desde el inspector. En realidad, imagen y orden van al lateral, pero fecha y texto se editan en el canvas.
- Dar por terminado un timeline solo porque ya tiene estructura visual. Sin hitos reales cargados, seguirá viéndose incompleto.
- Olvidar reordenar ítems después de agregarlos. En estos tres bloques el orden del listado sí afecta el resultado final.