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

La navegación bien estructurada guiará a los que visitan su sitio y los ayudará a localizar rápidamente la información que están buscando.  Genere un menú de navegación con todo incluido con enlaces a todas las páginas del sitio, o cree su propio menú que incluya solo los enlaces más útiles.

Creación del menú

Agregue el widget de enlaces de Navegación al sitio y escoja una de las opciones para completar la lista de enlaces.

navigation12_en-US.png

  • Página del sitio: complete el contenido en los enlaces de navegación con las páginas del sitio, las carpetas de navegación y las anclas. Este menú se generará automáticamente en función de la pestaña Páginas del sitio. Esta es una manera rápida de colocar una navegación básica en su sitio. 
  • Enlaces personalizados: Cree su propio menú con enlaces personalizados. Esta opción le brinda más flexibilidad para crear las barras de navegación rápida para agregar navegación de página interna, navegación de pie de página con solo los enlaces más útiles, cuentas de las redes sociales y mucho más.

 

Después de escoger la opción de Enlaces personalizados, el editor le pedirá que complete la lista de enlaces con elementos personalizados, de forma similar a como trabajaría con el selector de vínculos. Solo agregue elementos y vincúlelos con páginas y anclas externas e internas.

Diseño del menú

Edite el diseño de navegación haciendo clic con el botón derecho en la navegación y seleccionando Editar diseño.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.

Navegación rápida:  La navegación rápida le permite al usuario navegar por las páginas sin tener que actualizar toda la página.  Los tiempos de carga son más rápidos, lo que resulta atractivo.   

Nota importante: Cuando la opción Navegación rápida está activada, el encabezado y el pie de página no se volverán a cargar cuando se cambia de página.

Debe mantener esta opción deshabilitada si en el encabezado utiliza código personalizado que no comparten todas las páginas del sitio. 

 

navigation5_en-US.png

Si hace clic en "Texto del enlace", podrá ajustar opciones para lo siguiente:

  • 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
  • El espaciado entre la subnavegación
  • Estilo del divisor
  • Color de fondo de la página seleccionada

navigation9_en-US.png

Si ingresa en las opciones de "texto del enlace" para las subpáginas, también puede especificar cómo aparecerán las subpáginas. Específicamente:

  • 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: 3 de 6

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!