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.

Í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).

  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.

¿Tienes interés en que creemos un tutorial sobre algún tema específico de Elementor?

Compártenos en tu red social favorita
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
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ú

Añadir Degradados y imágenes a los textos con Elementor

Añadir degradados y imágenes en los textos con Elementor

Aprende a dar un toque personal y exclusivo a tus diseños. En este post te explicamos cómo añadir degradados y imágenes en los textos con Elementor. Índice de contenidos Arrancaremos este tutorial explicando cómo personalizar tus textos con la versión Pro de Elementor. Si no

Suscríbete a nuestro blog

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

Deja 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í.
Ir arriba