Cómo crear un menú hamburguesa con Elementor Page Builder y el complemento JetBlocks

Oct 23, 2019
52
0

Al construir un sitio web, el diseñador siempre busca elementos que ahorren espacio en la página y que mejoren la experiencia de usuario. Uno de estos elementos es el bien conocido menú hamburguesa, un elemento de navegación que se puede encontrar en sitios, aplicaciones web y programas. En este artículo, te explicaremos qué es un menú hamburguesa, cuáles son sus ventajas y desventajas, y cómo crearlo con Elementor Page Builder. Pues, sigue leyendo.


Menú hamburguesa: ventajas y desventajas

 

Para explicarte qué es el menú hamburguesa, nos referimos a Wikipedia (en inglés), que lo define como "un botón colocado típicamente en la esquina superior de una interfaz de usuario gráfica". Sirve para ampliar el menú o la barra de navegación como se desplega cuando se hace clic en el icono correspondiente.

 

Algunos usuarios consideran el menú hamburguesa una solución de primer nivel para mejorar la navegación, mientras que otros creen que usar este menú no tiene sentido, porque no es claramente visible, lo que puede confundir al usuario. Pues, antes de tomar una decisión, te sugerimos que analices las ventajas y desventajas del menú.

 

Entonces, comencemos con los beneficios:

 

  • Es muy popular y se usa ampliamente en páginas web, aplicaciones web, programas e incluso videojuegos.
  • Es una gran solución para los web masters que planean arreglar una página web desordenada y evitar que los usuarios se sientan frustrados por el caos en el sitio y lo abandonen.
  • Es el lugar ideal para botones de navegación que son importantes para realizar tareas específicas, pero que en realidad no sirven al objetivo principal de tu sitio web y, por lo tanto, no deberían ocupar demasiado espacio en la página de inicio.

example

 

Algunas razones por las que las personas evitan usar el menú hamburguesa son:

 

  • Se implica que los elementos colocados en el menú oculto no son realmente tan importantes, por lo que es poco probable que los visitantes lo usen.
  • Consecuentemente, esto resulta en tasas de clics y compromiso más bajos. No solo es invisible y difícil de ver o notar, sino que el menú hamburguesa no impulsa a interactuar con las opciones de navegación.
  • Implica que los visitantes hagan un esfuerzo adicional para llegar al objetivo final.

 

Como ya sabes los principales beneficios e inconvenientes del menú hamburguesa, puedes tomar la decisión si lo necesitas en tu sitio web. Si es así, consulta una guía a continuación que puede facilitar la creación de este tipo de menú.


Cómo crear un menú hamburguesa con Elementor y el complemento JetBlocks

 

Para crear un menú hamburguesa en pocos clics, debes llegar a la sección de creación de cabeceras y pies de página personalizados. Así es como puedes hacer esto:

 

  • Elegir una solución gratuita como un complemento de WordPress (que en realidad no es la solución más segura, porque nadie garantizará el rendimiento correcto del complemento o proporcionará soporte técnico).
  • Optar por la suscripción a Elementor Pro para poder personalizar cabeceras y pies de página de acuerdo con tus preferencias.
  • Adquirir el tema de WordPress Monstroid2 para poder crear cabeceras y pies de página personalizados además de disfrutar de otros beneficios, como los complementos Jet, una gran cantidad de páginas y secciones listas para usar, y otras características sobresalientes.

 

Si has decidido crear un menú hamburguesa en tu sitio web, necesitarás un complemento Jet adicional además de Elementor Page Builder. Éste puede ser el complemento JetBlocks que cuenta con todos los widgets necesarios para crear cabeceras y pies de página funcionales.

 

Si usas Monstroid2 para desarrollar tu sitio web, puedes encontrar el complemento JetBlocks en el panel del tablero de herramientas. Todo lo que debes hacer es encontrar Monstroid2 en el menú, ir a los complementos y recorrer todos los complementos que están instalados y activados.

 

