Configurar navbar, footer y colores globales

Qué vas a lograr

• Configurar el Menú superior con enlaces, subitems y anuncios rotativos usando los controles reales del editor.
• Ajustar la identidad global del sitio para que el Navbar y el Footer compartan logo, nombre y descripción consistentes.
• Aplicar una paleta global que cambie la apariencia de la cabecera, el contenido y el pie de página, entendiendo que hoy el footer no tiene un editor propio expuesto en la interfaz.

Paso a paso en Flobu

Cómo funciona la interfaz de Flobu en este tutorial

• Menú lateral: en el Page Builder v2, usarás la pestaña Estructura para entrar a Preferencias generales y Menú superior.
• Panel central: en el canvas verás siempre el Navbar arriba, tus secciones al centro y el Footer abajo para validar los cambios visualmente.
• Acciones clave: en este flujo usarás el guardado automático del borrador, el acceso a Paleta de colores y finalmente Publicar cambios.
• Alcance de este tutorial: aquí configurarás lo que hoy sí se puede editar desde el editor y entenderás por qué el Footer no tiene un panel propio visible en la interfaz actual.

1) Ajustar la identidad global que comparten navbar y footer

1. Abre una página en el Page Builder v2.
2. En el lateral izquierdo, deja activa la pestaña Estructura.
3. En la parte inferior del panel, entra a Preferencias generales.
4. Verás campos reales como Nombre o título del sitio y Descripción general del sitio.
5. Completa o corrige esos datos pensando en el sitio completo, no solo en una página.
6. Más abajo verás las secciones Logo, FavIcon y Vista en redes sociales.
7. Si quieres que el Navbar use imagen en vez del nombre de la tienda, carga un Logo.
8. Este punto es importante: cuando cambias el Logo desde Preferencias generales, Flobu también actualiza el logo que usa el Menú superior.
9. Ese mismo logo y la descripción general también impactan la lectura visual del Footer.
10. Observa el canvas mientras haces cambios: el Navbar superior y el Footer inferior se actualizan en el borrador para que puedas revisar la coherencia del branding.
11. Si tu objetivo es ordenar la identidad del sitio, este paso es la base correcta. No intentes resolverlo solo desde Menú superior, porque ahí trabajas enlaces y anuncios, no la identidad general de la tienda.
12. Si necesitas cambiar la URL pública del sitio, recuerda que en esta pantalla solo la ves como referencia. La gestión del dominio se hace fuera del editor, en Tienda online.

Resultado esperado:

• El sitio tiene Nombre, Descripción y Logo coherentes para la vista global.
• Entendiste que parte del aspecto del Footer depende de estos datos generales, no de un panel separado de footer dentro del editor actual.

2) Configurar el menú superior con enlaces, subitems y anuncios

1. Vuelve al panel Estructura.
2. Entra a Menú superior.
3. Primero verás la sección Menú Principal. Cada ítem muestra su nombre, su destino y controles al pasar el cursor.
4. Si quieres cambiar el orden, arrastra el ítem desde el ícono de agarre.
5. Si quieres crear un enlace nuevo, usa Añadir enlace al menú. Flobu agrega un ítem nuevo que luego puedes abrir para editarlo.
6. Para editar un ítem, haz clic sobre el elemento en la lista. El panel cambia a Ítem del menú.
7. Ahí puedes completar Texto del Enlace y Destino. El destino se configura con el selector real de enlaces, donde puedes elegir una página interna o escribir una URL externa.
8. Si quieres crear un dropdown, vuelve a la lista del Menú Principal y usa Añadir subitem sobre un ítem padre.
9. En desktop, un ítem con subitems se comporta como dropdown. En móvil, ese mismo ítem abre un segundo nivel dentro del menú lateral.
10. Cuando termines con la estructura principal, revisa la sección Anuncios Rotativos. Desde ahí puedes añadir mensajes, reordenarlos con flechas, escribir su contenido y eliminar los que ya no sirven.
11. Esos mensajes aparecen sobre el navbar como una barra de anuncios cuando existen.
12. No hace falta un botón aparte para guardar dentro de ese panel. Los cambios quedan en el borrador del editor mientras sigues trabajando.

