Menú #4 Theme Builder de Divi - Barra lateral Móvil

Menú #4 Theme Builder de Divi – Barra lateral Móvil


Contenido Restringido 🖐
Accede a este y otros contenidos siendo premium. ¿Aún no eres premium? Adquiere una membresía aquí ⭐

En este tutorial premium crearemos el menú #4 personalizado con el Theme Builder de Divi de nuestra serie de menús personalizados en Divi. En esta ocasión con un menú que funciona principalmente para móvil, con una el contenido en una barra lateral derecha.

En la parte inferior agregamos un nuevo layout donde tendrás el mismo menú pero alineado también a la izquierda 👌

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Nota importante:

En el video colocamos -40% y -60% en la fila del contenido del menú en la posición absoluta. Lo corregimos a 0% y 0% y colocamos la barra de desplazamiento horizontal en “oculto” para evitar un espaciado que se estaba generando en el ejemplo final.

Posición absoluta del menú:

Menú #4 Theme Builder de Divi - Barra lateral Móvil 4

Barra horizontal oculta:

Menú #4 Theme Builder de Divi - Barra lateral Móvil 6

Recuerda que puedes descargar tanto el archivo .JSON como el código que se uso en el tutorial en la parte inferior, en la zona de recursos del tutorial.

La idea de estos tutoriales es crear una serie de menús personalizados con el Theme Builder, de manera que aprendas a detalle crear encabezados globales en Divi, con cierto grado de personalización para que luzcan fenomenal en todos los dispositivos.

En esta ocasión quisimos ayudar a resolver el problema de que muchos menús hechos con el Theme Builder se ven muy bien en desktop, pero no tanto en su versión móvil. Pues puedes, puedes tomar los elementos del diseño de tu menú en su versión desktop, y adaptarlos a su versión móvil con este tutorial.

¿Te ha gustado nuestro menú #4 personalizado con el Theme Builder de Divi?

Recuerda que en estos tutoriales te damos snippets con los que puedes lograr cosas fascinantes con diseños personalizados en Divi

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐

Recursos, Snippets y descargas de este tutorial 👇

Artículos relacionados

Comentarios

        1. sabes ayer probando puse el menú con un modulo de código el código lo saque de un widget menú y me funciono pero acabo de ver tu tutorial de footer y como lo haces de barra lateral. es bastante mejor pues lo puedes configurar a tu gusto, como siempre muy bien , muchas gracias Jefferson.

        1. Vale Marcos, en ese caso debes colocar construir ese menú normal con el Theme Builder y desplegarlo (en la sección) solo para desktop. Y el otro solo para móvil, como venia por defecto. De hecho en el tuto explicamos eso, que puedes construir los dos menús en esa misma plantilla, solo que una sección la despliegas solo para desktop, y está, la de este tuto, solo para móvil.

  1. Ok, creo que ya lo he podido arreglar, era cuando hacías click en algún enlace del menú lo que tardaba en abrir la página. Era un tema de optiomización.

    Otra duda, cuando se utiliza la plantilla del menú móvil, deja de funcionar el menu por defecto del escritorio, a que se puede deber?

    Gracias

    1. En ese caso, en la misma plantilla donde tienes la sección para el menú de móvil, puedes crear una sección donde despliegues un menú que solo sea visible para escritorio.
      El ejemplo lo puedes ver en la clase de Header del curso de directorio. Allí hacemos exactamente esto.

  2. Hola Jefferson saludos desde Colombia, quiero exponer un problema que detecto con este menú, resulta que cuando estoy en el movil, así el menú este cerrado, puedo pulsar las opciones de el como si estuviera abierto y esto genera un problema con los elementos que están en la pagina de ese momento.

    Espero me logre entender con este tema. de verdad afecta la funcionalidad de este menú.

    1. Hola Diego, en efecto, lo comprobamos y si genera el error que comentas, gracias por reportarlo. Vamos a revisarlo con el equipo de desarrollo para ver que parte del código se debe modificar para que no genere más ese error. En cuanto quede actualizo el post y comento de nuevo este comentario. ¡Gracias totales!

        1. Hola Diego, me complace comunicarte que ya hemos corregido tanto el CSS como el archivo descargable de este tutorial, con la modificación que corrige el error que nos has reportado donde aunque el menú estaba cerrado quedaban activas las opciones. Puedes volver a copiar el código CSS corregido o directamente descargar de nuevo el layout e importarlo al theme builder para tu uso.

          Muchas gracias por avisarnos, así pudimos modificar el código para corregir el problema. Saludos.

  3. Hola! primero decir que gracias por excelente tutorial, te quería consultar si hay una forma simple para hacer este menú colapsable en el caso de que una página tenga muchos items, o requeriría un tutorial para poder explicarse? Un abrazo de Chile

  4. Hola Jefferson! quería hacer una consulta, apliqué todos los pasos para hacer el menú en una one page y el problema que tengo es que al pulsar una sección de la página el menú no se cierra automáticamente, me podrías ayudar con eso? Saludos!

    1. Que tal Agustín, un gusto saludarte. Son varias las cosas que hay que ajustar, pero lo que hemos hecho es hacer estos ajustes, y subimos un nuevo menú descargable desde este mismo post, por lo que lo puedes descargar, subir a tu theme builder y hacer los ajustes que necesites.
      Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐

  5. Hola Jefferson, estoy teniendo un error un poco extraño. Cuando hago cualquier modificación en cualquier página y actualizo la página, la primera vez que intento usar el menú hamburguesa hace el efecto de abrir y se coloca la X, sin embargo, el menú no abre. Se arregla fácil refrescando la página pero es un poco tedioso refrescar todas las páginas y me preocupa que los usuarios de la página no sepan que se arregla así de fácil.

  6. Que tal Jefferson, tengo la siguiente duda, hice todos los pasos como mencionas en el video, sin embargo me doy cuenta que cuando estoy navegando desde un celular o tablet, si por “error” muevo un poco la página hacia la izqueirda o derecha, todo el contenido de la web se mueve, es decir; es como si tuviera algún elemento demasiado grande que provocara romper el diseño de mi web. Espero poder explicarme, me doy cuenta que es debido al menú que hice con tu tutorial, ya que al cargar el menú original que tenía y tradicional de divi, este problema se corrige. Espero me puedas ayudar. De antemano muchas gracias, excelentes videos!!!

  7. Hola Jefferson, he seguido el tutorial y todo funciona bien. El único problema que tengo es que los contenidos de la fila que se desplega, son más largos que los del ejemplo y necesitaría poder deslizar con el dedo hacia abajo para llegar al final, el contenido se corta y no me deja deslizar. ¿Se puede solucionar de alguna manera?

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →