WOW, 25 DE ENERO DE 2024 Y FUNCIONA PERFECTO. Solo echo en falta poder poner el menú alineado a la derecha en la versión de escritorio, que nno viene por defecto.
Hola 👋 si sigue funcionando. Es la ventaja de utilizar código en lugar de plugins 🤩 Para alinear tu menú a la derecha solamente usa las opciones de alineación del texto. Entra a los ajustes del menú, diseño / texto y alineas a la derecha. Un abrazo
@@OVDIVI wow todo un honor que me respondas. gracias. No tengo la opción por defecto de alineado a la derecha, solo viene centrado, izquierda y logo centrado en línea. Es muy raro...
@@jolgito cuando te vas a los ajustes del texto, debes alinear el texto a la derecha. Es decir seleccionas la alineación del menú a la izquierda pero el texto con alineación a la derecha
mil y mil gracias, me atrevo a decir que eres el unico en youtube habla hispana que explica realmente las funcionalidades de DIVI y sus complicaciones a resolver, muchos exitos gracias ti mejore mi web 🚀🚀🚀🚀🚀🚀
Hola Oscar. ¡¡¡¡¡¡ MUCHAS GRACIAS !!!!!!! por este increíble, maravilloso y creativo video sobre un menú. Está muy bien explicado, ya que no tengo ni idea de código y lo he podido aplicar a mi página sin ningún problema. Gente como tú, es la que nos anima a los que estamos empezando con el Diseño Web a seguir aprendiendo y disfrutando de ésto. De nuevo, muchas gracias por tus desinteresadas aportaciones a UA-cam.
hola oscar! tu contenido es unico ...estoy creando mi promera web pero de todos los video que he visto y te aseguro que han sido artos y horas y horas ! nada como tus tutoriales definitivamente me suscribo a los premium ... muchas gracias por tanto👏👏👏
Gracias por sus videos, excelente...lo único raro es la voz, antes no le hacía así...pero, bueno, quiere tener su estilo, o eso le han recomendado...pero que sea original, no inventado a la fuerza...gracias
Hola David, muchas gracias por la observación. El video es del 2020, obviamente he tratado de mejorar conforme avanzo. Considero que los últimos ya son más naturales, tu me dirás. Un abrazo David :)
Hola Oscar, muchas gracias por este excelente tutorial y compartir tu conocimiento. Estaba creando un menú desde cero y por más tutoriales no lograba darle el aspecto y funcionalidad que quería, encontré tu tutorial, he seguido el paso a paso y ha quedado perfecto mi menú. ✨🤗
@@OVDIVI Hola Oscar soy Lauren. Una consulta, el menú está fucionando muy bien, pero mi página tiene carrito y en los productos la apariencia del menú se distorciona, ¿alguna recomendación?
@@OVDIVI si, mucho. De hecho acabo de suscribir a tus cursos Divi en tu web Academia. Me están cambiando la vida ya que tengo una web que hacer y me faltaban unos elementos para conseguirlo 🙏
Muchas gracias! Me ha costado pero funciona perfectamente, lo unico es que en movil al desplegar el menu sale el menu casi desde la mitad del logo, me gustaria lograr que salga desde donde termina el logo para que se lo vea completo, muchas gracias!
Puedes ajustar la posición con este código: .et_mobile_menu { top: 50px !important; } Ajustas el valor de 50px y el código lo puedes pegar en Divi / Opciones del tema / CSS Personalizado...
Hola, como siempre Oscar, tus tutoriales son de primera y aprendo muchísimo, gracias!. Por alguna razón no logré que me tome el estilo de color en el botón CTA cuando está sticky. Y por otro lado, aviso por si a alguien más le sucede igual, cuando se usa Woocommerce, la tienda/store (y tal vez otras páginas, ya me iré enterando) aplican otras clases a los divs del header, la manera de ir resolviendo es buscar con la herramienta de inspeccionar y comprobar qué clases agrega en, por ejemplo, la página del store o tienda, y anotar esas clases con las correcciones (paddings, width, etc) en el CSS personalizado. Slds!
Hola María Inés, compárteme la url y le doy un vistazo para ver que está pasando. Sobre el cambio de clases de divi cuando se usa woocommerce tienes completamente razón. Es algo que da algunos dolores de cabeza porque en las páginas de la tienda y los productos de woocommerce algunas clases pueden ser diferentes y por lo tanto no toma algunos estilos. La solución a esto es como lo comentas, hay que inspeccionar las clases y ver cuales son las clases que agregar. Gracias María Inés.
Hola Oscar, gracias por detenerte en mi comentario. En esta ruta publiqué una copia del header que hice con tu tuto: sandbox.buenosrecursos.com/ desde ya muchas gracias!
@@tvmines Al parecer el CSS que debes usar para personalizar el botón CTA al hacer scroll es este: body #page-container .seccion-menu-scroll .et_pb_button_0_tb_header { color: #ffffff!important; border-color: #6A904E; background-color: #6A904E; } Prueba y me comentas como te va. Saludos.
@@OVDIVI estaba por responderte! se me prendió la lamparita y estaba probando usar !important!!! XD y estaba por escribirte. body #page-container .seccion-menu.seccion-menu-scroll .et_pb_button { font-size: 0.8rem!important; transition: all 1s ease; background-color: #6a904e; color: #f7f0eb!important; } 👆 este funca, ahora me fijo el tuyo, porque hay clases que yo no usé. el tuyo funciona pero agregando ".seccion-menu" genialisimo! gracias Oscar
Ufff! increíble!! Excelente video, me sirvió mucho para un proyecto que estoy realizando. Llevaba días probando formas de personalizar el menú para móvil, incluso perdí dinero con un plugin que no sirvió para nada de lo que ofrecía (lamento mucho eso...) y justo cuando estaba por tirar la toalla aparece tu video en youtube, en serio muchas gracias Oscar! 👏👏👏👏👏
¡Genial Jorge! Qué bueno que te ha servido amigo, de eso se trata. Te entiendo Jorge, crear un menú con el generador de temas de divi no es tan intuitivo sobre todo en responsive. Espero y este tutorial te haya aclarado algunas cuestiones en móvil y me alegra mucho saber qué te ha sido más útil qué un plugin 💪💪💪
gracias crack!!! comentarte que tuve problemas con la nueva opción de stiky al pasar por algunas secciones con algunos efectos, así que con este video quedo exelente !!!!
Holas. Excelente tutorial. en el ordenador anda barbaro pero en el movil, se superponer el menú fijo sobre la sección. como puedo solucionarlo? Gracias
Excelente trabajo, solo quisiera consultarte sobre un problema que tengo. Cuando creo la cabecera desde el generador de temas, cuando quiero colocarle una transparencia siempre me coloca el encabezado sobre el layout, no esta superpuesto por lo que me queda un fondo blanco. gracias por la respuesta.
Hola Emilio, muchas gracias. Intenta colocar una posición fija a la sección, de esta manera el menú estará por superpuesto de la sección de abajo. También puedes probar con las nuevas opciones sticky de divi.
La verdad muy buen tutorial, excelente. quisiera hacerte una consulta. si en ves del botón que usas en el menú, yo quisiera colocar el modulo de redes sociales que cambios debo hacer para aprovechar el mismo código que nos brindas para el menú con el botón? desde ya quedo agradecido por tu respuesta. saludos
Hola Johan qué tal, muchas gracias. Prácticamente debe ser lo mismo, solo reemplaza el módulo botón por el módulo de seguir en redes sociales. Cuándo lo tengas hecho y si tienes algún conflicto me escribes y revisamos tu sitio.
@@OVDIVI gracias por responder, de hecho estuve viendo el tutorial donde explicas lo mismo pero con las opciones de stik de Divi. En ese caso como haríamos la adaptación a móviles para que se vea cómo en el tutorial que lo enseñas a hacer con código..?
@@johanbenitez9872 Debería probarlo, para entender cómo hacerle jaja. No tengo la respuesta pero me puedes compartir la url para darle una revisada e incluso intentarlo.
@@OVDIVI Hola Oscar, gusto en saludarte. Por aqui retomando la actividad nuevamente. Sabes, he cambiado el modulo de llamado a la acción que indicas en el tutorial por el de seguir en redes. Pero claro, al haber cambiado el modulo los estilos de scroll y de colocar el modulo dentro del menú desplegable de la vista de tabletas y celulares, no se aplican. Hasta el momento no he sabido resolverlo, podrías indicarme como hacerlo?
Hola Oscar! Muchas gracias por el video, es excelente y me ayudo a realizar el nuevo menu. No obstante, tengo algunos errores al implementar el código, la hamburguesa del menu desde el movil me queda centrada y no a la derecha y cuando abre el menu no abre en pantalla completa! Agradezco tu ayuda, saludos desde argentina!
Muy buen vídeo Oscar, me ayudó muchísimo, solo me falta hacerlo transparente cuando este arriba, pero aún así tienes mi like y un nuevo suscriptor. Gracias, cuídate.
Hola Oscar Vielman, gracias por este maravilloso tutorial. Quiero preguntar ¿Tienes algún tutorial que enseñe como hacer cabeceras personalizadas distintas para distintas páginas? que no sea la global. Gracias de antemano por tu respuesta ⭐⭐⭐⭐⭐
Hola Guillermo, en los tutoriales ya tenemos realizados muchos menús, pero para realizar cabeceras para páginas especificas es prácticamente el mismo proceso desde el propio generador de temas, solamente tienes que asignar la cabecera en las páginas que deseas mostrarla.
Hola Oscar buen video, como podría hacer que al momento de hacer scroll se muestra otra barra de navegación muy distinto al inicial. Gracias por tu respuesta.
Hola Adali, puedes probar las nuevas opciones de divi sticky. Tengo un tutorial al respecto: ua-cam.com/video/VVMxoluQh34/v-deo.html Seguro logras algo como lo que deseas.
Hola! muy buena explicación, como siempre!, te quería hacer una pregunta, mi menú tiene bastantes pestañas, por lo que cuando está en responsive no hace scroll el menú, llega hasta un cierto punto y no sigue bajando el menú, hay alguna manera de solucionar esto? te agradezco de antemano, saludos
Hola Jose Cardenas, sí, puedes crear un menú colapsado, te recomiendo este tutorial en inglés de un colega: joshhall.co/how-to-create-a-divi-mobile-menu-collapse-effect/
Hola, genial el tutorial Oscar. Pero tengo una duda. Intente mezclar este tutorial con el de hacer que sea transparente y cuando bajes cambie de color a blanco, pero se queda transparente. Obviamente cambie las clases y todo como si fueran de este tutorial pero no se solucionó. Como podría hacer?
Seguramente hay una clase que está "pisando" a la que haz colocado y por eso el color no se reemplaza. Podríamos usar un !important ¿Cual es el link de tu página?
Que código css hace que el menú se centre. Osea la cabecera agregué una sección dividida en 3 columnas como lo que muestras en tu vídeo. Por un lado logo, centro el menú principal y derecha el botón. Sucede que el menú principal se posiciona al margen superior. Lo podría aumentar margen superior y tantear pero creo no es lo correcto. Cómo hago para que quede como tú barra de menú.
Puedes hacerlo cómo mencionas mientras te de el resultado deseado está bien. La otra es hacerlo con código, en los ajustes de la fila o columna > avanzado > CSS Personalizado > Elemento principal usar esto: display: flex; align-items: center;
Funciona teniendo Divimenu Flex de DonDivi? Dado que lo utilicé y cuando puse el menú en fijar, no me aparecian los submenus que añadí con Divimenu Flex.
Hola Andrés, la verdad no sabría decirte si funciona con DonDivi. Si no te funciona intenta con las opciones sticky que vienen por defecto con divi: ua-cam.com/video/VVMxoluQh34/v-deo.html
@@OVDIVI Gracias, pero actualmente ya se puede hacer sin necesidad de utilizar códigos CSS, directamente desde diseño con la configuración de Sticky, es más rápido y fácil.
Excelente tutorial, muchas gracias, pero queria consultar, en la página home sale igual que el tutorial, pero en las páginas en mi caso de tienda el menú sale muy diferente, que pudo haber pasado?, gracias
Hola qué tal, ese problema es un problema de estilos con divi. En las páginas de tienda cambia los nombres de las clases y hay que cambiarlas o colocar en el código el "!important" delante de cada valor en el CSS. Es cosa de inspeccionar el código y ver que clases son las que cambian. Puedes compartirme la url de tu web y te apoyo con eso :D
hola al agregar la clase CSS no toma el estilo del botón solo sale el menú presupuesto pero nada mas y puse exactamente como dijiste clase btn-principal en el sitio que se debía
Hola Hardroco puede deberse a la cache, intenta desactivar la generación de CSS Estático desde divi > opciones del tema > constructor > avanzado, a ver si esto ayuda.
Hola Oscar buenos dias como se puede hace una galeria de de producto de Divi se habrá en forma despleglable para ver las fotos en seccion ya que para cada producto tengo 30 imágenes o mas ya que son fotos de un fabricante y de un catalogo hay muchas fotos eso hac e con codigo divi o como se hace esioo me podrias hechar una mano y en que tutorial haces eso o donde se puede encantrar o que tipo de codigo es para hacer eso
Hola Juan Enrique, la verdad no tengo algo para hacer eso porque es muy específico. Pero pensando rápidamente se me ocurre que puedes hacerlo mediante pop up, cada galería la puedes mostrar en un pop up y esto lo logras con este plugin: es.wordpress.org/plugins/popups-for-divi/
Hola Óscar: Gracias por el tutorial ya lo he aplicado y mis proyectos han quedado excelente. Pero ahorita tengo esta situación: el proyecto que estoy desarrollando tiene dos secciones en el menú y al fijarlo se sigue sobreponiendo sobre todo en la pagina de tienda tapando parte de la barra lateral y alejando demás aunque eliminé los espacios el contenido del borde del menú. Eliminé todo e hice un menú como indicas en el tutorial de una sola sección y aún así sigue el mismo error. Tú sabrás a qué se debe? Nuevamente gracias por este y los otros tutoriales. Te mereces 7 estrellas ⭐⭐⭐⭐⭐⭐⭐
Hola Pablo, muchas gracias. Para colapsar el menú te comparto este post de un colega de habla inglesa, es muy fácil de seguir: joshhall.co/how-to-create-a-divi-mobile-menu-collapse-effect/
Hola como estas, hago todo el proceso de crear en el generador de temas el encabezado, al guardarlo me voy a la pagina que ya tengo hecha pero no me aparece por ningun lado, que debo hacer?
Hola, recuerda que lo debes asignar como encabezado global y siempre la primera vez que se edita un layout debes guardarlo no solo desde el constructor visual si no que también desde el mismo generador de temas.
Claro que se puede, date una vuelta por mi página de snippets, ahí tengo varios trucos y uno de ellos es el de colocar la palabra MENU al menú hamburguesa: ovdivi.com/divi-snippets/
Hola Oscar! Primero quiero decirte que da gusto escucharte, porque es obvio que disfrutas mucho lo que haces, y lo contagias, gracias. Y ojalá puedas contestarme esta pregunta: ¿Hay manera de que este encabezado global construido con Theme Builder, quede sólo visible en escritorio, mientras en tablet y celular permanece el menú por defecto? Mil gracias de antemano :)
Hola Aurea muchas gracias 😀 Muy buena pregunta, sería genial pero no es posible 😢 Se puede ocultar el menú creado desde el theme builder para tabletas y móviles pero no se puede mostrar el por defecto de divi. Aunque el menú por defecto de divi es practicamente el mismo que el módulo menú. De hecho puedes hacer tus dos menús desde el propio generador de temas y mostrar uno en escritorio y el otro en tabletas/teléfonos...
Muchas gracias por el aporte. Llevo un tiempo siguiendo tus tutoriales. Me gustaría preguntarte si hay manera de modificar el punto de ruptura del menú en la tableta, para que se siga viendo en letras y no con el símbolo de tres líneas. Gracias! :)
Hola Sarai muchas gracias. Sí, mira sigue estos pasos: 1. Agrega un nombre de clase CSS al módulo menú. 2. Copia el siguiente código y lo pegas en el Personalizador de temas > CSS Adicional. @media(max-width:980px){ .ov-nombre-clase .et_pb_menu__menu { display: block; } .ov-nombre-clase .et_mobile_nav_menu { display: none; } } 3. Reemplaza “ov-nombre-clase” por el nombre de clase que le colocaste al módulo menú. 4. Cambia 980 por la resolución desde donde quieras desactivar el menú hamburguesa.
Hola Abel qué tal, puedes usar con el que mas cómodo te sientas, a mí en lo personal lo tengo todo con divi, me encanta la usabilidad, la experiencia que me brinda al diseñar un sitio web, puedo hacer prácticamente cualquier sitio. Y lo mejor, solamente invertí una vez en divi, lo tengo de por vida, así que cada sitio que realizo para mis clientes es prácticamente un ingreso del 100%. Contrario a elementor tienes que renovar año con año para tener un sitio seguro y actualizado. Los dos son buenos pero me quedó con Divi. :)
Hola buenas!, disculpa master, de casualidad tienes algún css para hacer que cuando baje se oculte, y cuando suba vuelva aparecer ? Todo esto en mobile
Buenos días Oscar Enhorabuena por el tutorial, ha sido un enorme salto cualitativo a mis diseños, gracias!! Tengo una duda, espero la puedas resolver Una vez estamos en el menú hamburguesa, resulta que mi menú en algo largo, se extiende hasta el final de la pantalla, y no se puede ver los últimos links. Pero no puedo hacer que el ratón baje para ver lo que hay al final, espero explicarme bien. Cómo recomiendas solucionar esto? Gracias de nuevo
Hola muchas gracias, para el problema que me comentas puedes usar un menú colpasado. Este menú lo puedes lograr con este tutorial de Elegant Themes: www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder También tienes estas otras alternativas: www.peeayecreative.com/how-to-collapse-divi-mobile-menu-submenus/ joshhall.co/how-to-create-a-divi-mobile-menu-collapse-effect/
Hola Nancy, tengo un tutorial para eso: ua-cam.com/video/09soIRll45Q/v-deo.html También en las versiones recientes de divi ya lo podemos hacer con la opción divi sticky: ua-cam.com/video/VVMxoluQh34/v-deo.html
Hola, muchas gracias por el tutorial. Tengo una duda, como puedo ahora poner una barra de submenú por encima de este menú fijo. Con elementos como icono telefono, correo electrónico e idiomas? Intenté hacer lo pero no se muestra. ¿Podrías ayudarme? gracias.
Hola Oriol es mu simple, solamente desde el generador de temas agregas otra sección arriba de la sección de este menú y la empiezas a diseñar con con los módulos correspondientes. :)
Genial!! Estoy nuevo en DIVI, tengo una inquietud, si me puede asesorar!! este Pluging Countdown Block, como se podría integrar en un bloque de DIVI, puede ser obvia la respuesta, pero he buscado mucho y nada que encuentro respuesta!! De verdad muchas gracias!!!!
Buenísimos videos, Oscar. Te quería hacer una pregunta, y si quisiéramos el menú transparente nada mas aterrizar en la web y cambiara de color al hacer scroll? sería posible con este modelo? Gracias de antemano. Saludos dede España!!
@@OVDIVI siii, lo seguí al completo, Oscar! Muy bueno tb y es el que tengo ahorita. Pero me preguntaba si le podría añadir el efecto de minimizarse al hacer scroll a usando la configuración del anterior?
@@carlosr.194 También es posible con las nuevas opciones de divi sticky. Mira este otro tutorial y también puedes lograr todo lo de este y el otro tutorial que te compartí: ua-cam.com/video/VVMxoluQh34/v-deo.html
Muchas gracias por tus tutoriales, tengo una consulta tengo un menú que tiene submenus y cuando veo el menú en responsive estos menús aparecen desplegados y no se ve la totalidad del menú ya que cuando hago scroll baja es la pagina más el header sigue fijo por lo que no puedo moverme por el menu del celular sabes que podria estar pasando y como solucionarlo?
Hola Estaban, no tengo un tutorial para eso pero aquí te dejo un tutorial en inglés para que puedas hacerlo: www.peeayecreative.com/how-to-add-icons-to-the-divi-menu/
Hola! muy buena explicación, como siempre!!. Agradezco mucho que nos compartas toda esta información y conocimientos. Tuve un problema: al deslizar en pequeño medio menú se queda arriba. No se si es porque mi logo es cuadrado y lo crecí mas de lo que está el tuyo, ya que a la medida que sugerias en tu video quedaba muy pequeño... hay algún lugar donde pueda modificarlo para que no sea tan pequeña la franja al hacer scroll?
Hola qué tal, muchas gracias. ¿Tienes tu sitio en línea? para revisarlo. O mira este otro tutorial dónde recreamos este menú con divi sticky, a lo mejor te sirve: ua-cam.com/video/VVMxoluQh34/v-deo.html
Hola! esta genial el video!! pero tengo un problema...el menu iba genial hasta hacer poco donde el menú hamburguesa en tablet y móvil dejaron de funcionar los enlaces. ¿Porque puede ser?
hola, muchas gracias por tu vídeo, he realizado todos los pasos y los hice siguiendo el orden que propones en el vídeo pero no logro que aparezca el menú creado en las páginas. me podrías recomendar una solución para este inconveniente, por favor
Hola Daniel, recuerda que debes crear el menú desde Apariencia / Temas y después en tu plantilla del generador de temas debes asignarlo. No olvides guardar cambios en el generador de temas...
Hola Enrique en las nuevas versiones puedes hacerlo tal y como lo hacemos aquí, pero también con divi sticky podemos lograrlo: ua-cam.com/video/VVMxoluQh34/v-deo.html
Hola, muchas gracias. Me pasa que cuando agrego el CSS para que al hacer scroll reduzca el tamaño del menú, en mi caso se agranda el menú, como puedo solucionarlo??
O.o! excelente video!!! una vez mas gracias por estos tutoriales... queria hacerte una pregunta. ando desarrollando un sitio que es para los empelados de una empresa. les permiten hacer pedidos de lo que la empresa venden pero teine una restriccion de productos por categorias. necesito hacer una tabla que me muestre la categoria. la cantidad maxima que pueden pedir y cuantos productos por categoria les quedan disponibles mientras hacen si pedido. tienes idea de como puedo lograr eso... o si hay algun plugin que lo haga... o como puedo crear ese tipó de tabla?
Hola Pedro qué tal, gracias. En cuanto a tu consulta la verdad nunca he realizado algo cómo lo que deseas, desconozco si haya un plugin que te pueda servir amigo. Creo que sería mejor hicieras esa pregunta en un grupo de wordpress en facebook, estoy seguro que hay alguien que ya lo hizo y te puede ayudar mejor que yo. Disculpa Pedro por no poderte ayudar, sí me entero de algo te aviso. Un abrazo.
Excelente tutoríal como siempre, lo guardare en mi biblioteca. Sin embargo por ahora estoy probando el divi toolbox (Solo prestadito y sin licencia XD) y el menú sale fácil. Ya puse la X en el menú móvil al desplegarse gracias a ti. Lo que no puedo adaptar es que el botón de CTA en escritorio, aparece el fondo del botón que tu creas por detrás del que yo tengo. Puse parte del código que indicas /* Estilos botón CTA y personalizacion en menú hamburguesa */ body #page-container .btn-principal a { border-color: #d86411 !important; background: #d86411 !important; } sale OK en móvil al desplegar. Pero como dije en desktop me aparece detrás del que yo cree en Toolbox. Alguna idea de como hacerle para que no aparezca en desktop, pero con css. pues como mi CTA no fue creado como lo haces, no puedo indicar que solo aparezca en móvil y tablet. Help please, Si se puede. Like
Hola PAT Gómez genial que te ha sido útil. En cuanto a tu consulta envíame tu sitio para revisar la clase del botón y te pase un código para eliminarlo en Desktop.
@@OVDIVI Gracias amigo. Bueno, te cuento que seguí curioseando en divi toolbox y puedo hacer todo lo que quería hacer y un poco mas. Igual guardo tu correo.A ver si como están las finanzas y puedo entrar a tu academia. ,as que nada para que me apoyes en consultas especificas. Cuídate 👍
Hola que tal, hay problemas con el responsive. Hay veces que se adapta correctamente el menu al dispositivo y otras veces no, queda mas junto y mas chico. A que se debe, y como solucionarlo?
Hola Oscar, como siempre esta genial el video... Enhorabuena, fui miembro tuyo unos meses y me ayudaste a resolver unos problemas que tenia con la academia online que estaba implementnado, no se si te acuerdas... Pero en fin, queria saber como quitarle el error que tiene la cabecera al cargar... O sea, cuando cargo una cabecera que tiene muchos modulos en ella, mientras carga se ve todos los modulos pero mi extendidos y con el fondo blanco, son unas decimas de segundo, pero se ve por un momento mal la web... Por supuesto si tengo que pagarte por este consejo lo haré con gusto, ya que llevo muchos dias intentando solucionarlo y no lo consigo... Muchas gracias por tu atención. Un abrazo.
Hola Antonio qué tal, un gusto saludarte. Para solucionar el "flasheasho" de la carga Dirígete a Divi / Opciones del tema / Integración y en Agregar código al «head» de su blog pegas el siguiente script: var elm=document.getElementsByTagName("html")[0]; elm.style.display="none"; document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });
@@OVDIVI Hola de nuevo Oscar, tremendo lo tuyo, lo entiendes a la primera, y a la primera que lo resuelves, genial... Ojala supieras programar en Python ya que tengo varias proyectos en marcha en telegram que requieren de python y estoy teniendo muchos problemas con los programadores... Bueno al lio, no recuerdo tu email / usuario de paypal para invitarte a un cafe, por favor házmelo saber cuando puedas... Muchas gracias por tu atención Oscarn te estoy muy agradecido maestro. Un abrazo.
Hola Oscar, de nuevo gracias por el video, tengo una pregunta, si en vez de la llamada a la acción que usas, yo quisiera usar un modulo de buscador, cómo debe modificarse el código que cuando se adapte a tableta o celular, el icono hamburguesa se quede a la izquierda tal cual como lo haces tu pero que el buscador se posicione a su lado inmediatamente izquierdo, en vez de ubicarse dentro y abajo del menu desplegable me hize entender?
que los dos elementos (el modulo buscador y el icono hamburgesa) queden al lado derecho, pero que el modulo buscador quede al lado izquierdo del icono hamburguesa
@@jedolz Hola Jorge tendrás un boceto (no importa si es a lápiz) o tu diseño para que me lo muestres? Así me doy mejor idea y te puedo ayudar con gusto :)
Hola Alexis, gracias. Puedes usar las opciones de divi sticky para aplicar un color de fondo al hacer scroll, revisa este tutorial: ua-cam.com/video/VVMxoluQh34/v-deo.html
Hola Carlos, podría ser por la configuración que tienes en divi performance. Asegúrate de tener esta configuración en tu sitio: academia.ovdivi.com/wp-content/uploads/2024/01/divi-performance-configuracion.png
Hola Oscar, quiero colocar un menú de categorías desplegable en mi blog, pero no logro centrarlo, al momento de desplegarlo sale desalineado y los colores del texto del menú sale completamente blanco. Ojalá pudieras ayudarme. Bendiciones...
En las versiones recientes de divi hay una opción que se llama Divi Sicky, puedes usar esta opción en lugar de Fixed: ua-cam.com/video/VVMxoluQh34/v-deo.html
Cómo lo mencioné en el video: ME DESESPERÉ AL ESPERAR ESTA CARACTERÍSTICA DE DIVI Y ME ADELANTÉ 😅. Pero no se preocupen he realizado un nuevo tutorial para recrear este menú pero ahora con Divi Sticky Options que viene con divi en su versión 4.6: ua-cam.com/video/VVMxoluQh34/v-deo.html Todavía pueden aprender cosas con este tutorial ya que en este tutorial también les muestro cómo trabajar desde cero un menú con el theme builder de divi, les muestro como insertar un botón de llamada de acción al menú en móvil, les enseño cómo cambiar el icono hamburguesa del menú por una "X" al estar abierto y trabajamos el menú para adaptarlo a responsive correctamente. Así que hay mucho por aprender de este video todavía. ¡Saludos! ✌️✌️✌️
Amigo, eres un verdadero CRACK! consigues que un torpe total haga aunténticas maravillas. Felicidades.
jaja muchas gracias. Todos los días aprendemos cosas nuevas. Un abrazo Emili. ¡Saludos!
Hay gente que hace buenos tutoriales, pero tu tienes vocacion hermano, gracias.
Muchas gracias por el apoyo Jesus, me inspiras a seguir creando más y más contenido. Un abrazo 🤗
WOW, 25 DE ENERO DE 2024 Y FUNCIONA PERFECTO. Solo echo en falta poder poner el menú alineado a la derecha en la versión de escritorio, que nno viene por defecto.
Hola 👋 si sigue funcionando. Es la ventaja de utilizar código en lugar de plugins 🤩
Para alinear tu menú a la derecha solamente usa las opciones de alineación del texto. Entra a los ajustes del menú, diseño / texto y alineas a la derecha.
Un abrazo
@@OVDIVI wow todo un honor que me respondas. gracias. No tengo la opción por defecto de alineado a la derecha, solo viene centrado, izquierda y logo centrado en línea. Es muy raro...
ya lo resolví, no con esa opción pero si con un pequeño código que me hizo la ai de divi
@@jolgito cuando te vas a los ajustes del texto, debes alinear el texto a la derecha. Es decir seleccionas la alineación del menú a la izquierda pero el texto con alineación a la derecha
Muchas gracias por toda la información que entregas muy agradecido y todo muy claro!
Muchas gracias por las palabras. Seguimos con todo 👊 Saludos
mil y mil gracias, me atrevo a decir que eres el unico en youtube habla hispana que explica realmente las funcionalidades de DIVI y sus complicaciones a resolver, muchos exitos gracias ti mejore mi web 🚀🚀🚀🚀🚀🚀
Muchas gracias por el apoyo. Seguiré creando mucho contenido para divi. Se vienen cosas geniales. Te mando un abrazo.
eres el mejor 🤝@@OVDIVI
Hola Oscar. ¡¡¡¡¡¡ MUCHAS GRACIAS !!!!!!! por este increíble, maravilloso y creativo video sobre un menú. Está muy bien explicado, ya que no tengo ni idea de código y lo he podido aplicar a mi página sin ningún problema. Gente como tú, es la que nos anima a los que estamos empezando con el Diseño Web a seguir aprendiendo y disfrutando de ésto. De nuevo, muchas gracias por tus desinteresadas aportaciones a UA-cam.
Hola Roberto, muchas gracias por tus palabras. Seguiremos creando mucho contenido para el canal Roberto. Espero sigas al tanto. Un abrazo
Oscar, tu tutorial es de las mejores cosas que me pasaron en mi vida web. Gracias gracias gracias!!!!
Muchas gracias por esas palabras VOR. Seguiremos así, un abrazote.
Eres increible, siempre nos sacas de apuro, nuestro heroe de Divi
Muchas gracias por el apoyo Jennifer :) ¡Un abrazo!
Excelente. Llevaba una semana buscando ocultar el menú. Muchas gracias. Saludos desde Colombia.
Espero te haya sido útil Sasukewz. Un abrazo :)
Maravilla, y bien explicado, enhorabuena. Te sigo. Me sacas de dificultades y haces divi más sencillo.
Excelente :) muchas gracias por el apoyo. Seguiré creando más contenido sobre divi. Un abrazo.
Muchas gracias por este tutorial, hacía tiempo que buscaba algo así y aunque largo, lo tengo solucionado y muy bonito 👏👏👏👏👏👏👏
Que genial que te ha servido. Te mando un abrazo. Saludos
hola oscar! tu contenido es unico ...estoy creando mi promera web pero de todos los video que he visto y te aseguro que han sido artos y horas y horas ! nada como tus tutoriales definitivamente me suscribo a los premium ... muchas gracias por tanto👏👏👏
Muchas gracias por las palabras David, seguiré creando mucho contenido para todos ustedes. Un abrazo 😀
El mejor tutorial que he visto en mucho tiempo, súper bien explicado FELICITACIONES ! ! !👏👏👏
Muchas gracias por el apoyo Carlos. ¡Seguimos!
Gracias! ... Siempre quedo gratamente sorprendido con tu manera de explicar y trabajar ... Saludos desde Jalisco!
Muchas gracias Manuel, vamos a seguir por la misma línea. Un abrazo hasta Jalisco :)
Gracias por sus videos, excelente...lo único raro es la voz, antes no le hacía así...pero, bueno, quiere tener su estilo, o eso le han recomendado...pero que sea original, no inventado a la fuerza...gracias
Hola David, muchas gracias por la observación. El video es del 2020, obviamente he tratado de mejorar conforme avanzo. Considero que los últimos ya son más naturales, tu me dirás.
Un abrazo David :)
Muchisimas Gracias Oscar en verdad eres un Crack.!
Gracias Jose Gustavo. Un abrazo!!
Hola Oscar, muchas gracias por este excelente tutorial y compartir tu conocimiento. Estaba creando un menú desde cero y por más tutoriales no lograba darle el aspecto y funcionalidad que quería, encontré tu tutorial, he seguido el paso a paso y ha quedado perfecto mi menú. ✨🤗
Genial Oreka Estudio. Me alegra saber que este tutorial si te fue funcional. Seguiré creando más de este estilo. Un abrazo
@@OVDIVI Hola Oscar soy Lauren. Una consulta, el menú está fucionando muy bien, pero mi página tiene carrito y en los productos la apariencia del menú se distorciona, ¿alguna recomendación?
@@OrekaEstudio Hola Lauren. Comparteme el link de tu página y te apoyo con eso 😇
Gracias por este video Oscar, la verdad es que es genial que hagas este tipo de tutoriales, saludos.
Gracias Maximiliano, seguiremos creando más y más contenido amigo. ¡Saludos!
@@OVDIVI Estaré al pendiente de ello, al igual en Academia OVDivi
Hola, gracias por el tutorial, una duda, como harias el menu en diseño con caja que te da en personalizar
Hola Marco Antonio, creo que te he respondido por el chat de soporte. Te compartí un CSS para ajustar el menú a la "caja" o contenedor...
Increíble! Muchas gracias por esta aportación ✨✨
Gracias Tania, un abrazote!
Muchisimas gracias de todo corazón. Hacia días que buscaba como render responsive el menú con Divi.
Gracias también a ti Ava M. Espero el tutorial te sea útil. Un abrazo.
@@OVDIVI si, mucho.
De hecho acabo de suscribir a tus cursos Divi en tu web Academia. Me están cambiando la vida ya que tengo una web que hacer y me faltaban unos elementos para conseguirlo 🙏
Muchas gracias! Me ha costado pero funciona perfectamente, lo unico es que en movil al desplegar el menu sale el menu casi desde la mitad del logo, me gustaria lograr que salga desde donde termina el logo para que se lo vea completo, muchas gracias!
Puedes ajustar la posición con este código:
.et_mobile_menu {
top: 50px !important;
}
Ajustas el valor de 50px y el código lo puedes pegar en Divi / Opciones del tema / CSS Personalizado...
Gracias, excelente explicación
Muchas gracias Gabriel. ¡Saludos!
Hola, como siempre Oscar, tus tutoriales son de primera y aprendo muchísimo, gracias!. Por alguna razón no logré que me tome el estilo de color en el botón CTA cuando está sticky. Y por otro lado, aviso por si a alguien más le sucede igual, cuando se usa Woocommerce, la tienda/store (y tal vez otras páginas, ya me iré enterando) aplican otras clases a los divs del header, la manera de ir resolviendo es buscar con la herramienta de inspeccionar y comprobar qué clases agrega en, por ejemplo, la página del store o tienda, y anotar esas clases con las correcciones (paddings, width, etc) en el CSS personalizado. Slds!
Hola María Inés, compárteme la url y le doy un vistazo para ver que está pasando.
Sobre el cambio de clases de divi cuando se usa woocommerce tienes completamente razón. Es algo que da algunos dolores de cabeza porque en las páginas de la tienda y los productos de woocommerce algunas clases pueden ser diferentes y por lo tanto no toma algunos estilos. La solución a esto es como lo comentas, hay que inspeccionar las clases y ver cuales son las clases que agregar.
Gracias María Inés.
Hola Oscar, gracias por detenerte en mi comentario.
En esta ruta publiqué una copia del header que hice con tu tuto: sandbox.buenosrecursos.com/
desde ya muchas gracias!
@@tvmines Al parecer el CSS que debes usar para personalizar el botón CTA al hacer scroll es este:
body #page-container .seccion-menu-scroll .et_pb_button_0_tb_header {
color: #ffffff!important;
border-color: #6A904E;
background-color: #6A904E;
}
Prueba y me comentas como te va. Saludos.
@@OVDIVI estaba por responderte! se me prendió la lamparita y estaba probando usar !important!!! XD y estaba por escribirte.
body #page-container .seccion-menu.seccion-menu-scroll .et_pb_button {
font-size: 0.8rem!important;
transition: all 1s ease;
background-color: #6a904e;
color: #f7f0eb!important;
}
👆 este funca, ahora me fijo el tuyo, porque hay clases que yo no usé.
el tuyo funciona pero agregando ".seccion-menu"
genialisimo! gracias Oscar
Buenisimo Oscar, muchas gracias.
De nada amigo. :D sobre el navegador, en el tutorial utilizo Firefox pero con Chrome también sale
solo digo que esto es un santo grial, gracias!
pd: he aprendido mucho mas en este video que no en el ciclo xD
@@leomaximo19 jaja me alegra leer esto Leo, espero mis tutoriales te sigan aportando mucho. Seguiremos creando mucho contenido. Un abrazo 🤩
Ufff! increíble!!
Excelente video, me sirvió mucho para un proyecto que estoy realizando. Llevaba días probando formas de personalizar el menú para móvil, incluso perdí dinero con un plugin que no sirvió para nada de lo que ofrecía (lamento mucho eso...) y justo cuando estaba por tirar la toalla aparece tu video en youtube, en serio muchas gracias Oscar! 👏👏👏👏👏
¡Genial Jorge! Qué bueno que te ha servido amigo, de eso se trata. Te entiendo Jorge, crear un menú con el generador de temas de divi no es tan intuitivo sobre todo en responsive. Espero y este tutorial te haya aclarado algunas cuestiones en móvil y me alegra mucho saber qué te ha sido más útil qué un plugin 💪💪💪
wow eres el mejor muchas gracias, ya tienes una nueva suscriptora, Dios te bendiga.
Muchas gracias por el apoyo Ada, un abrazote. :)
EXCELENTE Oscar !!!!!!!!!!!!!! Saludos
Saludos Martín!
gracias crack!!! comentarte que tuve problemas con la nueva opción de stiky al pasar por algunas secciones con algunos efectos, así que con este video quedo exelente !!!!
Genial Pedro, lo bueno tenemos alternativas por si con algún método no se logra :)
Como siempre... Excelente tutorial... Fantástico... Muchas gracias por el aporte...!!!
Gracias Omar, espero te sirva en tus proyectos. Un abrazo
ERES UN MAQUINA SIGUE ASIIIIIII EXITOS
Muchas gracias Jefferson, seguiremos creando contenido para divi 😄
Holas. Excelente tutorial. en el ordenador anda barbaro pero en el movil, se superponer el menú fijo sobre la sección. como puedo solucionarlo? Gracias
Hola, me compartes la url de tu web para ver lo que comentas por fa?
brother muchísimas gracias por tu tuto :3 me ayudaste muchísimo
Genial Cristopher, me alegra que te haya ayudado el tutorial. Un abrazo
Genial, como tu dices siempre. Claro, bien hecho y funcional.
Sí Angel, genial! jaja. Un abrazo estimado amigo. Saludos.
Excelente trabajo, solo quisiera consultarte sobre un problema que tengo. Cuando creo la cabecera desde el generador de temas, cuando quiero colocarle una transparencia siempre me coloca el encabezado sobre el layout, no esta superpuesto por lo que me queda un fondo blanco. gracias por la respuesta.
Hola Emilio, muchas gracias. Intenta colocar una posición fija a la sección, de esta manera el menú estará por superpuesto de la sección de abajo. También puedes probar con las nuevas opciones sticky de divi.
Gracias Oscar siempre tienes la solución.
Gracias a ti David, un abrazo :)
La verdad muy buen tutorial, excelente. quisiera hacerte una consulta. si en ves del botón que usas en el menú, yo quisiera colocar el modulo de redes sociales que cambios debo hacer para aprovechar el mismo código que nos brindas para el menú con el botón? desde ya quedo agradecido por tu respuesta. saludos
Hola Johan qué tal, muchas gracias.
Prácticamente debe ser lo mismo, solo reemplaza el módulo botón por el módulo de seguir en redes sociales. Cuándo lo tengas hecho y si tienes algún conflicto me escribes y revisamos tu sitio.
@@OVDIVI gracias por responder, de hecho estuve viendo el tutorial donde explicas lo mismo pero con las opciones de stik de Divi. En ese caso como haríamos la adaptación a móviles para que se vea cómo en el tutorial que lo enseñas a hacer con código..?
@@johanbenitez9872 Debería probarlo, para entender cómo hacerle jaja. No tengo la respuesta pero me puedes compartir la url para darle una revisada e incluso intentarlo.
@@OVDIVI Hola Oscar, gusto en saludarte. Por aqui retomando la actividad nuevamente. Sabes, he cambiado el modulo de llamado a la acción que indicas en el tutorial por el de seguir en redes. Pero claro, al haber cambiado el modulo los estilos de scroll y de colocar el modulo dentro del menú desplegable de la vista de tabletas y celulares, no se aplican. Hasta el momento no he sabido resolverlo, podrías indicarme como hacerlo?
@@johanbenitez9872 No entiendo muy bien Johan, cual es el link de tu web?
excelente, muchisimas gracias
Muchas gracias Jesús, un abrazo :)
Hola Oscar! Muchas gracias por el video, es excelente y me ayudo a realizar el nuevo menu. No obstante, tengo algunos errores al implementar el código, la hamburguesa del menu desde el movil me queda centrada y no a la derecha y cuando abre el menu no abre en pantalla completa! Agradezco tu ayuda, saludos desde argentina!
Hola qué tal, cual es la url de tu ejercicio. Lo inspecciono para ver que sucede
Oscar muy buen trabajo una pregunta como puedo colocar dos botones uno junto al otro en ese menu principal?
Tengo un snippet para lograr eso, lo encuentras en esta sección de mi página: ovdivi.com/divi-snippets/
En el menú > Botones...
Muy buen vídeo Oscar, me ayudó muchísimo, solo me falta hacerlo transparente cuando este arriba, pero aún así tienes mi like y un nuevo suscriptor. Gracias, cuídate.
Hola Alberto tengo otro tutorial que te podría ayudar: ua-cam.com/video/09soIRll45Q/v-deo.html
También pudes darle un vistazo a las nuevas opciones de divi sticky: ua-cam.com/video/VVMxoluQh34/v-deo.html
Excelente muy buen aporte. Como siempre. Muchas gracias.
Genial Gabriel. Gracias a ti por siempre estar al pendiente. Saludos
Hola gracias por tus videos tenes algún video donde se vea como insertaste en tu pagina tus trabajos. Te felicito por tu canal muy lindo
Hola Nair, ¿Te refieres a la página de oscarviedma.com?
@@OVDIVI quisiera exibir en mi pagina diferentes diseño para que el cliente vea y asi elija algún diseño
@@nairfillol9946 Puedes usar "Proyectos" de divi para crear tu portafolio y mostrárselos a tus clientes.
Hola Oscar Vielman, gracias por este maravilloso tutorial. Quiero preguntar ¿Tienes algún tutorial que enseñe como hacer cabeceras personalizadas distintas para distintas páginas? que no sea la global. Gracias de antemano por tu respuesta ⭐⭐⭐⭐⭐
Hola Guillermo, en los tutoriales ya tenemos realizados muchos menús, pero para realizar cabeceras para páginas especificas es prácticamente el mismo proceso desde el propio generador de temas, solamente tienes que asignar la cabecera en las páginas que deseas mostrarla.
Me encanto! muchisimas gracias
Gracias también a ti Argelia. Un abrazote
Eres el mejor!!!!!
Gracias por el apoyo Jonathan! :D
Hola Oscar buen video, como podría hacer que al momento de hacer scroll se muestra otra barra de navegación muy distinto al inicial. Gracias por tu respuesta.
Hola Adali, puedes probar las nuevas opciones de divi sticky. Tengo un tutorial al respecto: ua-cam.com/video/VVMxoluQh34/v-deo.html
Seguro logras algo como lo que deseas.
Hola! muy buena explicación, como siempre!, te quería hacer una pregunta, mi menú tiene bastantes pestañas, por lo que cuando está en responsive no hace scroll el menú, llega hasta un cierto punto y no sigue bajando el menú, hay alguna manera de solucionar esto? te agradezco de antemano, saludos
Hola Jose Cardenas, sí, puedes crear un menú colapsado, te recomiendo este tutorial en inglés de un colega: joshhall.co/how-to-create-a-divi-mobile-menu-collapse-effect/
Genial bro! Muchas gracias por este aporte 👍
Gracias a ti Mortiz. Seguimos con todo! 💪
Hola, genial el tutorial Oscar. Pero tengo una duda. Intente mezclar este tutorial con el de hacer que sea transparente y cuando bajes cambie de color a blanco, pero se queda transparente. Obviamente cambie las clases y todo como si fueran de este tutorial pero no se solucionó. Como podría hacer?
Seguramente hay una clase que está "pisando" a la que haz colocado y por eso el color no se reemplaza. Podríamos usar un !important
¿Cual es el link de tu página?
buenisimo. Gracias !
Gracias Giselle, ¡Seguimos!
Que código css hace que el menú se centre. Osea la cabecera agregué una sección dividida en 3 columnas como lo que muestras en tu vídeo. Por un lado logo, centro el menú principal y derecha el botón. Sucede que el menú principal se posiciona al margen superior. Lo podría aumentar margen superior y tantear pero creo no es lo correcto.
Cómo hago para que quede como tú barra de menú.
Puedes hacerlo cómo mencionas mientras te de el resultado deseado está bien. La otra es hacerlo con código, en los ajustes de la fila o columna > avanzado > CSS Personalizado > Elemento principal usar esto:
display: flex;
align-items: center;
Funciona teniendo Divimenu Flex de DonDivi? Dado que lo utilicé y cuando puse el menú en fijar, no me aparecian los submenus que añadí con Divimenu Flex.
Hola Andrés, la verdad no sabría decirte si funciona con DonDivi. Si no te funciona intenta con las opciones sticky que vienen por defecto con divi: ua-cam.com/video/VVMxoluQh34/v-deo.html
@@OVDIVI Gracias, pero actualmente ya se puede hacer sin necesidad de utilizar códigos CSS, directamente desde diseño con la configuración de Sticky, es más rápido y fácil.
Genial!!! Como siempre. Muchas gracias
Un abrazo :)
son un grande my bro
Muchas gracias por el apoyo Pedro :)
Excelente tutorial, muchas gracias, pero queria consultar, en la página home sale igual que el tutorial, pero en las páginas en mi caso de tienda el menú sale muy diferente, que pudo haber pasado?, gracias
Hola qué tal, ese problema es un problema de estilos con divi. En las páginas de tienda cambia los nombres de las clases y hay que cambiarlas o colocar en el código el "!important" delante de cada valor en el CSS. Es cosa de inspeccionar el código y ver que clases son las que cambian.
Puedes compartirme la url de tu web y te apoyo con eso :D
hola al agregar la clase CSS no toma el estilo del botón solo sale el menú presupuesto pero nada mas y puse exactamente como dijiste clase btn-principal en el sitio que se debía
Hola Hardroco puede deberse a la cache, intenta desactivar la generación de CSS Estático desde divi > opciones del tema > constructor > avanzado, a ver si esto ayuda.
Hola Oscar buenos dias como se puede hace una galeria de de producto de Divi se habrá en forma despleglable para ver las fotos en seccion ya que para cada producto tengo 30 imágenes o mas ya que son fotos de un fabricante y de un catalogo hay muchas fotos eso hac e con codigo divi o como se hace esioo me podrias hechar una mano y en que tutorial haces eso o donde se puede encantrar o que tipo de codigo es para hacer eso
Hola Juan Enrique, la verdad no tengo algo para hacer eso porque es muy específico. Pero pensando rápidamente se me ocurre que puedes hacerlo mediante pop up, cada galería la puedes mostrar en un pop up y esto lo logras con este plugin: es.wordpress.org/plugins/popups-for-divi/
Muy útiles los códigos. Gracias!!
Un abrazo Natalia.
Hola Óscar:
Gracias por el tutorial ya lo he aplicado y mis proyectos han quedado excelente. Pero ahorita tengo esta situación: el proyecto que estoy desarrollando tiene dos secciones en el menú y al fijarlo se sigue sobreponiendo sobre todo en la pagina de tienda tapando parte de la barra lateral y alejando demás aunque eliminé los espacios el contenido del borde del menú. Eliminé todo e hice un menú como indicas en el tutorial de una sola sección y aún así sigue el mismo error. Tú sabrás a qué se debe? Nuevamente gracias por este y los otros tutoriales. Te mereces 7 estrellas ⭐⭐⭐⭐⭐⭐⭐
Hola Guillermo, para saber que sucede sería genial pueda revisar tu web. ¿Cuál es el link? Le puedo dar un vistazo. Saludos
Muy buen tutorial, lo único que le faltaría es el código para contraer el menú en movile, para evitar que aparezca desplegado. Podrías agregarlo?
Hola Pablo, muchas gracias. Para colapsar el menú te comparto este post de un colega de habla inglesa, es muy fácil de seguir: joshhall.co/how-to-create-a-divi-mobile-menu-collapse-effect/
@@OVDIVI Excelente! funciono perfecto, muchas gracias!
Hola como estas, hago todo el proceso de crear en el generador de temas el encabezado, al guardarlo me voy a la pagina que ya tengo hecha pero no me aparece por ningun lado, que debo hacer?
Hola, recuerda que lo debes asignar como encabezado global y siempre la primera vez que se edita un layout debes guardarlo no solo desde el constructor visual si no que también desde el mismo generador de temas.
Hola de lo mejor muchas gracias chevere el menú hamburguesa tuviese el nombre menú se puede ?
Claro que se puede, date una vuelta por mi página de snippets, ahí tengo varios trucos y uno de ellos es el de colocar la palabra MENU al menú hamburguesa: ovdivi.com/divi-snippets/
Hola Oscar! Primero quiero decirte que da gusto escucharte, porque es obvio que disfrutas mucho lo que haces, y lo contagias, gracias. Y ojalá puedas contestarme esta pregunta: ¿Hay manera de que este encabezado global construido con Theme Builder, quede sólo visible en escritorio, mientras en tablet y celular permanece el menú por defecto? Mil gracias de antemano :)
Hola Aurea muchas gracias 😀
Muy buena pregunta, sería genial pero no es posible 😢 Se puede ocultar el menú creado desde el theme builder para tabletas y móviles pero no se puede mostrar el por defecto de divi.
Aunque el menú por defecto de divi es practicamente el mismo que el módulo menú. De hecho puedes hacer tus dos menús desde el propio generador de temas y mostrar uno en escritorio y el otro en tabletas/teléfonos...
Muchas gracias por el aporte. Llevo un tiempo siguiendo tus tutoriales. Me gustaría preguntarte si hay manera de modificar el punto de ruptura del menú en la tableta, para que se siga viendo en letras y no con el símbolo de tres líneas. Gracias! :)
Hola Sarai muchas gracias.
Sí, mira sigue estos pasos:
1. Agrega un nombre de clase CSS al módulo menú.
2. Copia el siguiente código y lo pegas en el Personalizador de temas > CSS Adicional.
@media(max-width:980px){
.ov-nombre-clase .et_pb_menu__menu {
display: block;
}
.ov-nombre-clase .et_mobile_nav_menu {
display: none;
}
}
3. Reemplaza “ov-nombre-clase” por el nombre de clase que le colocaste al módulo menú.
4. Cambia 980 por la resolución desde donde quieras desactivar el menú hamburguesa.
Gran trabajo. Una pregunta, porque debo trabajar con Divi y no con Elementor? Gracias por tu respuesta.
Hola Abel qué tal, puedes usar con el que mas cómodo te sientas, a mí en lo personal lo tengo todo con divi, me encanta la usabilidad, la experiencia que me brinda al diseñar un sitio web, puedo hacer prácticamente cualquier sitio. Y lo mejor, solamente invertí una vez en divi, lo tengo de por vida, así que cada sitio que realizo para mis clientes es prácticamente un ingreso del 100%. Contrario a elementor tienes que renovar año con año para tener un sitio seguro y actualizado. Los dos son buenos pero me quedó con Divi. :)
Tremendo.... gran tutorial, gracias
Muchas gracias Daniel. ¡Un abrazo!
Hola buenas!, disculpa master, de casualidad tienes algún css para hacer que cuando baje se oculte, y cuando suba vuelva aparecer ? Todo esto en mobile
Hola Kevin tengo un tutorial para lograr eso: ua-cam.com/video/KEwBzIrbYng/v-deo.html
@@OVDIVI gracias! Que te vaya super!
Buenísimo muchas gracias Oscar
Gracias BliNk :)
Buenos días Oscar
Enhorabuena por el tutorial, ha sido un enorme salto cualitativo a mis diseños, gracias!!
Tengo una duda, espero la puedas resolver
Una vez estamos en el menú hamburguesa, resulta que mi menú en algo largo, se extiende hasta el final de la pantalla, y no se puede ver los últimos links.
Pero no puedo hacer que el ratón baje para ver lo que hay al final, espero explicarme bien.
Cómo recomiendas solucionar esto?
Gracias de nuevo
Hola muchas gracias, para el problema que me comentas puedes usar un menú colpasado. Este menú lo puedes lograr con este tutorial de Elegant Themes: www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder
También tienes estas otras alternativas:
www.peeayecreative.com/how-to-collapse-divi-mobile-menu-submenus/
joshhall.co/how-to-create-a-divi-mobile-menu-collapse-effect/
Hola como puedo poner el menú transparente y al hacer scroll que cambie a negro?
Hola Nancy, tengo un tutorial para eso: ua-cam.com/video/09soIRll45Q/v-deo.html
También en las versiones recientes de divi ya lo podemos hacer con la opción divi sticky: ua-cam.com/video/VVMxoluQh34/v-deo.html
Hola, muchas gracias por el tutorial. Tengo una duda, como puedo ahora poner una barra de submenú por encima de este menú fijo. Con elementos como icono telefono, correo electrónico e idiomas? Intenté hacer lo pero no se muestra. ¿Podrías ayudarme? gracias.
Hola Oriol es mu simple, solamente desde el generador de temas agregas otra sección arriba de la sección de este menú y la empiezas a diseñar con con los módulos correspondientes. :)
Genial!! Estoy nuevo en DIVI, tengo una inquietud, si me puede asesorar!! este Pluging
Countdown Block, como se podría integrar en un bloque de DIVI, puede ser obvia la respuesta, pero he buscado mucho y nada que encuentro respuesta!! De verdad muchas gracias!!!!
Hola, no tengo experiencia con el plugin pero debe tener un código corto o shortcode que debes insertar en un módulo código de divi.
Buenísimos videos, Oscar. Te quería hacer una pregunta, y si quisiéramos el menú transparente nada mas aterrizar en la web y cambiara de color al hacer scroll? sería posible con este modelo? Gracias de antemano. Saludos dede España!!
Hola Carlos, muchas gracias. Tengo un tutorial al respecto amigo, quizá te ayude: ua-cam.com/video/09soIRll45Q/v-deo.html
@@OVDIVI siii, lo seguí al completo, Oscar! Muy bueno tb y es el que tengo ahorita. Pero me preguntaba si le podría añadir el efecto de minimizarse al hacer scroll a usando la configuración del anterior?
@@carlosr.194 También es posible con las nuevas opciones de divi sticky. Mira este otro tutorial y también puedes lograr todo lo de este y el otro tutorial que te compartí: ua-cam.com/video/VVMxoluQh34/v-deo.html
Muchas gracias por tus tutoriales, tengo una consulta tengo un menú que tiene submenus y cuando veo el menú en responsive estos menús aparecen desplegados y no se ve la totalidad del menú ya que cuando hago scroll baja es la pagina más el header sigue fijo por lo que no puedo moverme por el menu del celular sabes que podria estar pasando y como solucionarlo?
Hola Jonathan al parecer lo lograste colapsando el sub menú :) ¡Genial!
Como hago para agregar un icono en cada apartado del menú. Es decir un icono para INICIO, otro para CONTACTO, etc.
Hola Estaban, no tengo un tutorial para eso pero aquí te dejo un tutorial en inglés para que puedas hacerlo: www.peeayecreative.com/how-to-add-icons-to-the-divi-menu/
Hola! muy buena explicación, como siempre!!. Agradezco mucho que nos compartas toda esta información y conocimientos. Tuve un problema: al deslizar en pequeño medio menú se queda arriba. No se si es porque mi logo es cuadrado y lo crecí mas de lo que está el tuyo, ya que a la medida que sugerias en tu video quedaba muy pequeño... hay algún lugar donde pueda modificarlo para que no sea tan pequeña la franja al hacer scroll?
Hola qué tal, muchas gracias. ¿Tienes tu sitio en línea? para revisarlo. O mira este otro tutorial dónde recreamos este menú con divi sticky, a lo mejor te sirve: ua-cam.com/video/VVMxoluQh34/v-deo.html
Hola! esta genial el video!! pero tengo un problema...el menu iba genial hasta hacer poco donde el menú hamburguesa en tablet y móvil dejaron de funcionar los enlaces. ¿Porque puede ser?
Hola Laura, que raro. A ver compárteme el link de tu web para inspeccionarla. Si no te deja pegar la url puedes hacerlo con espacios jeje
Hola! Gracias por el tutorial. Una duda, el menu hamburguesa no funciona los enlaces
se desactivo
Hola profesor. No logro entender bien su duda. ¿No te funcionan los enlaces?
hola, muchas gracias por tu vídeo, he realizado todos los pasos y los hice siguiendo el orden que propones en el vídeo pero no logro que aparezca el menú creado en las páginas. me podrías recomendar una solución para este inconveniente, por favor
Hola Daniel, recuerda que debes crear el menú desde Apariencia / Temas y después en tu plantilla del generador de temas debes asignarlo. No olvides guardar cambios en el generador de temas...
Con las nuevas actualizaciones ya no es necesario poner todos los códigos?
Hola Enrique en las nuevas versiones puedes hacerlo tal y como lo hacemos aquí, pero también con divi sticky podemos lograrlo: ua-cam.com/video/VVMxoluQh34/v-deo.html
Increible tutorial!! Un abrazo OV divi (soy piero)
¡Genial Piero! Saludos amigo
Hola, muchas gracias. Me pasa que cuando agrego el CSS para que al hacer scroll reduzca el tamaño del menú, en mi caso se agranda el menú, como puedo solucionarlo??
Qué raro Diego, recuerda que debes modificar los valores. ¿Cuál es la url?
hola, me sucede lo mismo, pudiste solucionarlo?
O.o! excelente video!!! una vez mas gracias por estos tutoriales... queria hacerte una pregunta. ando desarrollando un sitio que es para los empelados de una empresa. les permiten hacer pedidos de lo que la empresa venden pero teine una restriccion de productos por categorias. necesito hacer una tabla que me muestre la categoria. la cantidad maxima que pueden pedir y cuantos productos por categoria les quedan disponibles mientras hacen si pedido. tienes idea de como puedo lograr eso... o si hay algun plugin que lo haga... o como puedo crear ese tipó de tabla?
Hola Pedro qué tal, gracias. En cuanto a tu consulta la verdad nunca he realizado algo cómo lo que deseas, desconozco si haya un plugin que te pueda servir amigo. Creo que sería mejor hicieras esa pregunta en un grupo de wordpress en facebook, estoy seguro que hay alguien que ya lo hizo y te puede ayudar mejor que yo.
Disculpa Pedro por no poderte ayudar, sí me entero de algo te aviso. Un abrazo.
gracias
De nada :)
Excelente tutoríal como siempre, lo guardare en mi biblioteca. Sin embargo por ahora estoy probando el divi toolbox (Solo prestadito y sin licencia XD) y el menú sale fácil. Ya puse la X en el menú móvil al desplegarse gracias a ti. Lo que no puedo adaptar es que el botón de CTA en escritorio, aparece el fondo del botón que tu creas por detrás del que yo tengo. Puse parte del código que indicas
/* Estilos botón CTA y personalizacion en menú hamburguesa */
body #page-container .btn-principal a {
border-color: #d86411 !important;
background: #d86411 !important;
}
sale OK en móvil al desplegar. Pero como dije en desktop me aparece detrás del que yo cree en Toolbox.
Alguna idea de como hacerle para que no aparezca en desktop, pero con css. pues como mi CTA no fue creado como lo haces, no puedo indicar que solo aparezca en móvil y tablet.
Help please, Si se puede. Like
Hola PAT Gómez genial que te ha sido útil. En cuanto a tu consulta envíame tu sitio para revisar la clase del botón y te pase un código para eliminarlo en Desktop.
@@OVDIVI Genial amigo. Envíame un correo a patferjob@gmail.com y a ese mail te envío el link de mi sitio. esta en construcción, nada especial jejeje
@@patgomez5243 aquí tienes mi correo hola@ovdivi.com :)
@@OVDIVI Gracias amigo. Bueno, te cuento que seguí curioseando en divi toolbox y puedo hacer todo lo que quería hacer y un poco mas. Igual guardo tu correo.A ver si como están las finanzas y puedo entrar a tu academia. ,as que nada para que me apoyes en consultas especificas. Cuídate 👍
@@patgomez5243 Genial PAT :) Excelente.
Hola. Casi todo me funcionó de maravilla, excepto la imagen que no se reduce... a qué se debe???
¿Te refieres al logo? Probablemente algo este mal con la clase en tu imagen. Habría que revisar tu sitio
Excelente, eres un fenómeno
Gracias amigo. ¡Saludos!
Hola que tal, hay problemas con el responsive. Hay veces que se adapta correctamente el menu al dispositivo y otras veces no, queda mas junto y mas chico. A que se debe, y como solucionarlo?
Seguramente es un detalle específico de tu página, habría que revisar que está pasando. La demo me funciona bien :)
Hola Oscar, como siempre esta genial el video... Enhorabuena, fui miembro tuyo unos meses y me ayudaste a resolver unos problemas que tenia con la academia online que estaba implementnado, no se si te acuerdas...
Pero en fin, queria saber como quitarle el error que tiene la cabecera al cargar... O sea, cuando cargo una cabecera que tiene muchos modulos en ella, mientras carga se ve todos los modulos pero mi extendidos y con el fondo blanco, son unas decimas de segundo, pero se ve por un momento mal la web...
Por supuesto si tengo que pagarte por este consejo lo haré con gusto, ya que llevo muchos dias intentando solucionarlo y no lo consigo...
Muchas gracias por tu atención. Un abrazo.
Hola Antonio qué tal, un gusto saludarte.
Para solucionar el "flasheasho" de la carga Dirígete a Divi / Opciones del tema / Integración y en Agregar código al «head» de su blog pegas el siguiente script:
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });
@@OVDIVI Hola de nuevo Oscar, tremendo lo tuyo, lo entiendes a la primera, y a la primera que lo resuelves, genial...
Ojala supieras programar en Python ya que tengo varias proyectos en marcha en telegram que requieren de python y estoy teniendo muchos problemas con los programadores...
Bueno al lio, no recuerdo tu email / usuario de paypal para invitarte a un cafe, por favor házmelo saber cuando puedas...
Muchas gracias por tu atención Oscarn te estoy muy agradecido maestro. Un abrazo.
Hola Oscar, de nuevo gracias por el video, tengo una pregunta, si en vez de la llamada a la acción que usas, yo quisiera usar un modulo de buscador, cómo debe modificarse el código que cuando se adapte a tableta o celular, el icono hamburguesa se quede a la izquierda tal cual como lo haces tu pero que el buscador se posicione a su lado inmediatamente izquierdo, en vez de ubicarse dentro y abajo del menu desplegable me hize entender?
que los dos elementos (el modulo buscador y el icono hamburgesa) queden al lado derecho, pero que el modulo buscador quede al lado izquierdo del icono hamburguesa
@@jedolz Hola Jorge tendrás un boceto (no importa si es a lápiz) o tu diseño para que me lo muestres? Así me doy mejor idea y te puedo ayudar con gusto :)
@@OVDIVI Oscar encontré otra solución, ya no es necesario, pero mil gracias por ser tan prestante con tus seguidores. Eres el mejor !!
@@jedolz Genial Jorge, mucho éxito en tu proyecto. Un abrazo
En qué parte del CSS se pone el Backgroung-color a la fila pero sólo cuando se aplica el scroll. Muy buen vídeo!
Hola Alexis, gracias. Puedes usar las opciones de divi sticky para aplicar un color de fondo al hacer scroll, revisa este tutorial: ua-cam.com/video/VVMxoluQh34/v-deo.html
hola, lo he estado haciendo paso a paso pero ya en la pagina publicada no respeta los estilos a codigo que se han colocado, que se podria hacer??
Hola Carlos, podría ser por la configuración que tienes en divi performance.
Asegúrate de tener esta configuración en tu sitio: academia.ovdivi.com/wp-content/uploads/2024/01/divi-performance-configuracion.png
Hola Oscar, quiero colocar un menú de categorías desplegable en mi blog, pero no logro centrarlo, al momento de desplegarlo sale desalineado y los colores del texto del menú sale completamente blanco. Ojalá pudieras ayudarme. Bendiciones...
Hola José María, a ver compárteme la url dónde lo estás implementando, quiero revisa que pasa
Que hacer cuando tienes una sección con unos teléfonos sobre el menú? Cuando se le da la opción de posición Fixed el menu cubre la sección
En las versiones recientes de divi hay una opción que se llama Divi Sicky, puedes usar esta opción en lugar de Fixed: ua-cam.com/video/VVMxoluQh34/v-deo.html
Cómo lo mencioné en el video: ME DESESPERÉ AL ESPERAR ESTA CARACTERÍSTICA DE DIVI Y ME ADELANTÉ 😅. Pero no se preocupen he realizado un nuevo tutorial para recrear este menú pero ahora con Divi Sticky Options que viene con divi en su versión 4.6: ua-cam.com/video/VVMxoluQh34/v-deo.html
Todavía pueden aprender cosas con este tutorial ya que en este tutorial también les muestro cómo trabajar desde cero un menú con el theme builder de divi, les muestro como insertar un botón de llamada de acción al menú en móvil, les enseño cómo cambiar el icono hamburguesa del menú por una "X" al estar abierto y trabajamos el menú para adaptarlo a responsive correctamente. Así que hay mucho por aprender de este video todavía. ¡Saludos! ✌️✌️✌️
Crack! Gracias por el aporte. Excelente como siempre.
Muchas gracias Giorgio. Te mando un abrazo.
donde consigo esta programa
¿Te refieres a divi? Puedes adquirlo de su página oficial: www.elegantthemes.com/affiliates/idevaffiliate.php?id=47487&url=41553
Hola, algo me pasa con el menu hamburguesa, me queda a la izquierda aunque haga el paso a paso, sera porque no tengo boton? solo dos secciones?
Hola Sandra, podría ser eso que comentas. ¿Cuál es el enlace a tu web?