Menús de Navegación y Subnavegación

  • Base de conocimiento
  • Responsive Website Builder
  • Menús de Navegación y subnavegación
  • Ayuda de Duda > Responsive Website Builder > Editar un sitio

Well-structured navigation will guide your site visitors and help them quickly locate the information they are looking for.  Generate an all-inclusive navigation menu with links to all pages on the site, or build you own menu with only most useful links.

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.

 

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.navigation1_en-US.png

Disposición

La sección Disposición le permite cambiar fácilmente entre los diferentes diseños de la barra de navegación. Tenga en cuenta que puede modificar el diseño de cualquiera de estas disposiciones, así que solo tiene que elegir uno que se parezca al diseño que desea y, a continuación, consultar las secciones posteriores de este artículo para personalizar aún más la apariencia.

navigation2_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.

Disposición de la Subnavegación

Si su sitio contiene subpáginas, también tendrá acceso a una sección Disposición de navegación secundaria. Aquí puede seleccionar una disposición para determinar cómo aparecerán las subpáginas en su sitio. Al igual que la disposición de la navegación principal, también puede modificar la disposición de la navegación secundaria en las secciones posteriores.

navigation3_en-US.png

Navegación dividida / Logotipo central

Si desea colocar el logotipo de su sitio entre los elementos de navegación sin tener que crear dos conjuntos separados de navegaciones, puede hacerlo marcando la casilla "Agregar logotipo central".

navigation4_en-US.png

Esto dividirá los enlaces de navegación en dos, alineándolos equitativamente a ambos lados del logotipo. La característica de logotipo central considera el número de elementos de navegación, así que si decide agregar más páginas, los elementos de navegación se organizarán automáticamente.

En caso de que haya un número impar de elementos de navegación, el lado derecho contendrá más elementos (no hay opción para cambiarlo).

Páginas

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

  • El estilo de las barras de navegación individuales (color de fondo, color del efecto hover y el espaciado, así como el estilo de texto)
  • La dirección de navegación (de izquierda a derecha o de derecha a izquierda)
  • El número de elementos de navegación visibles
  • El tipo de divisor que desea usar entre sus páginas de navegación si desea un divisor.

Quick Navigation - Quick navigation allows the user navigate through pages without refreshing the entire page.  Load times are faster which is appealing.   

Important Note: When the Quick Navigation option is enabled the header and footer will not be reloaded when you switch between pages.

You must keep this option disabled if you are using custom code in the header that is not shared by all pages on the site. 

 

navigation5_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

navigation6_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.

navigation7_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".

navigation8_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

navigation9_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

navigation10_en-US.png

Espaciado

En la ficha Espaciado, puede personalizar el espaciado de la barra de navegación.navigation11_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 nuestras guía sobre Edición de widgets.
  • Para aprender más sobre cómo editar el diseño y el estilo de los widgets, revise nuestra guía sobre Diseño de widgets.
  • Para aprender más sobre cómo editar espaciado, revise nuestra guía sobre Espaciado.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 1

Comentarios

0 comentarios

Inicie sesión para dejar un comentario.

×

Por favor inicie sesión como Pro

Soporte telefónico prioritario está disponible exclusivamente para DudaPros. Inicie sesión en su cuenta DudaPro ahora para ver nuestros números de asistencia internacional.

Inicie sesión
¿No eres un DudaPro?¡Compra DudaPro!