Conclusiones clave
- Elementor sin Pro no puede colocar un menú de WordPress en una página o en un encabezado, porque el widget Elementor Menu (anteriormente Nav Menu) se envía solo con Elementor Pro.
- Se puede crear un menú de navegación de Elementor sin Pro con el widget Master Addons Nav Menu, que muestra cualquier menú de WordPress y establece su diseño por separado para escritorio, tableta y dispositivos móviles.
- Los submenús en el menú de navegación de Elementor provienen de WordPress: arrastre un elemento ligeramente justo debajo de su padre en Apariencia > Menús hasta que diga “subelemento”, luego guárdelo.
- El widget Master Addons Nav Menu tiene cuatro tipos verticales: Normal abre submenús hacia un lado al pasar el cursor, Alternar y Acordeón los expande al hacer clic y Side fija el menú al borde de la página.
- El widget Master Addons Nav Menu permite a los teléfonos alternar hamburguesas de forma predeterminada, mientras que Hamburger en escritorio o tableta y los tipos Popup y Offcanvas necesitan Master Addons Pro.
Puede crear un menú de navegación de Elementor con estilo sin comprar Elementor Pro. El propio widget de menú de Elementor es solo Pro, pero el widget Master Addons Nav Menu extrae cualquier menú de WordPress al editor, diseña todos los niveles desde el panel y colapsa en una hamburguesa en los teléfonos.
Esta guía cubre por qué el Elementor central deja el vacío, las formas de llenarlo y la compilación del encabezado en seis pasos. Luego vienen los submenús, los cuatro tipos de menú verticales, el comportamiento móvil, las razones habituales por las que no aparece un menú y las partes que necesitan Master Addons Pro.
Tabla de contenidos
Por qué Elementor free no tiene un widget de menú
El complemento gratuito de Elementor incluye docenas de widgets de diseño y contenido y no hay forma de colocar un menú de navegación de WordPress en una página o plantilla. El widget que lo hace, originalmente llamado Menú de navegación y ahora widget de Menú, es solo Pro. Documentación propia de Elementor lo confirma.
Aún puedes crear el menú en Apariencia > Menús. El espacio está en el lado del diseño: el Elementor central no tiene nada en qué colocar ese menú, por lo que aparece dondequiera que lo imprima su tema.
En un sitio simple con un tema listo para el menú, eso puede ser suficiente. Una vez que desee un encabezado personalizado, un interruptor de hamburguesa que controle o un mega menú, Elementor gratuito por sí solo no puede llegar allí. Los tutoriales antiguos llaman al menú de navegación del widget Pro y los más nuevos lo llaman menú, pero siempre ha necesitado Pro.
Tres formas de agregar un menú de navegación sin Pro
Hay tres opciones reales sin licencia Elementor Pro. La cuarta fila es Elementor Pro, a modo de comparación.
| Método | Necesita Elementor Pro | Estilo del editor | Móvil | Mejor para |
|---|---|---|---|---|
| Ubicación del menú del tema | prohibido | Ninguno, el tema lo controla | Depende del tema | Sitios simples sobre un tema listo para el menú |
| Widget de menú Nav de complementos maestros | prohibido | Completo, desde el panel | Alternar hamburguesa en los teléfonos | Un encabezado personalizado sin Elementor Pro |
| Mega menú de complementos maestros | prohibido | Completo | Colapsa en un interruptor | Paneles multicolumnas, gran navegación |
| Widget de menú Elementor Pro | Sí, licencia paga | Completo | Incluye fuera de lienzo | Sitios ya en Elementor Pro |
Ubicación del menú del tema. Cada tema registra al menos un área de menú. Asigne su menú y funcionará sin complementos, pero Elementor no tendrá control sobre su apariencia y el comportamiento móvil es cualquiera que sea el autor del tema creado. Si ese menú ya se ve bien en un teléfono, omita el widget.
Widget de menú de navegación de complementos maestros. Esta es la opción nativa de Elementor que se ejecuta sin Elementor Pro. Suelta el Widget de meniul Nav en cualquier plantilla, apúntela a un menú de Apariencia > Menús y colores de estilo, espaciado, submenús y el interruptor móvil desde el panel.
Mega menú de complementos maestros. Para sitios con muchas categorías, la extensión Mega Menu crea paneles de varias columnas encima del mismo widget y se ejecuta sin Elementor Pro. Tutorial: cómo crear un mega menú en Elementor sin Pro.
Elemento Pro. Si ya lo posee, utilice su widget de menú y Theme Builder. Dos complementos para un solo trabajo agregan peso.
¿Quieres ver todos los diseños antes de construir? El Página del widget del menú de navegación tiene demostraciones en vivo de encabezados horizontales, barras laterales verticales y la hamburguesa del teléfono.
Crea el menú, de principio a fin
La compilación ocurre en wp-admin y el editor Elementor, sin código. Primero verifique que su tema no imprima su propio encabezado, porque dos encabezados apilados es el desastre más común aquí.
Paso 1: registra el menú
Vaya a Apariencia > Menús, cree un menú, agregue sus páginas y enlaces y asígnele un nombre que reconocerá en seis meses. Esto es WordPress simple, nada específico del complemento y WordPress tiene un guía de la pantalla Menús si no has creado uno antes. Configure aquí también cualquier menú desplegable (consulte el sección submenú).
Paso 2: cree una plantilla de encabezado
Abre el Creador de temas de complementos maestros y agregue una nueva plantilla con el tipo establecido en Encabezado. Esto le permite reemplazar el encabezado del tema en lugar de luchar contra él. Para comenzar desde un diseño terminado, importe uno de estos Plantillas de encabezado de Elementor y apunte su widget de menú a su menú.
Paso 3: agregue el widget del menú Nav y elija su menú
Busque en el panel Elementor “Menú Nav” y arrástrelo al encabezado (su panel lee Menú de navegación). En Contenido > General, elija el menú que creó en el paso 1 en el menú desplegable Seleccionar menú y luego configure el Diseño. Horizontal se adapta a un encabezado estándar, con un control de alineación al lado. Vertical se adapta a una barra lateral y agrega un control de tipo con Normal, Alternar, Acordeón y Lateral.
El diseño se establece por dispositivo. El escritorio se inicia en Horizontal y los teléfonos se inician en Hamburger, por lo que el menú colapsa en un teléfono sin configuración adicional.
Paso 4: peinarlo
Los estados de fuente, color, espaciado y desplazamiento están todos en la pestaña Estilo, sin CSS personalizado. El elemento del menú principal contiene relleno, espacio entre elementos, alineación, tipografía, colores normales, flotantes y activos, fondo, borde, radio y sombra de texto. Core Elementor no puede hacer nada de esto para un menú.
Paso 5: Publícalo y asígnalo
Guarde la plantilla y asígnela a todo el sitio. Sin Master Addons Pro, esa es la única condición de visualización disponible, que funciona cuando desea un encabezado en todas partes.
Paso 6: Compruébalo en la parte frontal
Cargue el sitio y confirme solo un encabezado. Si el menú del tema también se muestra, apáguelo en la configuración del Personalizador del tema, ya que ocultarlo con CSS deja el marcado en la página.
Cómo agregar un submenú y diseñar el menú desplegable
Para agregar un submenú a un menú de navegación de Elementor, anide el elemento debajo de su padre en Apariencia > Menús y el widget lo convertirá en un menú desplegable. No hay configuración de submenú dentro de Elementor.
- Abra Apariencia > Menús y seleccione el menú que utiliza el widget.
- Agregue la página secundaria o el enlace si aún no está en el menú.
- Arrástrelo debajo de su padre y ligeramente hacia la derecha hasta que aparezca la etiqueta “subelemento” junto a su nombre.
- Haga clic en Guardar menú y luego recargue el editor Elementor o la interfaz.
En un encabezado horizontal, el padre recibe una flecha indicadora (establecida en Contenido > Icono indicador) y el submenú se abre al pasar el cursor.
El menú desplegable diseña el panel (ancho, fondo, borde, radio, sombra, distancia desde la barra superior). El elemento del menú desplegable diseña los enlaces que contiene: tipografía, espacio, relleno, colores normal, flotante y activo, y un divisor opcional. Los menús de tercer nivel obtienen secciones de submenú desplegables coincidentes. El demostración de variaciones del menú desplegable muestra varios estilos de paneles construidos de esta manera.
Los cuatro tipos de menú verticales
El menú vertical de Elementor en Master Addons viene en cuatro tipos: Normal, Alternar, Acordeón y Lateral. Establezca el diseño en vertical y debajo aparecerá un control de tipo. El tipo también se establece por dispositivo, por lo que una barra lateral puede usar Accordion en una tableta y Normal en un escritorio.
normalidad
Normal abre cada submenú al costado de su padre al pasar el cursor, como un elevado. Se adapta a una barra lateral de escritorio con espacio a la derecha.
Alternar
Alternar amplía el submenú debajo de su elemento al hacer clic y empuja los elementos de abajo hacia abajo. Varios submenús pueden permanecer abiertos a la vez, lo que ayuda cuando la barra lateral también funciona como índice.
Acordeón
Accordion también se expande al hacer clic, pero al abrir un submenú se cierra el abierto. Eso mantiene los menús largos cortos en una columna estrecha.
Lado
El lado fija el menú al borde de la página, con los elementos principales en una barra vertical y cada submenú en un panel al lado. El demostración del menú lateral vertical lo muestra en una página completa.
El demostración del menú de navegación vertical muestra una versión de barra lateral con estilo.
Hacer que funcione en dispositivos móviles
En los teléfonos, el widget del menú de navegación se colapsa en un interruptor de hamburguesa de forma predeterminada. La sección Menú de hamburguesas de la pestaña Contenido establece su alineación, ícono, texto o ambos, una vista predeterminada, apilada o enmarcada, forma e íconos normales y activos separados.
La palanca funciona tanto con el teclado como con el tacto. Ingrese y abra Space, Esc lo cierre y un toque fuera del menú también lo cierre.
En los teléfonos, el menú se abre en su lugar debajo de la palanca y los submenús se expanden dentro de ella. Eso se adapta a menús cortos y medianos. Un panel fuera del lienzo que se desliza hacia adentro desde un lado es una función Pro, que se trata a continuación.
Pruebe en un teléfono real y en la barra de herramientas del dispositivo del navegador, porque los objetivos de toque y los toques externos se comportan de manera diferente en una pantalla táctil. Compruebe que el icono cambie de estado cuando el menú esté abierto y que se pueda acceder a un elemento del submenú con un solo pulgar.
Por qué no se muestra el menú de navegación de Elementor
Cuando no se muestra el menú de navegación de Elementor, la causa casi siempre es una de estas cuatro. Compruébalos en orden.
- No se selecciona ningún menú o no existe ningún menú. Crear un menú no lo conecta al widget, así que selecciónelo en Seleccionar menú. Si el campo dice “No hay menús en su sitio”, cree uno primero.
- La plantilla de encabezado no se aplica. Una plantilla de encabezado no hace nada hasta que tiene una condición de visualización. Configure todo el sitio en el Creador de temas y verifique que ningún encabezado de tema lo cubra.
- En un teléfono, el menú está detrás de la hamburguesa. Los teléfonos muestran el interruptor en lugar de los enlaces. Si el color del interruptor coincide con el fondo del encabezado, el icono es invisible y parece que falta el menú. Dale al interruptor un color contrastante en Estilo > Hamburguesa.
- Almacenamiento en caché o JavaScript retrasado. Un caché de página puede servir al encabezado anterior, y el retraso de JavaScript puede detener el menú desplegable y el interruptor de funcionamiento hasta que el visitante mueva el mouse. Borre el caché y excluya los scripts de menú del retraso JS.
¿qué necesita Master Addons Pro
Dos partes de esta configuración necesitan Master Addons Pro.
Hamburguesa en escritorio o tableta, además de los tipos Popup y Offcanvas. El diseño ofrece horizontal y vertical en todos los dispositivos, con Hamburger marcado como Pro. Los teléfonos obtienen la hamburguesa predeterminada lista para usar, pero la hamburguesa en pantallas más amplias y los tipos emergentes o fuera de lienzo necesitan Pro. Por lo tanto, un menú deslizante fuera del lienzo es una característica paga aquí, a través del diseño de la hamburguesa o por separado Widget de contenido fuera del lienzo, que abre cualquier plantilla guardada en un panel. Sin Pro, la opción más cercana es el tipo de lado del diseño vertical.
La orientación del creador de temas es una regla. El Theme Builder gratuito guarda exactamente una condición de visualización: Sitio completo. Un encabezado diferente en una página de inicio de sesión o para miembros que hayan iniciado sesión necesita Pro. Nuestro desglose de las condiciones de visualización explica cómo funcionan las reglas de condición y guía gratuita para creadores de temas cubre el resto de ese nivel.
El widget no tiene animaciones de puntero flotante (el menú de Elementor Pro las tiene) ni configuración fija en ningún plan. Para mantener el encabezado a la vista, use Motion Effects de Elementor Pro en el contenedor del encabezado o agréguelo selector { position: sticky; top: 0; z-index: 99; } al contenedor a través del Master Addons Extensión CSS personalizada. El guía de encabezado pegajosa camina por ambos.
Si ya posee Elementor Pro, nada de esto se aplica. El directorio de widgets y extensiones enumera el resto del complemento y, si el encabezado necesita una sección, sigue reconstruyéndolo a mano Creador de widgets (Pro) lo convierte en un widget real. El página de precios enumera los niveles.
Preguntas frecuentes
¿elementor gratuito tiene un widget de menú?
El widget No. Elementor's Menu se envía solo con Elementor Pro. Master Addons agrega su propio widget Nav Menu que se ejecuta sin Elementor Pro, por lo que puedes colocar y diseñar un menú de navegación real sin esa licencia.
¿puedes crear un menú de navegación en Elementor sin Pro?
Sí. Registre el menú en Apariencia > Menús, luego use un complemento como Complementos maestros para colocar un widget de menú de navegación en una plantilla de encabezado y diseñarlo desde el panel. Free Elementor por sí solo no puede colocar ni diseñar un menú.
¿cómo agrego un menú de hamburguesas móvil en Elementor sin Pro?
Agregue el widget Master Addons Nav Menu a su plantilla de encabezado y seleccione su menú. Se colapsa en un interruptor de hamburguesa en los teléfonos de forma predeterminada, con configuración de ícono, texto, vista y forma en la sección Menú de hamburguesas.
¿el menú fuera del lienzo necesita Master Addons Pro?
Sí. Off-canvas es un tipo dentro del diseño de Hamburger, y los tipos Popup y Offcanvas, o Hamburger en escritorio y tableta, requieren Master Addons Pro. Sin Pro, obtienes diseños horizontales y verticales más la hamburguesa predeterminada en los teléfonos, y el tipo Vertical Side es la opción de anclaje lateral más cercana.
¿cómo creo un mega menú en Elementor sin Pro?
Master Addons incluye una extensión Mega Menu que crea paneles de varias columnas, colapsa en dispositivos móviles y se ejecuta sin Elementor Pro. Funciona con el widget Nav Menu para una navegación más grande con categorías o contenido promocional.
¿por qué no se muestra mi menú de navegación de Elementor?
Por lo general, no se elige ningún menú en el campo Seleccionar menú del widget. Luego verifique que la plantilla de encabezado esté asignada a todo el sitio, que el ícono de la hamburguesa no sea del mismo color que el encabezado de los teléfonos y que el almacenamiento en caché o el retraso de JavaScript no sirvan a una versión anterior.
¿necesito Master Addons Pro para el widget del menú de navegación?
No. El widget se incluye sin Pro, con estilo, submenús, diseños horizontales y verticales por dispositivo, cuatro tipos verticales y la hamburguesa del teléfono. Pro agrega hamburguesa en escritorio y tableta, los tipos Popup y Offcanvas, y condiciones de Theme Builder más allá de todo el sitio.
¿cómo agrego un submenú a un menú de navegación de Elementor?
Vaya a Apariencia > Menús, arrastre el elemento secundario debajo de su padre y ligeramente hacia la derecha hasta que esté etiquetado como “subelemento”, luego haga clic en Guardar menú. El widget del menú de navegación lo muestra como un menú desplegable, diseñado en Estilo > Menú desplegable y Elemento del menú desplegable.
Qué hacer a continuación
Cree el encabezado con un diseño horizontal y uno o dos submenús, luego cárguelo en su propio teléfono antes de diseñar cualquier otra cosa. La mayoría de los problemas del menú son problemas móviles y aparecen en diez segundos en un dispositivo real. Si el menú necesita paneles de varias columnas, el megaguía de menú recoge desde allí y el Documentación del menú de navegación enumera todos los controles.
- Página del widget del menú de navegación: diseños, demostraciones en vivo y una comparación con los widgets del menú de Elementor Pro.
- Extensión Mega Menú: paneles multicolumna con cualquier widget Elementor en su interior.
- Navbar de carbón con mega menú demo: un encabezado completo construido con ambos.
Lectura relacionada
