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

Inicio / Tutoriales Premium / Theme builder / 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í ⭐

Profesor: Jefferson M

  30 de marzo de 2021

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 👌

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.

Recursos, Snippets y descargas de este tutorial 👇

40 Comentarios

  1. roberto v

    Hola Jefferson , puedes especificar la corrección al 0% y lo de la barra de desplazamiento , con una imagen, saludos me esta gustando mucho el menú lateral. saludos. Roberto

    Responder
      • roberto v

        Estupendo muchas gracias, la verdad que lo voy a utilizar mucho.

        Responder
  2. roberto v

    Termino de ver el video me pareció muy bien , he intentado poner un modulo de menú y me anula todo, no se si se puede integrar, saludos.

    Responder
  3. Marcos M

    hola Jefri como hago para q mi menu sea afectado con el menu 4 del tutorial por que desaparecio el menu de pc.. gracias

    Responder
    • Jefferson M

      La sección donde está el menú, ve a ajustes > avanzado > visibilidad y allí activa la visualización para Desktop. Importante: debes hacer los ajustes que correspondan para que el menú se vea bien en desktop.

      Responder
      • marcos

        loq yo quiero es q este la barra de menú aparezca no el menú hamburguesa se puede hacer eso como se puede hacer gracias..

        Responder
        • Jefferson M

          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.

          Responder
  4. Miguel Ángel G

    Hola Jefferson,

    He creado el menú siguiendo los pasos del tutorial y va todo bien, lo único que va muy lento desde que se pulsa el botón hasta que se abre la página. No se si esto es normal?

    Responder
    • Jefferson M

      No debería ir lento. ¿Puedes dejar el enlace de la página?

      Responder
  5. Miguel Ángel G

    Hola Jefferson, te dejo el enlace de la web. https://exapp.es/ en las misma cabecera hay dos menús personalizados, uno que he creado para escritorio y el tuyo para dispositivos móviles. Gracias

    Responder
    • Jefferson M

      Hola Miguel Ángel, revisé el sitio desde mi lado, en la laptop y en mi móvil y el menú se despliega correctamente y rápido en todos.

      Responder
  6. Miguel Ángel G

    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

    Responder
    • Jefferson M

      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.

      Responder
  7. Marcos M

    Hola Jefri Los Submenús Del Menú como se hace por q tengo varias paginas….en pc todo perfecto el detalle ahora es en el mobil en el tutu no dice como hacer los submenus colapsable.. gracias

    Responder
    • Jefferson M

      Hola Marcos, esta propuesta no es para hacer los sub-menús colapsables. Pronto haremos otro tutorial con esa funcionalidad.

      Responder
  8. diego d

    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ú.

    Responder
    • Jefferson M

      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!

      Responder
      • diego d

        Jefferson, agradezco tu respuesta y también aprovecho para felicitarte por esa labor de compartir conocimiento, éxitos

        Responder
        • Jefferson M

          ¡Gracias por tus comentarios! Son de gran valor y motivación 🤓

          Responder
        • Jefferson M

          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.

          Responder
          • diego d

            Hola, Jefferson M.

            Excelente, muchas gracias, se nota la seriedad y el compromiso por esta gran labor de enseñar.

            Saludos.👍👍

            Responder
  9. Jorge

    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

    Responder
    • Jefferson M

      Que tal Jorge, así es, de hecho abría que aplicar código adicional, no hay una forma sencilla de lograrlo.

      Responder
  10. Jorge A

    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!

    Responder
    • Jefferson M

      Que tal Jorge, por favor, revisa que hayas colocado correctamente todo el código, o en su defecto, usa el layout descargable del tuto, de manera que estemos seguros que no haya algún faltante en el código para que se ejecute correctamente el Script.

      Responder
      • Jorge A

        Hola de nuevo! descargué el layout e hice la prueba y en one page al pulsar la sección no se cierra el menú automáticamente, habrá algún fragmento de código que pueda corregir eso con lo que se pueda arreglar? Saludos!

        Responder
  11. Agustí S

    Hola Jefferson,
    Hice el tutorial siguiendo tus pasos y el resultado fue un éxito. Sin embargo, podrías decirme qué debería cambiar para que el menú estuviera a la izquierda?
    Gracias!

    Responder
    • Jefferson M

      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 😉🖐

      Responder
      • Agustí S

        Cierto. No me fijé. Muchas gracias!

        Responder
  12. Alejandro T

    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.

    Responder
  13. Alejandro T

    Parece que sí era algo relacionado con el CSS estático. Quitando esta opción y tras volver a diseñar el menú, parece que funciona bien.

    ¡Muchas gracias Jefferson!

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Iniciar Sesión

¿No tienes cuenta? Registrarse

Otros planes

¡Accede a más de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 🔥

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

¿A qué accedes con este plan?

Lifetime

Un solo pago 🔥

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

¿A qué accedes con este plan?

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord
  6. ✅ Descuentos en Templates para Divi

Solicitud de cancelación de suscripción

Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderás el acceso a todo esto:

🚩 A más de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

✅ Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y así no perderás el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudará a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Solicitud de cancelación

¿Por cuál o cuáles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿Cuál es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

¿En esta escala que tanto recomendarías a UXDIVI a un amigo o colega? donde 1 es "no lo recomendaría" y 5 es "Lo recomendaría totalmente"

14 + 11 =