Hosting WordPress Webempresa

Crear Menú Vertical en Elementor Versión Gratuita

por | Nov 17, 2022 | Tutoriales Elementor

Crear Menu Vertical en Elementor Version Gratuita

En la actualidad las estructuras web pueden ser tan diversas como la creatividad y las herramientas nos lo permitan. Seguramente has podido encontrar sitios web donde su menú principal, en lugar de estar en la posición convencional que es en la cabecera sobre el contenido, se encuentra en un lateral de forma vertical, como si de un panel deslizante se tratase.

Esta estructura puede resultar vistosa para ciertos usuarios y puede ser una herramienta más que podemos utilizar para darle personalidad y carácter a nuestros próximos sitios a crear.

A continuación, vamos a ver como por medio de plugins gratuitos y el uso de un poco de CSS en WordPress, podemos implementar un menú vertical en Elementor.

  Qué necesitas para crear un menú vertical en Elementor


Para fines de este ejemplo estamos utilizando el tema gratuito Astra. Sin embargo, esto puede ser recreado en cualquier tema de WordPress que sea compatible con Elementor.

Astra

Para mayor información al respecto de Astra y como se utiliza puedes echarle un vistazo al siguiente artículo: Astra Theme: un tema perfecto para tu página web

Por otra parte, hemos mencionado Elementor, el cuál es un constructor visual bastante popular, además de tener una versión gratuita.

Elementor Website Builder

Si deseas conocer más sobre Elementor y todas las peculiaridades que tienes, pues estás de suerte, que te tenemos ademas de un artículo llamado Elementor Page Builder ¿cómo maquetar tus páginas en WordPress?, Contamos con cursos gratuitos tanto Basico como Avanzado

Por último, pero no menos importante, utilizaremos el plugin llamado Elementor Header & Footer Builder el cuál nos agrega la funcionalidad de poder crear cabeceras, secciones y pies de página sin necesidad de tener la versión Pro de Elementor.

Elementor Header & Footer Builder

Para saber mas sobre este plugin tenemos un artículo dedicado a su uso, puedes echarle un vistazo: Cómo crear un encabezado personalizado en Elementor

Ya conociendo los elementos que vamos a utilizar pongamos manos a la obra.

  Crear Menú en Elementor


Desde las opciones del plugin Elementor Header & Footer Builder vamos a crear nuestro menú WordPress por medio del tipo de plantilla de Cabecera.

menu-vertical-gratis1

Una vez dentro del editor debemos considerar que debemos crear dos secciones, una para la vista en escritorio (desktop) y otra para la vista en dispositivos móviles (mobile)

Seccion Escritorio

Para la vista del menú en escritorio vamos a hacer que dicha sección tenga un alto mínimo de 100VH lo que hará que tome en altura la proporción completa de la pantalla sin importar el alto que pueda tener dicha pantalla o en este caso monitor.

menu-vertical-gratis2

Por otra parte, a la columna que está dentro de la sección vamos a agregarle dos características.

  1. Le diremos a los elementos que tengan una alineación vertical de “Espacio Intermedio” para que los elementos a agregar queden separados equitativamente
  2. Agregaremos una clase llamada “desktop-h” para más adelante hacer que dicha columna también tome una altura en proporción de la pantalla tal como la sección a la que pertenece

1

menu-vertical-gratis3

2

menu-vertical-gratis4

Los elementos que he agregado en este caso para mi menú corresponden a, un icono enlazado a la página de inicio, un menú siempre en estado de hamburguesa y unos iconos de redes sociales, es necesario considerar que los elementos a agregar ya queda a su elección, ya que tenemos total disponibilidad de todos los módulos de elementor a nuestro favor. Sin embargo, también se debe tener en cuenta la proporción del menú, ya que si bien va a ser una barra lateral que no supere más de los 100 píxeles aproximados.

menu-vertical-gratis5

