Encuentre la navegación perfecta para su sitio web de WordPress

Es algo curioso. A menudo ponemos un gran énfasis en la creación de un gran contenido y el desarrollo de un diseño eficiente que incluye ese contenido. Pero sin tanto esfuerzo o pensamiento, para navegar en su sitio web, es posible que sus visitantes nunca puedan disfrutar de todo lo que su sitio tiene para ofrecer. Un informe de uso web de B2B el año pasado reveló algunos datos interesantes en apoyo de la importancia de los menús de sitio web bien hecho: preguntaron: “Cuando llega a una página interna de un sitio web de proveedores en un sitio de recomendación o desde un motor de búsqueda, cómo ¿Te orientas? Casi el 50% de los que respondieron a la encuesta dijeron que usan la navegación principal. Además, el 36% dijo que se espera que el logotipo de la compañía los lleve de vuelta en la página inicial.
También preguntaron: “¿Qué elementos del sitio lo molestan o te hacen salir de un sitio?” Un total del 37% de los encuestados argumentaron como fuente de frustración un diseño o navegación débil. Dicho esto, el diseño y la planificación de los menús no deberían ser difíciles. Pero, como con cualquier otro elemento de su sitio, requiere una planificación seria y herramientas especiales para hacer un menú bien ejecutado. Estas son solo algunas de las preguntas que puede hacerle:
¿Dónde quieres que esté el menú?
¿Cuántos menús necesitas?
¿Habrá un botón de inicio o confía en los visitantes para saber que el logotipo es el enlace?
¿Necesita un diseño de menú de hamburguesas?
¿Quieres que un menú estático sea visible en algún momento?
¿Qué páginas deberían estar en el nivel superior de navegación?
¿Tienes que usar color en el menú?
¿Qué tipo de animación se debe aplicar al menú? ¿Cómo quieres organizar las páginas?
Como puede ver, hay mucho que considerar en términos de construir un menú y cada una de estas características está abierta a la personalización. Como desarrollador, usted es responsable de asegurarse de que lo que elija esté bien alineado con el resto de su estilo, funcionalidad y propósito.
Piense en los menús como un mapa de visitantes o en un guía turístico de su sitio web. Finalmente, no importará cuán bueno se vea su sitio si los visitantes no pueden entender cómo encontrar la información que sea más importante para ellos. Planificación del menú: comience con elementos básicos
La navegación del sitio tiene que hacer exactamente cómo significa el nombre: para ayudar a los visitantes a navegar por el sitio. Aquí hay algunos consejos para comenzar bien su planificación:

Identificación: identifique todas las diferentes páginas que tendrán que existir en el sitio.
Optimización: utilizando la investigación de palabras clave que utilizó para escribir contenido para el sitio web, aplique las mismas pautas y principios para el nombre de su sitio. También será importante encontrar un equilibrio entre optimizar el nombre de una página para SEO con algo simple y directamente directamente al objeto.
Ver: Use una herramienta de mapeo visual para organizar las páginas de su sitio web. Para sitios web más pequeños (menos de diez páginas y una barra de menú singular), Excel o PowerPoint funcionarían muy bien para sus propósitos para cualquier mayor, considere usar una muestra gratuita de SlickPlan o Power Mapper.
Minimización: al planificar los niveles de navegación, es mejor minimizar la cantidad de clics que los visitantes deben hacer. Idealmente, no debería haber más de dos o tres niveles de navegación en un menú. Si es así, considere más menús. Organización: la navegación debe ser lógica, de arriba a abajo y de izquierda a derecha. Presente a quién es (sobre), qué hace (servicios, productos, etc.), qué recursos ofrece (blog, libros blancos, consultoría gratuita, etc.) y su contacto (contacto). Por supuesto, las páginas de su sitio se adaptarán para su negocio específico, pero la lógica básica sigue siendo la misma. Educar, hable con el dolor de su audiencia, demuestre su experiencia y luego dé un punto de contacto.
Ubicación: Coloque el menú en una ubicación fácil de encontrar. Nadie debería cazar para encontrar el menú que lo ayudará a explorar el resto del sitio.
Omnipresence: Considere crear un menú “pegajoso”, para que los visitantes atraviesen una página larga, el menú siempre está presente. Y si hace que el menú sea pegajoso, asegúrese de que se reduzca en tamaño, por lo que, aunque siempre está allí, no distraiga del resto del contenido.
Trunchie: si tiene un menú muy grande, considere en su lugar forzarlo en una hamburguesa o un menú de mega y guarde ese edificio principal en su sitio para otra cosa. Los menús de hamburguesas son fáciles de reconocer hoy, porque son el menú estándar para dispositivos móviles, por lo que no debe preocuparse de que los visitantes no sepan a dónde ir en su escritorio para encontrarlos.
Consistencia: cualquier diseño o toque estilístico que haga al sitio web debe alinearse con lo que se hace en el menú. Los colores gratuitos, la animación y los CTA en el sitio deben ser inspiración para crear la apariencia y el movimiento de un menú. Mobilidad: el menú, como cualquier otra cosa en los sitios web, debe ser absoluto, positivo, adaptable y receptivo.
Configuración del menú: considere las opciones como en cualquier otra cosa en WordPress, tiene opciones cuando se trata de configurar los menús de su sitio. Analizaremos cada una de estas opciones y luego le daremos algunos conocimientos básicos que tendrá que llevar al máximo de cada uno de ellos.
Opción 1: Tema de configuración Muchos temas de WordPress incluirán un módulo de configuración y personalización simple. Haga clic en “Personalizar”. Esto lo llevará a la configuración de personalización del tema y le dará una vista previa en vivo de cualquier cambio que realice.
Personalización de la barra lateral que aparece en el lado izquierdo de la vista previa en vivo de su sitio.
Desde la personalización, verá una barra lateral en el lado izquierdo de la vista previa en vivo de su sitio. Haga clic en la pestaña Meni. (Bastante interesante, verá que WordPress ha hecho un gran trabajo para establecer sus propios menús con etiquetas simples para navegar fácilmente).
Las opciones en el menú “Menús” en “Personalización”.

