Una de las características que caracteriza a WordPress es su gran versatilidad para llevar a cabo una tarea. Si en nuestro anterior post explicábamos la creación de un menú vertical con Astra pro y Ultimate addons for Elementor, hoy os enseñaremos cómo crear un menú vertical en WordPress con Elementor.
La creación del menú vertical esta dividida en dos partes: la creación del popup donde definiremos todo el contenido de nuestro menú y una cabecera personalizada en la que asociaremos un elemento (icono) como detonante de la visualización del Popup.
Índice de contenidos
Creando el popup con Elementor
Desde el administrador de nuestro WordPress nos vamos a plantillas/pop up y definimos la plantilla del popup con el nombre que creamos oportuno. Ya desde el maquetador modificamos los ajustes para personalizar el pop up a nuestra necesidad. Recuerda que los ajustes del pop up los encontraras en la rueda dentada que hay en la esquina inferior izquierda (recuadro rojo de la imagen).
- Width: definimos el ancho del pop up.
- Height: definimos el alto del pop up. Para que haga el alto completo de la pantalla seleccionamos la opción fit to screen.
- Content position: Posicionamos el pop up en la parte superior de la pantalla.
- Position horizontal: Para definir si queremos que nuestro menú vertical aparezca a la izquierda o la derecha de la pantalla.
- Position vertical: Posicionamos el pop up en la parte superior.
- Overlay y close button: habilitamos el overlay en caso de necesitarlo y habilitamos el botón para cerrar el popup. Desde el apartoado estilos del popup podremos personalizar ambos elementos.
- Entrance animation: Si queremos que el menú no aparezca de una forma bruscas desde estos ajustes podremos crear un efecto de animación que haga mas agradeable su aparición.
- Prevent closing on overlay: activando esta opción deshabilitamos la opción de cerrar el pop up si clican sobre el overlay.
- Prevent closing on Esc key: activando esta opción deshabilitamos la opción de cerrar el pop up si un usuario aprieta la tecla ESC.
- Open by selector: En este ajuste le daremos un identificador a nuestro pop para luego asociarlo con el elementor de la cabecera personalizada que fuerza la visualización. En nuestros caso utilizaremos el identificador «#abrirmenu».
El siguiente paso sera crear el contenido de nuestro pop up. Para ellos buscamos el widget Nav menu , lo insertamos en nuestro pop up y configuramos los ajustes.
- Menu: Seleccionamos el menú que queremos que nos aparezca.
- Layout: Definimos la forma de visualizarlo. En nuestro caso seleccionaremos que nos muestre el menú de forma vertical y centramos el menú con el ajuste align.
- Breakpoint: Como vamos a trabajar con el elemento de la cabecera personalizada como único elemento para mostrar el menú para las diferentes resoluciones de pantalla debemos definir este ajuste con la opción none. De no ser así nos aparecerían 2 menús hamburguesa en la versión móvil.
Nos vamos a el apartado estilo de widget y personalizamos el menú según nuestras necesidades.
Publicamos nuestro pop up y en las opciones de visualización unicamente definimos que se muestre en toda la web. Ya tenemos nuestro pop up creado.
Creando la cabecera personalizada con Elementor
Volvemos al administrador de nuestro WordPress y para usar el widget site logo en nuestra cabecera personalizada definimos el logotipo del sitio. Nos vamos a apariencia/personalizar/cabecera/identidad del sitio y subimos la imagen de nuestro logo. Esta acción es esencial para cuando utilicemos el widget Site Logo en la cabecera personalizada.
Acto seguido crearemos nuestra cabecera personalizada . Nos vamos a plantillas/ theme builder y añadimos una nueva plantilla seleccionando en el desplegable la opción header.
El último paso sera revisar la versión mobil de nuestra cabecera y alinear en el centro de cada una de sus columnas el logotipo y el icono. Publicamos y en ajustes de visualización creamos una única regla para que se vea en toda la web.
Esperamos que este tutorial os haya servido de ayuda y os haya servido para saber cómo crear un menú vertical en WordPress con Elementor. Cualquier duda dejarla en los comentarios y os responderemos gustosamente.
