Arrastra el widget Barra de navegación a una página maestra y después asigna esa página maestra a tus páginas. El menú se crea solo a partir de la lista de páginas de la izquierda, así que cuando añades una página, aparece en el menú de todas las páginas.
¿Qué versión tienes? EverWeb 4.6 trae una nueva Barra de navegación con nuevos ajustes, que se describen más abajo. Un menú añadido antes de la 4.6 conserva sus ajustes antiguos (las secciones de EverWeb 4.5 que verás más abajo), incluso cuando abres el proyecto en la 4.6. Para pasar un menú antiguo a los nuevos ajustes, elimínalo, arrastra una nueva Barra de navegación a la página maestra y vuelve a darle estilo.
Añadir el menú a todas las páginas
- Crea una página maestra (un diseño que comparten muchas páginas) si aún no tienes una: haz clic en Nueva página maestra. Consulta Pon el mismo encabezado, menú y pie de página en todas las páginas con una página maestra.
- Selecciona la página maestra y añade el menú:
- Barra de navegación: abre la pestaña Widgets en la parte superior derecha y arrastra el widget Barra de navegación a la página. En una página de ancho fijo (Diseño centrado), colócalo en el encabezado. En una página adaptable, colócalo cerca de la parte superior.
- Contenedor de navegación (EverWeb 4.6 y posterior): haz clic en Contenedores en la barra de herramientas y elige Contenedor de navegación. Contiene una Barra de navegación y un espacio para tu logotipo, y es ideal para páginas adaptables.
- Selecciona una de tus páginas, ve a Inspector > Ajustes de la página y elige tu página maestra en el desplegable Plantilla maestra. Hazlo con cada página.
- Publica tu sitio web.
A partir de ahora, cambia el menú solo en la página maestra. En tus otras páginas, el menú muestra un pequeño icono de página negro en su esquina, y al hacer clic en él te ofrece ir a la página maestra.
Elegir qué páginas aparecen en el menú
- Orden: el menú sigue el orden de la lista de páginas, de arriba abajo. Arrastra las páginas hacia arriba o hacia abajo para cambiarlo.
- Dejar fuera una página: selecciona la página, ve a Inspector > Ajustes de la página y desmarca Incluir la página en el menú de navegación. La página sigue en tu sitio web y puedes seguir enlazándola.
- Cambiar el texto: escríbelo en Nombre visible del menú de navegación, en la misma pestaña. Úsalo para espacios, acentos y símbolos, que el Nombre de archivo de una página no puede tener.
EverWeb 4.6 y posterior: añade tus propios elementos de menú. Selecciona la Barra de navegación, ve a Inspector > Ajustes del widget y abre Enlaces de menú adicionales. Haz clic en Añadir, haz doble clic en el nombre para cambiar el texto y después define su enlace: una sección de una página, una página u otro sitio web. Marca Ocultar las páginas de mi sitio si quieres que el menú muestre solo los enlaces de esta lista. Así, una página nueva no aparecerá en el menú hasta que la añadas ahí.
El menú está en todas las páginas, así que cuando lo cambias, EverWeb tiene que volver a publicar todas las páginas. Tu próxima publicación tardará más de lo habitual.
Menús desplegables
Coloca páginas dentro de un directorio (una página que contiene otras páginas, como una carpeta). Haz clic en Añadir directorio en la barra de herramientas y después arrastra las páginas un poco por debajo y a la derecha del directorio. El directorio se convierte en un elemento del menú, y sus páginas aparecen en un desplegable debajo de él. Consulta ¿Puede EverWeb crear menús desplegables?.
En EverWeb 4.6 y posterior, el menú muestra hasta dos niveles desplegables: coloca un directorio dentro de otro directorio para el segundo, de modo que el menú tenga tres niveles en total. EverWeb 4.5 muestra un nivel desplegable. En Menús desplegables, dentro de Ajustes del widget, Indicador de submenú define el pequeño símbolo junto a los elementos que abren un desplegable (Comilla angular, Triángulo, Más o Ninguno), y Estilo de elemento desplegable define el estilo de botón de los elementos desplegables.
Cambiar su aspecto
EverWeb 4.6 y posterior: Estilo de elemento del menú
Los elementos del menú toman su aspecto (relleno, colores del texto, relleno interior y aspecto al pasar el cursor) de un estilo de botón. Tu proyecto tiene uno creado para esto, llamado Navigation Button (botón de navegación).
- Selecciona la Barra de navegación y ve a Inspector > Ajustes del widget.
- Abre Elementos del menú y elige un estilo de botón en Estilo de elemento del menú. Junto a él aparece una pequeña vista previa, y el menú se actualiza en la página.
- Para cambiar el aspecto de ese estilo, elige Editar estilos de botón... al final del mismo menú (o usa Formato > Estilos del sitio web... y haz clic en Estilos de botón). Define los aspectos Normal, Al pasar el cursor, Pulsado y Foco del teclado, y haz clic en Guardar. Cambian todos los menús y botones que usan ese estilo.
Para ver todos los pasos de los estilos de botón, consulta Diseña botones que inviten a hacer clic: colores, esquinas redondeadas, sombras y efectos al pasar el cursor.
Conviene saber:
- Ninguno en Estilo de elemento del menú convierte los elementos en simples enlaces de texto. En ese caso, sus colores vienen de Inspector > Hipervínculos.
- El fondo de la barra es independiente de los elementos. El Relleno, el Borde y el relleno interior de Inspector > Opciones de forma y Métricas dan estilo a la franja que hay detrás de los elementos, no a los elementos en sí.
- Altura mínima de los elementos define la altura de cada elemento (0 hace que sea tan alto como su texto y su relleno interior). Unos 44 píxeles o más resulta cómodo para pulsar en un teléfono.
- Diseño incluye Botones del mismo ancho, Espaciado entre elementos y Alineación (izquierda, centro, derecha o justificado).
- Fuentes en la barra de herramientas cambia el texto de los elementos, y los efectos de Transiciones y animaciones del mouse de Opciones de forma se aplican a cada elemento.
- Sin un Contenedor de navegación, Marca en Ajustes del widget puede mostrar tu logotipo en la barra. Añade un Texto alternativo del logotipo, como el nombre de tu negocio.
EverWeb 4.5 (y menús añadidos antes de la 4.6)
Con la Barra de navegación seleccionada: los colores del texto y el subrayado están en Inspector > Hipervínculos, en Formato de hipervínculo; el cuadro detrás de cada elemento está en Opciones de forma; la alineación, el espaciado y los colores del desplegable están en Ajustes del widget; la fuente está en Fuentes, en la barra de herramientas.
El menú en los teléfonos
EverWeb 4.6 y posterior
- Selecciona la Barra de navegación en tu página maestra y ve a Inspector > Ajustes del widget.
- En Diseño, elige qué ocurre en Si falta espacio:
- Ajuste: los elementos pasan a ocupar más filas.
- Hamburger when needed (hamburguesa cuando sea necesario): el menú se convierte en un botón de menú cuando los elementos ya no caben.
- Hamburger at breakpoint (hamburguesa en el breakpoint): el menú se convierte en un botón de menú por debajo del ancho que escribas en Ancho de breakpoint (px) (800 si no lo cambias).
- Da estilo al botón en Menú hamburguesa móvil: su Estilo de botón, la Etiqueta del botón de menú (por ejemplo, Menú), el Icono del menú (tres líneas, dos líneas, puntos o sin icono) y Con el menú abierto.
- En Aspecto del menú hamburguesa, elige si el menú abierto cubre la página o la desplaza hacia abajo (Presentación), y define el Fondo del panel de menú. Animación y comportamiento móvil define el Efecto de apertura y si el menú se cierra después de que un visitante elija una página.
- Abre la vista previa y estrecha la ventana de EverWeb para probarlo.
EverWeb 4.5 (y menús añadidos antes de la 4.6)
- Selecciona la Barra de navegación en tu página maestra.
- Ve a Inspector > Ajustes del widget y desplázate hasta Opciones responsivas.
- Marca Barra de navegación responsiva.
- Define Aparecer a cierto ancho. En pantallas más estrechas que este valor (700 píxeles si no lo cambias), el menú se convierte en un botón con tres líneas (una "hamburguesa") que abre el menú. Dale estilo en Botón de menú.
- Abre la vista previa y estrecha la ventana de EverWeb para probarlo.
Si tu menú pasa a dos líneas antes de cambiar, aumenta el ancho. Si el botón también aparece en los ordenadores, el valor es demasiado alto. Esto funciona en páginas con Diseño centrado y en páginas adaptables. Si usas páginas para móviles independientes, consulta Mi sitio web se ve mal en un teléfono: cómo funciona la versión móvil en EverWeb.
Preguntas frecuentes
- Un enlace a otro sitio web en el menú: en EverWeb 4.6 y posterior, añádelo en Enlaces de menú adicionales (ver más arriba). En la 4.5, consulta Cómo poner un enlace a otro sitio web en el menú de navegación de EverWeb.
- Elementos del menú que saltan a secciones de una página larga: en EverWeb 4.6 y posterior, usa Enlaces de menú adicionales y enlaza cada elemento a una sección de la página. En la 4.5, la Barra de navegación no puede hacerlo: crea ese menú con botones o texto y enlaza cada uno. Consulta Cómo enlazar a otra página, un sitio web, una dirección de correo, un número de teléfono, un PDF o una sección de una página.
- Los elementos del menú no cambian cuando defino sus colores en Hipervínculos (4.6): los elementos usan un estilo de botón. Cambia el estilo, o elige Ninguno en Estilo de elemento del menú para usar los colores de Hipervínculos.
- Toda la barra se ha vuelto de un solo color (4.6): el Relleno propio de la barra se define en Opciones de forma. Desactiva el relleno de la barra si solo quieres colorear los elementos.
- Un elemento del menú que no funciona: comprueba que forma parte de la Barra de navegación y que no es un cuadro de texto independiente colocado encima.
Artículos relacionados
- Pon el mismo encabezado, menú y pie de página en todas las páginas con una página maestra
- Diseña botones que inviten a hacer clic: colores, esquinas redondeadas, sombras y efectos al pasar el cursor
- ¿Puede EverWeb crear menús desplegables?
- Cómo poner un enlace a otro sitio web en el menú de navegación de EverWeb
- Mi sitio web se ve mal en un teléfono: cómo funciona la versión móvil en EverWeb