Tendrás dos opciones en la pestaña Meni. Comience con la navegación principal, ya que esto le permitirá definir la configuración del menú principal.
El menú de navegación principal de “Menús”

Desde la pestaña de navegación principal, puede agregar nuevas páginas, eliminar los valores predeterminados predefinidos, cambiar el nombre de las etiquetas de navegación y revisar la estructura de la jerarquía, todo a través de la arrastre por arrastre. En la parte inferior, también puede definir dónde debería estar la navegación principal en el sitio.
Las opciones de las ubicaciones de los menús en “menús”

Haga clic en la flecha hacia atrás y luego explore la pestaña del menú de ubicaciones. Desde aquí podrá definir qué menús existirán en diferentes partes de su sitio. Hay dos cosas importantes para recordar aquí: 1) Ver y sus opciones diferirán dependiendo del tema que use. 2) Si tiene la intención de tener más menús en su sitio web, deberá definir los otros menús a través de un proceso diferente antes de poder asignar una ubicación. (Los pasos para esto se pueden encontrar a continuación).
Independientemente de las opciones de configuración que está viendo, los módulos de personalización del tema son una herramienta importante que necesita cuando configura los elementos básicos de un sitio web. Para obtener información sobre cómo personalizar el menú temático Upfront en WPMU Dev, consulte este artículo. Opción 2: Configuración del menú WordPress

Si su tema no presenta un dispositivo de personalización de menú o solo necesita más control sobre cómo se verá y funcionará cada uno de sus menús, WordPress tiene una herramienta de configuración de menú predeterminada para ello.
Antes de comenzar, asegúrese de que se haya creado cualquier contenido o enlace que desee incluir en su navegación. Luego regrese a su menú de WordPress. Navegue hasta la pestaña de aspecto y seleccione menús. En esta página habrá dos pestañas con las que puede trabajar: edite los menús y administre las ubicaciones. Su vista aparecerá automáticamente en la pantalla de edición de menús. Bajo los menús de edición, puede ver que la pantalla se divide en dos secciones. Comience con el lado izquierdo. A la izquierda está el lugar donde tiene el poder de agregar diferentes tipos de contenido a su sitio en menús. Las páginas web básicas, las publicaciones de blog, los enlaces personalizados (como si tiene un portal de clientes o un PDF blanco) y las categorías o etiquetas de blogs son los tipos de contenido básicos. Dependiendo de otro contenido que haya activado en sus proyectos de sitio, testimonios, carteras, redes sociales, etc. – Tendrás la oportunidad de agregarlos también.
Cuando haya encontrado algo que desea agregar, haga clic en el cuadro de selección al lado o defina el elemento (si es un enlace), presione el botón “Agregar al menú”. Verá que los nuevos elementos han descendido al final de su menú en el lado derecho de la página de menús. Una vez que su nuevo elemento está en el menú, puede revisar la etiqueta de navegación, la ubicación, la ubicación de redirección o la jerarquía tirándolos y colocándolos en su mapa visual o puede hacer clic en cada elemento abierto para personalizaciones adicionales. Cuando haya terminado, desplácese en la parte inferior y defina dónde existirá este menú en su sitio.

