Menús de Navegación y subnavegación

Los menús de Navegación y subnavegación son enlaces a páginas internas de su sitio web. Creamos estos menús automáticamente con base en las páginas que usted ha creado y la disposición del menú puede variar un poco de plantilla a plantilla. Un menú de Navegación bien estructurado ayuda a los visitantes de su sitio a encontrar la información que están buscando.

Building the menu

Add the Navigation links widget to the site and pick one of the options for populating the list of links.

navigation12_en-US.png

  • Site page - Populate the content of the navigation links with site pages, navigation folders and anchors. This menu will be generated automatically based on site Pages tab. This is a quick way to place basic navigation on your site. 
  • Custom links - Build your own menu with custom links. This option allows great flexibility in creating quick navigation bars to add inner page navigation, footer navigation with only most useful links, social accounts menu and more.

navigation13_en-US.png

After you pick the Custom links option, the editor will prompt you to populate the list of links with custom elements, similar to how you would work with link picker. Just add items and link them to external or internal pages and anchors.

Styling the menu

Edit the navigation's design by right-clicking on the navigation and selecting Edit Design.nav1_en-US.png

Disposición

The Layout section lets you easily switch between one of the several designs for the navigation bar. Keep in mind you can modify the design of any of these layouts, so just pick one which looks similar to the design you want, and then see the later Predefined Sections of this article for customizing the look even further.

nav2_en-US.png

Para utilizar las capacidades de navegación (publicadas o no publicadas), los usuarios tendrán que cambiar activamente una disposición. La nueva navegación utiliza diferentes selectores CSS, por lo que al cambiar la disposición, se restablecerá la personalización de la navegación y el usuario podrá personalizarla de nuevo. Al hacer clic en Deshacer, se restaurará la navegación anterior.

If your site contains subpages, then you will also have access to a Sub Navigation Layout section. From here you can select a layout for how the subpages on your site will appear. Just like the main navigation layout, you can also modify the sub navigation layout in later Predefined Sections.

nav3_en-US.png

if you want to place your site's logo in between your navigation items without having to create two separate sets of navigations, You can do it by selecting the "Horizontal with logo" orientation.

nav4_en-US.png

It will break the navigation links to two, aligning them equally from both sides of the logo. The center logo feature takes into account the number of navigation items, so if you keep adding pages, the navigation items will be organized automatically.

If there is an odd number of navigation items, the right side will contain more items (no option to change this).

Páginas

En la ficha Páginas, puede personalizar lo siguiente:

  • The style of individual navigation bars (background color, hover color, and Blank Space, as well as text style)
  • La dirección de navegación (de izquierda a derecha o de derecha a izquierda)
  • El número de elementos de navegación visibles
  • The type of divider you want between your navigation pages (if you want a divider).
  • Whether to enable quick navigation is enabled (Read more about this in Considerations) 

nav5_en-US.png

If you click on "Link Text" you can adjust options for

  • Tipo de fuente
  • Tamaño de la fuente
  • Color del texto
  • Opción de subrayado, negrita y cursiva

nav6_en-US.png

Página seleccionada y efectos "hover"

En la parte inferior de la sección Páginas, puede personalizar el estilo de la navegación  seleccionada y los efectos "hover" para la navegación. Seleccione entre los diferentes efectos "hover" para hacer que su sitio sea aún más singular.

nav7_en-US.png

También puede modificar el color del elemento de navegación cuando se coloque el cursor sobre él, así como los estilos de negrita, subrayado y cursiva utilizando las opciones de "texto del enlace".

nav8_en-US.png

Subpáginas

En la ficha Subpáginas, puede personalizar el estilo de la navegación secundaria

  • Color de fondo
  • Sombras
  • Spacing between sub navigation
  • Estilo del divisor
  • Color de fondo de la página seleccionada

nav9_en-US.png

If you go into the "link text" options for subpages you can also specify how the sub pages appear. Specifically:

  • Estilo de la fuente
  • Tamaño de la fuente
  • Color del texto
  • Negrita, subrayado y cursiva
  • Dirección del texto: de derecha a izquierda o de izquierda a derecha
  • Color del texto de la página seleccionada
  • Negrita, subrayado y cursiva en página seleccionada

nav10_en-US.png

Espaciado

From the Spacing tab, you can customize the spacing of the navigation bar.

nav11_en-US.png

 

Recursos

  • Para aprender cómo agregar este widget a su página, consulte nuestra guía sobre Adición de widgets.
  • Para aprender más sobre cómo editar widgets, revise nuestra guía sobre Edición de widgets.