Cómo crear un menú flotante para móvil con Elementor 2022

menú flotante para móvil

Indice de Contenidos

Menú Flotante para la versión móvil de tu web

Tener una página responsive es imperativo hoy en día. El móvil es el dispositivo que nos acompaña siempre, por eso es muy importante que la web este preparada, diseñada y pensada para que sea fácil de utilizar en Smartphones.

El primer paso es hacer que nuestro menú este al alcance del pulgar. Existen varios plugins que hacen este trabajo. Pero ya sabes «Cuantos más plugins  tengas en la recamara, más tardara la pagina en cargar» por eso, si nos podemos ahorrar uno, bienvenido sea.

  1. Empezamos con el Theme Builder

Lo primero es lo primero. Entramos en la pestaña de Plantillas, que esta justo debajo de Elementor. Nos vamos a Theme Builder, después a Añadir Nuevo.

En la sección de tipo de plantilla, escogemos Header y, le ponemos nombre que queramos.

menu flotante1
menu flotante2

  1. Diseña tu menú

Elementor tiene varias plantillas, utiliza la que más te guste, o empieza una desde cero. Una vez tengas el menú listo, vamos a ver cómo se ve en los diferentes dispositivos.

menu flotante4
menu flotante5

Para el menú de escritorio elige la distribución que más te guste. Por ejemplo el logo a la izquierda y un menú horizontal la derecha.

Para el menú en Tablet, Elementor te da la opción de que  aparezca contenido en un botón de «menú hamburguesa»  igual como se vería en móvil.

Nosotros te recomendamos que para tablet, dejes el menú como en el escritorio, pero con una distribución diferente como por ejemplo, el logo arriba y el menú horizontal debajo.

  1. Personaliza tu menú para móvil

Ahora viene lo bueno, por defecto el menú para móvil, se vera cómo un botón hamburguesa en la parte superior de la pantalla.

Este es el momento para darle estilo con Elementor, para esta tarea nos vamos a la pestaña de estilo. usaremos estas dos opciones:

»Dropdown: Esta opción nos deja personalizar cómo se vera el menú, una vez lo despleguemos haciendo clic en el botón hamburguesa.

»Toggle Button: Esta nos permite cambiar la forma, el color y tamaño del botón.

menu flotante10
menu flotante7

  1. Encontrar la etiqueta CSS

Después de tener nuestro botón con el diseño que queremos, solo nos falta ponerlo a la altura del pulgar. De esta manera será más fácil navegar por el menú con una sola mano.

Para esto lo primero que debemos hacer es, buscar el nombre de la clase CSS del contenedor donde esta el botón. Esto es muy importante, debemos localizar la sección que acoge el botón del menú. Solo de esta manera podremos editar su posición.

Después de esta charla, te contamos como encontrarlo: primero nos vamos al modo de vista previa, hacemos clic con el botón derecho y escogemos la opción de Inspeccionar.

Veras una ventana con el código de la pagina, otra cosa importante es poner la vista en móvil, esto lo consigues dandole al botón de la izquierda, donde puedes elegir los diferentes tipos de dispositivos.

Hecho esto busca la clase CSS del contenedor donde esta el botón y cópiala porque la necesitaremos para el siguiente paso.

menu flotante8

  1. Personaliza el Código CSS

¡¡Y llegamos al final!! Una vez tengamos localizado cómo se llama el contenedor donde esta alojado el botón, nos vamos a las opciones avanzadas y hacemos click en CSS personalizado. 

Solo con estas tres lineas de código tendrás tu Menú Responsive para móvil:

.Aquí va la clase css {
position:fixed;
bottom:10px;
right:12px}.

menu flotante9

Por supuesto puede editar estas lineas para que el botón este donde tú quieras. Te explicamos para que sirve cada uno de las propiedades CSS:

position:fixed Esto hace que la posición del elemento sea fijo y no se mueva al hacer scroll. 

Bottom: desplaza el elemento de su posición original, tomando como referencia el borde inferior. Solo tendrá efecto si el objeto tiene  un valor de relative, fixed o absolute. Se puede expresar en pixeles o porcentajes.

Right: Desplaza el elemento tomando como referencia su borde derecho. Se puede poner los valores en pixeles o porcentajes.

Últimos post

Categorias

Hosting del bueno para tu web

Elegir un buen Hosting es el primer paso para una web rápida y segura. No te la juegues con alojamientos baratos y de mala calidad.

seo y optimizacion web

Auditoria SEO GRATIS

Obtén una auditoria completamente gratis de tu web ademas de un informe completo con los puntos a mejorar.

Utilizamos cookies, propias y de terceros, para garantizar la navegación por el sitio web y mejorar nuestros servicios.  Acceda a nuestra Política de Cookies para obtener información adicional sobre las cookies utilizadas, su finalidad y la forma de gestionarlas.