Cómo optimizar el menú de navegación de su sitio web con Elementor Pro y WordPress

Si quieres diseñar un menú bonito para tu sitio web, puedes elegir entre varios métodos. Uno es utilizar el editor de menús predeterminado de WordPress, que es sencillo y práctico. Otro es hacer uso del widget de menú de navegación de Elementor, que puedeMuy personalizablesu menú para que responda mejor a sus necesidades.

Crear un menú de navegación en WordPress

Crear un menú de navegación en WordPress es fácil, en primer lugar, inicie sesión en su panel de WordPress y haga clic en la barra lateral "Apariencia > Menú". Busque y haga clic encrear un nuevo menúEn la página verá una casilla para introducir el nombre del nuevo menú que desee. Una vez introducido el nombre, haz clic en el botón azul "Crear menú" para empezar a añadir los elementos del menú.

2. Añadir y personalizar menús de navegación

En el lateral de la página, debería ver menús desplegables con páginas, entradas, enlaces personalizados y categorías para elegir.

Añadir páginas al menú de navegación de WordPress es bastante sencillo. En primer lugar, asegúrate de hacer clic en la pestaña "Ver todo" de la página "Menú" para navegar por todas las páginas disponibles. Si tiene muchas páginas, puede utilizar la función "Buscar" para encontrar rápidamente la página que necesita. Seleccione las casillas de verificación situadas junto a las páginas que desea añadir y haga clic en "Añadir al menú".

Después de añadir varias páginas al menú, puede personalizar aún más cada elemento del menú. Haz clic en la flecha situada junto a cada elemento de la estructura del menú y verás las siguientes opciones:

• Pestañas de navegación: Es el nombre de los enlaces que aparecen en el menú, como Tienda, Galería y Acerca de.
• Atributos del títuloEste es el texto que se muestra cuando el ratón pasa sobre un elemento del menú para proporcionar más información o instrucciones.
• Abrir enlace en una ventana nueva: Normalmente, no se recomienda marcar esta casilla a menos que se enlace a un sitio externo.
• Clase CSSAquí puede añadir clases CSS para personalizar los estilos, como añadir relleno o texto en negrita.
• relación de enlace: Si el enlace apunta a un sitio web de terceros asociado, puede indicarse aquí la relación, por ejemplo, si se trata de un socio, el sitio web de un familiar u otro sitio web propio.
• descripcionesSi su tema permite mostrar descripciones, aquí puede introducir una breve descripción del elemento del menú.

3. Cambiar la estructura del menú de navegación

WordPress le permite crear menús jerárquicos, lo que significa que puede crear elementos de menú principales y submenús debajo de ellos. De este modo, cuando un visitante pase el ratón por encima del elemento de menú principal, se mostrarán las páginas secundarias situadas debajo.

Para reordenar los elementos de menú o crear submenús, puede hacerlo arrastrando y soltando. Para ello: si desea establecer un elemento de menú como submenú, sólo tiene que arrastrarlo por debajo de su correspondiente elemento de menú principal y ligeramente hacia la derecha, de modo que el elemento de submenú quede establecido. Después de esta operación, la navegación de su sitio web será más jerárquica y más fácil de navegar.

4. Publique su menú

En la pantalla del Editor de menús, haga clic en la pestaña Gestionar ubicaciones. A continuación, seleccione la ubicación que desea establecer como nuevo menú. Las ubicaciones disponibles dependen del tema de tu sitio, pero generalmente verás opciones como "Menú principal" o "Menú superior". Marque las casillas correspondientes para establecer su nuevo menú en estas ubicaciones. Este paso le ayudará a asegurarse de que su menú aparezca en el lugar correcto de su sitio web.

También puede encontrar opciones de configuración similares en la parte inferior de la página del menú principal, que se presentan como casillas de verificación.

Si esto no funciona, puede probar otro método: vaya a "estado exterior">"widgets"y, a continuación, arrastre el nuevo menú personalizado o widget de menú de navegación hasta donde desee. Esto organizará el diseño del menú del sitio como usted quiera.

