Crear secciones y layouts base

Qué vas a lograr

• Crear la primera sección de una página desde el estado vacío del editor.
• Agregar nuevas secciones arriba, abajo o entre secciones existentes usando la interfaz real de Flobu.
• Elegir y cambiar layouts base de columnas sin perder de vista cómo se reorganiza la estructura de la página.

---

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 abierta en el editor.
• Panel central: usarás el canvas donde Flobu muestra el estado Comienza agregando una sección, los botones Agregar sección entre secciones y el selector Elegir layout.
• Acciones clave: usarás Agregar sección, el selector Elegir layout, la selección de columnas en el inspector y el bloque Cambiar layout.
• Alcance de este tutorial: aquí construirás la estructura base de la página. Todavía no entrarás a configurar bloques de contenido específicos ni estilos avanzados.

1) Crear la primera sección desde una página vacía

1. Abre una página nueva o una página que aún no tenga contenido.
2. En el centro del editor, Flobu mostrará el estado vacío: Comienza agregando una sección.
3. Debajo verás dos acciones: Agregar sección y Elegir plantilla. En este tutorial usa Agregar sección.
4. Flobu abrirá un pequeño selector con el título Elegir layout. En ese selector verás los layouts base disponibles:
   • 1 columna
   • 2 columnas
   • 2 columnas (ancho + estrecho)
   • 2 columnas (estrecho + ancho)
   • 3 columnas
   • 4 columnas
5. Haz clic sobre el layout que mejor represente la estructura inicial que quieres construir.
6. Al seleccionarlo, Flobu insertará inmediatamente la nueva sección en el canvas.
7. Cada layout crea una sección con columnas vacías. Todavía no verás texto, imágenes ni botones dentro de esas columnas, porque en este paso solo estás definiendo la estructura.

Resultado esperado:

• La página dejó de estar vacía y ya tiene al menos una sección visible en el canvas.
• Entendiste que el primer paso estructural en Flobu es elegir un layout de columnas, no insertar contenido al azar.

2) Agregar nuevas secciones en la posición correcta

1. Cuando ya existe al menos una sección, Flobu muestra botones Agregar sección en varios puntos del canvas:
   • Uno antes de la primera sección.
   • Uno entre secciones existentes.
   • Otro después de la última sección.
2. Usa el botón Agregar sección en la posición exacta donde quieres insertar la nueva estructura.
3. Flobu volverá a mostrar el selector Elegir layout. Elige el layout que corresponda a esa nueva parte de la página. Por ejemplo:
   • Usa 1 columna para un bloque ancho como una introducción.
   • Usa 2 columnas para contenido equilibrado.
   • Usa 2 columnas (ancho + estrecho) o 2 columnas (estrecho + ancho) para combinaciones asimétricas.
   • Usa 3 columnas o 4 columnas para estructuras más modulares.
4. Si te equivocas de ubicación, no hace falta borrar todo el trabajo: Flobu agrega la sección en el punto donde pulsaste ese Agregar sección. Esto es importante en páginas largas, porque el editor no te obliga a crear todas las secciones al final.
5. Un detalle real de la experiencia: al pasar el cursor por el canvas, Flobu revela mejor las zonas de inserción. En mobile o pantallas pequeñas, estas mismas acciones siguen existiendo aunque la interfaz se vea más compacta.

Resultado esperado:

• Sabes insertar secciones nuevas arriba, entre otras o al final del canvas.
• Entendiste que cada botón Agregar sección respeta una posición exacta dentro del orden de la página.

3) Cambiar el layout de una sección ya creada

1. Si después de crear la sección notas que elegiste un layout incorrecto, no necesitas empezar desde cero.
2. Haz clic en la sección que quieres ajustar.
3. En el inspector derecho, Flobu te mostrará la estructura de columnas de esa sección.
4. Desde ahí, selecciona una de sus columnas. Cuando la columna quede activa, aparecerá el panel Columna.
5. Dentro de ese panel verás el bloque Cambiar layout. Flobu te mostrará otra vez los mismos presets del editor:
   • 1 columna
   • 2 columnas
   • 2 columnas (ancho + estrecho)
   • 2 columnas (estrecho + ancho)
   • 3 columnas
   • 4 columnas
6. Haz clic en el nuevo layout que quieres aplicar. Flobu actualizará la estructura de columnas de esa sección inmediatamente.
7. Importante: si el nuevo layout elimina columnas que antes existían, los bloques de las columnas eliminadas se mueven a la última columna disponible. Por eso conviene decidir primero la estructura base antes de llenar la sección con mucho contenido.
8. Este tutorial trabaja con layouts base visibles en la interfaz; no estás creando una cantidad arbitraria de columnas ni una grilla completamente libre.

Resultado esperado:

• Sabes corregir un layout sin borrar la sección entera.
• Entendiste que cambiar el layout puede reorganizar contenido existente cuando desaparecen columnas.

---

Checklist final rápido

• Abrí una página en el Page Builder v2.
• Identifiqué el estado vacío Comienza agregando una sección o los botones Agregar sección.
• Creé la primera sección desde Elegir layout.
• Reconocí los layouts base disponibles del editor.
• Agregué al menos una segunda sección en una posición específica del canvas.
• Entendí la diferencia entre crear una sección y llenar la sección con bloques.
• Seleccioné una sección y luego una columna en el inspector.
• Encontré el bloque Cambiar layout.
• Entendí que al reducir columnas, Flobu mueve los bloques de columnas eliminadas a la última columna.

---

Errores comunes

• Empezar a pensar en bloques antes de definir la estructura base. En Flobu conviene elegir primero el layout de columnas.
• Insertar una sección en el lugar equivocado por hacer clic en el botón Agregar sección incorrecto. Cada botón respeta una posición distinta dentro del canvas.
• Creer que una sección nueva ya debería traer contenido visible. Al crearla, solo defines columnas vacías.
• Cambiar un layout cuando la sección ya tiene mucho contenido sin considerar la advertencia de Flobu. Si desaparecen columnas, sus bloques se mueven a la última columna.
• Esperar una grilla completamente libre o una cantidad arbitraria de layouts. En esta interfaz trabajas con presets concretos y visibles.
• Confundir Elegir plantilla con crear una sola sección. Las plantillas afectan una base visual más amplia; Agregar sección sirve para construir la estructura paso a paso.