Cómo crear un menú vertical en WordPress con Elementor
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.
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 encontrarás 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 apartado 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 más 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 será 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 únicamente 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.
Creamos una estructura de 2 columnas. En la primera insertaremos el logo de nuestra página web con el widget Site logo y alineado la imagen a la izquierda del contenedor.
En la segunda insertaremos el elemento que mostrará el menú vertical al hacer click. En nuestro caso usaremos el widget de iconos. Para que nuestro icono quede alineado con el logo debemos seleccionar la columna de la derecha y en alineación vertical seleccionar medio.
Seleccionamos el icono de la columna de la derecha y asociamos el icono con el pop up que muestra el menú vertical. Para ello nos vamos a la sección avanzado y donde esta el ID de css insertamos el mismo identificados que definimos cuando creamos el pop up. En nuestro caso #abrirmenu, pero aquí no pondremos el símbolo #.
El último paso será revisar la versión móvil 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.
Si te ha quedado alguna duda puedes revisar el siguiente video .
¡Si, me interesa conseguir mi licencia de Elementor Pro!
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.