Widgets de menú de navegación para Elementor Pro

Para poder utilizar los widgets del menú de navegación, debe instalar cualquier versión de la aplicaciónElementor ProSi utiliza la versión gratuita. Si utiliza la versión gratuita, debe ceñirse al menú predeterminado de WordPress o utilizar un tercero.

Con Pro, también puede acceder a más de 300 plantillas,Creador de temasySitio web WooCommerceresponder cantandoPublicidad emergenteEl sitio tiene más animaciones y widgets adicionales para los usuarios de WooCommerce.

Cómo hacer un menú de navegación en Elementor

El widget de menú de navegación es muy flexible y rico en funciones, lo que le da libertad para colocar menús en su sitio web que no se limitan a la parte superior de la página o a la zona de la cabecera. Puedes colocarlo donde quieras, incluso incluirlo en artículos. Estas son algunas de sus principales características:

• Puede añadir varios menús en cualquier parte del sitio.
• Añada fácilmente atractivos efectos de animación hover.
• Admite el diseño adaptable para dispositivos móviles y puede personalizarse para que se muestre en ordenadores, tabletas y teléfonos móviles.
• El diseño ajustable, los colores y otros elementos de diseño le ofrecen un control preciso sobre la apariencia de sus menús.
• Se proporcionan exhaustivas opciones de relleno, espaciado y alineación para garantizar que cada detalle del menú sea impecable.

En primer lugar, cree un menú predeterminado de WordPress. Asegúrese de seguir los consejos anteriores para aprender exactamente cómo hacerlo.

Si su menú de WordPress está completo, añádalo a su sitio mediante el widget Menú de navegación. Para ello, cree o edite la plantilla en la que desea que aparezca el menú (por ejemplocabecera). Aquí, busque el widget del menú de navegación y añádalo a la ubicación deseada.

Una vez hecho esto, tu menú de WordPress podrá editarse y personalizarse en Elementor.

1. Diseño y animación

En la barra lateral izquierda, debería ver tres pestañas:Contenido, estilo y avanzado. Lo primero que hay que hacer (si no se ha hecho ya) es ir al"elemento"y deberá"menú"Cambie al menú que desea visualizar. Esto le permite verlo en la pantalla de vista previa.

Al configurar el diseño del menú, puedes elegir entre un diseño horizontal, un diseño vertical o un menú desplegable oculto. Pruebe diferentes opciones de disposición y verá inmediatamente cómo cambia el menú en varios estilos. Además, puede ajustar la alineación de los elementos del menú para satisfacer sus necesidades de diseño.

En cuanto a las animaciones, dispone de una gran variedad de opciones para hacer más atractivos sus menús. Entre ellas se incluyen animaciones de subrayado, sobre subrayado y doble subrayado, así como animaciones de bordes, animaciones de fondo y animaciones de texto. Basta con hacer clic en "puntero en un indicador" para seleccionar su tipo de animación preferido y, a continuación, haga clic en "anime" Ver y seleccionar opciones específicas. Aquí puede ver algunos ejemplos concretos de efectos de animación.

El indicador de submenú le permite modificar el estilo de visualización de los iconos de flecha de los submenús. Si desea personalizar aún más el aspecto del submenú, vaya a la pestaña Estilos y haga clic en la sección Menú desplegable para ampliarla. Aquí puede ajustar el comportamiento del submenú en visualización normal y al pasar el ratón por encima, cambiar la disposición del texto, añadir bordes, sombras o separadores, y ajustar los márgenes interiores para adaptarlos a sus necesidades de diseño. Estos ajustes harán que su menú sea más personal y funcional.

2. Color y espaciado

Si configuras el diseño del menú a tu gusto, puedes personalizarlo aún más con ajustes de color y relleno. Ir a"tipo"y expanda"menú principal".

