Configurar navbar, footer y colores globales

Qué vas a lograr

• Configurar el Menú superior con enlaces, subítems y anuncios.
• Ajustar logo, nombre y descripción general del sitio.
• Aplicar colores globales y revisar cómo afectan el navbar y el footer.

Paso a paso en Flobu

Cómo funciona la interfaz de Flobu en este tutorial

• Menú lateral: dentro del editor visual, usa Estructura.
• Panel central: revisa el navbar arriba, el contenido al centro y el footer al final.
• Acciones clave: entrarás a Preferencias generales, Menú superior, Paleta de colores y luego usarás Publicar cambios.
• Importante: el footer no tiene un panel propio en esta vista; se ajusta con datos generales, colores, redes sociales y enlaces legales.

1) Ajustar identidad y colores globales

1. Abre una página en el editor visual.
2. En Estructura, entra a Preferencias generales.
3. Completa Nombre o título del sitio.
4. Completa Descripción general del sitio.
5. En Logo, carga o cambia la imagen principal de la tienda.
6. Si corresponde, revisa también FavIcon y Vista en redes sociales.
7. Entra a Paleta de colores.
8. Elige una opción en Colores disponibles, usa Colores mágicos o ajusta Personalización avanzada.
9. Revisa especialmente Fondo de página, Texto principal, Bordes y líneas, Color Primario y Color Secundario.

Resultado esperado:

• El sitio tiene una identidad visual coherente y el navbar/footer usan la misma base de colores.

2) Configurar el menú superior

1. Vuelve a Estructura.
2. Entra a Menú superior.
3. En Menú Principal, revisa los enlaces existentes.
4. Usa Añadir enlace al menú para crear un enlace nuevo.
5. Haz clic sobre un ítem para editarlo.
6. En Texto del Enlace, escribe el nombre visible.
7. En Destino, selecciona una página interna o escribe una URL externa.
8. Si necesitas un segundo nivel, usa Añadir subítem.
9. Reordena los ítems arrastrándolos desde la lista.
10. En Anuncios Rotativos, usa Añadir si quieres mostrar una barra de mensajes sobre el navbar.

Resultado esperado:

• El navbar muestra enlaces correctos, subítems ordenados y anuncios solo si los necesitas.

3) Revisar el footer y publicar

1. Baja hasta el final del canvas para revisar el footer.
2. Confirma que se vea bien el logo o nombre de la tienda.
3. Revisa que la descripción sea clara.
4. Comprueba que los colores del footer tengan buen contraste.
5. Si quieres iconos sociales, configúralos en Configurar sitio > Redes Sociales.
6. Si usas enlaces legales, revisa sus textos en la configuración legal de la tienda.
7. Cambia a vista móvil o tablet para comprobar que navbar y footer sigan ordenados.
8. Cuando todo esté listo, haz clic en Publicar cambios.

Resultado esperado:

• El sitio publicado muestra un navbar claro y un footer consistente con la marca.

---

Checklist final rápido

• Configuré Nombre o título del sitio.
• Configuré Descripción general del sitio.
• Cargué o revisé el Logo.
• Apliqué una paleta global.
• Revisé enlaces y destinos del Menú superior.
• Revisé Anuncios Rotativos si necesitaba una barra promocional.
• Revisé el footer en escritorio, tablet y móvil.
• Publiqué los cambios.

---

Errores comunes

• Editar solo el Menú superior y olvidar Preferencias generales. El logo y la descripción se obtienen de los datos globales.
• Crear subítems sin revisar móvil. En pantallas pequeñas el menú cambia de comportamiento.
• Usar colores con poco contraste. Revisa navbar, botones, textos y footer antes de publicar.
• Buscar un editor manual de footer en Estructura. En esta vista, el footer se ajusta con datos globales, colores y configuración de la tienda.
• Olvidar Publicar cambios. Lo que ves en el editor no llega al sitio público hasta que lo publiques.