¿Está buscando una manera de crear un menú increíble para ayudar a mejorar la UI/UX de su sitio web? Si es así, entonces estás en el lugar correcto. Aquí hemos elaborado una guía detallada para ayudarle.
Primero, le mostramos un tutorial paso a paso sobre cómo crear un menú para su sitio web de WordPress. Y una vez que lo domines, te guiaremos sobre cómo usar el widget del menú de navegación de Elementor para personalizar y potenciar tu menú de WordPress.
Tabla de contenido:
Es fundamental saber que los menús de navegación son importantes no sólo para atraer tráfico a su sitio sino también para una mejor clasificación SEO.
De hecho, los menús de navegación están diseñados principalmente para la participación del usuario, pero este no es el único propósito.
El segundo factor más importante es tener en cuenta el papel de los "WebCrawler" o Bots que están diseñados para rastrear los sitios web e indexar el contenido al nivel relevante e informar al motor de búsqueda para clasificar el contenido en el lugar correcto.
Por lo tanto, si estás creando menús demasiado complicados, a los bots les resultará difícil clasificar tu contenido, pero también perderás visitantes.
En resumen, la "facilidad de navegación" es un factor fundamental para mejorar la experiencia del usuario y también desempeña un papel imperativo para mejorar la clasificación de nuestro sitio y aumentar el tráfico.
Es una excelente razón para que muchos sitios web comerciales mantengan un único ícono de navegación en lugar de una barra de menú compleja, que se carga en un menú de pantalla completa cuando se hace clic.
Gracias al widget Elementor pro con un menú de navegación 100% responsivo, puedes crear una barra de menú increíblemente flexible y con píxeles perfectos sin usar ningún código.
En este tutorial, le demostraremos cómo utilizar el widget del menú de navegación de Elementor para obtener el menú avanzado y personalizado de WordPress.
Antes de comenzar con el widget de navegación de Elementor, exploremos cómo podemos crear un menú de WordPress simple usando la versión gratuita de Elementor.
Ahora, para crear un menú de WordPress, no es necesario instalar ningún plugin especial. De forma predeterminada, WordPress viene con un creador de menús fácil de usar, que le ayudará a crear menús de navegación sencillos para su sitio web.
Dicho esto, no tendrás acceso a ninguna opción de personalización del menú. Asumirá el diseño del tema de WordPress actualmente activo. Pero si eso es todo lo que desea, esta es una excelente manera de configurar un menú de navegación para su sitio web de WordPress.
Lo primero es lo primero, deberá iniciar sesión en su panel de control de WordPress.
Ahora, desde la barra lateral izquierda, ve a Apariencia > Menús . Aquí encontrará un diseño de dos columnas con "Agregar elementos de menú" a la izquierda y "Estructura del menú" a la derecha.
En Estructura del menú, encontrará un campo para el "Nombre del menú". Este será el nombre del menú que crearemos ahora mismo. Llamémoslo Menú 1.
Nota : No te preocupes. Tus lectores no podrán ver los nombres de los menús. Es una función que le ayudará a mantener organizados todos sus diferentes menús.
Después de darle un nombre a su menú, haga clic en el botón "Crear menú" para que esté disponible. Ahora, necesitas agregar los diferentes elementos del menú.
Ahora viene la parte en la que completa su nuevo menú con elementos de menú. En la sección "Agregar elementos de menú" en el lado izquierdo, encontrará una lista organizada de cosas que puede agregar a su menú.
De forma predeterminada, contiene cualquiera de sus páginas, publicaciones, páginas de destino, enlaces personalizados y categorías.
simplemente seleccione los elementos del menú que desea agregar usando la casilla de verificación y luego haga clic en el botón "Agregar al menú". Esto llenará su menú con todos los elementos de menú seleccionados.
Nota : Observe que cada sección bajo “Agregar elementos de menú” tiene la opción de alternar entre Más reciente , Ver todo y Buscar . Recuerde utilizar estas opciones si hay muchos artículos.
Una vez que haya terminado de agregar todos los elementos del menú, presione el botón "Guardar menú" y continúe con el siguiente paso.
¿Sabías que por defecto WordPress también te permite crear submenús? Al crear la estructura del submenú, tiene un elemento de menú principal y un elemento de menú secundario.
Cuando un usuario pasa el cursor sobre el elemento del menú principal, revelará todos los elementos del menú secundario ocultos debajo de él.
¿Guay, verdad?
Ahora, para crear una estructura de submenú, todo lo que tiene que hacer es elegir un elemento de menú que desee que esté en el menú principal. A continuación, arrastre y suelte todos los elementos del menú que desee como elementos del menú secundario debajo. ¡Ahora simplemente arrástralo hacia la derecha y listo!
Ahora que ha creado su nuevo menú y ha agregado submenús, es hora de administrar su ubicación.
En la parte superior del editor de menú, deberías ver una opción llamada "Administrar ubicaciones". Haga clic en él y debería aparecer algo similar a la siguiente pantalla:
Ahora, las ubicaciones del menú disponibles dependerán del tema que haya instalado. En este amp , tenemos un tema que admite 3 menús.
Después de asignar un menú a cada una de las ubicaciones de menú disponibles, haga clic en "Guardar cambios" y listo.
Ahora conoce todas las funciones básicas del menú que WordPress ofrece de forma predeterminada. Sin embargo, si desea más personalización y funcionalidad, siga leyendo para conocer el widget del menú de navegación de Elementor Pro.
Si desea agregar un menú de navegación personalizado a su sitio de WordPress, necesitará la versión Elementor Pro. La versión Elementor Pro viene con el widget de navegación Elementor junto con muchas otras características especiales, como más de 300 plantillas, un creador de temas, un widget emergente, widgets de WooCommerce y muchas otras características interesantes.
¿Cuáles son las características clave específicas del widget del menú de navegación? Aquí hay una breve introducción.
Necesitará crear un menú básico de WordPress como mencionamos anteriormente y luego personalizará el menú predeterminado de WordPress usando el widget de menú pro-nav. Una vez que haya creado la lista principal, el siguiente paso es agregarla a la ubicación deseada, es decir, a la sección de encabezado.
Ahora, cuando haya terminado con la configuración básica, personalicemos el menú usando el widget del menú de navegación.
En la esquina superior de la sección de configuración, hay tres opciones disponibles; Contenido, Estilo y Avanzado.
La sección Diseño : tienes tres opciones: Horizontal, vertical o un acordeón desplegable oculto.
Sección de alineación : esta sección le ayuda a alinear los elementos de texto del menú; centro, derecha o izquierda.
Sección de animación : esta sección le permitirá agregar efectos de animación debajo, sobre o efectos de animación de doble línea. También puedes optar por las animaciones de marco, fondo y texto sutil.
Las animaciones subrayadas son las siguientes:
Del mismo modo, existen animaciones enmarcadas, superpuestas, de doble línea, de fondo y de texto. Cada uno de ellos ofrece su propio conjunto de animaciones y puedes comprobarlas tú mismo para saber qué obtienes con ellas.
Sección Puntero : selecciona el tipo de puntero en el menú desplegable.
Sección de indicador de submenú : el widget Elementor incluye muchas opciones de estilo de submenú. Donde no sólo podrás controlar el color, el estilo y también el fondo del menú.
Relleno y espaciado del menú: el relleno se puede ajustar rápidamente. Puede cambiar el relleno horizontal para el menú y el submenú, el relleno vertical, el espacio intermedio y la alineación derecha, izquierda y centrada.
Elementor aborda extremadamente bien el espaciado y el relleno del menú. Trabajaron duro detrás de las puertas para asegurarse de poder llevar las herramientas al desarrollador para que pueda crear fácilmente el diseño en el que están pensando.
El espaciado del menú ofrece muchas opciones que incluyen:
Color de fondo y tipografía : puede obtener una apariencia de marca personalizada con la ayuda de la combinación de colores y el color de fondo deseados. Además, también puede elegir las opciones de menú transparentes o semitransparentes.
Como diseñador, puedes jugar con estas opciones tanto como puedas y asegurarte de diseñar los fondos según tus gustos.
Los dispositivos móviles son una parte importante de la web y es por eso que los desarrolladores de Elementor también brindan herramientas para que puedas crear la barra de navegación para dispositivos móviles.
El widget Elementor le permite un control total de las opciones del menú móvil en WordPress. Puede controlar la vista de la pantalla móvil con un conjunto separado de configuraciones para pantallas solo móviles. Hay una opción para la configuración de la pantalla del móvil en la parte inferior de la sección de configuración de Elementor donde puede ver las opciones de la pantalla del móvil.
En resumen, las características del menú móvil de Elementor son las siguientes:
Navegación responsiva: Ofrece un posicionamiento responsivo del menú.
El menú es una de las características más importantes de cualquier sitio web. Porque ayuda a los visitantes a recorrer su sitio web y, si crea una lista de manera inteligente, ayudará a mantener a los visitantes en su sitio durante mucho tiempo. El menú es tan importante como el diseño completo de cualquier sitio web, el encabezado y el pie de página.
Por lo tanto, el widget de menú debe ser capaz de ofrecer la apariencia única de su marca con todas las características esenciales. El widget de navegación de Elementor viene con capacidades ricas en funciones que permiten a los clientes personalizar la sección del menú para que se ajuste a la voz de su marca. Ahora, puede utilizar un menú elegante hecho a medida en su sitio web, en su página de destino, encabezado o cualquier otra sección donde desee mostrarlo.
Los encabezados y pies de página de un sitio web son elementos esenciales. En la mayoría de los casos, el encabezado proporciona navegación...
Dos de los temas de WordPress más populares del mercado son Astra y OceanWP. Profesional…
Crear un excelente sitio web de noticias no requiere que te conviertas en diseñador web. Nosotros…
El tema Periódico es uno de los temas de WordPress más importantes diseñados por tagDiv, un…
Cuando se trata de configurar una tienda en línea, WooCommerce es el plugin ideal. Él…
Un encabezado es generalmente lo primero que ve una persona cuando visita su sitio web,…
Ver comentarios
Hola, gracias por tu publicación, avísame si tienes alguna pregunta, deja un mensaje y eres editor del elemento o estás en tu página, no olvides dejar un comentario. ¿Cómo puedo solucionarlo? gracias
¡Hola! Por lo general, este problema aparece cuando su menú está vacío o no se guarda. Vuelva a verificar en el lado del menú de WordPress.
Hola, puedes consultarnos para obtener instrucciones automáticas en tu submenú o elemento de menú.
Gracias.
Hola, lo siento, no entiendo completamente tu pregunta. ¿Podrías especificar?
ciao quando le voci del submenù sono troppo longhe come si riesce a dividerle su più righe ?
Hola, esto no es recomendable porque la navegación sería muy compleja de leer, en este caso es mejor un estilo mega menú
Menú w wersji mobilenej nie otwiera sie. ¿Jak may utworzyc zeby wyswietlalo sie na telefonach?
Hola, la visualización del menú móvil es automática si usas el widget de navegación de Elementor. Pero debe verificar una configuración llamada "punto de interrupción" en la configuración del menú. Este es el tamaño de la pantalla cuando se alternará el menú.
Ahora esa es la próxima vez, voy a continuar con el siguiente paso, ese es el próximo tema Creaton. Có gì hỗ trợ mình với nhé.
Sziasztok, az miképp old ható meg, hogy egy vertikális menüben az almenüre kattintás után ne zárja össze a menüt az oldal betöltésekor? EPro
Hola, desafortunadamente eso no es posible, no existe esa opción en el widget de navegación de Elementor.
Hola. Es posible hacer uso del menú con total visibilidad y ver el contenido visual de la página. Purtroppo tutte le volte che ci ho provato il menu scende ma il colore di background del menu no renendolo practicamente illegibile le scritte. Grazie