🗺️ Menús de Navegación en el Constructor de Sitios y Embudos de CRMHUB
Aprende a crear y configurar menús de navegación interactivos y responsivos para tus sitios web y embudos dentro de CRMHUB, mejorando la experiencia de usuario.
📋 Contenido de este Tutorial
❓ ¿Qué es un Menú de Navegación?
➕ Cómo Añadir un Menú de Navegación
⚙️ Configuración de los Elementos del Menú
🔄 Opción de Ajuste de Línea (Wrap)
🎨 Mejoras en el Estilo de los Submenús
📱 Comportamiento en Dispositivos Móviles
🖌️ Opciones de Estilo
🔗 Usando "Desplazar a Elemento" con Menús de Navegación
💡 Mejores Prácticas
❓ Preguntas frecuentes
❓ ¿Qué es un Menú de Navegación?
Un Menú de Navegación es un elemento interactivo esencial que permite a los visitantes moverse fácilmente entre las diferentes páginas o secciones de tu embudo o sitio web. Soporta diversas funcionalidades:
Enlaces directos a páginas internas.
URLs externas para dirigir a otros sitios.
Menús desplegables (dropdowns) para organizar contenido.
Submenús anidados para estructuras más complejas.
Desplazamiento basado en anclas para navegar dentro de la misma página.
Comportamiento responsivo para adaptarse a dispositivos móviles.
Los menús de navegación se ubican comúnmente en las cabeceras (headers) y pies de página (footers) de tus diseños.
➕ Cómo Añadir un Menú de Navegación
Añadir un menú de navegación a tu sitio o embudo es un proceso sencillo:
Paso 1: 🌐 Abre tu Embudo o Sitio Web en el Constructor de Sitios. Paso 2: ➕ Haz clic en "Añadir Elemento" en la barra lateral izquierda. Paso 3: 🗺️ Selecciona el elemento "Menú de Navegación". Paso 4: 🖱️ Arrastra el elemento a la sección deseada de tu diseño. Paso 5: ⚙️ Haz clic en el elemento añadido para abrir su panel de configuración y personalizarlo.
⚙️ Configuración de los Elementos del Menú
Desde el panel de configuración del Menú de Navegación, tienes control total sobre su estructura y contenido:
Añadir nuevos elementos al menú.
Renombrar las etiquetas de los elementos del menú.
Vincular a páginas internas de tu sitio o embudo.
Vincular a URLs externas.
Añadir elementos desplegables (hijos) para crear submenús.
Reordenar los elementos del menú arrastrándolos.
Para crear un menú desplegable (dropdown):
Paso 1: ➕ Añade un elemento de menú principal (padre). Paso 2: ⬇️ Haz clic en "Añadir Sub Elemento" debajo de ese elemento principal. Paso 3: 📝 Configura el enlace del elemento hijo. Paso 4: 🔁 Repite el proceso para añadir más elementos anidados si es necesario.
🔄 Opción de Ajuste de Línea (Wrap)
Una nueva y valiosa opción de Ajuste de Línea (Wrap) está disponible para los elementos de Menú de Navegación.
Cuando esta opción está habilitada, los elementos del menú se moverán automáticamente a la siguiente línea si no hay suficiente espacio horizontal. Esto es crucial para evitar que el diseño se rompa y para mejorar la responsividad en diferentes tamaños de pantalla.
💡 Por qué es importante
Evita el desbordamiento del menú.
Mejora la responsividad en pantallas más pequeñas.
Mantiene la alineación limpia de la cabecera.
Reduce la distorsión del diseño.
Esta función es especialmente útil para:
Menús con muchos elementos.
Etiquetas de menú largas.
Dispositivos tablet y pantallas de tamaño medio.
🎨 Mejoras en el Estilo de los Submenús
El comportamiento de los submenús ha sido optimizado para ofrecer una consistencia visual y usabilidad superiores.
Las mejoras incluyen:
Renderizado más estable de los menús desplegables.
Comportamiento de hover más limpio y predecible.
Espaciado y alineación mejorados.
Estilo de submenú más consistente en todos los dispositivos.
Estas actualizaciones eliminan inconsistencias visuales y proporcionan una experiencia de usuario más fluida.
📱 Comportamiento en Dispositivos Móviles
Los menús de navegación en CRMHUB están diseñados para ser totalmente responsivos. Esto significa que se adaptan automáticamente a diferentes tamaños de pantalla, como teléfonos móviles y tablets.
En dispositivos móviles, el menú de navegación a menudo se transforma en un icono de hamburguesa (tres líneas horizontales) que, al ser pulsado, despliega el menú completo. Esto asegura que tu sitio o embudo sea fácil de navegar sin importar el dispositivo que use el visitante.
🖌️ Opciones de Estilo
El Constructor de Sitios de CRMHUB te ofrece una amplia gama de opciones para personalizar el estilo de tu Menú de Navegación:
Tipografía: Elige fuentes, tamaños y colores para el texto del menú.
Colores: Personaliza los colores de fondo, texto y hover para los elementos del menú y submenús.
Espaciado: Ajusta el relleno (padding) y el margen (margin) entre los elementos.
Bordes y Sombras: Añade bordes o sombras para dar profundidad y separación.
Iconos: Si lo deseas, puedes integrar iconos junto a los elementos del menú.
Alineación: Controla la alineación horizontal y vertical del menú dentro de su contenedor.
🔗 Usando "Desplazar a Elemento" con Menús de Navegación
La función "Desplazar a Elemento" (Scroll-to-Element) es una herramienta poderosa para crear una navegación fluida dentro de una misma página. Puedes vincular un elemento de tu menú de navegación a una sección específica de tu página.
Paso 1: 🎯 Identifica la sección a la que deseas desplazar. Paso 2: 🆔 Asigna un ID CSS único a esa sección (por ejemplo, mi-seccion-contacto). Paso 3: ⚙️ En la configuración de tu Menú de Navegación, selecciona el elemento que deseas vincular. Paso 4: 🔗 En el campo de enlace, elige la opción "Desplazar a Elemento" e introduce el ID CSS que asignaste (por ejemplo, #mi-seccion-contacto).
Ahora, cuando un usuario haga clic en ese elemento del menú, la página se desplazará suavemente hasta la sección correspondiente.
💡 Mejores Prácticas
Para asegurar que tus menús de navegación sean efectivos y fáciles de usar:
Simplicidad: Mantén el menú lo más simple y claro posible. Evita sobrecargar con demasiados elementos.
Nombres Claros: Usa etiquetas concisas y descriptivas para cada elemento del menú.
Consistencia: Mantén la ubicación y el estilo del menú consistentes en todo tu sitio o embudo.
Responsividad: Siempre prueba tu menú en diferentes dispositivos (escritorio, tablet, móvil) para asegurar una experiencia óptima.
Jerarquía: Utiliza submenús para organizar contenido relacionado, pero no anides demasiados niveles.
Accesibilidad: Asegúrate de que el contraste de color sea adecuado y que el menú sea navegable con teclado.
❓ Preguntas frecuentes
¿Puedo tener varios menús de navegación en una misma página? Sí, puedes añadir múltiples elementos de Menú de Navegación en diferentes secciones de tu página.
¿Cómo hago que un elemento del menú no sea un enlace, sino solo un título para un dropdown? Deja el campo de enlace del elemento padre vacío o selecciona la opción "Ninguno" si está disponible.
¿Los menús de navegación son compatibles con SEO? Sí, los enlaces en los menús de navegación son rastreables por los motores de búsqueda, lo que ayuda a la indexación de tus páginas.
¿Puedo cambiar el icono de hamburguesa en móvil? Las opciones de personalización del icono de hamburguesa pueden variar, pero generalmente puedes ajustar su color y tamaño desde las opciones de estilo del menú.
¡Dominar los menús de navegación te permitirá crear experiencias de usuario fluidas y profesionales en todos tus proyectos de CRMHUB! 🚀