Resultado esperado:

• El Menú superior tiene enlaces reales, destinos correctos y, si hace falta, subitems ordenados.
• Si agregaste anuncios, el Navbar muestra una barra superior con mensajes rotativos dentro del borrador.

3) Aplicar colores globales y validar el footer con el alcance real del editor

1. Desde Preferencias generales, entra a Paleta de colores.
2. En esta vista puedes trabajar de tres formas:
   • Colores disponibles: elige una combinación predefinida.
   • Colores mágicos: prueba propuestas generadas automáticamente.
   • Personalización avanzada: edita colores puntuales agrupados en bloques como General, Marca y Componentes UI.
3. Si cambias Fondo de página, verás que ese color también alimenta la cabecera y el pie de página.
4. Si cambias Texto principal o Bordes y líneas, también afectas variables visuales del Navbar y del Footer.
5. Si ajustas Color Primario y Color Secundario, verás cambios en acentos, enlaces y destacados del header y del footer.
6. Mientras haces esto, observa el canvas completo. El Navbar y el Footer usan esas variables globales en tiempo real dentro del borrador.
7. Aquí aparece un matiz importante del producto: hoy el editor no muestra un panel propio de Footer dentro de Estructura. Por eso, en la interfaz actual, el footer se ajusta visualmente sobre todo a través de:
   • Logo, Nombre y Descripción en Preferencias generales.
   • La Paleta de colores.
   • Las redes configuradas en Tienda online > Redes Sociales.
   • Las páginas legales y sucursales visibles que el footer enlaza por defecto.
8. Desde este tutorial sí puedes dejar el footer consistente y bien presentado. Sin embargo, no es posible editar manualmente cada columna o cada enlace del footer desde un panel dedicado, porque hoy ese panel no está expuesto en la interfaz principal del editor.
9. Cuando termines de validar Navbar, contenido y Footer, usa Publicar cambios.

Resultado esperado:

• Aplicaste una paleta coherente y comprobaste que el Navbar y el Footer cambian con esos tokens globales.
• Entendiste cómo se ajusta realmente el pie del sitio hoy en Flobu y publicaste el borrador solo cuando el resultado visual estuvo correcto.

Checklist final rápido

• Configuré Nombre, Descripción y Logo desde Preferencias generales.
• Verifiqué que el Logo se refleje correctamente en el Menú superior.
• Ordené y edité los enlaces del Menú Principal.
• Creé subitems solo cuando realmente necesitaba un dropdown o segundo nivel en móvil.
• Revisé los Anuncios Rotativos si quería una barra superior promocional.
• Apliqué una paleta o colores manuales desde Paleta de colores.
• Comprobé visualmente el Footer al final del canvas.
• Entendí que hoy el footer no tiene un panel dedicado visible dentro de Estructura.
• Si necesitaba íconos sociales en el footer, revisé también Tienda online > Redes Sociales.
• Usé Publicar cambios solo después de validar el borrador completo.

Errores comunes

• Intentar configurar toda la identidad del sitio solo desde Menú superior. Ese panel sirve para enlaces y anuncios, no para nombre, descripción o branding general.
• Pensar que el Footer tiene hoy un editor propio en el panel izquierdo del Page Builder v2. En la interfaz actual no aparece un panel dedicado para eso.
• Cambiar colores sin revisar el final del canvas. La paleta impacta no solo los bloques del contenido, sino también la cabecera y el pie de página.
• Crear subitems pensando que se verán igual en desktop y móvil. En desktop funcionan como dropdown; en móvil se navegan como segundo nivel dentro del menú lateral.
• Olvidar que los íconos sociales del footer dependen de tener redes configuradas en la tienda, no solo de abrir el editor visual.
• Confundir borrador con sitio publicado. Aunque veas el Navbar y el Footer actualizados en el editor, el cambio no llega al sitio en vivo hasta usar Publicar cambios.