Introducción
Uso de Sitely
Elementos
Cómo
Un menú, en términos de sitio web, es esencialmente una ayuda de navegación que permite a los usuarios encontrar información en tu sitio. Los menús han evolucionado con el tiempo y ahora se diseñan mucho pensando en objetivos de marketing. En algunos sectores de la industria, ahora se les llama el ‘viaje del visitante’: cuidadosamente diseñados para animar a los usuarios a seguir una ruta concreta a través de un sitio web para alcanzar un objetivo. Pero, independientemente de cómo se construyan y de cuál sea su propósito, fundamentalmente son lo mismo: una serie de enlaces de fácil acceso que llevan a los usuarios de una página a otra. El elemento de menú en Sitely se ve así.
Cuando se añade por primera vez al lienzo de un sitio nuevo y vacío, tiene un aspecto predeterminado como este.
Es un único botón con el nombre Inicio, lo que indica que es un enlace a la página de inicio del sitio. A medida que se van añadiendo nuevas páginas al sitio, el menú crece para incluir las nuevas páginas según se van añadiendo; este es el comportamiento predeterminado del elemento de menú. Es importante señalar que estos se conocen como enlaces de ‘nivel superior’ y se creará un enlace por cada página de nivel superior añadida al sitio. Si, no obstante, se añade un GRUPO DE PÁGINAS al sitio, el enlace se convertirá en un enlace de GRUPO DE PÁGINAS y las páginas añadidas al GRUPO DE PÁGINAS se convertirán en elementos del submenú del enlace de GRUPO DE PÁGINAS. Aquí tienes un ejemplo de un menú con una página de inicio y un GRUPO DE PÁGINAS con dos páginas dentro del Grupo de páginas.
Al añadir grupos de páginas a un sitio web, el enlace del grupo de páginas no llevará realmente a una página física al hacer clic. En su lugar, abrirá el menú desplegable para mostrar las páginas dentro de ese grupo. Como ejemplo práctico, supongamos que queremos un sitio sencillo que comprenda una página de Inicio, una página Sobre nosotros, un grupo de Productos con dos páginas (una para smartphones y otra para dispositivos tipo tableta). Quizá también queramos una página de Contáctanos. Para que Sitely cree automáticamente este menú por nosotros, lo único que tenemos que hacer es añadir las páginas y grupos en el panel Páginas, a la izquierda de la interfaz de Sitely. Al añadir páginas de nivel superior, haz clic en el icono ‘+’ al pie del panel de páginas y elige Nivel superior en el selector desplegable junto a Añadir página.
Para añadir un nuevo GRUPO DE PÁGINAS, haz clic en el botón Añadir Grupo de páginas. Esto creará un nuevo grupo de páginas sin páginas. Una vez que se cree un grupo de páginas, podrás cambiarle el nombre en el panel Páginas a la izquierda de la pantalla: solo haz clic en el nombre del grupo y renómbralo; en nuestro ejemplo, Productos.
Ahora puedes añadir las dos páginas de producto para Smartphones y Dispositivos tipo tableta haciendo clic en el icono ‘+’ al pie del panel de páginas y eligiendo ‘Productos’ en el selector desplegable junto al botón Añadir página. Puedes renombrar las páginas del mismo modo que renombraste el grupo, solo haz clic en el nombre de la página y cámbialo por el que quieras. Alternativamente, puedes seleccionar las páginas una por una y establecer el nombre en la pestaña Páginas situada a la derecha de la pantalla.
Con tus páginas y grupos de páginas correctamente nombrados, ya puedes añadir el elemento de menú a tu página de inicio. Se verá algo así.
Lo que ha hecho Sitely es recopilar los nombres de tus páginas y grupo y crear el menú por ti. Además, si más adelante creas páginas y/o grupos adicionales, se pueden añadir automáticamente al menú a medida que construyes tu sitio. Solo asegúrate de que la casilla Añadir páginas automáticamente esté marcada en el panel de estilo. La opción se hace visible en el panel de estilo cuando seleccionas el menú en el lienzo.
El panel de estilo también te ofrece algunas opciones adicionales. Por ejemplo, puedes reordenar el menú simplemente arrastrando los elementos hacia arriba o hacia abajo en la lista. Por ejemplo, para colocar el grupo Productos ANTES de la página Contáctanos, simplemente arrastra la etiqueta Productos hacia arriba en la lista. Al hacer clic en la pequeña flecha junto al elemento Productos se revelarán las dos páginas de producto en la lista. También puedes cambiar tu menú de horizontal a vertical simplemente haciendo clic en el botón correspondiente. Además, quizá te guste tener un menú compacto (o hamburguesa), especialmente para tus páginas móviles. Solo haz clic en el icono de hamburguesa para cambiar el menú.
Este es el menú vertical
cuando está contraído
Este es el menú vertical
cuando está expandido
Esta es la opción de menú compacto. Los elementos se muestran cuando se hace clic en el icono
Una vez creado un menú, Sitely te permite decidir dónde y en qué dispositivos debe mostrarse. Todo esto se gestiona en el panel Organizar. Con el menú seleccionado en el lienzo, ve a la pestaña Organizar para ver todas las opciones disponibles.
La sección Ubicación te permite elegir mostrar el menú en el dispositivo en el que estás trabajando actualmente. Al desmarcar esta opción, se ocultará el menú solo en el dispositivo actual, pero seguirá visible en otros dispositivos.
La sección Visibilidad te permite elegir en qué páginas mostrar el menú. Puedes elegir Mostrar solo en la página actual, todas las páginas dentro del grupo de páginas actual o Mostrar en todas las páginas del sitio. También tienes la opción de hacer que el menú se Mueva con la parte inferior de la página. Esta opción es ideal si tienes un menú de enlaces en la sección de pie de página de tus páginas web y quieres mantenerlo pegado a la parte inferior de las páginas.
Para la navegación principal del sitio, normalmente querrás que tu menú esté disponible en todas las páginas para que los usuarios puedan acceder a él estén donde estén en tu sitio web. Sin embargo, puede haber situaciones en las que desees menús diferentes en distintas páginas. Estas opciones te dan control total sobre este aspecto de tu sitio web.
Algunos ajustes de menú tienen configuración ‘por dispositivo’, como el estilo del menú. Puedes configurar tu menú de escritorio como horizontal, mientras que en tu smartphone o tableta puede estar configurado como un menú compacto o hamburguesa. En algunos casos, quizá quieras colocar un menú compacto en todas las variantes de dispositivo; esta se está convirtiendo en una opción bastante popular, ya que los sistemas operativos de escritorio y portátiles empiezan a verse y sentirse más como sus equivalentes en tabletas/smartphones. Depende de ti cómo presentar tus menús, pero sea cual sea tu elección, Sitely te cubre.
Si no quieres crear tus páginas y grupos de páginas desde el principio, puedes crear tu menú manualmente para tener un mayor control sobre tu estructura de navegación. Para ello, añade el elemento de menú al lienzo y desmarca la casilla Añadir páginas automáticamente en el panel de estilo. Entonces podrás añadir páginas y grupos manualmente.
El enlace Inicio se crea automáticamente para ti y apuntará a la página de inicio, o página index.html, de tu sitio web. Para añadir un nuevo enlace de página, haz clic en el icono ‘+’ en la parte inferior del panel del menú. Esto creará un nuevo enlace llamado Elemento. Puedes cambiar la etiqueta del elemento en la casilla Etiqueta del elemento. Continúa añadiendo nuevos elementos de NIVEL SUPERIOR del mismo modo.
Para crear un desplegable, primero añade un nuevo elemento de nivel superior al menú para que actúe como enlace del desplegable. Con ese elemento seleccionado, haz clic en el icono de carpeta. Esto creará una página bajo el desplegable y colocará una pequeña flecha junto al nombre del enlace del desplegable. Tu enlace de desplegable se convertirá ahora en un enlace que abre un desplegable de enlaces a páginas. Para añadir más páginas al desplegable, haz clic en una de las páginas contenidas y pulsa el icono ‘+’. Añade tantas páginas como necesites.
Para volver a añadir elementos de nivel superior, asegúrate de seleccionar uno de los enlaces de nivel superior existentes antes de hacer clic en el icono ‘+’. Cuando todos tus enlaces estén en su lugar, puedes empezar a mover los elementos del menú al orden en el que quieras que aparezcan en tu menú final. Simplemente haz clic y arrástralos hacia arriba o hacia abajo en la lista.
Al crear un menú manualmente, tendrás que establecer la acción Al hacer clic para cada elemento del menú. Normalmente, para la mayoría de menús de sitios web, esta acción será Ir a página en este sitio web. Sin embargo, tienes la libertad de elegir CUALQUIERA de las acciones al hacer clic que ofrece Sitely. Cuando uses la opción Ir a página en este sitio web, podrás elegir la página desde una lista desplegable con todas las páginas disponibles. Esto supone que las páginas ya han sido creadas, así que puede que prefieras dejar la adición de enlaces a páginas para después de completar tu sitio web. Opcionalmente, puedes especificar una ubicación de desplazamiento dentro de la página enlazada. En la mayoría de los casos, el enlace simplemente apuntará a la Parte superior de la página, como se ilustra aquí. En algunos casos, quizá quieras que la página enlazada se Abra en una nueva pestaña. Esta es una función que normalmente usarías si el enlace abre un enlace externo, en lugar de una página dentro de tu sitio.
También crearías un menú manualmente si va a ser un menú suplementario, en lugar de un menú de navegación principal del sitio web. Por ejemplo, puedes tener un menú principal del sitio que proporciona enlaces a páginas de destino principales de tu sitio. Un ejemplo típico puede ser una página de destino de productos que destaque los últimos productos de una amplia gama de grupos de productos. Sin embargo, quizá desees añadir a esa página de destino un menú suplementario donde los usuarios puedan seleccionar grupos de productos específicos. En un sitio de moda, un menú así puede incluir enlaces a Moda para hombre, Moda para mujer y Moda infantil. Cada uno de esos enlaces llevará a los usuarios a la página pertinente con su selección de artículos de moda.
Cuando se añade por primera vez un menú suplementario a una página, contendrá, de forma predeterminada, un enlace a la página de inicio. Evidentemente, eso no será necesario porque ya tienes ese enlace en tu navegación principal. Por lo tanto, deberás resaltar el enlace de inicio en el panel del menú del panel de estilo y hacer clic en el icono ‘-’ para eliminar ese enlace del menú suplementario. También puedes querer hacer esto en tu navegación principal si, por ejemplo, tienes un logo en tu barra de navegación que se utilizará como enlace a la página de inicio. Para eliminar estos enlaces, tendrás que desmarcar la casilla Añadir páginas automáticamente antes de poder borrarlos.
Como todo en Sitely, puedes aplicar una amplia gama de opciones de estilo a tus menús. Todas las opciones de estilo se encuentran en el conocido panel de estilo de Sitely. Puedes aplicar colores de fondo, ajustar fuentes y tamaños, añadir bordes y redondeo de esquinas y establecer la alineación del texto. Aplicando distintas opciones de estilo puedes crear un menú solo de texto, uno que parezca una serie de botones o pestañas y aplicar efectos al pasar el ratón. Aquí tienes algunos ejemplos.
Texto simple con borde inferior
resaltado al pasar el ratón
Forma de pastilla con relleno de color
al pasar el ratón
Estilo pestaña con cambio de color
al pasar el ratón
Estilo botón con cambio de color
al pasar el ratón
Además de las opciones de estilo normales, hay algunas opciones adicionales específicas de los menús. Veámoslas ahora.
La primera es la opción Mismo tamaño. Al seleccionar esta casilla, todos los enlaces del menú tendrán el mismo tamaño. Si esta opción está desmarcada, los enlaces se dimensionarán individualmente según su contenido de texto. Aquí están las diferencias.
También hay una opción de espaciado de elementos que establece la cantidad de espacio entre los elementos del menú.
A continuación están las opciones de submenú. Se pueden configurar de forma diferente según el dispositivo. La primera opción especifica la colocación de los elementos del submenú con respecto a los enlaces de nivel superior. Estas opciones varían según el tipo de menú con el que estés trabajando. Aquí vemos las opciones para un menú horizontal. Los enlaces del submenú se pueden colocar arriba, abajo, a la izquierda o a la derecha del elemento de nivel superior. Los pequeños iconos te dan una representación gráfica de cada opción disponible. Esta sección también te permite establecer el espaciado entre elementos, así como el ancho y la altura de los elementos del submenú.
Las opciones del menú vertical son muy similares, aunque con distintas opciones de colocación del submenú. De nuevo, los pequeños iconos te dan una representación gráfica de cómo se colocan las cosas en relación con los elementos de nivel superior.
Si estás trabajando con un menú compacto, verás opciones similares, con una elección de colocación horizontal o vertical de los elementos del submenú. En el caso de un menú compacto, el elemento de nivel superior es el icono que desencadena el menú al hacer clic.
El propio icono puede cambiarse seleccionando el elemento del menú en la lista del menú en el panel de estilo. Si no quieres usar un icono, puedes tener simplemente un enlace de texto. Ponle una etiqueta al elemento del menú y quita el icono. Tu menú compacto será entonces un simple enlace de texto como este. Al hacer clic en este enlace, aparecerán los elementos del submenú.
Nota: si piensas usar un icono, asegúrate de eliminar la etiqueta del menú en el panel de estilo para evitar que se muestre debajo o encima del icono.
Al crear una estructura de navegación para tus sitios web, hay algunas cosas que debes considerar, especialmente si quieres que la navegación del sitio sea un placer para tus usuarios. Lo primero a considerar es cómo se presenta tu menú a los usuarios. Siempre que sea posible, intenta encapsular tu menú en un bloque de navegación que incluya un logo, un fondo y cualquier otra información general que desees presentar a los usuarios. En el ejemplo siguiente, el menú es solo un elemento dentro de un bloque de navegación.
Consta de una imagen de logotipo que tiene una acción al hacer clic para ir a la página de inicio, un número de teléfono que tiene una acción al hacer clic para llamar al número, un cuadro de fondo sólido y el propio elemento de menú con todos sus enlaces de página. Estos elementos se han agrupado para formar un único elemento que puede posicionarse en la página. Además, como elemento agrupado, se puede hacer que se pegue a la parte superior de la página, manteniéndolo visible para los usuarios mientras se desplazan por la página. Configuras esto seleccionando el grupo en el lienzo y marcando la opción Desplazamiento personalizado en el panel de estilo. Esto revelará la opción Pegar a la parte superior de la página.
Intenta mantener los elementos de nivel superior al mínimo. Presentar demasiadas opciones como desplegables puede disuadir a los usuarios de seguir navegando por tu sitio. Intenta mantener los enlaces de nivel superior en unas cinco o seis opciones y, si tienes desplegables, intenta limitar el número de opciones a no más de cuatro o cinco. Si necesitas presentar a los usuarios un gran número de opciones, quizá en un sitio de comercio electrónico con muchas categorías de productos, considera crear un mega menú. Esto puede crearse en un bloque de diseño de Sitely o en una ventana emergente configurada para hacerse visible cuando se hace clic en un enlace de nivel superior. Ves menús como este en muchos sitios con múltiples grupos de productos, como el que se ilustra a continuación.
Al crear enlaces de desplegable con un gran número de elementos, ten en cuenta que probablemente tendrás que darle un fondo a los enlaces del desplegable. Si los dejas transparentes, puede que resulten difíciles de leer para los usuarios, ya que el desplegable probablemente cubrirá otros elementos de la página al activarse.
Por favor, informa de cualquier deficiencia en esta documentación y la solucionaremos lo antes posible.
Actualizado para Sitely 6
Este sitio web utiliza cookies.
Consulta nuestra política de privacidad para más detalles.
