Configurar acordeón, pestañas y línea de tiempo

Qué vas a lograr

• Insertar los bloques Acordeón, Pestañas y Línea de tiempo.
• Agregar, editar, duplicar, eliminar y ordenar sus ítems.
• Ajustar su presentación básica antes de publicar.

Paso a paso en Flobu

Cómo funciona la interfaz de Flobu en este tutorial

• Menú lateral: ya debes estar dentro del editor visual de una página.
• Panel central: trabajarás en el canvas, usando Agregar bloque y la vista previa de cada bloque.
• Panel derecho: configurarás Ítems, Pestañas, Hitos, Contenido y Presentación.
• Acciones clave: usarás Acordeón, Pestañas, Línea de tiempo, Agregar nuevo ítem, Agregar pestaña, Agregar hito y los botones de duplicar, eliminar y mover.

1) Insertar los bloques en una página

1. Abre una página en el editor visual de Flobu.
2. Ubica la sección y columna donde quieres agregar contenido.
3. Haz clic en Agregar bloque.
4. En Añadir, selecciona Acordeón.
5. Repite el proceso para agregar Pestañas.
6. Repite el proceso para agregar Línea de tiempo.
7. Haz clic en cada bloque para abrir su configuración en el panel derecho.

Resultado esperado: Los tres bloques quedaron insertados y puedes seleccionarlos desde el canvas.

2) Configurar Acordeón y Pestañas

1. Selecciona el bloque Acordeón.
2. En Ítems, usa Agregar nuevo ítem si necesitas más filas.
3. Haz clic en un ítem para editar Título del ítem y Contenido.
4. Usa los botones de duplicar, eliminar o mover para ordenar las preguntas.
5. En Comportamiento, define si quieres Abrir primer ítem y el tipo de Apertura.
6. En Presentación, ajusta alineación, ancho, separación, densidad, radio y estilo.
7. Selecciona el bloque Pestañas.
8. En Contenido, edita el Título del bloque.
9. En Pestañas, usa Agregar pestaña si necesitas más secciones.
10. Haz clic en una pestaña para editar Título corto y Contenido.
11. En Presentación, ajusta la alineación, ancho, estilo de pestañas, densidad, radio y estilo del contenido.

Resultado esperado: El acordeón y las pestañas tienen contenido real, orden correcto y una presentación clara.

3) Configurar Línea de tiempo

1. Selecciona el bloque Línea de tiempo.
2. En Contenido, edita el Título del bloque.
3. En Hitos, usa Agregar hito.
4. Haz clic en un hito para editarlo.
5. En Imagen, usa Agregar, Cambiar o Quitar.
6. En Accesibilidad, completa Texto alternativo o activa Imagen decorativa.
7. En Enlace, agrega una URL de destino solo si el hito debe llevar a otra página.
8. En Contenido, completa Fecha o etiqueta y Texto.
9. Usa los botones de duplicar, eliminar o mover para ordenar los hitos.
10. En Presentación, ajusta línea, marcador, separación, proporción de imagen y estilo del contenido.

Resultado esperado: La línea de tiempo muestra hitos completos, con imagen, fecha o etiqueta, texto y orden correcto.

Checklist final rápido

• Inserté Acordeón.
• Inserté Pestañas.
• Inserté Línea de tiempo.
• Agregué o revisé los ítems del acordeón.
• Edité títulos y contenidos.
• Agregué o revisé las pestañas.
• Agregué o revisé los hitos.
• Revisé imágenes y texto alternativo.
• Ordené los ítems cuando fue necesario.
• Revisé la vista en escritorio, tablet y móvil.

Errores comunes

• Buscar los bloques con nombres en inglés. En Flobu aparecen como Acordeón, Pestañas y Línea de tiempo.
• Agregar ítems y dejarlos con textos de ejemplo.
• Crear una línea de tiempo sin imágenes, fechas o descripciones reales.
• Olvidar mover los ítems al orden correcto.
• Cambiar la presentación sin revisar cómo se ve en móvil.
• Publicar sin abrir cada pestaña, ítem o hito para confirmar su contenido.