Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.
Navegación del estilo

La navegación de tu sitio es un conjunto de enlaces que dirigen a los visitantes a los contenidos de tu sitio. Por lo general, la navegación aparece en la parte superior de tu sitio, a pesar de que algunas plantillas permiten que se incluya la navegación en el pie de página o en la barra lateral.

Todas las plantillas incluyen opciones de Estilo del sitio para cambiar la fuente, el color y el tamaño de tus enlaces de navegación, y muchas plantillas tienen opciones adicionales. Esta guía explica cómo personalizar tu navegación.

nav-links.png

Antes de comenzar

Busca los retoques de navegación en Estilos del sitio

Todas las familias de plantillas tienen sus propios Estilos del sitio, así que no existe una única regla sobre cómo actualizar los enlaces de navegación de tu sitio. En lugar de ello, puedes usar estos consejos para encontrar las opciones de estilo que admite tu plantilla:

  • Para abrir los Estilos del sitio desde el Menú de Inicio, haz clic en Diseño y, a continuación, en Estilos del sitio.
  • Desplázate por los retoques a la izquierda y busca los retoques relacionados. Por lo general, los retoques incluyen la palabra Navegación.
  • También puedes posicionar el cursor sobre los enlaces de navegación de tu sitio en la vista previa del sitio, que se encuentra a la derecha. Cuando aparecen las casillas resaltadas azules alrededor de ellos, haz clic en cualquiera de los enlaces de navegación. Esto ayuda a filtrar los retoques que no afectan a los enlaces de navegación. Cuando hayas terminado, haz clic en Mostrar todos para regresar a la vista principal.

Este es un ejemplo de cómo luce en la plantilla Thorne, que es parte de la familia Brine:

thorne_site_styles.gif

Cambia la fuente y el tamaño:

Para cambiar la fuente de tus menús de navegación, haz clic en el icono v, al lado de los nombres de los retoques para abrir su menú desplegable. Puedes verlo en la imagen que sigue (el nombre de tu retoque podría ser diferente). 

navigation_font_options.jpg

Desde aquí, puedes cambiar lo siguiente:

  • Los nombres de las fuentes
  • Estilo
  • Tamaño
  • La altura de las líneas
  • Los espacios entre las letras

Si necesitas más ayuda, consulta Cambiar fuentes

Cambiar el color

Para cambiar los colores de los enlaces, haz clic en uno de los retoques de color. Elige un color nuevo con un clic en uno de los colores que se encuentran en la parte superior del selector y, luego, elige un tono dentro del recuadro. También puedes ingresar un valor específico en la casilla de texto. Si necesitas más ayuda, consulta Cambiar colores.

Consejo: En algunas plantillas, hay otros colores que pueden aparecer cuando el que visita el sitio posiciona el cursor sobre un enlace o hace clic en él

Cambiar la posición

En algunas plantillas, puedes cambiar la posición de los enlaces. Por ejemplo, podrías trasladarlos del centro a la izquierda.

En Estilos del sitio, busca los retoques que se llaman Posición de la navegación, Alineación de la navegación o algo similar. Para ver las posiciones disponibles en tu plantilla, consulta el cuadro Vista de la navegación por plantilla aquí abajo.

Este es un ejemplo de cómo podría verse en Estilos del sitio:

five_-_navigation_style_options.jpg

Consejo: En la familia Brine, busca las secciones Encabezado: Navegación principalEncabezado: Navegación secundaria.

Cambiar el espacio entre los enlaces y alrededor de ellos

Para cambiar el espacio alrededor de los enlaces de navegación, busca los retoques de Estilos del sitio que modifican tu encabezado, el banner o la navegación. Aunque los retoques varían según la plantilla, los retoques de espacio de los enlaces, por lo general, incluyen estas palabras:

  • Padding (Relleno)
  • Espacios
  • Ancho

Este es un ejemplo de cómo podrían verse estas opciones en Estilos del sitio:

avenue_sizes_and_values.jpg

Opciones activas y de posicionamiento del cursor

En algunas plantillas, hay otras opciones para los enlaces de navegación, según si se hace clic en ellas (su "estado" o "fase"). Aunque los retoques varían según la plantilla, busca estas palabras: 

  • Posicionar el cursor: El enlace cambia cuando el visitante posiciona el cursor sobre él.
  • Activo: Cuando la persona que visita el sitio ingresa en una de las páginas de tu navegación, su enlace cambia de estilo.
