Ajustar columnas y anchos por dispositivo

Qué vas a lograr

• Revisar el ancho actual de una columna.
• Cambiar el layout de una sección.
• Validar el resultado en escritorio, tablet y móvil.

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 sobre el área de edición, seleccionando una sección y sus columnas.
• Panel derecho: usarás Columnas, Columna actual y Layout de columnas.
• Acciones clave: seleccionarás una columna, elegirás un layout y revisarás las vistas de escritorio, tablet y móvil.

1) Seleccionar una columna y revisar su ancho

1. Abre una página en el editor visual de Flobu.
2. Haz clic en la sección que quieres ajustar.
3. En el panel derecho, busca Columnas.
4. Haz clic en Columna 1, Columna 2 o la columna que quieras revisar.
5. En Columna actual, revisa el dato Ancho: X / 12.
6. Usa esta referencia rápida: 12/12 es ancho completo, 6/12 es la mitad, 4/12 es un tercio y 3/12 es un cuarto.

Resultado esperado:

• Identificaste qué columna estás editando y cuánto espacio ocupa.

2) Cambiar el layout de la sección

1. Con la columna seleccionada, entra a Layout de columnas.
2. Elige entre 1 columna, 2 columnas, 2 columnas (ancho + estrecho), 2 columnas (estrecho + ancho), 3 columnas o 4 columnas.
3. Si necesitas una sección simple, usa 1 columna o 2 columnas.
4. Si necesitas contenido principal y contenido lateral, usa una opción de ancho + estrecho.
5. Si eliges menos columnas que antes, Flobu mueve los bloques sobrantes a la última columna disponible.

Resultado esperado:

• La sección quedó con una distribución más adecuada para tu contenido.

3) Revisar escritorio, tablet y móvil

1. En la barra superior del editor, cambia a la vista de escritorio.
2. Revisa que la sección se vea ordenada.
3. Cambia a la vista de tablet.
4. Usa el botón de rotación si quieres revisar la orientación vertical y horizontal.
5. Cambia a la vista de móvil.
6. Verifica que el contenido no quede apretado ni en un orden confuso.
7. Si algo se ve mal, vuelve a la sección y prueba un layout más simple.

Resultado esperado:

• Confirmaste que la misma sección funciona bien en escritorio, tablet y móvil.

Checklist final rápido

• Seleccioné una sección en el editor visual.
• Abrí Columnas en el panel derecho.
• Seleccioné una columna específica.
• Revisé Ancho: X / 12.
• Cambié el layout desde Layout de columnas.
• Revisé el resultado en escritorio.
• Revisé el resultado en tablet.
• Revisé el resultado en móvil.

Errores comunes

• Confundir X / 12 con píxeles. Es una proporción del ancho de la sección, no una medida en píxeles.
• Usar 4 columnas cuando el contenido necesita más espacio para leerse bien.
• Publicar revisando solo escritorio, sin verificar cómo se ve en otros dispositivos.
• Pensar que tablet o móvil son páginas separadas. Es la misma página adaptada a cada tamaño de pantalla.
• Cambiar a menos columnas sin revisar dónde quedaron los bloques que fueron movidos automáticamente.