Qué vas a lograr
- Crear la primera sección de una página.
- Elegir un layout base de columnas.
- Agregar nuevas secciones y cambiar el layout cuando sea necesario.
Paso a paso en Flobu
Cómo funciona la interfaz de Flobu en este tutorial
- Menú lateral: entra a Tienda online > Editar sitio o abre una página desde Páginas.
- Panel central: trabajarás sobre el área de edición de la página.
- Panel izquierdo: usa Estructura para ver las secciones y Añadir para agregar contenido.
- Panel derecho: al seleccionar una sección, verás Columnas, Layout de columnas y Ajustes de sección.
- Acciones clave: usarás Agregar sección, Elegir layout, Columna 1, Columna 2 y Layout de columnas.
1) Crear la primera sección
- Abre la página en el editor visual.
- Si ves Agregar componente en lugar de Agregar sección, entra a Preferencias generales y cambia el Modo del editor visual a Avanzado.
- Si la página está vacía, verás el mensaje Comienza agregando una sección.
- Haz clic en Agregar sección.
- En Elegir layout, selecciona la estructura que necesitas.
- Puedes elegir 1 columna, 2 columnas, 2 columnas (ancho + estrecho), 2 columnas (estrecho + ancho), 3 columnas o 4 columnas.
Resultado esperado: la página tiene una sección nueva con columnas vacías listas para recibir contenido.
2) Agregar secciones en el lugar correcto
- Ubica el punto de la página donde quieres insertar la nueva sección.
- Haz clic en Agregar sección arriba, entre secciones o al final de la página.
- Elige el layout en Elegir layout.
- Usa 1 columna para contenido ancho.
- Usa 2 columnas para dividir contenido de forma equilibrada.
- Usa las opciones de ancho + estrecho para combinar contenido principal con apoyo visual o lateral.
- Usa 3 columnas o 4 columnas solo cuando el contenido sea breve.
Resultado esperado: la nueva sección queda ubicada en la posición correcta de la página.
3) Cambiar el layout de una sección
- Haz clic en la sección que quieres ajustar.
- En el panel derecho, entra a Columnas.
- Selecciona Columna 1, Columna 2 o la columna que quieras revisar.
- En Layout de columnas, elige un nuevo layout.
- Revisa la sección después del cambio.
- Si reduces la cantidad de columnas, revisa dónde quedaron los bloques que estaban en las columnas eliminadas.
Resultado esperado: la sección conserva su contenido y queda con una estructura más adecuada.
Checklist final rápido
- Abrí la página en el editor visual.
- Confirmé que estoy en modo Avanzado si necesito trabajar con secciones.
- Creé una sección desde Agregar sección.
- Elegí un layout base desde Elegir layout.
- Agregué una sección en la posición correcta.
- Cambié el layout desde Layout de columnas.
- Revisé la sección después de modificar sus columnas.
Errores comunes
- Trabajar en modo Básico cuando necesitas secciones y columnas. Cambia a Avanzado desde Preferencias generales.
- Elegir 4 columnas para textos largos; suelen verse apretados en pantalla.
- Insertar la sección en el lugar equivocado. Cada botón Agregar sección respeta su posición en la página.
- Cambiar a menos columnas sin revisar los bloques movidos. Siempre revisa la sección después de reducir columnas.
- Confundir secciones con bloques: primero defines la estructura con secciones y columnas, luego agregas el contenido dentro de ellas.