Ya con nuestro menú con vista desktop creado vamos a duplicar esta sección y adaptarla a nuestro menú mobile, en este caso queremos que en dispositivos móviles el menú si se vea horizontal, ya que a nivel de usabilidad no vamos a privarle al usuario de ancho de la pantalla del dispositivo.

El aspecto de nuestro menú para móviles sería el siguiente considerando lo antes explicado.

menu-vertical-gratis6

Recordemos que desde las opciones Avanzadas-> Adaptabilidad de nuestras secciones podemos mostrar y ocultar a gusto los menús según las resoluciones para las que fueron creadas, por ejemplo, el menú para escritorio tendría la siguiente configuración.

menu-vertical-gratis7

Y el menú para móviles tendría la siguiente configuración.

menu-vertical-gratis8

Ya con nuestras secciones de menús creados solo basta con guardar cambios.

  Crear menú vertical en Elementor


Si bien actualmente nuestro menú no se ve para nada bien, sobre todo en la vista de escritorio no hay que alarmarse, es el momento de utilizar estilos CSS los cuales, además de simples y concretos hacen la magia para darle el toque final que esperamos.

Desde el apartado de Apariencia-> Personalizar-> CSS añadido o desde algún plugin como “Simple CSS” vamos a agregar los siguientes:

Simple Custom CSS Plugin

@media(min-width:768px){
.desktop-h{
    height: 100vh;
}
#page {
    display: block;
}
#masthead {
    width: 8%;
    float: left;
    position: fixed !important;
}
#content{
    width: -webkit-fill-available;
    max-width: 92%;
    float: right;
}
.site-footer{
    width: 92%;
    float: right;
}
}

Vamos a entender un poco que contiene nuestros estilos CSS.

  1. Primero que nada estamos definiendo que estos estilos solo van a aplicarse hasta una resolución mínima de 768px la cual corresponde a la vista de la tablet
  2. Después tenemos la clase “desktop-h” la cual la hemos definido dentro de la columna que forma parte de la sección del menú en vista desktop para que se adapte al alto completo de la pantalla
  3. Tomamos el identificador “page” para hacer la vista en bloque y un elemento pueda estar al lado del otro
  4. El identificador “masthead” corresponde a la cabecera que hemos creado en Elementor, le estamos aplicando un ancho aproximado en porcentajes para que se adapte a cualquier resolución, además de estipularle una posición fija, no queremos que se mueva con nuestro contenido, sino que se mantenga en su lugar
  5. El identificador “content” corresponde al contenedor de del contenido de nuestro sitio, si a la cabecera le asignamos un 8% pues lo que resta debe ser aplicado al contenedor global
  6. Por último, pero no menos importante, la clase “site-footer” hemos aplicado el mismo principio del contenedor global, también en el pie de página, esta clase puede variar en caso de que se utilice la del tema por defecto, como es este caso o bien si se construye un pie de página personalizado es necesario tomar su clase padre y aplicarle estos estilos para evitar que el contenedor del menú se superponga sobre la cabecera.

menu-vertical-gratis9

De esta manera podemos ver el resultado final de la vista de nuestro menú vertical con Elementor en escritorio.

menu-vertical-gratis10

Como también el comportamiento que tiene al cambiar de resolución a dispositivos móviles.

menu-vertical-gratis-gif

  Conclusiones


Siempre es grato saber de qué podemos lograr ajustes significativos que podrían parecer complicados por medio de herramientas puntuales, además de gratuitas y un poco de la magia que representan los estilos CSS. Con lo revisado en el artículo tendremos la capacidad de crear un menú vertical, el cual puede contener los elementos que gustes siempre y cuando respetando las proporciones entre el ancho que ocupara el menú vertical en Elementor y lo que le corresponde al contenedor global, además no te olvides de tu pie de página.

Si te ha interesado este articulo seguramente los siguientes llamaran tu atención:

¿Te ha resultado útil este artículo?

Hosting Divi - Wp Fácil - Webempresa