En los ajustes de diseño, puede editar el tamaño, la fuente y el grosor del texto, y puede elegir entre ponerlo todo en mayúsculas o en minúsculas. Además, puedes hacer ajustes de estilo individuales para distintos tipos de dispositivos. Por ejemplo, puede aumentar el tamaño del texto en los dispositivos móviles, cambiar el color del texto en los dispositivos de sobremesa o realizar cualquier otro ajuste a su gusto. Estas opciones le permiten ofrecer la mejor experiencia de navegación para cada dispositivo.

Puede utilizar las opciones Color del texto y Puntero para personalizar el color de los enlaces del menú cuando se visualizan normalmente, cuando se sitúan sobre el cursor y cuando se activan. Para estos diferentes estados, puede ajustar el estilo para los estados de navegación y activación, respectivamente.

Ajustar el interlineado también es fácil y preciso; puedes establecer el relleno del texto, el interlineado de las letras, la altura de las líneas, etc:

• su altura (honorífico)Ajusta la altura de una línea, de forma similar al relleno vertical, afectando al espacio por encima y por debajo del texto.
• espacio entre letras: Establece la distancia entre las letras; cuanto mayor sea el espaciado, mayor será la separación entre las letras.
• anchura del puntero: Establece el grosor de la línea en estado hover o activo.
• Relleno horizontalEste es el espacio entre los elementos del menú o, en un diseño vertical, entre los elementos del menú y los bordes de la columna.
• Relleno verticalEn un diseño vertical, es el espacio entre los elementos del menú, o entre la parte superior e inferior de una columna.
• Espacio entreEsta opción aumenta el espacio entre los elementos del menú.
• Radio del borde: Si utiliza un color de fondo, este ajuste añade un efecto de esquinas redondeadas.

Si establece puntos de interrupción para dispositivos móviles, puede establecer un espaciado diferente para los modos de escritorio y tableta. Si no, tendrás que editar las opciones móviles por separado.

Por último, en la pestaña Avanzado, puedes establecer clases CSS, ajustar los márgenes y el relleno, añadir imágenes de fondo, cambiar la configuración responsive y mucho más. Hay que tener cuidado al editar estas opciones para que no afecten al rendimiento de tu sitio web en dispositivos móviles.

3. Configuración del menú móvil

El widget del menú de navegación ofrece una serie de opciones de configuración en la pestaña Diseño que están optimizadas para dispositivos más pequeños. A continuación se ofrece una breve descripción de estas opciones:

• punto de interrupciónConfigura cuándo cambiar el diseño del menú para una mejor visualización en dispositivos de pantalla pequeña, como tabletas o teléfonos móviles.
• ancho total: Cuando esta opción está activada, el menú de los dispositivos móviles se amplía a toda la anchura de la pantalla y no se limita a la anchura original de la barra de navegación.
• alinearse en el orden correcto: Puede elegir centrar los enlaces en el menú móvil, o que se muestren a la izquierda o a la derecha.
• cambiar de modo o de flujo de datosMenú hamburguesa: puedes elegir mantener el menú hamburguesa (el icono con tres líneas horizontales) u ocultarlo por completo en tu dispositivo móvil.
• Alineación Toggle: Define la posición del icono del menú hamburguesa, centrado, alineado a la izquierda o alineado a la derecha.

En la pestaña Estilos, también puede encontrar opciones para ajustar la apariencia de los botones de alternancia del menú para móviles, incluyendo la personalización de los colores, fondos, tamaños y la adición de bordes. Estos ajustes le ayudarán a embellecer y optimizar aún más la visualización del menú móvil.

Elementor tiene una opción de modo responsive en la parte inferior de la barra lateral. Te permite previsualizar cómo se verá el menú móvil en las pantallas de tabletas y dispositivos móviles.

Resumen:

Existen varias formas de crear menús de navegación personalizados en WordPress. Aunque la configuración de menús por defecto de la plataforma es sencilla de utilizar y satisface las necesidades básicas, si consideras que estos menús no son lo suficientemente flexibles o carecen de ciertas funciones, los widgets de menú de navegación de Elementor pueden ser una mejor opción. Con Elementor, crear y personalizar menús es fácil y flexible, con una amplia gama de posibilidades de personalización.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres