Cómo crear un menu vertical con Elementor

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 encontraras en la rueda dentada que hay en la esquina inferior izquierda (recuadro rojo de la imagen).

  1. Width: definimos el ancho del pop up.
  2. Height: definimos el alto del pop up. Para que haga el alto completo de la pantalla seleccionamos la opción fit to screen.
  3. Content position: Posicionamos el pop up en la parte superior de la pantalla.
  4. Position horizontal: Para definir si queremos que nuestro menú vertical aparezca a la izquierda o la derecha de la pantalla.
  5. Position vertical: Posicionamos el pop up en la parte superior.
  6. 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.
  7. 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.
  8. Prevent closing on overlay: activando esta opción deshabilitamos la opción de cerrar el pop up si clican sobre el overlay.
  9. 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.
  10. 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».
Menu vertical con Elementor pro

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.

  1. Menu: Seleccionamos el menú que queremos que nos aparezca.
  2. 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.
  3. 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.

Definir el logotipo en WordPress

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 #.
Ajustes menu vertical Elementor

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.

Menu vertical WordPress para dispositivos moviles
Si te ha quedado alguna duda puedes revisar el siguiente video .

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.
Publisites.

Compártenos en tu red social favorita
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
¿Te ha resultado útil? ¡Puntúalo!
[Total: 1 Media: 5]

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Últimos post del blog
Como crear el aviso de politicas de cookies con Elementor

Cómo crear el aviso de políticas de cookies con Elementor

Si bien es cierto que existen varios plugins que con unos pocos ajustes te permiten que en tu web se visualice el aviso del uso de cookies y sus políticas, también es muy recomendable trabajar en tu WordPress con los plugins esenciales. Una forma facíl

Cómo crear una conexión FTP

Cómo crear una conexión FTP con tu servidor

Qué es FTP FTP o protocolo de transferencia de archivos utiliza el acrónimo de las siglas extraídas del inglés File Transfer Protocol. Se trata de un tipo de protocolo de red para la transferir archivos entre sistemas conectados a una red.  Una conexión FTP permite

Por que crear paginas web con Wordpress

Por qué crear tu página web con WordPress

En la actualidad existen gran variedad de herramientas para crear una página web sin grandes conocimientos de programación, ejemplo de ello pueden ser Joomla, Wix, Blogger, Weebly o Jimdo. Sin enbargo, de entre todas estas aplicaciones, ¿por qué crear tu página web con WordPress? ¿Qué hace

Ir arriba

Esta web utiliza cookies para que tengas la mejor experiencia. Si continúas navegando estás dando su consentimiento para la aceptación de las mencionadas cookies y de sus políticas.