Become a HubSpot power user — join us for HubSpot Training Day 2017.

Cómo configurar los menús de navegación de tu sitio web

Última actualización: December 29, 2016

Cuando comiences a diseñar tus páginas web con HubSpot, hay varias preguntas importantes que puedes formularte:

  • ¿Qué páginas web incluirás como parte de tu sitio web?
  • ¿Qué páginas web reúnen las condiciones para estar en tu menú de navegación principal?
  • ¿Tendrás múltiples menús de navegación?
  • ¿Cómo vas a ordenar las páginas en tu navegación?
  • ¿Cuáles son las páginas que a tu juicio serán las más importantes para tus visitantes?

Con estas preguntas podrás comenzar a planificar y diseñar la arquitectura de información de tu sitio (la organización estructural de tu contenido). Cuando tengas una buena idea de cómo organizarás tu sitio, querrás comenzar a diseñar tus menús. La característica de Menús avanzados en HubSpot te permite planear más fácilmente toda la arquitectura de información y usar las páginas web en forma de un menú de navegación. En esta sección, aprenderás a:

¿Por qué deberías planear la arquitectura de la información de tu sitio web?

Las arquitecturas de información son diagramas o mapas que permiten organizar y dar prioridad a todo el contenido que planeas tener en tu sitio. Dichas arquitecturas pueden eliminar muchas conjeturas cuando estás diseñando nuevas páginas y ayudan a que el contenido de tu sitio web mantenga un enfoque centrado. La presencia de una arquitectura de información organizada también hará más fácil que los visitantes naveguen y encuentren contenido en tu sitio web.

Cuando planifiques la arquitectura de información de tu sitio, necesitarás determinar:

  • ¿Cuáles son las páginas más importantes a las que quisieras que los visitantes pudieran acceder siempre, mientras navegan en tu sitio (páginas de "alto nivel")?
  • ¿Estas páginas de "alto nivel" tienen páginas secundarias que también quisieras incluir en la navegación?
  • ¿Estas páginas secundarias contienen otro nivel de páginas?
Captura de pantalla del artículo Help (Ayuda) de HubSpot

Una vez que tengas una idea de cómo se estructura tu sitio, puedes convertir ese plan en tus menús de navegación en HubSpot usando la herramienta COS Advanced Menu Maps (Mapas de menú avanzado de COS). Esta herramienta te permite estructurar cualquier número de menús de navegación diferentes. Las páginas del sitio (que no son Páginas de Destino o aterrizaje) y las Páginas de Agradecimiento siempre deben incluir un menú de navegación principal.

Captura de pantalla del artículo Help (Ayuda) de HubSpot

Es posible que quieras crear un menú secundario que contenga más enlaces a páginas menos importantes en tu sitio.

Captura de pantalla del artículo Help (Ayuda) de HubSpot

¿Cómo crear los menús de navegación principal y secundario?

Sigue los pasos que se describen a continuación para convertir tu arquitectura de información en un menú de navegación principal.

1. Navega hasta Content Settings (Configuración de contenido)

Desde tu dashboard de HubSpot, ve a  Content > Content Settings(Contenido > Configuración de contenido).

Captura de pantalla del artículo Help (Ayuda) de HubSpot

Selecciona Advanced Menus (Menús avanzados) en el lado izquierdo de la navegación.

Captura de pantalla del artículo Help (Ayuda) de HubSpot

2. Selecciona un menú

Tu menú predeterminado contiene las páginas que llenarán de forma automática el contenido predeterminado de un Advanced Menu Module (Módulo de menú avanzado). Como se mencionó anteriormente, también puedes crear nuevos menús que se utilizarán para las opciones adicionales de menú secundario. Como estás creando en este ejemplo un menú de navegación principal, elegirás el menú predeterminado.

Captura de pantalla del artículo Help (Ayuda) de HubSpot

3. Agrega nuevas páginas al menú

Selecciona Add a page (Agregar una página) para empezar a agregar a la navegación.

Captura de pantalla del artículo Help (Ayuda) de HubSpot

En este punto, es posible que quieras agregar una Menu Label (Etiqueta de menú) (este es el texto que aparecerá en tu menú de navegación) y un URL dentro Linking to page (Enlace a página) (donde quieres que vaya tu visitante si hace clic en ese texto).

Captura de pantalla del artículo Help (Ayuda) de HubSpot

Una vez que hayas agregado la información que necesitas para el enlace en tu menú, también puedes hacer clic en la rueda junto al enlace y decidir si quieres tener este enlace abierto en una nueva ventana.

Captura de pantalla del artículo Help (Ayuda) de HubSpot

Cuando agregues una página, también puedes hacer clic en el botón azul CHOOSE (ELEGIR) para seleccionar una página de HubSpot en lugar de escribir un enlace (que por lo general se reserva cuando se requiere un enlace con una página externa o un sitio web).

Captura de pantalla del artículo Help (Ayuda) de HubSpot

A partir de aquí, puedes buscar una página con la barra de búsqueda situada en la parte superior o navegar y encontrar la página. Una vez que sepas cuál es la página que quisieras utilizar, haz clic en el botón de radio al lado de la página y haz clic en Choose page (Elegir página).

