Introducción a la interfaz del Page Builder v2

Qué vas a lograr

• Reconocer las zonas principales del editor visual.
• Entender para qué sirven Estructura, Añadir y el panel derecho.
• Diferenciar borrador, vista previa y sitio publicado.

---

Paso a paso en Flobu

Cómo funciona la interfaz de Flobu en este tutorial

• Menú lateral: entra desde Tienda online > Editar sitio o abre una página desde Páginas.
• Panel central: verás el canvas, que muestra cómo se arma la página.
• Panel izquierdo: usarás Estructura para navegar y Añadir para insertar contenido.
• Panel derecho: aparecerá al seleccionar una sección, columna o bloque.
• Acciones clave: usarás Inicio, Editor · nombre de la página, Publicar cambios, Acciones, Escritorio, Tablet y Móvil.

1) Reconocer la barra superior

1. Abre una página en el editor visual.
2. En la barra superior, usa Inicio para volver al panel principal.
3. Haz clic en Editor · nombre de la página si necesitas cambiar de página.
4. Usa los botones de deshacer y rehacer si cometiste un cambio reciente.
5. Usa Publicar cambios solo cuando quieras enviar el borrador al sitio público.
6. Abre Acciones para ver accesos como Sitio publicado, Usar plantilla, Vista previa y Regenerar link vista previa.
7. Si la página está vacía, verás el mensaje Comienza agregando una sección o Comienza agregando un componente.

Resultado esperado: sabes dónde volver, cambiar de página, previsualizar y publicar.

2) Ubicar panel izquierdo, canvas y panel derecho

1. En el panel izquierdo, abre Estructura.
2. Usa Buscar secciones o bloques para encontrar contenido dentro de la página.
3. Desde Estructura, puedes seleccionar secciones, bloques y accesos como Preferencias de página, Preferencias generales y Menú superior.
4. Abre Añadir cuando quieras insertar bloques o componentes.
5. Usa el buscador de Añadir para encontrar contenido por nombre, categoría o palabra clave.
6. En el canvas, haz clic sobre una sección, columna o bloque para seleccionarlo.
7. Al seleccionar algo, revisa el panel derecho.
8. Si seleccionas una sección, verás Columnas, Layout de columnas y Ajustes de sección.
9. Si seleccionas un bloque, verás Contenido, Estilo y Responsive.

Resultado esperado: entiendes qué parte sirve para navegar, cuál sirve para insertar y cuál sirve para editar.

3) Revisar dispositivos y publicar con cuidado

1. En la parte superior del canvas, usa Escritorio, Tablet o Móvil.
2. Usa Tablet y Móvil para revisar cómo se adapta la misma página en otros tamaños.
3. Si estás en Tablet o Móvil, puedes cambiar la orientación.
4. Si ves Guardando..., espera antes de cerrar el editor.
5. Usa Vista previa para revisar el borrador en una pestaña nueva.
6. Usa Sitio publicado para ver lo que tus clientes ven en este momento.
7. Usa Publicar cambios cuando el borrador esté listo.

Resultado esperado: puedes revisar la página antes de publicarla y sabes qué versión estás viendo.

---

Checklist final rápido

• Entré al editor visual desde Tienda online o Páginas.
• Ubiqué Inicio, Editor · nombre de la página, Publicar cambios y Acciones.
• Entendí que Estructura sirve para navegar.
• Entendí que Añadir sirve para insertar contenido.
• Seleccioné un elemento y vi el panel derecho.
• Probé Escritorio, Tablet y Móvil.
• Distinguí Vista previa de Sitio publicado.
• Sé que los cambios no llegan al sitio público hasta usar Publicar cambios.

---

Errores comunes

• Pensar que cada cambio se publica de inmediato. Primero trabajas en un borrador; nada se publica hasta que uses Publicar cambios.
• Configurar un bloque sin seleccionarlo. Primero haz clic en el elemento y luego usa el panel derecho.
• Confundir Añadir con edición. Añadir inserta contenido; el panel derecho lo configura.
• Creer que Tablet o Móvil crean páginas separadas. Solo son vistas de la misma página.
• Cerrar el editor mientras aparece Guardando... Espera a que el proceso termine antes de salir.