Vamos a ver en este post el widget “Nav menú” que sirve para crear un menú con Elementor. Este elemento será indispensable en caso de que queramos crear un diseño de header personalizado con Elementor y luego incluirlo en nuestra plantilla, para lo que usaremos el theme builder de Elementor.
En este post nos vamos a centrar en las opciones de personalización del elemento “Nav menú”, aunque en el vídeo asociado a este post, podrás ver también como asociarlo a un header con el theme builder de Elementor.
QUIERO ELEMENTOR PRO
ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES
GUÍA CREAR FORMULARIO CON ELEMENTOR PRO
- Añadir sección + el widget nav menú y selección de anchura del contenido con Elementor
- Opciones Generales de personalización del elemento Nav Menu de Elementor (Contenido)
- Opciones de personalización del menú en móviles con Elementor
- Opciones de diseño del Nav menú Elementor
- Pestaña Avanzado Widget nav menú Elementor
QUIERO ELEMENTOR PRO
Sección y columnas: En primer lugar añadiremos una nueva sección. Debemos elegir cuantas columnas queremos que conformen dicha sección.
Si queremos crear un header con varias partes podremos añadir varias columnas. Pero, en este ejemplo vamos a añadir una sola columna.
Widget Nav menú: Ahora procederemos a añadir el widget nav menú dentro de la sección anteriormente añadida.
Ajustes de anchura: para ajustar la anchura del elemento nav menú, iremos a las opciones de configuración de la sección.
En la pestaña “disposición” verás que tenemos la opción “Ancho del contenido”.
Opción caja: si elegimos la opción caja podremos personalizar la anchura disponible para el menú con el selector que nos aparecerá justo debajo.
Opción ancho completo: si seleccionamos esta opción el elemento menú tomará todo el ancho disponible de la sección. Es decir, tendrá anchura completa.
En la pestaña de “contenido” de las opciones del widget Nav Menu de Elementor tenemos las siguientes opciones:
Menu: de los menús creados desde “Apariencia > menus” seleccionaremos cual queremos mostrar con este widget.
Layout: con esta opción seleccionaremos el tipo de menú que queremos crear: un menú horizontal, un menú vertical (desplegado) o un menú vertical desplegable tipo hamburguesa (dropdown).
Si elegimos la opción menú horizontal o vertical, justo debajo nos aparecerán unas opciones de centrado del menú: ajustar a la izquierda, derecha, centrado y la opción “strech” que sería algo como repartir los itms de menú de manera equidistante ocupando todo el espacio disponible.
Pointer: esta opción está disponible solo con el menú horizontal y vertical. Pero, no con el menú dropdown. Esta opción sirve para establecer una opción “hover” sobre los ítems del menú. Es decir, algo que indique que tenemos el cursor sobre un elemento del menú. Podremos elegir entre: None (ninguna), Underline (línea debajo), Overline (línea encima), Double line (línea encima y abajo), framed (rectángulo), background (color fondo) y text (efecto ampliación texto item menú).
Animation: esta opción está disponible para el menú horizontal y vertical. Pero, no para el dropdwon. Se refiere a la animación cuando se pone el ratón sobre un item del menú. Es decir, una animación que acompaña al efecto pointer que veíamos en el apartado anterior.
En este post se muestran todas las animaciones para cada uno de los tipos de pointers. Busca los apartados: underline animations, framed animations, overline animations, double line animations, background animations y text animations.
Submenu indicator: desde este selector podremos elegir el icono que se muestra cuando un item de menú es desplegable. Es decir, tiene subcategorías.
QUIERO ELEMENTOR PRO
En la misma pestaña de contenido, pero en el apartado: “Mobile dropdown” vamos a decidir el punto de ruptura.
¿Qué es el punto de ruptura? Es el tamaño de pantalla a partir del cual ya no se mostrarán todos los ítems del menú, sino que aparecerá un icono tipo hamburguesa. Al pulsar dicho icono se desplegarán los elementos o ítems del menú.
Vamos a ir viendo las principales opciones:
Breakpoint: seleccionaremos el punto de ruptura. Tenemos tres opciones:
a.- None (ninguna): en este caso no existiría punto de ruptura, por lo que se mostrarían todos los ítems de menú en Escritorio, tablets y móviles. Nunca se mostraría el icono tipo hamburguesa.
b.- Tablet: esta es la opción más habitual. En este caso, en el tamaño tablet (1.025px) y tamaños menores, se mostraría el icono tipo hamburguesa.
c.- Mobile: en este caso, en el tamaño móvil (768 px) y tamaños menores, se mostraría el icono tipo hamburguesa. Es decir, en el tamaño tablet, se mostrarían los ítems de menú sin el icono tipo hamburguesa. Al igual que sucedería en modo escritorio.
Full Width: aquí podemos establecer tamaño completo o no, para el desplegable del icono tipo hamburguesa.
Align: desde aquí podremos establecer el tipo de alineación que queremos para los ítems de menú que se muestran en el desplegable tipo hamburguesa. “Aside”, para dejarlos a la izquierda y “center” para que aparezcan centrados.
Toggle button: elegiremos entre icono tipo hamburguesa o ninguno
Las opciones de diseño del menú con Elementor las tenemos en la pestaña “Estilo”. Dichas opciones están clasificadas en tres bloques: Main menú, dropdown y Toggle Button.
Vamos a ver cada uno de estos bloques
Opciones de diseño del menú principal (no de las opciones desplegables)
Tipografía: aquí estableceremos tipo de fuente, tamaño, espacio entre letras, grosor de fuente y color del texto. También podremos establecer colores específicos para la posición hover sobre elementos del menú y la posición active (item seleccionado).
Pointer width: grosor del pointer que seleccionamos en la pestaña contenido. El pointer es una decoración que se muestra cuando ponemos el puntero del ratón sobre un elemento del menú.
Horizontal padding: separación horizontal entre los ítems del menú.
Vertical padding: separación vertical interior entre el bloque nav menú y los ítems de menú.
Space Between: espacio entre ítems de menú. Parecido al horizontal padding, solo que ahora no se tiene en cuenta el espacio exterior, solo el que separa a los ítems del menú.
QUIERO ELEMENTOR PRO
Diseño Nav menú Elementor – Dropdown (desplegables)
En este bloque vamos a establecer el diseño de los desplegables.
Con las pestañas Normal, hover y active, podremos establecer color de texto, de fondo y tipografía en el desplegable. También en la posición hover (cuando ponemos el cursor del ratón sobre un item de ese desplegable) y en posición active (cuando hacemos clic en un item)
Tipo de borde: podremos establecer de manera opcional un borde alrededor del desplegable. También podremos elegir el tipo de línea de ese borde: sólida, de puntos, líneas, etc.
Ancho: aquí estableceremos el ancho del borde de cada lateral. En caso de que queramos establecer un borde.
Color: color de ese borde
Border radius: desde aquí estableceremos la curvatura de cada una de las esquinas del desplegable.
Sombra de caja: con esta opción podremos establecer un sombreado al desplegable.
Horizontal padding: margen interior a izquierda y derecha.
Vertical padding: este margen afecta verticalmente a la separación entre ítems del desplegable y entre el primer y último item del menú con los extremos del desplegable.
Divider: aquí podremos establecer si queremos un separador entre elementos del menú desplegable. Elegiremos el tipo de línea que queremos para separar los elementos. Si elegimos uno de los tipos de separadores, a continuación nos aparecerán abajo una serie de opciones relacionadas con dicho divisor como: color y border width (grosor)
En este bloque personalizaremos el diseño del icono tipo hamburguesa.
Normal y hover: en estas pestañas podremos establecer el color del icono y el fondo, tanto en posición normal como en posición hover (cuando ponemos el cursor del ratón sobre el icono tipo hamburguesa)
Size: tamaño del icono tipo hamburguesa
Border width: podemos establecer un borde alrededor del icono tipo hamburguesa.
Border radius: radio de curvatura de las esquinas del borde establecido en el apartado anterior.
QUIERO ELEMENTOR PRO
En la pestaña Avanzado no tenemos opciones específicas del nav menú, sino que tenemos las mismas opciones que en el resto de widgets de elementor, por lo que no vamos a entrar en profundidad en ellas.
Simplemente nombraros las opciones más interesantes: márgenes y relleno para establecer márgenes externos e internos, efectos de movimiento, fondo (color o imagen), borde y adaptabilidad (opciones de visibilidad).
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
