Cómo crear un menú principal con un menú secundario responsive en divi theme builder
Вставка
- Опубліковано 18 вер 2024
- Aprende a diseñar un menú avanzado en divi. En este tutorial vamos a construir un header personalizado completamente con el theme builder de divi. Construir un menú en divi no es la tarea más fácil de realizar sobre todo en móvil pero gracias a este tutorial aprenderás a realizar menús avanzados siguiendo buenas prácticas y lo mejor es que aprenderás a adaptar correctamente tu menú para computadoras, tabletas y teléfonos.
➡️ Enlace al post del tutorial: ovdivi.com/com...
💥 Suscríbete a los tutoriales exclusivos: academia.ovdiv...
⭐️ Si te gusta mi contenido me ayudarás mucho si me dejas una reseña en Trustpilot: www.trustpilot...
✅ Más de 240 increíbles tutoriales gratuitos y premium: ovdivi.com/blog/
🔥 Suscripción a Divi de Elegant Themes con 20% descuento: bit.ly/2HlLVeI
💎 Únete a nuestra comunidad de Facebook: / ovdivi
#divi #menu #ovdivi
--------
S Í G U E M E
--------
Web: ovdivi.com/
Facebook: / ovdivi
---------
P E R S O N A L
---------
Twitter: / oscarviedmaweb
Web: oscarviedma.com/
wow me encanta la verdad es que construyo con DIVI pero no me habían enseñado tantos comandos y trucos, aprendí con json y poco a poco ir mejorando, pero en este tutorial he descubierto muchas configuraciones que me encantan y voy ejecutándolas en mi página web que estoy actualizando
¡Excelente, Itza! Eso es exactamente lo que buscamos: nunca dejar de aprender. Siempre hay algo nuevo en este mundo web tan cambiante. Te envío un abrazo y, si tienes alguna duda, estaré encantado de ayudarte. ¡Saludos!
Oscar siempre es un agrado aprender junto a tus tutoriales ... Siempre se aprende algo nuevo.. gracias por tu tiempo!
Muchas gracias por el apoyo Fepbak, seguimos con todo! Saludos
Muchas gracias oscar para el tutoria!! Magnifico!!!
Gracias a ti también lucanitro! Un abrazo
Magnífico tutorial. Muchas gracias por compartirlo, Óscar!!
Muchas gracias amigo. Saludos
🤗 Excelente Oscar! muchas gracias 🙏 Saludos 🇸🇻
Gracias a ti, un abrazo hasta 🇸🇻
excelente video oscar, sigues siendo una persona cool✌🏻. Se agradece mucho el tutorial
Muchas gracias Marco, seguiremos creando mucho contenido 🤠
Muy interesante!! Gracias Oscar!!😊
Gracias a ti también Martin, saludos 😊
Muy bueno Oscar!
Muchas gracias Ramiro, un abrazo :)
te amo, ayudando a los desvalidos
Gracias por el apoyo, también los quiero 😄
Oscar muchísimas gracias por todos tus aportes, hace algún tiempo me suscribí pero por un tema de tiempo no pude seguir aprendiendo... seguramente en un mes volveré a retomar la suscripción, por otro lado, quisiera hacerte una consulta, cuando estuve creando mi página web con divi, me di cuenta que un reto mayor era hacerlo responsive, adaptable a celular - hice un menú secundario y un menú principal, quisiera saber si hay forma de que el menú secundario (sus elementos) que fue icono de whatsapp con el número de celular, facebook e instagram al verlo en celular salgan los 3 de manera horizontal (es decir en linea), me parece que hay que usar código, y realmente me cuesta mucho esa parte porque no manejo programación, sería excelente que hagas un curso o algo relacionado a código ccs o todo lo que se necesita para implementar a divi (los principiantes como yo te lo agradeceríamos) me suscribiría sin pensarlo ya que hay muy poco contenido sobre eso y si es que lo hay pues no hay una explicación básica para empezar a usarlo en divi. en mi caso tuve que aprender algunos conceptos pero por separado a divi, es decir, ver ccs a parte, el problema siempre fue como implementarlo o complementarlo en Divi. Muchas Gracias
Hola muchas gracias por el apoyo. Sobre tu consulta si puedes alinear elementos en la misma fila, solo basta con entrar a los ajustes de la columna donde tengas esos elementos / Avanzado / CSS Personalizado y en Elemento Principal colocar: display: flex;
Con esta propiedad se alinean los elementos de forma horizontal. También te recomiendo veas este video: ua-cam.com/video/rOxXNBSGIjg/v-deo.htmlfeature=shared para que aprendas a crear composiciones de varias columnas, es realmente útil.
Saludos
Hola Oscar tus vídeos son los mejores realmente gracias, pero habrá una manera de que las pestañas activas cambien de color cuando estén en la pagina que corresponde como en el ejemplo original.
Hola qué tal, muchas gracias. Sobre tu pregunta, la forma sencilla es que para "adultos, niños, empresas, más idiomas" tengas una plantilla específica para cada página desde el theme builder, en dicha plantilla vas a cambiar el color del módulo texto y listo.
En mi movil, mi pagina web, no se visualizan todas las pestañas del menu, solo se ve una pestaña
Hola, ¿Cuál es la url de tu web? Quiero darle un vistazo para saber que sucede
Oscar, excelente!!! no sé como hacer el tamaño de alto del menú me queda muy alto a mi, no se como cambiar eso. el tuyo queda finito
Hola qué tal, muchas gracias. Seguramente tienes rellenos en la sección y fila. Puedes intentar colocando en relleno superior de la sección y la fila un valor de "0".
Hola, Oye tengo mi menu pero con muchos submenus y es largo en mi movil no me deja visualizar todos los items del menu, ni me deja hacer scrool al menu, como podría hacer para que se mirara en movil todo el menu.
Hola, en el tutorial muestro un código para colapsar el menú en móvil. Ese código lo puedes implementar en tu menú para que colapses todos los submenús.
Hola!!! Cuando estamos trabajando el menú con el logo y colocamos el código css personalizado para que el botón del teléfono se alinee, el texto se corre en dos lineas. Como si no tuviera espacio para que quepe el texto completo. por favor ayudaa 🙏 que puedo hacer?
Ya lo pude hacer 💪 por si alguien tiene el mismo problema, entran a Spacing de los ajustes en el botón y en margin, le aumentan todo en el lado Derecho y listo.
@@AngieMatsuda Excelente Angie, me alegra saber que lograste solucionarlo :) ¡Saludos!
Hola oscar excelente tutorial, lo realice y me salio exacto, solo en la contraccion del menu de las subcategorias en tu ejemplo alado del nombre de la categoria principal sale un mas para abrir, pero a mi me sale una L, como puedo ca,biar a que salga el +?
Hola William, que genial que te ha funcionado. Sobre el detalle que comentas quizá sea por la configuración de dinamyc icons de divi performance. Dirígete a Divi / Opciones de tema / Performance (Actuación) y deshabilitas la opción "iconos dinámicos".
Espero eso ayude. Saludos
podes hacer un buscador con categorias donde tenga telefono, ciudad, pais
Hola Gustavo, hace no mucho tiempo he creado un tutorial premium de un buscador, quizá te pueda servir: ovdivi.com/como-crear-un-formulario-de-busqueda-de-publicaciones-personalizadas-con-campos-dinamicos-en-divi/
Excelente video. Mi botón hamburguesa dejo de funcionar, me podrían ayudar sobre ese tema porfa.
Hola Russ, ¿Anteriormente te funcionaba? ¿Dejó de funcionar al actualizar/instalar un plugin, wordpress, divi?
Tutor una pregunta tienes un tutorial de como manejar multiidiomas en divi ?
Hola qué tal Jhonny, por ahora solamente tengo un tutorial premium dentro de mi plataforma: ovdivi.com/como-traducir-un-sitio-web-creado-con-divi-en-minutos-con-divi-auto-translate/
Pero también te recomiendo "Polylang", un plugin para crear páginas multi idioma, lo mejor, tiene una versión gratis.
Saludos
Hola! me gustaría aplicar el menú colapsable en el menú de curso, como funciona etc... porque puse sub menús, me podrías ayudar?
Hola, en este tutorial enseño como. Qué es lo que no estás logrando?
Muy buen tutorial, colega sabes como hacer para que el menu hamburguesa en movil quede al lado izquierdo y el logo a lado derecho? Saludos de antemano
Hola, prueba con esta solución: www.peeayecreative.com/how-to-move-the-divi-menu-to-the-left-and-logo-to-the-right/
ovdivi he visto varios de tus videos, están bien explicados aunque siempre dejas cosas para que el visitante investigue... en éste caso no sé cómo convertir el módulo "texto" del menú secundario "Acceso Estudiantes" a módulo "menú desplegable" ya que posee opciones "Adultos" y "Niños" que cuando pasas el mouse por esa opción se "despliega" y tapa el módulo "botón" del teléfono del menú principal... en el tutorial no está explicado y la única manera que encontré es precisamente reemplazando ése módulo "texto" por "menú" pero éste muestra un "icono" a su derecha indicando que es un menú y no tengo forma de ocultar ése "dibujo" ya que el original de OpenEnglish es sólo texto y sin embargo despliega sus opciones "Adultos" y "Niños"... disculpá lo extenso quizás para una respuesta sencilla. Gracias.
Hola qué tal, muchas gracias por seguir los tutoriales. Sobre tu consulta, tienes razón, en este tutorial no exploramos esa funcionalidad porque consideré en su momento daba para un tutorial aparte. Pero respondiendote rápido una forma de implementarlo es con el módulo menú como lo haz realizado. Y para que en móvil no aparezca el icono hamburguesa debemos deshabilitarlo con un snippet. En mi página > Consejos y trucos > Snippets vas encontrar el snippet para eso, se llama "Desactivar el menú hamburguesa para tabletas y móviles" y está en la categoría "Menú Theme Builder"...
ovdivi.com/divi-snippets/
@@OVDIVI
En el submenú colapsable en lugar del ícono de "+" me sale una "L", a alguien más le ocurrió? Oscar si tienes la solución para eso me ayudaría un montón y por todo lo demás gracias por el tutorial, es increíble lo que nos ayudas!
Hola Angel, revisa que en el código CSS, en la propiedad content tengas la diagonal invertida:
content: "\4c";
@@OVDIVI solucioné mi error, gracias Oscar!
Hola Angel, me esta pasando también lo mismo que a ti, me aparece una "L", he revisado todo y veo que la barra esta correcta "\", que puede ser? gracias.@@angelfleytasramirez5252
como se hace un formulario donde tengas que cargar tu nombre, telefono, whatsapp, una api para compartir a whatsapp, cargar fotos y tenga un checkbox para proteger las fotos con el nombre de las fotos
Hay muchas formas de hacer un formulario, pero el más reciente que tengo es este: ua-cam.com/video/koK5gGZQXus/v-deo.html
no entiendo por que si sigo el paso a paso a la hora de poner color blanco al cuadro de texto que dice adultos me pone blanco toda la sección y a ti se te marca blanco solo un cuadro chiquito. Minuto 16.10 ☹☹
ya supe que era que yo ponía % y era cambiar a px
@@Itzabella72 Hola Itza :D que genial que lo lograste!
Bienvenido o bienvenida? jajaj otro mas que le han comido el tarro
Para ti Bienvenido Rob. Un abrazo :)
@@OVDIVI si dices bienvenidos para referirte a hombres y mujeres en general pues ya estás hablando correctamente el castellano. Decir eso que dices es síntoma de que o bien te pagan por fomentar esa aberración lingüística, o bien te han comido el tarro de tal manera que te lo has llegado a creer. También está la opción de que que lo digas porque eres cobarde 😅 .. nunca lo sabré
Estás mal Rob. En mis videos hablo en singular, de tú, me dirijo a una persona no a todos. Por eso no sé si el que me está viendo es mujer o es hombre. Si no te gusta estás en tu derecho de no ver ni escuchar mi contenido, no pasa nada. Yo seguiré diciéndolo porque así me siento bien, mientras tanto, tú puedes pasar de largo. Saludos
@@OVDIVI Que curioso que borres mi respuesta y añades otro mensaje tuyo... Así no hay quien pueda conversar. En fin, era de esperar.
Nunca borro comentarios, no acostumbro a hacerlo. Al contrario me doy el tiempo de responder todos y ayudar a la comunidad. 99% de los comentarios son positivos y lo puedes comprobar leyendo todos en todos mis tutoriales. Un abrazo