--- title: "Crear un menú lateral con Elementor sin utilizar código" description: "¡Hola! Sin que sirva de precedente, hoy he salido de mi cueva de desarrollador™ para pasarme por el blog de Ensalza a contarte algunas cosillas útiles, en este caso, te voy a contar paso a paso como m..." url: https://www.ensalza.com/blog/menu-lateral-elementor/ date: 2020-02-25 modified: 2023-03-10 author: "Luis" image: https://www.ensalza.com/blog/wp-content/uploads/luis-menulateral.jpg categories: ["Diseño Web"] tags: ["desarrollo web", "diseño web", "elementor", "menu lateral"] type: post lang: es --- # Crear un menú lateral con Elementor sin utilizar código ¡Hola! Sin que sirva de precedente, hoy he salido de mi cueva de desarrollador™ para pasarme por el blog de Ensalza a contarte algunas cosillas útiles, en este caso, te voy a contar **paso a paso como montar un menú lateral**, lo que me parece bastante útil para ciertos proyectos. Como sabes, no solemos hablar de cosas muy muy técnicas, pero en este caso, me tocó darle esta solución a un proyecto que requería un diseño especial para su menú principal, así que si te toca a ti hacerlo, ya sabes de dónde tirar del hilo. Como sabes, **desde que apareció Elementor en nuestras vidas**, no podemos ser más felices. Nos encanta utilizarlo en la agencia, porque, entre otras cosas, nos permite entregarles a los clientes una página web totalmente personalizable y editable sin que se tengan que comer la cabeza gracias a lo visual y sencillo de su funcionamiento. A lo que íbamos, a continuación, veremos a ver paso a paso como** crear un menú lateral con Elementor PRO** sin añadir ni una línea de código. Lo primero que debes saber es que esta característica no está en el funcionamiento por defecto de Elementor, pero te voy a contar cómo podemos aprovecharnos de la facilidad que tiene el maquetador para crear popups: ## Cómo crear un menú lateral con Elementor PRO (sin código) Damos por hecho que ya tenemos mínimo una página creada en nuestra web con su header y su footer. El primer paso es crear un popup de Elementor ¿Cómo? Lo haremos desde **Plantillas > Pop-up. **Al entrar nos mostrará una pequeña colección de popups, podemos coger el que queramos pero, (ojo, consejo de alguien que se ha tenido que pegar con plantillas y plantillas) lo tendremos más fácil si elegimos una plantilla que esté pegada a uno de los laterales de la manera que quedaría nuestro futuro menú lateral. Los siguientes pasos son, por supuesto, a gusto de cada uno, pero aquí voy a explicar cómo hacer un menú lateral general. Vamos paso por paso: - ### Crear un pop-up de Elementor 1. En los **Ajustes de popup / Ajustes > Disposición **modificaremos el ancho (al gusto), el alto lo dejamos en *Fit To Screen*, en Content Position lo dejamos según queramos (normalmente, *Centro*). En posición, elegiremos el lado donde queremos que aparezca el menú y la animación de entrada y salida más abajo según dónde aparece el menú y nuestros gustos o estilo de la web. Nos quedaría algo así:   ![menu elementor](https://blog.ensalza.com/wp-content/uploads/paso-1-menu-lateral.png)   2.  El resto de Ajustes los podemos dejar sin más. En **Ajustes de popup / Estilo > Overlay **modificaremos el “sombreado” que aparecerá de fondo al abrir nuestro menú. 3. Después bajaremos a **Ajustes de popup / Estilo > Close Button **para editar a nuestro gusto el botón para cerrar el popup (futuro menú). 4. Ahora que tenemos estos pequeños ajustes podemos pasar a personalizar el popup. Nosotros solo hemos borrado el contenido de la plantilla y hemos introducido el widget de Elementor **Nav Menu. **Le damos algo de estilo para que se vea como queremos y cuando estemos satisfechos pasamos al siguiente punto.   ![vista de wordpress](https://blog.ensalza.com/wp-content/uploads/paso-2-menu-lateral.png) - ### Personalizar el pop-up 5. Vamos a la última pestaña de los ajustes: **Ajustes de popup / Avanzado. **Aquí lo podemos dejar todo por defecto prácticamente menos el campo **“Open By Selector”**. Este es el campo más importante del proceso ya que aquí indicamos el elemento que va a reaccionar para que se despliegue nuestro menú. En este campo pondremos el ID que queramos, debería ser algo así: **#abrir_menu**. Podemos poner lo que queramos pero hay que acordarse más tarde de lo que hemos escrito exactamente. ![ajustes pop-up](https://blog.ensalza.com/wp-content/uploads/paso-3-menu-lateral.png) 6. Ya podemos ir al botón de abajo de “Publicar” o ”Actualizar” y en la parte de “**Conditions**” las condiciones de visualización del popup, le daremos a “agregar condición” y nos aseguramos que la condición en la que aparezca sea en *todo el sitio.* - ### Generar el menú lateral 7. Ahora podemos pasar al último paso para generar nuestro menú lateral. Abriremos la plantilla del header que tengamos activo en nuestra web y añadiremos, en nuestro caso, un icono de[menú hamburguesa](https://blog.ensalza.com/diccionario/que-es-el-menu-hamburguesa/) para abrir el popup. ![paso 4 menu lateral png](https://blog.ensalza.com/wp-content/uploads/paso-4-menu-lateral.png) 8. Ahora editamos el icono y en la pestaña de **Avanzado, **en el campo ID de [CSS](https://blog.ensalza.com/diccionario/que-es-css/) añadimos el mismo ID que en el punto 5 pero sin la #, así: **abrir_menu**. Guardamos los cambios y ya tenemos nuestro menú lateral. ¿Qué quedaría? Revisar ¡siempre! la maquetación y comportamiento del popup tanto en la versión de tablet como en la de móvil para asegurarnos una buena [experiencia de usuario](https://blog.ensalza.com/usabilidad-web/). ¿Te has encontrado con casos donde te hubiera venido bien esta solución? ¿Conoces otros **truquitos con Elementor** o has diseñado algún tipo de solución sin código que quieras compartir con la comunidad ensalzera? ¿Necesitas crear a mano algún tipo de estructura o menú para tu página web y no sabes ni por dónde empezar? Cuéntanos en los comentarios y te intentaremos echar una mano.    ¡Hasta pronto!