Introduccion a la interfaz del Page Builder v2

Qué vas a lograr

• Reconocer las partes principales de la interfaz del Page Builder v2 de Flobu.
• Entender para qué sirve cada panel antes de empezar a crear secciones o bloques.
• Diferenciar entre borrador, vista previa, sitio publicado y publicación final dentro del editor.

---

Paso a paso en Flobu

Cómo funciona la interfaz de Flobu en este tutorial

• Menú lateral: normalmente entrarás al editor desde Tienda online > Editar sitio para la página de inicio, o desde Páginas > Editar página para una página CMS.
• Panel central: en el editor verás una barra superior fija, un panel izquierdo, un canvas central con la vista de la página y un inspector contextual que aparece al seleccionar elementos.
• Acciones clave: usarás botones como Publicar cambios, Acciones, Estructura, Añadir, Vista previa y los selectores de dispositivo Escritorio, Tablet y Móvil.
• Alcance de este tutorial: aquí solo aprenderás a orientarte dentro de la interfaz. La creación de páginas, secciones, columnas, bloques, navbar, footer y estilos se trabaja en los siguientes tutoriales.

---

1) Entrar al editor y reconocer la barra superior

1. Abre el editor desde una de estas entradas reales de Flobu:
   • Tienda online > Editar sitio si quieres trabajar la página principal.
   • Páginas > Editar página si quieres trabajar una página CMS.
2. Cuando el editor cargue, observa la barra fija superior.
3. A la izquierda verás Inicio, que te devuelve al panel principal.
4. En el centro verás un botón como Editor · Nombre de la página. Ese botón no es decorativo: al hacer clic, abre el modal Cambiar página para saltar rápido a otra página o crear una nueva desde dentro del editor.
5. En la parte derecha verás las acciones principales:
   • Deshacer
   • Rehacer
   • Publicar cambios
   • El menú Acciones, que puede mostrar accesos como Sitio publicado, Usar plantilla, Vista previa y Regenerar link vista previa.
6. Si la página está vacía, el canvas central mostrará el estado inicial Comienza agregando una sección, con botones como Agregar sección y Elegir plantilla.
7. Un detalle importante para no confundirte: estar dentro del editor no significa que la página ya esté publicada. En este entorno primero trabajas sobre un borrador y luego decides cuándo usar Publicar cambios.

Resultado esperado:

• Identificaste cómo entrar al Page Builder y pudiste reconocer la barra superior del editor.
• Entendiste que el botón central cambia de página y que Publicar cambios controla la salida pública del contenido.

---

2) Entender las tres zonas principales: panel izquierdo, canvas e inspector

1. Observa el panel izquierdo del editor. Ese panel tiene dos modos visibles:
   • Estructura: muestra el árbol de la página con las secciones y los bloques que contiene cada una. Desde ahí puedes buscar por secciones o bloques, abrir Agregar sección y acceder a paneles como Preferencias de página, Preferencias generales y Menú superior.
   • Añadir: abre la biblioteca de bloques. En esa biblioteca puedes buscar componentes, filtrar por categoría y ver bloques recientes. Si ya existe un destino válido en el canvas, el panel te indicará dónde se insertará el bloque. Si no hay destino claro, Flobu te orienta para arrastrar el bloque o usar un botón + dentro del canvas.
2. Ahora observa el centro de la pantalla: ese es el canvas de edición.
   • Arriba del canvas, Flobu renderiza una vista del Menú superior.
   • Debajo aparecen las secciones de la página.
   • Entre secciones y dentro de zonas vacías verás botones + para insertar contenido.
   • Al final del canvas, Flobu también muestra el Footer como referencia visual del sitio.
3. Finalmente, selecciona una sección, una columna o un bloque. Cuando lo hagas, aparecerá el inspector contextual en el lado derecho. Ese inspector cambia según lo seleccionado:
   • Para una sección: verás ajustes de sección.
   • Para una columna: verás sus anchos.
   • Para un bloque: verás los paneles de Contenido, Estilo y Responsive.
4. También verás una ruta de navegación tipo Página > Sección > Columna > Bloque, útil para no perderte en páginas largas.
5. En pantallas pequeñas, estos paneles no desaparecen: se abren como bandejas laterales izquierda y derecha.

Resultado esperado:

• Ya distingues para qué sirve cada parte de la interfaz: navegar, insertar, visualizar y configurar.
• Entendiste que el inspector derecho no es fijo: aparece según el elemento que seleccionas.

---

3) Usar las vistas de dispositivo y entender qué hace el editor

1. En la parte superior del canvas verás el selector de dispositivo. Flobu ofrece tres vistas:
   • Escritorio
   • Tablet
   • Móvil
2. Si eliges Tablet o Móvil, la interfaz te mostrará también el ancho actual en píxeles. En esos dos modos aparece un botón para cambiar la orientación vertical u horizontal.
3. Esta vista no crea una página aparte: solo te ayuda a revisar cómo se verá la misma página en distintos tamaños.
4. Recuerda otra diferencia clave del producto:
   • El editor guarda borradores de trabajo, pero la tienda pública no cambia hasta que uses Publicar cambios.
   • Vista previa sirve para abrir el borrador con un link temporal.
   • Sitio publicado abre lo que hoy está realmente en vivo.
   • Si compartiste un link de preview y quieres invalidarlo, Regenerar link vista previa crea uno nuevo.
5. También es importante saber lo que este tutorial no resuelve todavía:
   • Aquí no estás aprendiendo a crear secciones.
   • No estás configurando bloques uno por uno.
   • Tampoco estás viendo versionado, historial o manejo completo de conflictos.
6. El objetivo de esta introducción es que ya no entres al editor a ciegas. Cuando entiendes la interfaz, los siguientes tutoriales se vuelven mucho más fáciles porque sabes dónde insertar, dónde configurar y dónde validar antes de publicar.

Resultado esperado:

• Sabes usar la vista de Escritorio, Tablet y Móvil sin confundirla con una segunda página.
• Entendiste que el Page Builder trabaja sobre borradores y que publicar es una acción separada.

---

Checklist final rápido

• Identifiqué cómo entrar al editor desde Editar sitio o Editar página.
• Reconocí la barra superior del Page Builder v2.
• Entendí para qué sirve el botón central Editor · ...
• Ubiqué el panel izquierdo con Estructura y Añadir.
• Entendí que el canvas muestra el Menú superior, las secciones y el Footer.
• Vi que el inspector derecho aparece al seleccionar una sección, columna o bloque.
• Probé el selector de Escritorio, Tablet y Móvil.
• Entendí la diferencia entre borrador, Vista previa, Sitio publicado y Publicar cambios.
• Tengo claro que este tutorial solo introduce la interfaz y no reemplaza los tutoriales de edición específica.

---

Errores comunes

• Entrar al editor pensando que todo cambio ya está publicado. En Flobu primero trabajas sobre un borrador.
• Confundir el panel Añadir con el lugar donde se configura un bloque ya existente. Añadir sirve para insertar; el inspector derecho sirve para editar lo seleccionado.
• No seleccionar ningún destino y luego pensar que la biblioteca de bloques no funciona. Muchos flujos de inserción necesitan arrastrar al canvas o marcar primero un punto válido con el botón +.
• Pensar que Tablet o Móvil crean versiones distintas de la página. Son vistas de la misma página en otros tamaños.
• Perderse dentro de una página larga por no usar Estructura ni el breadcrumb del inspector. Esas herramientas existen precisamente para ubicarse mejor.
• Querer aprender secciones, bloques, navbar, footer y publicación avanzada en esta sola guía. Esta introducción solo te enseña a leer la interfaz del editor.