Consejo: Los enlaces de navegación externa no mostrarán los estilos activos, incluso si dirigen a una página de tu sitio.

Navegación en dispositivos móviles

En la mayoría de las plantillas, los menús de navegación se colapsan detrás de un icono de menú cuando se los visualiza en un dispositivo móvil. Esto ayuda con la usabilidad y hace que tu sitio esté optimizado para dispositivos móviles.

En muchos casos, la navegación en dispositivos móviles hereda los estilos de la versión para computadoras de escritorio. Esto ayuda a mantener la uniformidad de tu marca. Algunas plantillas tienen opciones avanzadas de estilo para dispositivos móviles, que te otorgan un mayor grado de control. Para ver las opciones de estilo para dispositivos móviles de tu sitio, consulta la guía Estructura y estilos de tu plantilla.

Para explorar qué retoques afectan la navegación en dispositivos móviles, abre tu navegación en la vista en teléfonos inteligentes antes de abrir Estilos del sitio. De este modo, podrás ver los cambios a medida que los hagas.

  1. Cambia la Vista en dispositivo a teléfono inteligente.
  2. Haz clic en el enlace de navegación (por lo general, un ☰) para que aparezca la navegación en dispositivos móviles.
  3. Desde el Menú de Inicio, haz clic en Diseño y, luego, en Estilos del sitio. La navegación en dispositivos móviles continuará abierta.
Nota: Si no puedes ver tu navegación en los dispositivos móviles, cerciórate de no haber configurado el color de fondo o del encabezado con el mismo color que el texto de la navegación. Los enlaces podrían aparecer sobre este color en los dispositivos móviles.

Navegación fija

La navegación fija o "pegada" permanece en la misma posición, en la parte superior del navegador, a pesar de que te desplaces hacia abajo en la página. Algunas plantillas ofrecen esta característica.

Aspecto de la navegación en cada plantilla

Así luce la Navegación principal en cada plantilla. Las plantillas están agrupadas por familia.

Nota: La mayoría de los dispositivos móviles ocultan la navegación del sitio detrás de un icono o enlace de menú. Los dispositivos móviles de mayor tamaño, como las tabletas, podrían mostrar los estilos de los sitios para computadoras de escritorio. Para informarte mejor, consulta los iconos del menú de Navegación.

Plantilla

Diseño

Adirondack

Horizontal, parte superior central

Avenue

Horizontal, parte superior izquierda/central/derecha

Familia Aviator

Aubrey, Aviator

Vertical, parte superior izquierda (Tarjeta de negocio/Posición de desplazamiento); u horizontal, parte superior central (Póster)

Familia Bedford

Anya, Bedford, Bryant, Hayden

Horizontal, parte superior derecha

Familia Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Horizontal, parte superior izquierda/central/derecha, puede ocultarse

En el Panel de páginas, se denomina "Navegación principal".

Familia Farro

Farro, Haute

Horizontal, parte superior izquierda/central/derecha, puede ocultarse 

Five

Vertical, en la barra lateral (Posición de la navegación superior: Ninguna); u horizontal parte superior izquierda/central/derecha (Arriba del banner, abajo del banner)

Flatiron

Horizontal, parte superior izquierda

Forte

Horizontal, parte superior derecha

Galapagos

Horizontal, parte superior central

Ishimoto

Horizontal, parte superior izquierda/central/derecha

Momentum

Horizontal, en el pie de página

Familia Montauk

Julia, Kent, Montauk, Om

Horizontal, parte superior izquierda/central/derecha

Native

Horizontal, parte superior central

Familia Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Horizontal, parte superior central, puede dividirse alrededor del título

Familia Skye

Foundry, Indigo, Ready, Skye, Tudor

Vertical, dentro de un recuadro superpuesto

Supply

Vertical, barra lateral izquierda

Familia Tremont

Camino, Carson, Henson, Tremont

Horizontal, parte superior izquierda/derecha

Wells

Vertical, barra lateral izquierda

Wexley

Horizontal, parte superior izquierda/central/derecha

Familia York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Horizontal, parte superior izquierda/central/derecha, puede ocultarse

 

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 51 de 236