Captura de pantalla del artículo Help (Ayuda) de HubSpot

4. Agrega una nueva página secundaria al menú

Para agregar al menú una nueva página secundaria, haz clic en el icono cuadrado en la página principal en la que deseas que resida esta página secundaria.

Captura de pantalla del artículo Help (Ayuda) de HubSpot

La jerarquía de las páginas controlará cómo se utilizan estos árboles de menús en tus plantillas para la navegación. Las páginas secundarias suelen aparecer en un menú desplegable o en un menú secundario que aparece al lado, aunque puedes escribir CSS para diseñar el marcado HTML del menú a fin de que se adapte a tus necesidades.

Captura de pantalla del artículo Help (Ayuda) de HubSpot

5. Guarda y publica tu menú

Mientras estás editando tu menú, puedes hacer clic en el botón Save draft (Guardar borrador) en cualquier momento para guardar tus cambios. Para finalizar los cambios que has realizado y llevarlos en línea a todas las páginas que están utilizando (o estarán usando) tu menú, haz clic en Publish changes (Publicar cambios).

Captura de pantalla del artículo Help (Ayuda) de HubSpot

6. Agrega un módulo de menú a tu plantilla

Como acabas de editar tu menú predeterminado, los módulos de menús existentes reflejarán ahora la arquitectura de información que has creado. También puedes agregar un menú a cualquier plantilla a través del Design Manager (Administrador de diseño) o el editor de la página. En este tutorial, editarás la plantilla mediante el editor de páginas.

Mientras editas un Sitio particular o una Página de destino, haz clic en Settings (Configuración) > Edit template layout (Editar diseño de plantilla).

Captura de pantalla del artículo Help (Ayuda) de HubSpot

Haz clic en  Add row (Agregar fila). Arrastra el módulo a donde quisieras que esté tu menú. Dentro de ese módulo, haz clic en el icono de Settings (Configuración) y luego Swap module (Intercambiar módulo). Necesitarás encontrar y hacer clic en el módulo Advanced Menu (Menú avanzado), luego haz clic en Select (Seleccionar).

Captura de pantalla del artículo Help (Ayuda) de HubSpot

7. Personaliza las opciones de menú

Para personalizar las opciones del menú, como por ejemplo determinar cuál mapa de sitio es responsable de la estructura del menú, haz clic en el icono de engranaje > Edit options (opciones de Edición)Para obtener más información acerca de las opciones de menú, consulta este artículo.

Captura de pantalla del artículo Help (Ayuda) de HubSpot

8. Crea un mapa de sitio y un menú de navegación secundarios

Como se mencionó anteriormente, puedes crear mapas de sitios múltiples para diferentes menús. Dentro de la herramienta Advanced Menus (Menús avanzados), haz clic en el botónAdd another menu (Agregar otro menú) .Asígnale un nombre a tu menú y luego haz clic en Create menu (Crear menú).

Captura de pantalla del artículo Help (Ayuda) de HubSpot

¿Cómo configurar tu mapa del sitio?

Sigue los pasos que se describen a continuación para convertir tu arquitectura de información en un mapa del sitio.

1. Navega hasta Content Settings (Configuración de contenido)

Desde tu dashboard de HubSpot, ve a  Content > Content Settings(Contenido > Configuración de contenido).

Captura de pantalla del artículo Help (Ayuda) de HubSpot

Selecciona Sitemaps (Mapas del sitio) en la navegación del lado izquierdo.

Captura de pantalla del artículo Help (Ayuda) de HubSpot

2. Elige tu dominio

Asegúrate de seleccionar primero el dominio para el que deseas editar tu mapa del sitio.

Captura de pantalla del artículo Help (Ayuda) de HubSpot

3. Selecciona la páginas que deseas incluir en tu mapa del sitio

Para comenzar a diseñar tu mapa del sitio, marca las casillas que están al lado de las páginas que deseas incluir en tu mapa del sitio. Es fundamental que te asegures de incluir las páginas principales y secundarias, desde tu Advanced Menu (Menú avanzado) que configuraste. Sin embargo, puede que necesites desactivar las páginas de destino que están activas en tu dominio.

Captura de pantalla del artículo Help (Ayuda) de HubSpot

4.Observa tu mapa del sitio

Puedes echar un vistazo a tu mapa del sitio en cualquier momento haciendo clic en el enlace para View Sitemap for this domain (Ver Mapa del sitio para este dominio) . Esto te proporcionará un enlace directo a tu mapa del sitio, que será lo que necesitas para enviar tu mapa del sitio a Google Analytics y otros servicios similares.

Captura de pantalla del artículo Help (Ayuda) de HubSpot

5. Guarda y publica tu mapa del sitio

Mientras realizas cambios en tu mapa del sitio, no olvides hacer clic en el botón Save draft (Guardar borrador) de vez en cuando. De esta manera se guardarán tus cambios sin hacer que los cambios se realicen en vivo en tu mapa del sitio. Por supuesto, una vez que hayas concluido el diseño de tu mapa del sitio, haz clic en Publish change (Publicar cambios).

Captura de pantalla del artículo Help (Ayuda) de HubSpot

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: