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

Última actualización: January 24, 2018

Requisitos

Software: HubSpot Marketing
Suscripción: Básico, Pro, Enterprise
Add-ons: Sitio web

Cuando comienzas a diseñar las páginas de tu sitio web con HubSpot, debes hacerte algunas preguntas importantes.

  • ¿Qué páginas del sitio web incluirás en tu sitio web?
  • ¿Qué páginas del sitio web deberían formar parte del menú de navegación principal?
  • ¿Habrá muchos menús de navegación?
  • ¿Cómo ordenarás las páginas en el menú de navegación?
  • ¿Cuáles serán las páginas más importantes para tus visitantes?

Estas preguntas te guiarán para que puedas comenzar a planificar y diseñar la arquitectura de información de tu sitio (es decir, la organización estructural del contenido). Cuando sepas cómo organizarás tu sitio, comienza a diseñar los menús. La característica Menús Avanzados de HubSpot te permite planificar fácilmente toda la arquitectura de información y usar las páginas del sitio web en forma de menú de navegación. En esta sección, descubrirás como hacer lo siguiente:

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

Las arquitecturas de información son diagramas o mapas que permiten organizar y asignar prioridad a todo el contenido que planeas tener en el sitio. Dichas arquitecturas nos ayudan a evitar conjeturas a la hora de diseñar nuevas páginas y contribuyen a que el contenido del sitio web no se desvíe de su objetivo. La presencia de una arquitectura de información organizada también ayudará a los visitantes a navegar y encontrar contenido en el sitio web.

Ten en cuenta lo siguiente al determinar la arquitectura de información del sitio:

  • ¿Cuáles son las páginas más importantes a las que quieres que los visitantes puedan acceder mientras navegan por el sitio (páginas de “nivel superior”)?
  • ¿Las páginas de “nivel superior” tienen páginas secundarias que también quieres incluir en la navegación?
  • ¿Las páginas secundarias contienen otro nivel de páginas?
HubSpot Help article screenshot

Una vez que sepas cómo estructurarás el sitio, puedes convertir esa planificación en los menús de navegación en HubSpot con la herramienta Mapas de Menú Avanzado del COS. Esta herramienta te permite estructurar muchos menús de navegación diferentes. Las páginas del sitio web (excepto las páginas de destino) y las páginas de agradecimiento siempre deben incluir un menú de navegación principal.

HubSpot Help article screenshot

También puedes crear un menú secundario que contenga más enlaces a páginas menos importantes del sitio.

HubSpot Help article screenshot

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

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

1. Ir a Configuración de Contenido

Desde el Panel de HubSpot, dirígete a Contenido > Configuración de Contenido.

HubSpot Help article screenshot

Selecciona Menús Avanzados en el menú de navegación de la izquierda.

HubSpot Help article screenshot

2. Elegir un menú

El menú predeterminado contiene las páginas que completarán automáticamente el contenido por defecto de un módulo de Menú Avanzado. Como mencionamos antes, también puedes crear nuevos menús para su uso como opciones de menú secundario adicionales. Como en este ejemplo crearás el menú de navegación principal, debes elegir el menú predeterminado.

HubSpot Help article screenshot

3. Agregar nuevas páginas al menú

Selecciona Agregar Página para insertar elementos en la navegación.

HubSpot Help article screenshot

Es posible que quieras agregar una Etiqueta de Menú (el texto que aparecerá en el menú de navegación) y una URL en Enlazar a Página (donde quieres redireccionar al visitante si hace clic en ese texto).

HubSpot Help article screenshot

Una vez que hayas agregado la información que necesitas para el enlace en el menú, también puedes hacer clic en el engranaje que se encuentra junto al enlace y decidir si quieres que el enlace se abra en una nueva ventana.

HubSpot Help article screenshot

Cuando agregues una página, también puedes hacer clic en el botón azul ELEGIR para seleccionar una página de HubSpot en lugar de escribir un enlace (opción que, por lo general, se utiliza para enlazar a una página o a un sitio web externos).

