El bloque de Menú de Navegación te permite incorporar menús de navegación en tus páginas de destino y plantillas de sitio web de SeedProd. Tienes la flexibilidad de crear un menú personalizado simple directamente dentro del constructor o conectar cualquier menú existente de WordPress de tu sitio.
El bloque admite diseños horizontales y verticales, un selector de menú móvil colapsable, submenús con control total de estilo y configuraciones de enlace por elemento, lo que lo convierte en una solución de navegación flexible para encabezados, pies de página y barras laterales.
Añadir el Bloque de Menú de Navegación a tus Páginas
Sigue estos pasos para añadir un bloque de Menú de Navegación a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Menú de Navegación en la sección deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Menú de Navegación para abrir su configuración. En la pestaña Contenido, empieza seleccionando tu tipo de menú en la sección Ajustes.
Tipo de Menú:
- Simple: Crea un menú personalizado directamente en SeedProd añadiendo elementos manualmente. Cada elemento se puede arrastrar para reordenar, duplicar o eliminar. Haz clic en cualquier elemento para expandir su configuración y configurar el Texto (la etiqueta del enlace visible), el Enlace URL (la URL de destino), Abrir en Nueva Ventana y las opciones No Seguir. Haz clic en + Añadir Nuevo Elemento para agregar más enlaces al menú.
- Menú de WordPress: Conecta un menú existente de WordPress a este bloque. Selecciona un menú del menú desplegable de menús registrados en tu sitio. Se proporciona un enlace a la pantalla de Menús de WordPress para crear o administrar menús si es necesario.
Ajustes:
- Tamaño de Fuente: Establece el tamaño de fuente de los enlaces de los elementos del menú de 10 a 72px.
- Espacio Entre: Establece el espaciado entre los elementos del menú de 1 a 100px.
- Divisor: Introduce un carácter o cadena para usar como separador visual entre los elementos del menú (por ejemplo,
|). - Alineación: Establece la alineación horizontal del menú: Izquierda, Centro o Derecha. Admite valores por dispositivo para escritorio, tableta y móvil.
- Menú Móvil: Activa para habilitar un menú hamburguesa colapsable en dispositivos móviles, reemplazando el menú completo con un botón selector compacto en pantallas más pequeñas.
El selector del Menú Móvil muestra un icono de menú hamburguesa en dispositivos móviles. Al tocarlo, se expande para mostrar el menú completo.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar la tipografía, los colores, el estilo del submenú y el espaciado de tu bloque de Menú de Navegación.
Estilos Avanzados:
- Diseño de Lista: Elige si los elementos del menú se muestran en un diseño Vertical (apilado) u Horizontal (lado a lado).
- Tipografía: Ajusta la familia de fuentes, el peso, el tamaño, la altura de línea, el espaciado entre letras y la transformación del texto para los enlaces de los elementos del menú. Admite valores por dispositivo para escritorio, tableta y móvil.
- Color de texto activo: Establece el color del enlace del elemento de menú actualmente activo.
- Color de texto al pasar el ratón: Establece el color de los enlaces de los elementos del menú al pasar el ratón.
- Sombra del texto: Añade una sombra al texto del enlace del menú. Elige entre Ninguna, Fina, Pequeña, Mediana, Grande, Muy Grande o Extra Grande.
Submenú:
- Color de fondo del submenú: Establece el color de fondo de los paneles desplegables del submenú.
- Color de texto del submenú: Establece el color del texto de los enlaces del submenú.
- Color al pasar el ratón en el submenú: Establece el color del texto al pasar el ratón en los enlaces del submenú.
- Radio de borde del submenú: Establece el radio de las esquinas de los paneles del submenú de 1 a 50px.
- Altura de línea del submenú: Establece la altura de línea de los elementos del submenú de 1 a 60px.
- Ancho del borde del submenú: Establece el ancho del borde de los paneles del submenú de 1 a 60px.
- Color del borde del submenú: Establece el color del borde de los paneles del submenú.
- Sombra del submenú: Añade una sombra paralela a los paneles del submenú.
- Relleno del submenú: Establece el relleno interior del panel del submenú (Superior, Derecho, Inferior, Izquierdo).
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de menú de navegación (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre el menú y los elementos circundantes de la página.
- Relleno: Ajusta el espaciado interior dentro de tu bloque de menú de navegación (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre los enlaces del menú y los bordes del bloque.
Atributos:
- ID CSS: Muestra el identificador único generado automáticamente para tu bloque de menú de navegación. Este ID es creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos Personalizados: Agregue cualquier atributo HTML al elemento contenedor del bloque. Ingrese cada atributo en una nueva línea usando el formato: nombre-atributo|valor.
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de menú de navegación en pantallas de escritorio.
- Ocultar en tableta: Oculta el bloque de menú de navegación en dispositivos tableta.
- Ocultar en móvil: Oculta el bloque de menú de navegación en dispositivos móviles.
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando el bloque de menú de navegación entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Rotación de entrada y muchas más.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de menú de navegación y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de menú de navegación a tu página! Un menú de navegación bien ubicado ayuda a los visitantes a encontrar lo que buscan rápidamente y los mantiene interactuando con tu sitio. Utiliza el tipo de menú Simple para listas rápidas de enlaces personalizados, o conecta un menú de WordPress para mantener tu navegación coherente con el resto de tu sitio.