En los menús de esta página, puedes crear nuevos menús. Entonces, si desea algo diferente en el sótano, en una barra lateral, como un menú secundario arriba o debajo de la navegación principal o en otro lugar, haga clic en “Cree un nuevo menú” y configúrelo desde cero. La pestaña Gestión de ubicaciones en esta página cumplirá con el mismo objetivo que el Paso 8, aunque el propósito de esta página es brindarle un control universal sobre todos los menús en su sitio web. (Primero tendrá que configurarse primero. Creación de mega menús, la herramienta de menús de WordPress no será suficiente. Deberá usar una combinación de widgets y complementos para obtener este efecto. (Más sobre esto a continuación). Opción 3: estilo CSS para aquellos de ustedes que prefieren seguir la forma de codificación, puede usar el estilo CSS para configurar y los menús. Para obtener más información al respecto, lea más. Personalización del menú: Plugini Pluginuri … ¿Dónde estaríamos sin usted? Por supuesto, la codificación podría ayudarnos a obtener una funcionalidad y estilización adicionales de nuestros menús, pero esto no siempre es tan fácil. Es por eso que nos gusta recurrir a complementos. Si piensa en una idea, un nuevo aspecto o animación para un menú, hay grandes posibilidades de que un desarrollador hubiera creado un complemento para ayudarlo a convertirlo en realidad.
Estos complementos llevarán el diseño de su menú de WordPress al siguiente nivel:

Iconos de menú

Actualmente, muchos sitios web recurren a íconos para una experiencia visual limpia y consistente en todo el diseño de su sitio. Le dan a los sitios web una manera simple de dividir mucho texto o presentes listas con marcadores en una manera nueva y más interesante. Si ha utilizado imágenes de iconos en su sitio y desea mantener ese estilo visual en su navegación, este complemento funcionará exactamente. ¿Estás interesado en los iconos de menú? Detalles
Elementos de menú específicos de la página
¿Alguna vez ha querido poder atribuir la configuración de navegación personalizada a diferentes páginas sin tener que crear menús más (pero similares) para obtener el efecto? Bueno, este complemento le permitirá hacer esto. Configure sus menús a medida que continúe y luego tendrá una definición adicional para definir, brindándole la oportunidad de ocultar fácilmente ciertos elementos de menú de la vista de ciertas páginas. ¿Está interesado en elementos de menú específicos de la página?
Detalles
Canasta de menú WP

Es importante que los sitios de comercio electrónico muestren claramente sus carritos de compras en la esquina superior del sitio. Debido a comerciantes electrónicos como Amazon, es el lugar donde los visitantes lo buscan de inmediato. Para los desarrolladores que no desean codificar un ícono relacionado con el carrito de compras en la parte superior del diseño de un sitio, puede usar este complemento para una fácil integración en el menú de navegación. ¿Estás interesado en el carrito de menú WP?
Detalles
Menú de navegación de widgets

¿Alguna vez ha visto un sitio web que tiene una mezcla de elementos colocados en una navegación limpia con columnas y pensó que se ve muy bien? Bueno, puedes agradecer a los widgets por ello. Este complemento lo ayudará a agregar complejidad a la navegación de su sitio web, mientras mantiene todo lo que se atiende y organizado en un solo lugar. ¿Está interesado en el menú de navegación de Widgetize?
Menú Mega Max
Los mega menús son exactamente lo que implican: menús muy grandes que requieren el uso de una gama completa de herramientas (complementos, widgets, imágenes, video, animación y más) para lograr el efecto deseado. El efecto deseado es un menú que aparecerá una vez que un visitante haya pasado con el mouse o haya hecho clic en un elemento desde la parte superior navegando por un sitio. La gran divulgación generalmente viene como un menú de caída lleno de imágenes o videos, páginas, funciones de búsqueda y más. ¿Estás interesado en el menú Max Mega?

Detalles
Menú receptivo
Por último, pero no menos importante, necesitará algo que lo ayude a crear un diseño de menú receptivo. Este complemento ofrece más de 120 personalizaciones para ayudarlo a crear el diseño, el color y el aspecto perfecto, independientemente del tipo de dispositivo que se ve. ¿Estás interesado en el menú receptivo?

Detalles
Menús en la naturaleza Si miraba esta guía y pensaba “bueno, parece bastante simple”, eche un vistazo a lo que otras compañías han hecho con los menús de sus sitios. ¡Está bastante inspirado si nos preguntas! Red de alimentos
Este es el ejemplo perfecto de un mega menú bien estructurado, con varios elementos. Cañón

Cuando llegue por primera vez a este sitio web, vea el icono del menú de hamburguesas en la parte superior derecha. Al hacer clic en esa apertura, se revela un menú en toda la página que contiene información de contacto, redes sociales y enlaces de navegación. El cohete web Racket también utiliza la navegación de hamburguesas, pero la suya está en la parte superior izquierda del sitio. Una vez que haga clic en la que se abre, verá lo que parece una simple barra de navegación desplegable. Visite cualquiera de esas páginas y la barra de navegación se esconde para mantener el enfoque en el contenido. Cocinas de Tapas Brindisa
Los restaurantes son solo uno de esos tipos de negocios que esperan tener muchas imágenes interesantes en su sitio. Brindisa, sin embargo, condujo este uso de imágenes a nuevos picos con la barra lateral alineada verticalmente, cargada con iconos y abierto. La conclusión es definitivamente varias formas en que puedes llevar el diseño de los menús a los siguientes niveles, especialmente si quieres que coincidan con los fantásticos sitios web en los que diseñó los menús. Pero debería actuar como una buena imprimación para hundirse en el mundo del menú y aprovechar al máximo su poder en su próximo sitio de WordPress.
Cuéntanos en los comentarios a continuación qué tipo de consejos y trucos usaste para hacer nuevos diseños de menú creativos en WordPress.

Etiquetas:
guía
menús