El bloque Nav Menu te permite incorporar menús de navegación en tus páginas de destino y plantillas de sitios web de SeedProd. Tienes la flexibilidad de crear un menú personalizado sencillo directamente en el constructor o conectar cualquier menú de WordPress existente de tu sitio.
El bloque admite diseños horizontales y verticales, un menú móvil plegable, submenús con control total del estilo y ajustes 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 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 Menú de navegación para abrir su configuración. En la pestaña Contenido, empieza seleccionando tu tipo de menú en la sección Configuración.
Tipo de menú:
- Es muy sencillo: crea un menú personalizado directamente en SeedProd añadiendo elementos manualmente. Cada elemento se puede arrastrar para reordenarlo, duplicarlo o eliminarlo. Haz clic en cualquier elemento para ampliar su configuración y configurar las opciones Texto (la etiqueta visible del enlace), Enlace URL (la URL de destino), Abrir en una ventana nueva y No seguir. Haz clic en + Añadir nuevo elemento para añadir más enlaces al menú.
- Menú de WordPress: conecta un menú de WordPress existente a este bloque. Selecciona un menú de la lista desplegable de menús registrados en tu sitio. Se proporciona un enlace a la pantalla Menús de WordPress para crear o administrar menús si es necesario.
Configuración:
- Tamaño de fuente: Establezca el tamaño de fuente de los enlaces de los elementos del menú entre 10 y 72 píxeles.
- Espacio entre: Establece el espacio entre los elementos del menú de 1 a 100 píxeles.
- Divisor: Introduzca un carácter o una cadena para utilizarlo como separador visual entre los elementos del menú (por ejemplo,
|). - Alineación: Establece la alineación horizontal del menú: izquierda, centrada o derecha. Admite valores por dispositivo para ordenadores de sobremesa, tabletas y móviles.
- Menú móvil: Actívelo para habilitar un menú hamburguesa plegable en dispositivos móviles, sustituyendo el menú completo por un botón compacto en pantallas más pequeñas.
El botón del menú móvil muestra un icono de menú hamburguesa en los dispositivos móviles. Al pulsarlo, se expande para mostrar el menú completo.
Paso 3: Personalizar 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 Menú de navegación.
Estilos avanzados:
- Diseño de la lista: elige si los elementos del menú se mostrarán en un diseño vertical (apilados) u horizontal (uno al lado del otro).
- Tipografía: Ajusta la familia tipográfica, el grosor de la fuente, 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 ordenadores de sobremesa, tabletas y móviles.
- Color del texto activo: Establece el color del enlace del elemento del menú actualmente activo.
- Color del texto al pasar el cursor: Establece el color de los enlaces de los elementos del menú al pasar el cursor.
- Sombra del texto: añade una sombra al texto del enlace del menú. Elige entre Ninguna, Muy fina, Pequeña, Mediana, Grande, Muy grande o 2 veces más grande.
Submenú:
- Color de fondo del submenú: Establece el color de fondo de los paneles del submenú desplegable.
- Color del texto del submenú: Establece el color del texto de los enlaces del submenú.
- Color al pasar el cursor por el submenú: Establece el color del texto al pasar el cursor por los enlaces del submenú.
- Radio del borde del submenú: Establece el radio de las esquinas de los paneles del submenú entre 1 y 50 píxeles.
- Altura de línea del submenú: Establece la altura de línea de los elementos del submenú entre 1 y 60 píxeles.
- Ancho del borde del submenú: Establece el ancho del borde de los paneles del submenú entre 1 y 60 píxeles.
- 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 espacio exterior alrededor del bloque del 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 espacio interior dentro del bloque del menú de navegación (arriba, derecha, abajo, izquierda). Esto crea un 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. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor.
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque del menú de navegación en las pantallas de escritorio.
- Ocultar en tableta: Ocultar el bloque del menú de navegación en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque del 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 del menú de navegación aparece en pantalla. Las opciones incluyen rebote, fundido de entrada, zoom, rotación y muchas más.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Menú de navegación y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque de menú de navegación a tu página! Un menú de navegación bien situado ayuda a los visitantes a encontrar rápidamente lo que buscan y mantiene su interés en tu sitio web. Utiliza el tipo de menú Simple para crear listas de enlaces personalizadas rápidamente, o conecta un menú de WordPress para mantener la navegación coherente con el resto de tu sitio web.