BL Menú #7 Theme Builder de Divi - eCommerce Menu

Menú #7 Theme Builder de Divi – eCommerce Menu



Contenido Restringido 🖐

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

En este videotutorial prémium crearemos el menú #7 personalizado con el Theme Builder de Divi de nuestra serie de menús personalizados en Divi. En esta ocasión con un menú especializado para tiendas online modernas y con mini-carrito, sistema de búsquedas, iconos para favoritos, mi cuenta y otros.

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

Ú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

Para este menú ya hay implementadas algunas características que hemos hecho en otros tutoriales, tales como la mejora de búsqueda de productos en una tienda online o la implementación de un mini carrito en Divi. También el sistema de favoritos que hicimos en el curso de Digital Marketplace.

Todos estos recursos los puedes ver antes de ver este tutorial para que tengas todos los elementos necesarios para la implementación, y así el menú te quede tal cual como la demo.

¿Quieres ver el resultado? Checa aquí:

Menú #7 Theme Builder de Divi - eCommerce Menu

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.

¿Te ha gustado nuestro menú #7 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. Jefferson, buenas tardes, espero te encuentres bien.

    En el minuto 4:14 mencionas que hay que ponerle CSS personalizado al primer botón (categoría) del menú. Al intentar hacerlo, no me aparece esa opción, ni la que está a un costado “Relación con el enlace (XFN)”.

    Sabes por qué pasa eso y cómo solucionarlo?

    De antemano gracias!

    1. Que tal Aldo, un gusto saludarte, no te preocupes, lo solucionarás fácil de la siguiente manera:
      Debes ir a las opciones de pantalla de tu menú, que están en la parte superior derecha de la pantalla, y seleccionar la casilla de CSS personalizado.
      Te dejo por acá una captura más ilustrativa de la configuración que debes activar: https://snipboard.io/r32dpF.jpg

      Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐

  2. Jefferson, buenas tardes, nuevamente yo 😅

    En el minuto 15:18 mencionas, que, en la configuración de la fila, avanzado, aplicamos un CSS personalizado. Hasta aquí todo bien. Y luego menciona que a la fila hay que aplicar otro CSS personalizado (https://snipboard.io/ykEaz4.jpg), pero esas dos columnas las volvimos una anteriormente, por lo que ya no aparece así, así lo visualizo: https://snipboard.io/uLQp3q.jpg.

    Espero ser poder ser claro 😅

    1. Que tal Aldo, un gusto saludarte.
      Si, así es, allí lo que hicimos es que fuera de cámara colocamos los iconos en una segunda columna, pero el CSS es aplicado a la fila como tal, solo que en vez de ser una fila de una columna, es una fila de dos columnas, y en la segunda columna, colocamos los íconos de mi cuenta, favoritos y carrito.

      1. Jefferson, muchas gracias por la respuesta. Al final seguí viendo el tutorial e inferí que se quedaba a dos columnas. Aun así muchas gracias.

        Te presumo el menú que hice: https://snipboard.io/pgmTGZ.jpg 😅

        Nuevamente tengo un par de dudas, en los íconos, en mi caso, yo puse primero el de carrito, luego uno de mi cuenta (https://snipboard.io/HZMagt.jpg) y otro ícono (https://snipboard.io/Nl9qsW.jpg), en ambos casos ocupé el HTML de Fontawesome, pero por alguna razón no los interpreta. Sabes qué pasa? Cabe mencionar que en las opciones del tema divi / integración, pegué el código (https://snipboard.io/XAkC8G.jpg).

        Y la otra duda es que en la versión móvil y tablet todo me quedó igual salvo el menú desplegable https://snipboard.io/fcp45s.jpg.

        Por cierto, la herramienta que usas “snipboard” está muuy buena 👌🏽

        ✌🏽

        1. Que tal Algo, un gusto saludarte, es un gusto que te funcione la herramienta para enviarnos las capturas.
          Vale, va bastante bien el menú.

          Con respecto a los íconos que no se ven, esto es porque el código que se pega en “integración” es un Script que ya ha agotado la cantidad de visitas que nos da font awesome de forma gratuita, esto lo resuelves fácilmente creando una cuenta en Font Awesome con tu email y creando un nuevo “kit” esto, te permitirá crear una nueva API que podrás integrar a través de un Script, reemplazando el que te damos en el tutorial.

          Por otro lado, el menú desplegable en efecto presenta un pequeño error, incluso en mi muestra, por lo que estaré revisando que ha sucedido, presumo que con alguna actualización el CSS se ha movido.
          Más adelante te estaré informando ¡Vas super bien! ¡Enhorabuena!

          1. Jefferson, buenas tardes.

            Solo para comentarte que lo de Font Awesome, quedó resuelto con lo que sugieres.

            Del resto muchas gracias por estar al pendiente y responder.

            ¡La suscripción vale cada peso invertido! 🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽

¡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Í →