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.
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í:
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 ⭐
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!
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 😉🖐
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 😅
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.
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 👌🏽
✌🏽
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!
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! 🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽
¡Es un gusto poder ayudar Aldo! Te mantengo informado.