• 0k
  • 0
Diseño Web \ 30 Mayoo 2012

Tips HTML5: Personaliza tu Menú de Navegación

Sitio Web con Gatos

Puede que el menú de navegación no ocupe mucho espacio en tu página web, pero definitivamente es un componente clave en el diseño de la misma. Que tus visitantes encuentren a tu sitio fácil de usar y fácil de navegar depende en gran medida de cómo estableces el menú de navegación. Es por eso que les recomendamos que se tomen un tiempo para pensar acerca de su menú de navegación al crear un sitio web HTML5.

Personalizar el menú de navegación con el editor Wix HTML5 es fácil. Simplemente sigue estos pasos:

Configuración básica

  • En el editor, haz clic en el menú y arrastra los bordes para cambiar su tamaño.

 

Haz clic en el menú y arrastra los bordes para cambiar su tamaño

Haz clic en el menú y arrastra los bordes para cambiar su tamaño

  • Al resaltar el menú, el cuadro de Settings (configuración) aparecerá también.

 

 El cuadro de Settings (configuración) también aparecerá

El cuadro de Settings (configuración) también aparecerá

  • En Settings, puedes hacer lo siguiente:

 

  1. Alinear los botones a la derecha, izquierda, o centro
  2. Alinear el texto del botón a la derecha, izquierda, o centro
  3. Elegir entre mantener todos los botones en el mismo tamaño o no
  4. Elegir estirar los botones para llenar todo el espacio del menú
  5. Editar el texto del botón “Más” (en caso de que tengas tantas páginas que no todas se pueden visualizar en el menú de navegación)

 

Cuadro de Settings

Cuadro de Settings

  • Mantén la opción “Show on all pages” activada, ya que deseas que el menú aparezca en todas las páginas.
  • Haz clic en “Change Style” para las opciones avanzadas de personalización.

 

"Show on all pages" y "Change style"

"Show on all pages" y "Change style"

Personalización avanzada

Puedes elegir entre menú de texto o menú de botones (Extra menú es similar al de texto).

Elige entre los menús de texto y los menús de botones

Elige entre los menús de texto y los menús de botones

Haz clic en Edit style. Navega a través de las diversas opciones de texturas de menú para elegir un nuevo look.

Elige entre los menús de texto y los menús de botones

Elige entre los menús de texto y los menús de botones

  • Después de elegir una textura, puedes empezar a editar los colores del menú. Puedes elegir un color para cada función del menú disponible para cada textura (color del texto, el color cuando el cursos se posa sobre el texto, color de texto seleccionado, etc.)
 Edición de los colores del menú

Edición de los colores del menú

 

  • Elige el tipo de letra que más te guste (puede que necesites agrandar o achicar la letra de acuerdo a los cambios de fuente).
Selecciona la fuente que más te gusta

Selecciona la fuente que más te gusta

 

  • Algunas texturas también tienen la opción de editar el tamaño de las esquinas (Corner Sizes) y personalizar los bordes externos del menú. Te recomendamos que mantengas marcado “Lock corners together”
  • Agrega o quita la sombra a tu gusto.
  • Juega con “Spacing dial” para acercar o alejar los botones entre sí.

 

"Corner Sizes"

Haz clic en OK para guardar los cambios, ¡y tu menú está listo!

¡Crea tu propio sitio web HTML5 hoy! >>

Publicado por Equipo Wix
Wix

Bienvenido al

Únete al Blog de Wix ¡Para estar al tanto de novedades!

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email

¡Suscríbete al Blog! \ 

Diseño web, tendencias, consejos para
emprendedores ¡y todas las novedades sobre Wix!

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email