Ahora, cuando ya sabes qué se necesita para crear un menú hamburguesa, pasemos al proceso de creación en sí. Si usas cualquier plantilla diferente de Monstroid2, puedes acceder a la cabecera desde la biblioteca de temas y configurarla con Live Customizer. Pero, en esta guía, vamos a demostrar cómo crear un menú hamburguesa en el tema Monstroid2 y con la ayuda del constructor web Elementor. Pues, comencemos.

 

  1. Abre el editor Elementor y haz clic en Header Home (Cabecera de inicio).
  2. Crea una nueva sección.
  3. Encuentra el Panel de hamburguesa a través de la barra de búsqueda y arrástralo y suéltalo en la sección. El panel se compone de dos elementos: un panel y un toggle, y ambos deben personalizarse.
  4. Ve al menú “Style Settings” (Configuración de estilo) y configura los parámetros del panel y los elementos de toggle.
  5. Ve al menú  “Content” (Contenido) y elige una plantilla para el panel hamburguesa. Después de elegirla, es posible que desees aplicar unos cambios a la plantilla. En este caso, haz clic en el botón “Edit Template” (Editar plantilla). Una vez hecho esto, serás redirigido a otra ventana de Elementor en la que podrás cambiar la apariencia de la plantilla.
  6. Ve a la sección “Style” (Estilo), hace que el fondo sea transparente y personaliza el borde, establece la superposición de fondo, crea un divisor y cambia la tipografía. Una vez hecho esto, guarda la plantilla para completar la creación del menú.

Tutorial en inglés


Los 3 mejores temas WP con Elementor

 

Para aquellos de vosotros que tienen dificultades con elegir la mejor plantilla para construir un sitio web fácil de usar y altamente funcional, hemos elegido 3 temas WP con Elementor populares que están provistos del innovador editor de contenido de arrastrar y soltar, junto con una colección de complementos Jet necesarios para crear módulos adicionales.

 

Monstroid2

Monstroid2

Monstroid2 es un producto estrella del mercado de TemplateMonster. Este tema de WordPress con Elementor es famoso por su paquete súper liviano y, por lo tanto, el rendimiento suave. Cuenta con una amplia colección de secciones y páginas prediseñadas, skins magníficos, así como los complementos y extensiones más populares.

 

Elementor Page Builder incluido en su paquete te permite personalizar la plantilla en tiempo real y sin editar su código, mientras que los complementos Jet ayudan a crear numerosos elementos y módulos para lograr una funcionalidad más avanzada. Para aquellos de vosotros que planean establecer una tienda en línea completa, la plantilla Monstroid2 incluye WooCommerce. Con este complemento de comercio electrónico, puedes comenzar a vender productos y servicios en muy poco tiempo.

 


BeClinic

BeClinic

BeClinic es otro tema de WordPress popular entre los usuarios. Además de un gran conjunto de demos que se adapten a cualquiera de tus necesidades, también proporciona múltiples páginas prediseñadas, varios tipos de contenido, etc. Para crear un layout impresionante y personalizar el contenido del sitio web sin esforzarte, puedes aprovechar Elementor Page Builder integrado en el tema. Con su editor de arrastrar y soltar, puedes hacer cualquier personalización sin meterte con el código.

 


Si optas por la plantilla BeClinic, puedes ahorrar hasta 700 $, como en su paquete ya se incluyen todos los complementos imprescindibles. Algunos de los mejores son Revolution Slider, los complementos de Jet, un calendario de eventos, los complementos de Cherry y el complemento de WooCommerce.



JohnnyGo

JohnnyGo

¿Planeas lanzar un sitio web para tu empresa de servicios? Pues, prueba este tema WordPress multipropósito con Elementor. Su paquete incluye 16 demos, 30 páginas prediseñadas y muchos otros elementos destinados a ayudarte a promover tus servicios en línea. Además, la funcionalidad increíble y la eficiente interfaz de usuario de la plantilla te ayudarán a impulsar tu negocio. Te permite gestionar tus proyectos, presentar a los miembros de su equipo, vender con WooCommerce, permitir reservar citas, crear un blog y hacer mucho más.

 


Con el constructor web Elementor integrado en el tema, podrás crear perfectos layouts de página sin siquiera tocar su código. En resumen, todo lo que puedas necesitar para administrar tu sitio web ya está incluido en esta plantilla.


 

 

Fuente: "How to Create a Hamburger Menu with Elementor Page Builder and JetBlocks Add-On" por Mariana

 

DP
Diane Parks
1
v Quejar

Recommend this post to others!

¿Te parece interesante? También podría gustarte:

Become the first to comment

Última actualización : Oct 23, 2019

Valoración de entrada