Qué vas a lograr
- Reordenar secciones y bloques usando la toolbar flotante, el árbol Secciones y el arrastre del canvas.
- Duplicar bloques o secciones antes de hacer cambios riesgosos.
- Eliminar contenido con más control, entendiendo cuándo Flobu confirma la acción y cómo recuperarla con deshacer o rehacer.
Paso a paso en Flobu
Cómo funciona la interfaz de Flobu en este tutorial
- Menú lateral: usarás sobre todo el panel Secciones para ubicar rápido una sección o un bloque y seleccionar el elemento correcto antes de moverlo o borrarlo.
- Panel central: en el canvas verás la toolbar flotante de Sección o de cada bloque cuando lo seleccionas o enfocas.
- Acciones clave: usarás arrastre, iconos de duplicar y eliminar, Deshacer, Rehacer, Publicar cambios y algunos atajos del teclado.
- Alcance de este tutorial: aquí trabajarás sobre contenido dentro de una página del Page Builder v2. No eliminarás páginas completas ni configuraciones globales como Navbar o Footer.
1) Reordenar secciones y bloques sin perder la ubicación correcta
- Abre una página dentro del Page Builder v2.
- Si la página ya tiene bastante contenido, empieza por el panel Secciones del lateral izquierdo.
- Ahí verás cada sección numerada y, al expandirla, también los bloques que contiene.
- Haz clic sobre una sección o un bloque desde esa lista para ubicarlo rápidamente en el canvas.
- Si quieres reordenar secciones, tienes dos caminos reales.
Primer camino: desde el canvas. Al seleccionar una sección aparece una toolbar flotante con estos controles:
- Arrastrar
- Mover arriba
- Mover abajo
- Duplicar sección
- Eliminar sección
Mover arriba y Mover abajo son útiles cuando solo quieres desplazar una sección una posición sin arrastrarla.
Segundo camino: desde el panel Secciones. Ahí cada sección tiene un ícono de agarre para reordenarla arrastrando dentro de la lista.
Si quieres reordenar bloques, el flujo cambia un poco. En la toolbar flotante del bloque verás Arrastrar bloque, Duplicar bloque y Eliminar bloque. A diferencia de las secciones, los bloques no tienen flechas para subir o bajar; su reordenamiento se hace arrastrando.
- Puedes arrastrar un bloque dentro de la misma columna para cambiar su orden.
- También puedes arrastrarlo a otra columna de la misma sección o incluso a otra sección.
- Si lo sueltas sobre otro bloque, Flobu lo inserta cerca de ese destino.
- Si lo sueltas sobre una columna vacía o sobre el final de una columna, lo agrega al final de esa columna.
El panel Secciones te ayuda a seleccionar bloques, pero no es el lugar principal para reordenarlos. Para mover bloques con precisión, el canvas sigue siendo la referencia más segura. Si te desubicas visualmente, usa Esc para limpiar la selección y vuelve a elegir el elemento desde Secciones.
Resultado esperado:
- Reordenaste una o más secciones y al menos un bloque usando los controles reales del editor.
- Entendiste que las secciones se pueden mover desde el canvas o desde Secciones, mientras que los bloques se reordenan principalmente por arrastre en el canvas.
2) Duplicar antes de editar, mover o borrar
- Antes de hacer un cambio riesgoso, selecciona la sección o el bloque que quieras proteger.
- Si es una sección, usa el ícono Duplicar sección en la toolbar flotante.
- Si es un bloque, usa el ícono Duplicar bloque.
- Flobu no abre un asistente ni te pide nombre para la copia. La duplicación ocurre de inmediato dentro del borrador actual.
- En el caso de las secciones, la copia se inserta justo después de la original.
- En el caso de los bloques, la copia también se inserta justo después del bloque original dentro de la misma columna.
Esto es importante: duplicar no crea una referencia compartida. La copia queda como un elemento independiente, lista para editarse sin afectar al original. Por eso la duplicación es una muy buena red de seguridad antes de:
- Simplificar un Hero.
- Probar otra distribución de cards.
- Reemplazar un bloque.
- Eliminar contenido del que todavía no estás completamente seguro.
Si prefieres teclado, también existe el atajo Ctrl/Cmd + D. Ese atajo duplica el elemento seleccionado, pero solo si no estás escribiendo dentro de un input o editor de texto. Si estás editando texto, Flobu bloquea ese atajo para evitar duplicaciones accidentales.
Una buena práctica real dentro del editor es esta: primero duplica, luego edita o borra la copia, y solo elimina el original cuando ya validaste el resultado. Como el editor trabaja sobre borrador, todavía puedes revisar el resultado antes de usar Publicar cambios.
Resultado esperado:
- Duplicaste al menos una sección o un bloque y reconociste dónde aparece la copia.
- Entendiste que duplicar es la forma más segura de probar cambios sin comprometer el contenido original.
3) Eliminar con seguridad y recuperar si hace falta
- En Flobu hay más de una forma de eliminar contenido y no todas se comportan igual.
- Si haces clic en el ícono de papelera dentro de la toolbar flotante de una sección o de un bloque, la eliminación ocurre de inmediato.
- Lo mismo pasa si eliminas una sección desde Ajustes de sección > Eliminar sección.
- Por eso, si todavía estás dudando, conviene duplicar primero.
- Si quieres una capa extra de seguridad, selecciona el elemento y usa la tecla Delete o Backspace.
- En ese caso, Flobu no elimina al instante. Primero muestra un toast con el mensaje ¿Eliminar el elemento seleccionado?, desde el cual puedes confirmar con Eliminar o cancelar.
- Esta es la vía más segura cuando estás trabajando rápido y no quieres borrar algo por error con un clic directo.
- Si aun así borraste o moviste algo que no querías, usa Deshacer.
- En escritorio verás botones visibles de Deshacer y Rehacer en la barra superior. En pantallas pequeñas también existen esos controles en la barra flotante inferior.
- Además puedes usar los atajos: Ctrl/Cmd + Z para deshacer; Ctrl/Cmd + Shift + Z o Ctrl + Y para rehacer.
Otro matiz importante del producto: el editor va guardando borrador y puede mostrar estados como Guardando…, pero eso no significa que el cambio ya esté público. El contenido solo pasa al sitio en vivo cuando usas Publicar cambios. Eso te da una capa extra de seguridad: puedes limpiar, mover, borrar y deshacer dentro del borrador antes de afectar la página publicada.
Si terminaste una sesión de orden y limpieza, revisa el resultado en Vista previa o compara con el Sitio publicado antes de publicar. Y si vas a salir del editor con cambios pendientes, Flobu intenta advertirte antes de abandonar la página.
Resultado esperado:
- Eliminaste contenido usando la vía correcta para tu nivel de certeza.
- Entendiste que Delete o Backspace ofrece confirmación, y que Deshacer o Rehacer te ayudan a recuperar cambios dentro del borrador antes de publicar.
Checklist final rápido
- Seleccioné la sección o el bloque correcto antes de moverlo.
- Usé el panel Secciones para ubicar el contenido más rápido.
- Reordené una sección con flechas o arrastre.
- Reordené un bloque arrastrándolo en el canvas.
- Dupliqué al menos un bloque o una sección antes de probar cambios.
- Entendí que la copia aparece justo después del original.
- Usé Delete o Backspace para probar la eliminación con confirmación.
- Verifiqué que Deshacer y Rehacer funcionan desde botones o atajos.
- Diferencié entre borrador guardado y contenido publicado.
- Revisé el resultado antes de usar Publicar cambios.
Errores comunes
- Intentar reordenar bloques desde el panel Secciones como si fuera un sorter completo de bloques. Ese panel sirve sobre todo para ubicar y seleccionar; el reordenamiento fino de bloques ocurre en el canvas.
- Hacer clic en la papelera de la toolbar pensando que Flobu abrirá una confirmación. En esa vía la eliminación es inmediata.
- Borrar contenido importante sin duplicarlo antes. Si el cambio era arriesgado, conviene crear una copia primero.
- Pensar que Ctrl/Cmd + D siempre funciona. Si estás escribiendo dentro de un editor de texto o input, Flobu no usa ese atajo para duplicar.
- Confundir Guardando… con Publicado. El editor trabaja en borrador y los cambios no pasan al sitio en vivo hasta usar Publicar cambios.
- Perder la ubicación del elemento después de moverlo o borrarlo. Usa Deshacer, Rehacer, Esc y el panel Secciones para recuperar contexto rápidamente.