HubSpot Help article screenshot

Desde aquí podrás buscar una página con la barra de búsqueda que se encuentra en la parte superior o navegando por el sitio. Una vez que sepas qué página quieres utilizar, haz clic en el botón de radio junto a la página, y luego en Elegir Página.

HubSpot Help article screenshot

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

Para agregar una nueva página secundaria al menú, haz clic en el símbolo cuadrado en la página principal en la que quieras colocar la página secundaria.

HubSpot Help article screenshot

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

HubSpot Help article screenshot

5. Guardar y publicar el menú

Haz clic en el botón Guardar Borrador en cualquier momento para guardar los cambios a medida que vayas editando el menú. Para finalizar los cambios y activarlos en todas las páginas que usen el menú, haz clic en Publicar Cambios.

HubSpot Help article screenshot

6. Agregar un módulo de menú a la plantilla

Como acabas de editar el menú predeterminado, los módulos de menú existentes ya reflejarán la arquitectura de información que creaste. También puedes agregar un menú a cualquier plantilla con el Administrador de Diseño o el editor de la página. En este tutorial, editaremos la plantilla con el editor de la página.

Para editar un sitio o una página de destino en particular, haz clic en Configuración > Editar Diseño de Plantilla.

HubSpot Help article screenshot

Haz clic en Agregar Fila. Arrastra el módulo al lugar donde quieres colocar el menú. Haz clic en el símbolo del engranaje en dicho módulo y luego en Intercambiar Módulo. Haz clic en el módulo de Menú Avanzado y en Seleccionar.

HubSpot Help article screenshot

7. Personalizar las opciones del menú

Para personalizar las opciones del menú, como determinar cuál mapa del sitio web es responsable de la estructura del menú, haz clic en el símbolo de engranaje > Opciones de EdiciónPara obtener más información acerca de las opciones de menú, echa un vistazo a este artículo.

HubSpot Help article screenshot

8. Crear un mapa del sitio web y un menú de navegación secundarios

Como ya mencionamos, puedes crear diferentes mapas del sitio web para diferentes menús. En la herramienta Menús Avanzados, haz clic en el botón Agregar Otro MenúAsigna un nombre al menú y haz clic en Crear Menú.

HubSpot Help article screenshot

Cómo configurar el mapa del sitio web

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

1. Ir a Configuración de Contenido

Desde el Panel de HubSpot, dirígete a Contenido > Configuración de Contenido.

HubSpot Help article screenshot

Selecciona Mapas del Sitio ubicado en el menú de navegación de la izquierda.

HubSpot Help article screenshot

2. Elegir el dominio

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

HubSpot Help article screenshot

3. Seleccionar las páginas que quieres incluir en tu mapa del sitio web

Para comenzar a diseñar el mapa del sitio web, marca las casillas que se encuentran junto a las páginas que quieres incluir en el mapa del sitio web. Es fundamental que te asegures de incluir las páginas principales y secundarias desde el Menú Avanzado que configuraste. Sin embargo, te recomendamos desactivar las páginas de destino que estén activas en tu dominio.

HubSpot Help article screenshot

4. Ver el mapa del sitio web

Puedes echar un vistazo al mapa del sitio web cuando lo desees haciendo clic en el enlace Ver Mapa del Sitio Web para Este Dominio. De esta manera, obtendrás el enlace directo al mapa del sitio web que necesitarás para enviar el mapa a Google Analytics y otros servicios similares.

HubSpot Help article screenshot

5. Guardar y publicar el mapa del sitio web

No olvides hacer clic en el botón Guardar Borrador cada tanto a medida que realizas cambios en el mapa del sitio web. Así podrás guardar las modificaciones sin activarlas en el mapa del sitio web. Y, por supuesto, una vez que hayas terminado de crear el mapa del sitio web, haz clic en Publicar Cambios.

HubSpot Help article screenshot

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: