Ajustar columnas y anchos por dispositivo

Qué vas a lograr

• Identificar el ancho actual de una columna dentro de una sección del Page Builder v2.
• Cambiar el layout base de una sección para ajustar su estructura de columnas.
• Revisar el comportamiento real de esa estructura en Escritorio, Tablet y Móvil, entendiendo los límites actuales de Flobu.

---

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, editando una página que tenga al menos una sección.
• Panel central: usarás la barra superior con Escritorio, Tablet y Móvil, el canvas de la página y el inspector derecho donde aparecen Columnas y Layout de columnas.
• Acciones clave: seleccionarás una sección, luego una columna, usarás Cambiar layout y revisarás el resultado en cada viewport.
• Alcance de este tutorial: hoy Flobu no muestra campos separados para escribir manualmente un ancho distinto en desktop, tablet y mobile. El ajuste visible en la UI se hace cambiando el layout base y revisando cómo ese layout responde por dispositivo.

1) Seleccionar una sección y leer el ancho actual de sus columnas

1. Abre una página en el Page Builder v2 que ya tenga una sección con una o más columnas.
2. Haz clic sobre la sección que quieres revisar.
3. En el inspector derecho aparecerá el bloque Columnas.
4. Ahí verás un resumen visual de la sección y un contador como 2 columnas, 3 columnas o el número que corresponda.
5. Debajo, Flobu muestra botones como Columna 1, Columna 2, Columna 3.
6. Cada botón incluye un resumen real como 0 bloques · 6/12 o 2 bloques · 8/12.
7. Haz clic sobre una de esas columnas.
8. El inspector cambiará a la vista de Columna.
9. Dentro de Columna actual, Flobu te mostrará el dato Ancho: X / 12.
10. Ese número representa el ancho base de esa columna dentro de la grilla del editor.
11. También verás una barra horizontal que pinta en azul la columna activa y en gris el resto de la sección.
12. Esto te ayuda a leer la proporción actual antes de cambiar nada.

Nota importante: en la UI actual, el resumen visible de ancho en este panel se apoya en la estructura base de la sección; no verás aquí tres inputs distintos para desktop, tablet y mobile.

Resultado esperado:

• Ya sabes entrar al inspector correcto para revisar columnas.
• Entendiste que Flobu trabaja con una grilla de 12 y que el ancho visible se expresa como X/12.

2) Cambiar el layout base de la sección para ajustar sus columnas

1. Con una columna seleccionada, baja al bloque Cambiar layout.
2. Flobu mostrará los presets reales del editor:
   • 1 columna
   • 2 columnas
   • 2 columnas (ancho + estrecho)
   • 2 columnas (estrecho + ancho)
   • 3 columnas
   • 4 columnas
3. Haz clic sobre el layout que mejor resuelva la estructura que necesitas:
   • Si quieres una composición equilibrada, usa 2 columnas.
   • Si quieres una columna principal con una lateral, usa 2 columnas (ancho + estrecho) o 2 columnas (estrecho + ancho).
   • Si buscas una distribución más modular, usa 3 columnas o 4 columnas.
4. Cuando eliges un layout, Flobu actualiza de inmediato la estructura de la sección.
5. Vuelve a mirar el bloque Columnas y la tarjeta Columna actual. Ahí verás reflejado el nuevo ancho base, por ejemplo 6/12, 8/12, 4/12 o 12/12.
6. Si el nuevo layout elimina columnas que existían antes, Flobu mueve los bloques de las columnas eliminadas a la última columna disponible. Por eso conviene ajustar la estructura antes de llenar demasiado la sección.

Limitación importante: hoy no existe un deslizador o campo manual para escribir anchos arbitrarios por dispositivo desde este panel. En la práctica, ajustas el ancho eligiendo uno de los layouts visibles del editor.

Resultado esperado:

• Pudiste cambiar la estructura base de la sección desde el inspector.
• Entendiste que en Flobu el ancho de columnas se ajusta con presets de layout, no con una grilla libre escrita a mano desde la UI.

3) Revisar el resultado en escritorio, tablet y móvil

1. Mira la barra superior del editor. Ahí verás los botones Escritorio, Tablet y Móvil.
2. Primero revisa la sección en Escritorio. Esa vista te muestra la estructura base con la que estás trabajando en el canvas.
3. Luego cambia a Tablet. Flobu mostrará el ancho del viewport en píxeles y un botón para rotar la orientación. Revisa si la sección sigue siendo cómoda de leer y si el reparto de columnas tiene sentido.
4. Después cambia a Móvil. Observa la misma sección, ahora en un ancho mucho más estrecho.
5. Aquí es importante entender el comportamiento real del producto:
   • Flobu no te deja crear una página aparte para cada dispositivo; estás revisando la misma página con una adaptación responsive automática.
   • Si el layout usa columnas amplias como 6/12 o más, Tablet puede mantener parte de esa distribución; las columnas más estrechas tienden a pasar a una fila propia, y en Móvil las columnas pasan a ancho completo.
6. Si una sección se siente demasiado comprimida en Tablet o Móvil, la solución visible hoy en la UI suele ser volver al layout base y simplificarlo. Por ejemplo:
   • Pasar de 4 columnas a 2 columnas.
   • O de 2 columnas (ancho + estrecho) a 1 columna en una zona donde el contenido necesita más espacio.
7. Usa también el botón de rotación en Tablet y Móvil si quieres validar la vista vertical y horizontal.

Recuerda: cambiar de viewport no edita una versión distinta de la página; solo te ayuda a validar la misma estructura antes de publicar.

Resultado esperado:

• Validaste la misma sección en Escritorio, Tablet y Móvil.
• Entendiste que el ajuste responsive actual se controla revisando la vista por dispositivo y corrigiendo el layout base cuando haga falta.

---

Checklist final rápido

• Seleccioné una sección dentro del Page Builder v2.
• Encontré el bloque Columnas en el inspector derecho.
• Seleccioné al menos una columna.
• Vi el resumen Ancho: X / 12.
• Cambié el layout de la sección desde Cambiar layout.
• Revisé el resultado en Escritorio.
• Revisé el resultado en Tablet.
• Revisé el resultado en Móvil.
• Probé la rotación en Tablet o Móvil cuando hizo falta.
• Entendí que hoy Flobu no expone un editor manual separado para anchos de desktop, tablet y mobile.

---

Errores comunes

• Intentar encontrar un campo manual para escribir un ancho distinto por dispositivo. En la interfaz actual ajustas la estructura eligiendo layouts y validando el resultado en cada viewport.
• Cambiar a Tablet o Móvil pensando que editas una segunda versión de la página. Sigues trabajando sobre la misma página.
• Mirar solo Escritorio y publicar sin revisar Tablet y Móvil. En el editor esas vistas existen justamente para detectar problemas antes de publicar.
• Confundir 8/12 o 6/12 con píxeles. Ese dato representa la proporción de la columna dentro de una grilla de 12.
• Cambiar un layout cuando la sección ya tiene muchos bloques sin considerar que Flobu moverá el contenido de las columnas eliminadas a la última columna disponible.
• Esperar que una estructura muy densa de 3 o 4 columnas se vea igual de cómoda en pantallas pequeñas. Muchas veces necesitas simplificar el layout base para que funcione mejor en responsive.