Hola Tony sigue los pasos de este tutorial pero ahora reemplaza el código jquery por este: jQuery(document).ready(function( $ ) { $(window).scroll(function(){ var scroll = jQuery(window).scrollTop(); if (scroll >= 100) { $("#menuFijo").addClass("menu-color-fijo-scroll"); $("#menuPrincipal a").addClass("menu-color-enlace"); } else{ $("#menuFijo").removeClass("menu-color-fijo-scroll"); $("#menuPrincipal a").removeClass("menu-color-enlace"); } }); }); Y reemplaza el CSS por este: #menuFijo { background-color: transparent; transition: background-color 0.5s ease; } .menu-color-fijo-scroll { background-color: rgba(0,0,0,0.9)!important; transition: background-color 1s ease; } #menuPrincipal.et_pb_menu ul li .menu-color-enlace { color: #fe4943!important; } Y lo único que tienes que hacer es agregar el nombre de ID "menuPrincipal" al módulo menú.
Muchas gracias por esta información, puedo dar fe que sigue vigente en diciembre del 2024. Tengo una pregunta. Realicé todo el ejercicio y me funciona super bien, sin embargo el menu me aparece en franja blanca al principio y al scrollear se trasnparenta y luego cambia de color, quiero decir que al principio el menu no queda encima de la fotografía, sino mas bien en un espacio por separado. Ocupé un código que encontré en los comentarios // No superponer el menu fijo jQuery(function($){ var headerSection = $('.seccion-menu'); headerSection.wrap(''); var headerWrap = $('.header-placeholder'); var headerHeight = headerSection.outerHeight(); headerWrap.css('height', headerHeight); $(window).resize(function() { headerHeight = headerSection.outerHeight(); headerWrap.css('height', headerHeight); }); }); Pero no resultó, ¿me podrías ayudar? Quiero también agradecerte por el contenido por que es muy bueno y completo. Muchas gracias :)
Hola qué tal muchas gracias por las palabras. Me gustaría revisar tu ejercicio para saber que está pasando. ¿Me puedes compartir la url de tu web? Si no te deja comentarlo aquí puedes dejarmelo en el post de mi blog para que le de un vistazo. Saludos
Hola Oscar, me parecen geniales tus tutoriales, son muy claros y precisos, he aprendido bastante con tus videos, podrías hacer por favor algún tutorial de como agregarle un botón al menú? de antemano muchas gracias amigo y un abrazo!
Hola José Luis qué tal, muchas gracias por las palabras, seguiremos así o mejor si se puede 😁. En cuanto a tu pregunta, si te refieres a tener un botón como llamada de acción, también se puede solamente construye tu sección con una fila de varias columnas, en cada columna insertas un módulo, por ejemplo, tienes una sección 3 columnas, a la columna 1 le insertas tu logo, a la 2 el menú con los puros enlaces, y a la 3 el botón de llamada de acción :)
Excelente y bien claro el video. Lo malo: que Divi no pueda hacer eso de manera directa sin usar código. Avada, con todo lo tieso que quieran, lo tiene...
Hola, muy buena tu explicación, me gusta mucho el modo tan claro y preciso en que explicas. Te hago una pregunta: ¿Por qué el menú me queda sobre el primer modulo que tengo en la página, es decir, el contenido se subió y me queda detrás del menú y no debajo? Gracias
Hola Yaney qué tal, muchas gracias. Para que no se superponga el menú puedes usar el siguiente script en Divi > Opciones del tema > Integración > Agregar código al de su blog: // No superponer el menu fijo jQuery(function($){ var headerSection = $('.seccion-menu'); headerSection.wrap(''); var headerWrap = $('.header-placeholder'); var headerHeight = headerSection.outerHeight(); headerWrap.css('height', headerHeight); $(window).resize(function() { headerHeight = headerSection.outerHeight(); headerWrap.css('height', headerHeight); }); }); Es importante que la sección tenga la clase: seccion-menu Por cierto, también puedes darle un vistazo a este tutorial dónde aplicamos un efecto parecido pero con Divi Sticky Options: ua-cam.com/video/VVMxoluQh34/v-deo.html
Muchas gracias por el tutorial precisamente hace poco vi una opción similar pero me interesaba que el cambio de color tuviera una transición y justo así la hiciste y me gusta que vamos viendo poco a poco como solucionar detalles que surgen de esa forma queda mucho más claro. Quizá no tenga mucho que ver pero me gustaría saber cómo se deben realizar el seguimiento de las visitas de una web, muchas gracias!!
Genial Edd2s que oportuno tutorial entonces :) Me alegra saber que te haya servido, continuaremos así 💪. Para medir las metricas de tu sitio web puedes usar un plugin como: Google Analytics Dashboard Plugin. También está otro desarrollado por Google que se llama Site Kit by Google. Un abrazo.
Hola Cesar, sigue funcionando solamente tienes que utilizar esta configuración en divi performance: academia.ovdivi.com/wp-content/uploads/2024/01/divi-performance-configuracion.png
Me quedo bien, muchas gracias pero tengo una duda, porque la primera pagina es como una general de divi y luego tengo que darle a Inicio para que me lleve a la pagina principal? estoy construyendo una landing solo tengo una pagina
Hola Adrian, seguramente es porque no haz asignado la página de "inicio" a WordPress. Esto lo haces desde tu dashboard de WordPress > Ajustes > Lectura y en "Tu página de inicio muestra" seleccionas > Una página estática > Página de inicio...
Hola Marcelo, gracias. En el video lo menciono, solo tienes que cambiar el color en esta línea CSS: background-color: rgba(0,0,0,0.9)!important; Aquí tienes una página para buscar tu color hexadecimal o rgb: htmlcolorcodes.com/es/
Hola Jholiner la verdad lo pudieron desactivar de muchas formas, no sabría cual han usado. Pero primero revisa que no hayan puesto las páginas como blank page, esto lo ves desde los ajustes de la página. La otra puede ser que lo hayan hecho con código CSS en el personalizador de temas CSS Adicional...
Excelente vídeo, muchas gracias por compartir tu conocimiento. Tengo una duda, mi menú cuenta con páginas subelemento de otra página y al desplegarse dicho menú de páginas se corta donde corta la pantalla, y no se pueden ver haciendo scroll, se queda pegado en esas primeras páginas, el menú tampoco me da la opción de hacer scroll dentro de ese "sub menú". Espero que me puedas ayudar. Saludos!
Hola! muchas gracias! Hice lo que indicas pero en la versión móvil el menú desplegable hamburguesa se muestra muy a la derecha, casi escondido, y con todos los submenús desplegados, por lo tanto no puedo acceder a algunos ítems del menú además de no verlos por completo. ¿Como puedo centrar el menu desplegable, o dejarlo a todo lo ancho del móvil? y esconder los submenús para que se plieguen y desplieguen?
Hola Gabriela, si quieres colapsar los sub menús y ajustar la anchura en móvil te recomiendo este post de elegant themes: www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder
Hola Mizra, sí por supuesto. Dale un vistazo a este tutorial: ua-cam.com/video/z1hXQbfi69E/v-deo.htmlfeature=shared Y a este otro: ua-cam.com/video/DjifH-nJfdY/v-deo.htmlfeature=shared
Estimado, muy bueno, solo una consulta, si quiero que en las demas secciones no sea 100% transparente como puedo hacer, o sea.. en el index si, que tenga un slider por debajo y el header en 100% transparencia, pero si doy click en nosotros o cualquier otra seccion que ya no sea 100% transparente.. que sea 70% por ejemplo
hola muchas gracias!! ya me servio mucho, pero abusando de tu buena disposición, si no quiero el fondo negro, quizás azul, blanco u otro color y un poco mas transparente. como haríamos,, GRACIAS!!!!
Hola Jaime, solamente tienes que cambiar el background-color de esta línea en el CSS: .menu-color-fijo-scroll { background-color: rgba(0,0,0,0.9)!important; transition: background-color 1s ease; }
En mi caso estoy trabajando un header con 2 barras, una en la cual tengo redes sociales y el ingreso a un campus y en la segunda tengo el logo y menú, pero al hacer esto del tutorial, se me desaparece la primera barra que tiene solo las redes sociales, es más delgada y está por encima de la barra principal del menú. No se si me explico bien. Espero me puedas ayudar.
Hola Edgar, en ese caso va depender de cómo hayas incluido la barra superior. Yo te aconsejo que las dos barras las trabajes dentro de la misma sección, es decir, que sean dos filas (una para cada barra o menú) de esta manera podrás aplicar este ejercicio.
Muy buen video, como se puede hacer que al desplegar el menu hamburguesa en el movil se desplace el contenido de la pagina hacia abajo. para que el menu no lo tape?
Hola Cristian, gracias. Ufff esa debe ser otra funcionalidad, sería interesante hacerlo para un tutorial :) Voy a intentarlo si lo logro realizo el tutorial. Un abrazo.
Hola Victor eso lo tendremos que realizar con CSS. Va a depender de cómo sea la estructura de tu menú. Intenta con esto a ver (reemplaza #ov-nombre-id por el nombre de ID del módulo menú): #ov-nombre-id .menu-item { padding-left: 2px !important; padding-right: 2px !important; }
Hola Nahum puede ser por varias cosas, recuerda que debes crearte el menú desde apariencia > temas y posteriormente desde el generador de temas asignarselo a tus páginas.
Hola, muchas gracias por tus videos ya que son de gran ayuda, solo que me he topado con un inconveniente, al pegar el código de jQuery en divi / Integración / Agregar código al de su blog e intentar guardar, al contrario del video, solo se queda como intentando guardar, pero solo queda mostrando una ruedita de procesamiento y nunca sale la confirmación de grabado que es la ruedita color verde con un chequecito blanco. Estoy usando Divi 4.5.6 en un tema Child Divi con versión 1.0, No puedo actualizar aun pues eso no depende de mi; espero puedas ayudarme, gracias de antemano.
Seguramente es por la versión José Rubén, quizá en esa versión que tienes haya un bug que no deja guardar los cambios cuando insertamos algún código en integración. También asegúrate que esté bien escrito el código sobre todo las etiquetas script. Otra cosa que puedes hacer es que en lugar de insertar el código en integración, lo insertes dentro de la página en un módulo código.
👉✅¿Como aplico aquí con este menú la opción del botón de llamado a la acción y que quede dentro del menú desplegable al hacerlo responsive; es decir modo teléfono?👀❓
Bueno creo no es nada difícil no hay necesidad de otro tutorial, usa este fragmento de código y solo coloca la URL de tu nuevo logo: .menu-color-fijo-scroll .et_pb_menu__logo img { content: url(INSERTAR_URL_LOGO); }
Buenas tardes, cómo podría cambiar el color del relleno del menú completo al hacer el scroll. Ahora mismo está preconfigurado para que aparezca en negro pero no sé cómo se cambia a cualquier color. Me ayudáis? Un saludo y gracias.
Hola, el color de fondo lo cambias desde el CSS: background-color: rgba(0,0,0,0.9)!important; Allí reemplaza el color rgba por el dígito de color que necesites. Saludos.
Hola, gracias por este tutorial. Quería preguntarte, de qué manera puedo cambiar el color para la barra de menú, ya que en este momento al hacer scroll, me aparece primero transparente y luego se pone color negro.
@@edgaribanezcom puedes usar un valor hexadecimal, así: #000000 o también puedes usar los digitos RGB como viene por defecto. Si quieres un color solido usa el hex si quieres que tenga opacidad usa el RGBA
Oscar ¿Cómo se hace para que el menú tenga un color que se vea al llegar al blog ya que el inicio del blog es blanco y no se ve el menú solo los enlaces activos que le puse un color?
@@OVDIVI Hola Oscar, gracias por responder, pero mientras esa pasaba me las ingenié y lo resolví creando un encabezado personalizado para el blog y no me complique mucho, lo unico es que aun no me respeta las configuraciones al desplazarse el logo se va a un tamaño que no le puesto y el módulo del botón a la derecha no se reduce, ya no se que hacer
@@GuillermoAure Tenemos que revisar el CSS, en este tutorial hacemos esos cambios forzando el CSS te puede dar una idea: ua-cam.com/video/TWEooesG_QI/v-deo.html
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 Obviamente todavía pueden aprender 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 :)
Hola como estas, gracias por el video, tengo un menú netamente para escritorios, fue al estilo del menú fijo app, ahora quería hacer lo mismo del degradado, no me funcionó, quizás el código del menú anterior creado intervino?
@@OVDIVI yo logre hacer el mismo tutorial tuyo del menu app, ese menu es mas personalizaste, por eso me quedaría con el creado, pero quisiera añadirle este efecto que se ponga negro al bajar, mi menu esta de color blanco
Tengo una pregunta, tengo una pagina en divi y no me sale el menu, ya he intentado de todo y no me aparece, ya configure y nada que puede ser??, AYUDAAAA!!!!!
Hola Edward pueden ser varias cosas, es dificil adivinar pero empieza revisando en los ajustes de la página que no tengas seleccionada la opción "Blank Page". También debes asignarle tu menú a la página o páginas dónde deseas mostrarlo desde el generador de temas.
@@Cinepoli Podrías apoyarte de este artículo de elegant themes para colapsar los sub menús: www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder
Buenas noches excelente video muchas gracias me funcionó perfecto, ahora quisiera saber como puedo hacer para que cuando ponga el cursor sobre el menú cambie el color del fondo???
Podrías hacerlo colocando un color de fondo a la sección en su estado hover. Entras a los ajustes de la sección > fondo > activas el puntero > flotar y cambias el color.
Tengo una duda, cómo puedo hacer para que mí botón fijo pase por encima del contenido? Es que cuando dejo el botón fijo pero scroleo sobre una parte del sitio que tiene imágenes, la imagen pasa por arriba cubriendo parte del botón
Deberías cambiar la posición indice Z. Puedes jugar subiendo el valor de la sección fila o columna que contiene el botón o también subiendo el z-index del mismo botón. Eso lo haces desde Ajustes del módulo/fila/sección > Avanzado > Puesto > Indice Z.
Hola Slayer muchas gracias. Desde el generador de temas debes asignar el template o layout solamente a la página de inicio. Sobre la plantilla le das Administración de plantillas y escoges la página principal.
Hola Luis, se puede con estilos CSS. No es nada complicado, si me pasas la url de tu sitio y me dices que enlace del menú quieres que sea un botón yo te puedo ayudar sin problema
@@OVDIVI muchas gracias Oscar. Visita www.settingrockets.com esta en construccion. añadi una especie de recuadro con css pero los padding no me funcionan :cc hace que me quede muy ancho :c
@@businessdealer2930 Intenta con este código (debes pegarlo en las opciones del tema CSS personalizado): .cta1 { display: flex; align-items: center; } .cta1 a { height: 40px; padding-right: 12px !important; padding-left: 12px !important; }
@@OVDIVI me permitio bajar un poco el largo , el problema fue que cuando ponia el codigo "height" me reducia el tamaño del cuadro pero el texto me lo pasaba hacia arriba y no se alineaba con el texto normal. De todas formas muchas gracias oscar
Buen dìa querido amigo, excelente tutorial, tengo una duda mi menu principal no me aparece en las paginas, solo en las entradas, sabes a que se debe? te agradecería muchisimo si me pudieses ayudar
Hola Juan, debes asignarlo como menú global desde el generador de temas. También revisa que en tus páginas no tengas habilitada la opción "Blank Page", esto lo revisas entrando a "editar página" > Plantilla...
Hola muy buen tutorial! Te comento que me gustaría saber si se puede hacer que el menú fijo que he creado con el theme builder se haga mas pequeño y se estilice al scrollear hacia abajo, como hace la opción del personalizador de tema. Y otra cuestión que tengo una barra con iconos de social media sobre el menú y me gustaría que al scrollear esa barra desaparezca pero el menú quede fijo arriba.
Hola Maximiliano lo del menú es posible, quiero realizar un tutorial al respecto solo que según Nick el fundador de divi próximamente vienen características nuevas para el sticky menú, así que tengo miedo de realizar el tutorial y enseguida quedé obsoleto jaja, por eso me estoy esperando. En cuanto a tu segunda pregunta, se puede ocultar los iconos de social con un poquito de jquery, si me pasas tu sitio vemos que podemos hacer.
@@GabrielaCorderoJahr Justo ayer lanzaron la característica por la que temía jaja. Creo que aún no se puede reducir el logo por defecto pero he realizado un tutorial para hacerlo: ua-cam.com/video/JmmQjphHqB8/v-deo.html
Hola Abner, esto dependerá de la proporción de tu logo. Si es un logo con muchos elementos necesitará estar más grande, si es un icono como apple aunque este muy pequeño se verá excelente.
Aquí tengo un snippet para un menú: ovdivi.com/divi-snippets/ Se llama: Agregar un efecto subrayado (normal y hover) a las opciones del menú principal En el CSS viene el código para separar más las opciones
HOla! estoy tratando de hacer este tutorial no se si aun seguira vigente este metodo, ya q no me funciona el cambio de color del menu al desplazarme hacia abajo! grande si me puedes responder gracias OV
Hola claro que sigue siendo vigente solamente en las versiones recientes de divi hay que aplicar esta configuración en Divi / Performance (actualización): academia.ovdivi.com/wp-content/uploads/2021/09/configuracion-divi-performance.png
Hola Oscar, muy buen tutorial. Talvez puedas hacer un tutorial de como hacer un menu en la parte inferior, pero para versiones moviles y ipad. No me funciona muy bien eso
Hola, depende de la proporción de tu logo, pero de altura puede ser unos 50px, si mucho 60px. Lo recomendable es jugar con el tamaño en relación al contenido del menú.
Me puedeas ayudar, al hacer scroll en el movil como puedo hacer que el menú hamburguesa cambie de color y tambien cambiar de color del menú desplegable, porfavor
¡Muy buen video! Una pregunta, cuando le borro el fondo de la sección donde está el menú y al guardar los cambios, todo el menú me aparece en blanco, lo regreso en transparente y se ve el menú, pero al desplazar para bajo no me cambia el color. ¿cómo puedo hacer para que al desplazar se vea el fondo en color negro?
Entra a los ajustes de la página y quita el fondo de todas las secciones, es probable que allí tengas un color blanco por ese se ve todo el menú en blanco.
Hola Joseph, si me compartes la url de tu web puedo darle un vistazo. También te invito a ver este otro tutorial dónde hacemos el mismo efecto pero con las opciones nativas de divi sticky: ua-cam.com/video/VVMxoluQh34/v-deo.html
Hola Cristian, debe ser por como maneja las clases Divi en esas páginas. Si gustas comparteme la url de tu ejercicio, inspecciono el menú y te comparto la solución...
Buenas excelente video ❤ pero tengo una duda puedo toner el color de la cabecera hasta arriba arriba? Como en los iPhone que cuando deslizas hacia arriba se queda un color arriba del header en el lugar donde debería estar escrito link de tu página 😅 no se si se entienda pero si se puede me puedes decir como se hace? ❤
Hola Imara, dirígete a Divi > Opciones del tema > General > Performance y deshabilita Defer jQuery And jQuery Migrate. A ver si eso ayuda, también puedes deshabilitar las demás opciones y comprobar. Saludos.
Hola no logro entender bien pero si necesitas cambiar las páginas del menú, debes irte al Escritorio de WordPress / Apariencia / Temas... desde allí modificas el ord´n y las opciones de tu menú
Hola se que es un comentario un poco fuera de tiempo ya que estamos en 2023, Pero segui tus pasos y todo funciona pero, En mi pagina tiene un submenu desplegable que se lo agrege antes de seguir estoy pasos. Cuando guardo todo si puedo ver mi menu transparente pero cuando pongo el mouse ensima del apartado de Servicios que tiene un sub menu no baja y cuando lo intento ver del celular tampoco. Y quisiera saber como puedo arreglar eso.
Excelentes los videos. Estoy empezando a utilizar DIVI y tus tutoriales ayudan mucho. Tengo una consulta, cuando agrego el menu, la primera seccion deja de ocupar todo el alto de la pantalla. Hay alguna forma de que ocupe automaticamente (responsive) el alto total de la pantalla? Saludos
En lugar de usar la opción FIXED para dejar fijo el menú puedes usar la opción sticky de divi. Mira este otro tutorial: ua-cam.com/video/VVMxoluQh34/v-deo.html
Excelente trabajo Oscar. Me sirvió de mucho y espero sigas subiendo este tipo de tutoriales que nos enseña mucho. Todo me salió perfecto, salvo el fondo del menú desplegable del móvil, que no logro que me aparezca negro al desplegarlo. Que podría ser lo que pasa? Gracias!
Hola Adolfo, seguiremos subiendo buenos tutoriales :) En cuanto a tu duda, si estás cambiando el color desde la opción enlaces al menú desplegable? Desde allí cambias el color de fondo amigo.
haya lgua forma de poner los link a secciones de mi pagina ? ejemplo, poner contacto y que baje a donde esta contacto? no puedo cambiar los textos del menu .c
Sí por supuesto. Lo que tienes que hacer es en cada sección colocar un nombre de ID. Posteriormente en los enlaces del menú colocar de enlace: #nombreSeccion
@@OVDIVI 3s que no pueod modificar los enlaces dle menú, además que los texto que me aparecen en el menú son los de las entradas y de las páginas, me gustaría poner mis propios textos en mi menú y no se como :c. Me podrías guiar por favor?
@@UnFelipillo ¿Por qué no puedes modificar los enlaces? Solamente dirígete al Escritorio de WordPress / Apariencia / Menús y desde allí seleccionas las páginas. Para colocar los enlaces de cada sección hazlo con "Enlaces Personalizados".
En que parte de la web de Elegant Themes puedo validar o consultar, si ahora compro licencia anual. Al renovar a life time eventualmente podría tener descuento. Oh no lo hay?? Gracias y muy buen vídeo :)
Excelente video, ¿Cómo puedo hacer que al hacer scroll me cambie tambien el color de letra del menú?
Hola Tony sigue los pasos de este tutorial pero ahora reemplaza el código jquery por este:
jQuery(document).ready(function( $ ) {
$(window).scroll(function(){
var scroll = jQuery(window).scrollTop();
if (scroll >= 100) {
$("#menuFijo").addClass("menu-color-fijo-scroll");
$("#menuPrincipal a").addClass("menu-color-enlace");
}
else{
$("#menuFijo").removeClass("menu-color-fijo-scroll");
$("#menuPrincipal a").removeClass("menu-color-enlace");
}
});
});
Y reemplaza el CSS por este:
#menuFijo {
background-color: transparent;
transition: background-color 0.5s ease;
}
.menu-color-fijo-scroll {
background-color: rgba(0,0,0,0.9)!important;
transition: background-color 1s ease;
}
#menuPrincipal.et_pb_menu ul li .menu-color-enlace {
color: #fe4943!important;
}
Y lo único que tienes que hacer es agregar el nombre de ID "menuPrincipal" al módulo menú.
@@OVDIVI Gracias ahorma mismo lo probaré
@@TONYFASHE ¿Cómo te fue?
@@OVDIVI gracias por la ayuda, me funcionó
@@OVDIVI Gracias, me funciono , Saludos desde Republica Dominicana !!!
Puedo decirte que tus videos son muy claros y que me has convencido a hacerme premium en tu plataforma educativa
Muchas gracias Alejandro, seguiremos en esa línea. Nos vemos en los tutoriales premium. Un abrazo.
Excelente como siempre. Claridad y precisión en cosas que definitivamente elevan el valor de los productos entregados al cliente
Gracias SammaWeb por siempre estar al tanto de cada tutorial. Continuaremos con esa línea. Un abrazo :)
¡Gracias master! Saludos desde Bogotá, Colombia
Saludos hasta Bogotá, Colombia San :) ¡Un abrazo!
Muchas gracias por esta información, puedo dar fe que sigue vigente en diciembre del 2024. Tengo una pregunta. Realicé todo el ejercicio y me funciona super bien, sin embargo el menu me aparece en franja blanca al principio y al scrollear se trasnparenta y luego cambia de color, quiero decir que al principio el menu no queda encima de la fotografía, sino mas bien en un espacio por separado. Ocupé un código que encontré en los comentarios
// No superponer el menu fijo
jQuery(function($){
var headerSection = $('.seccion-menu');
headerSection.wrap('');
var headerWrap = $('.header-placeholder');
var headerHeight = headerSection.outerHeight();
headerWrap.css('height', headerHeight);
$(window).resize(function() {
headerHeight = headerSection.outerHeight();
headerWrap.css('height', headerHeight);
});
});
Pero no resultó, ¿me podrías ayudar? Quiero también agradecerte por el contenido por que es muy bueno y completo. Muchas gracias :)
Hola qué tal muchas gracias por las palabras. Me gustaría revisar tu ejercicio para saber que está pasando. ¿Me puedes compartir la url de tu web? Si no te deja comentarlo aquí puedes dejarmelo en el post de mi blog para que le de un vistazo. Saludos
Excelente explicación, muy clara!!!
Gracias Alex. Saludos :)
Hola, ¿cómo hace para que la img quede hasta el tope del header?
Hola Lizeth. Debes colocar una posición fija en la sección de tu menú desde Ajustes de la sección / Avanzado / Puesto / Fijado...
Excelente tu explicación, mil felicidades
Muchas gracias Hector. ¡Seguimos!
Qué grande oscar papá, crack de los cracks!!
Gracias por el apoyo Juan :) ¡Saludos!
Hola Oscar, me parecen geniales tus tutoriales, son muy claros y precisos, he aprendido bastante con tus videos, podrías hacer por favor algún tutorial de como agregarle un botón al menú? de antemano muchas gracias amigo y un abrazo!
Hola José Luis qué tal, muchas gracias por las palabras, seguiremos así o mejor si se puede 😁. En cuanto a tu pregunta, si te refieres a tener un botón como llamada de acción, también se puede solamente construye tu sección con una fila de varias columnas, en cada columna insertas un módulo, por ejemplo, tienes una sección 3 columnas, a la columna 1 le insertas tu logo, a la 2 el menú con los puros enlaces, y a la 3 el botón de llamada de acción :)
Excelente y bien claro el video. Lo malo: que Divi no pueda hacer eso de manera directa sin usar código. Avada, con todo lo tieso que quieran, lo tiene...
También en las nuevas versiones tenemos la opción sticky de divi :) Puedes darle un vistazo Julio: ua-cam.com/video/VVMxoluQh34/v-deo.html
Eres un maestrooooooooo, excelente video
Gracias por el apoyo David. Un abrazo!
Estupendo, buen trabajo. Gracias
Muchas gracias Pedro. Un abrazo.
Hola, muy buena tu explicación, me gusta mucho el modo tan claro y preciso en que explicas. Te hago una pregunta: ¿Por qué el menú me queda sobre el primer modulo que tengo en la página, es decir, el contenido se subió y me queda detrás del menú y no debajo? Gracias
Hola Yaney qué tal, muchas gracias. Para que no se superponga el menú puedes usar el siguiente script en Divi > Opciones del tema > Integración > Agregar código al de su blog:
// No superponer el menu fijo
jQuery(function($){
var headerSection = $('.seccion-menu');
headerSection.wrap('');
var headerWrap = $('.header-placeholder');
var headerHeight = headerSection.outerHeight();
headerWrap.css('height', headerHeight);
$(window).resize(function() {
headerHeight = headerSection.outerHeight();
headerWrap.css('height', headerHeight);
});
});
Es importante que la sección tenga la clase: seccion-menu
Por cierto, también puedes darle un vistazo a este tutorial dónde aplicamos un efecto parecido pero con Divi Sticky Options: ua-cam.com/video/VVMxoluQh34/v-deo.html
Excelente video , felicitaciones, explicas como todo un maestro.
¡Muchas gracias! Hay cosas por mejorar todavía pero seguiremos creciendo :)
Muchas gracias estoy haciendo mi web y este era el resultado que quería para el menú
Genial Alfirio, me alegra saber que te ha sido de ayuda. Saludos :)
buffff que buena información, muchas gracias maestro
Gracias también a ti Sharon. Un abrazo.
Increíble, muchas gracias.
Saludos Edgar ;)
Me ayudo mucho este video, solo quisiera saber como puedo agregar un boton de llamada a la acción en el menu principal con color degradado, saludos!
Hola Angel, puedes ver como lo hemos hecho en este otro tutorial: ua-cam.com/video/JmmQjphHqB8/v-deo.htmlfeature=shared
excelente video, una consulta, como puedo poner un reloj cuenta regresiva en el encabezado?
Hola David, sería interesante algo así, voy a anotarlo para un futuro tutorial :)
muchas gracias por el tutorial te seguiré y si todo sale según lo planeado me suscribiré a tu academia, muchas muchas gracias por compartir
Muchas gracias Eduardo. Seguiremos compartiendo contenido en el canal :) ¡Un abrazo!
Muchas gracias !!! Excelente aporte !!!
Gracias a ti Pedro. Saludos
Te ganastes un suscriptor mas😄
Bienvenido :)
Excelente videos muy bien explicado. Gracias
Muchas gracias. Un abrazo.
Muchas gracias por el tutorial precisamente hace poco vi una opción similar pero me interesaba que el cambio de color tuviera una transición y justo así la hiciste y me gusta que vamos viendo poco a poco como solucionar detalles que surgen de esa forma queda mucho más claro. Quizá no tenga mucho que ver pero me gustaría saber cómo se deben realizar el seguimiento de las visitas de una web, muchas gracias!!
Genial Edd2s que oportuno tutorial entonces :) Me alegra saber que te haya servido, continuaremos así 💪. Para medir las metricas de tu sitio web puedes usar un plugin como: Google Analytics Dashboard Plugin. También está otro desarrollado por Google que se llama Site Kit by Google. Un abrazo.
@@OVDIVI gracias los probaré! 👍
Excelente. Sabes que actualmente la funcion de jquery como que esta decrapda. Tienes alguno con la version actual de divi?
Hola Cesar, sigue funcionando solamente tienes que utilizar esta configuración en divi performance: academia.ovdivi.com/wp-content/uploads/2024/01/divi-performance-configuracion.png
Me quedo bien, muchas gracias pero tengo una duda, porque la primera pagina es como una general de divi y luego tengo que darle a Inicio para que me lleve a la pagina principal? estoy construyendo una landing solo tengo una pagina
Hola Adrian, seguramente es porque no haz asignado la página de "inicio" a WordPress. Esto lo haces desde tu dashboard de WordPress > Ajustes > Lectura y en "Tu página de inicio muestra" seleccionas > Una página estática > Página de inicio...
Excelente turorial mucha gracias. Una pregunta: instale una barra de aviso, pero como es fija me sale truncada. ¿como lo puedo resolver? Grcaias.
Hola Orlando qué tal, ¿Cómo instalaste la barra de aviso? ¿A qué te refieres con truncada?
GRACIAS POR TU AYUDA !!!!
Un abrazo Jesus!
Muy buen vídeo gracias Oscar por estos videos!
No hay nada que agradecer Arlex. Un abrazo :)
Excelente bro muy buen contenido
Gracias Emmanuel, seguiremos así. Un abrazo.
Gracias!!!
Hola, buen vídeo...¿Cómo puedo cambiar el color de fondo del menú? no quiero que sea negro
Hola Marcelo, gracias. En el video lo menciono, solo tienes que cambiar el color en esta línea CSS:
background-color: rgba(0,0,0,0.9)!important;
Aquí tienes una página para buscar tu color hexadecimal o rgb: htmlcolorcodes.com/es/
@@OVDIVI gracias por contestar, sigue así crack, me sirven mucho tus vídeos
hola ! excelente el turorial! quisiera que tambien se reduzca el header puede ser? como sería el codigo?
¿te refieres que al hacer scroll se reduzca? Sí, es posible, voy a realizar el tutorial para que sea más práctico entenderlo
@@OVDIVI si me refería a eso! bueno esperare el tutorial! muchas gracias!
Muy bueno. Pregunta. Còmo hago que se vea el menú. En mi tema se lo desactivaron porque así lo pedí. Pero no sé cono activarlo
Hola Jholiner la verdad lo pudieron desactivar de muchas formas, no sabría cual han usado. Pero primero revisa que no hayan puesto las páginas como blank page, esto lo ves desde los ajustes de la página. La otra puede ser que lo hayan hecho con código CSS en el personalizador de temas CSS Adicional...
Excelente vídeo, muchas gracias por compartir tu conocimiento. Tengo una duda, mi menú cuenta con páginas subelemento de otra página y al desplegarse dicho menú de páginas se corta donde corta la pantalla, y no se pueden ver haciendo scroll, se queda pegado en esas primeras páginas, el menú tampoco me da la opción de hacer scroll dentro de ese "sub menú". Espero que me puedas ayudar. Saludos!
Hola qué tal, muchas gracias. Compárteme la url de tu web para revisarla, si no te deja comentarla puedes hacerlo así: tu pagina web (punto com)
Hola! muchas gracias! Hice lo que indicas pero en la versión móvil el menú desplegable hamburguesa se muestra muy a la derecha, casi escondido, y con todos los submenús desplegados, por lo tanto no puedo acceder a algunos ítems del menú además de no verlos por completo. ¿Como puedo centrar el menu desplegable, o dejarlo a todo lo ancho del móvil? y esconder los submenús para que se plieguen y desplieguen?
Hola Gabriela, si quieres colapsar los sub menús y ajustar la anchura en móvil te recomiendo este post de elegant themes: www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder
Excelente bro!! muy agradecido
Yo también agradecido con cada suscriptor Alejandro :) ¡Saludos!
Excelente video, hay alguna manera para cambiar el logotipo, para que haga mejor contraste con el color negro de fondo??
Hola Mizra, sí por supuesto. Dale un vistazo a este tutorial: ua-cam.com/video/z1hXQbfi69E/v-deo.htmlfeature=shared
Y a este otro: ua-cam.com/video/DjifH-nJfdY/v-deo.htmlfeature=shared
Estimado, muy bueno, solo una consulta, si quiero que en las demas secciones no sea 100% transparente como puedo hacer, o sea.. en el index si, que tenga un slider por debajo y el header en 100% transparencia, pero si doy click en nosotros o cualquier otra seccion que ya no sea 100% transparente.. que sea 70% por ejemplo
Hola Leandro, en esos casos debes crear dos plantillas desde el theme builder, una para la página de inicio y otra para las demás páginas :D
@@OVDIVI Entiendo, no sabia que se puede hacer eso... no sabría como aplicarlas nomas, pero voy a investigar
Excelente Amigo muy bueno
Muchas gracias Martín. Saludos :)
muy buen tutorial
Muchas gracias Xavi. Saludos
Gracias
No hay de qué. ¡Saludos!
Muchas gracias por los excelente video, pronto me suscribo y me pregunto si se podrá combinar bien este diseño con un mega menú ?
Hola, podría ser posible, la verdad que no lo he realizado pero considero que no debes tener problemas :)
hola muchas gracias!! ya me servio mucho, pero abusando de tu buena disposición, si no quiero el fondo negro, quizás azul, blanco u otro color y un poco mas transparente. como haríamos,, GRACIAS!!!!
Hola Jaime, solamente tienes que cambiar el background-color de esta línea en el CSS:
.menu-color-fijo-scroll {
background-color: rgba(0,0,0,0.9)!important;
transition: background-color 1s ease;
}
En mi caso estoy trabajando un header con 2 barras, una en la cual tengo redes sociales y el ingreso a un campus y en la segunda tengo el logo y menú, pero al hacer esto del tutorial, se me desaparece la primera barra que tiene solo las redes sociales, es más delgada y está por encima de la barra principal del menú. No se si me explico bien. Espero me puedas ayudar.
Hola Edgar, en ese caso va depender de cómo hayas incluido la barra superior. Yo te aconsejo que las dos barras las trabajes dentro de la misma sección, es decir, que sean dos filas (una para cada barra o menú) de esta manera podrás aplicar este ejercicio.
Muy buen video, como se puede hacer que al desplegar el menu hamburguesa en el movil se desplace el contenido de la pagina hacia abajo. para que el menu no lo tape?
Hola Cristian, gracias.
Ufff esa debe ser otra funcionalidad, sería interesante hacerlo para un tutorial :) Voy a intentarlo si lo logro realizo el tutorial. Un abrazo.
Hola amigo excelente vídeo pero tengo una consulta sabrás como hacer la separación entre item e item del menú ?
Hola Victor eso lo tendremos que realizar con CSS. Va a depender de cómo sea la estructura de tu menú.
Intenta con esto a ver (reemplaza #ov-nombre-id por el nombre de ID del módulo menú):
#ov-nombre-id .menu-item {
padding-left: 2px !important;
padding-right: 2px !important;
}
Hola! como puedo cambiar el color negro, es decir que a moverlo cambie a otro color que no sea negro. muchas gracias
Desde el CSS Isha, reemplaza el valor de background-color: rgba(0,0,0,0.9)!important;
Hola he creado mi primer página web, ya cree el encabezado con el meni, pero no aparece en mi página, que debo hacer.
Hola Nahum puede ser por varias cosas, recuerda que debes crearte el menú desde apariencia > temas y posteriormente desde el generador de temas asignarselo a tus páginas.
Hola, muchas gracias por tus videos ya que son de gran ayuda, solo que me he topado con un inconveniente, al pegar el código de jQuery en divi / Integración / Agregar código al de su blog e intentar guardar, al contrario del video, solo se queda como intentando guardar, pero solo queda mostrando una ruedita de procesamiento y nunca sale la confirmación de grabado que es la ruedita color verde con un chequecito blanco. Estoy usando Divi 4.5.6 en un tema Child Divi con versión 1.0, No puedo actualizar aun pues eso no depende de mi; espero puedas ayudarme, gracias de antemano.
Seguramente es por la versión José Rubén, quizá en esa versión que tienes haya un bug que no deja guardar los cambios cuando insertamos algún código en integración.
También asegúrate que esté bien escrito el código sobre todo las etiquetas script.
Otra cosa que puedes hacer es que en lugar de insertar el código en integración, lo insertes dentro de la página en un módulo código.
👉✅¿Como aplico aquí con este menú la opción del botón de llamado a la acción y que quede dentro del menú desplegable al hacerlo responsive; es decir modo teléfono?👀❓
Se debe hacer con CSS, mira este tutorial en ingles: joshhall.co/how-to-create-call-action-button-for-the-divi-menu/
Genial!
Eres un capo.
Un abrazo César.
hola buenas , queria saber si se podia tambien cambiar el logo del menu al hacer scroll, te agradeceria mucho si me dieras una respuesta
Hola Slayer, sí claro que es posible. Trataré de realizar un tutorial :)
Bueno creo no es nada difícil no hay necesidad de otro tutorial, usa este fragmento de código y solo coloca la URL de tu nuevo logo:
.menu-color-fijo-scroll .et_pb_menu__logo img {
content: url(INSERTAR_URL_LOGO);
}
@@OVDIVI muchas gracias, sigue con el buen contenido
Buenas tardes, cómo podría cambiar el color del relleno del menú completo al hacer el scroll. Ahora mismo está preconfigurado para que aparezca en negro pero no sé cómo se cambia a cualquier color. Me ayudáis? Un saludo y gracias.
Hola, el color de fondo lo cambias desde el CSS:
background-color: rgba(0,0,0,0.9)!important;
Allí reemplaza el color rgba por el dígito de color que necesites. Saludos.
Hola, gracias por este tutorial. Quería preguntarte, de qué manera puedo cambiar el color para la barra de menú, ya que en este momento al hacer scroll, me aparece primero transparente y luego se pone color negro.
Hola Edgar, en el código CSS reemplaza la propiedad background-color: rgba(0,0,0,0.9)!important;
@@OVDIVI y en vez de ceros pongo código hex
@@edgaribanezcom puedes usar un valor hexadecimal, así: #000000 o también puedes usar los digitos RGB como viene por defecto. Si quieres un color solido usa el hex si quieres que tenga opacidad usa el RGBA
@Osmosis Osmosis Tienes tu ejercicio online? Comparteme la url y lo reviso.
Saludos
hola master como estas? consulta como puedo hacer para evitar que se desplieguen los submenus
Hola Daniel, todo bien gracias. ¿Para evitar que se desplieguen los sub menús? 🤔 No entiendo bien amigo. Saludos
Oscar ¿Cómo se hace para que el menú tenga un color que se vea al llegar al blog ya que el inicio del blog es blanco y no se ve el menú solo los enlaces activos que le puse un color?
Necesito ver tu ejercicio para poder inspeccionar las clases que necesitamos. Si quieres puedes escribirme por facebook :)
@@OVDIVI Hola Oscar, gracias por responder, pero mientras esa pasaba me las ingenié y lo resolví creando un encabezado personalizado para el blog y no me complique mucho, lo unico es que aun no me respeta las configuraciones al desplazarse el logo se va a un tamaño que no le puesto y el módulo del botón a la derecha no se reduce, ya no se que hacer
@@GuillermoAure Tenemos que revisar el CSS, en este tutorial hacemos esos cambios forzando el CSS te puede dar una idea: ua-cam.com/video/TWEooesG_QI/v-deo.html
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
Obviamente todavía pueden aprender 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 :)
Ay, vi muy tarde :( con razón no me da el fondo negro. Ja, ja ,ja, ya lo checo.:P
@@cyanmagenta3499 Los dos son útiles todavía :) jaja
Estupendo. 👏👏👏👏. Suscrito 👍👍
Gracias PAT! 🔥
Genio!!!!! Gracias
¡Gracias Juan! Un abrazo
Excelente video sigue así
Seguiremos así Cristian. Un abrazo
Excelente, gracias.
Gracias a ti Pablo. :)
Hola como estas, gracias por el video, tengo un menú netamente para escritorios, fue al estilo del menú fijo app, ahora quería hacer lo mismo del degradado, no me funcionó, quizás el código del menú anterior creado intervino?
Hola qué tal, no logro entender bien a que te refieres con "lo mismo del degradado" amigo
@@OVDIVI yo logre hacer el mismo tutorial tuyo del menu app, ese menu es mas personalizaste, por eso me quedaría con el creado, pero quisiera añadirle este efecto que se ponga negro al bajar, mi menu esta de color blanco
tengo un problema con el menu hamburguesa , cuando click en menu de nosotros me envia a la seccion de la web pero el menu hamburguesa no se cierra.
Hola Jorge, eso es cuestión de divi ¿Ya te pusiste en contacto con Elegant Themes?
Tengo una pregunta, tengo una pagina en divi y no me sale el menu, ya he intentado de todo y no me aparece, ya configure y nada que puede ser??, AYUDAAAA!!!!!
Hola Edward pueden ser varias cosas, es dificil adivinar pero empieza revisando en los ajustes de la página que no tengas seleccionada la opción "Blank Page". También debes asignarle tu menú a la página o páginas dónde deseas mostrarlo desde el generador de temas.
Buen video, buen trabajo, como aria si tengo sub menus, y en el movil aparece todo desplegado. Quisiera solucionar eso.
Hola Heber qué tal, que pasa con los sub menús? Me podrías contar la verdad que no lo he probado. Seguro encontramos solución
@@OVDIVI cuando codigos utilizas para que no apareza todo los menus y bub menus desplegados en el movil, cuado se crea theme builder .
@@Cinepoli Podrías apoyarte de este artículo de elegant themes para colapsar los sub menús: www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder
Buenas noches excelente video muchas gracias me funcionó perfecto, ahora quisiera saber como puedo hacer para que cuando ponga el cursor sobre el menú cambie el color del fondo???
Podrías hacerlo colocando un color de fondo a la sección en su estado hover. Entras a los ajustes de la sección > fondo > activas el puntero > flotar y cambias el color.
Tengo una duda, cómo puedo hacer para que mí botón fijo pase por encima del contenido? Es que cuando dejo el botón fijo pero scroleo sobre una parte del sitio que tiene imágenes, la imagen pasa por arriba cubriendo parte del botón
Deberías cambiar la posición indice Z. Puedes jugar subiendo el valor de la sección fila o columna que contiene el botón o también subiendo el z-index del mismo botón. Eso lo haces desde Ajustes del módulo/fila/sección > Avanzado > Puesto > Indice Z.
Excenlente video, ¿ cómo hago para que solo este efecto se aplique a mi página de inicio y no se repita en las demás páginas?
Hola Slayer muchas gracias. Desde el generador de temas debes asignar el template o layout solamente a la página de inicio. Sobre la plantilla le das Administración de plantillas y escoges la página principal.
@@OVDIVI muchas gracias.
Gracias oscar. Quisiera saber como puedo añadirle un Boton al mismo menu
Hola Luis, se puede con estilos CSS. No es nada complicado, si me pasas la url de tu sitio y me dices que enlace del menú quieres que sea un botón yo te puedo ayudar sin problema
@@OVDIVI muchas gracias Oscar. Visita www.settingrockets.com esta en construccion. añadi una especie de recuadro con css pero los padding no me funcionan :cc hace que me quede muy ancho :c
@@businessdealer2930 Intenta con este código (debes pegarlo en las opciones del tema CSS personalizado):
.cta1 {
display: flex;
align-items: center;
}
.cta1 a {
height: 40px;
padding-right: 12px !important;
padding-left: 12px !important;
}
@@OVDIVI me permitio bajar un poco el largo , el problema fue que cuando ponia el codigo "height" me reducia el tamaño del cuadro pero el texto me lo pasaba hacia arriba y no se alineaba con el texto normal. De todas formas muchas gracias oscar
Buen dìa querido amigo, excelente tutorial, tengo una duda mi menu principal no me aparece en las paginas, solo en las entradas, sabes a que se debe? te agradecería muchisimo si me pudieses ayudar
Hola Juan, debes asignarlo como menú global desde el generador de temas. También revisa que en tus páginas no tengas habilitada la opción "Blank Page", esto lo revisas entrando a "editar página" > Plantilla...
@@OVDIVI Gracias amigo, era lo de "blank page" te has ganado un seguidor, excelentes tutoriales, sigue así, saludos desde Colombia
Hola muy buen tutorial! Te comento que me gustaría saber si se puede hacer que el menú fijo que he creado con el theme builder se haga mas pequeño y se estilice al scrollear hacia abajo, como hace la opción del personalizador de tema. Y otra cuestión que tengo una barra con iconos de social media sobre el menú y me gustaría que al scrollear esa barra desaparezca pero el menú quede fijo arriba.
Hola Maximiliano lo del menú es posible, quiero realizar un tutorial al respecto solo que según Nick el fundador de divi próximamente vienen características nuevas para el sticky menú, así que tengo miedo de realizar el tutorial y enseguida quedé obsoleto jaja, por eso me estoy esperando.
En cuanto a tu segunda pregunta, se puede ocultar los iconos de social con un poquito de jquery, si me pasas tu sitio vemos que podemos hacer.
@@OVDIVI okey gracias por responder! Tiene mucho sentido. Y lo segundo no lo resolví, pero al final no quería la barrita de social media.
@@OVDIVI Sabes si divi tiene ya la opción de reducir el tamaño del logo al hacer scroll? han pasado dos meses...
@@GabrielaCorderoJahr Justo ayer lanzaron la característica por la que temía jaja. Creo que aún no se puede reducir el logo por defecto pero he realizado un tutorial para hacerlo: ua-cam.com/video/JmmQjphHqB8/v-deo.html
Excelente! cual debe ser el tamaño exacto para que el logo no se pixele ?
Hola Abner, esto dependerá de la proporción de tu logo. Si es un logo con muchos elementos necesitará estar más grande, si es un icono como apple aunque este muy pequeño se verá excelente.
Ta,bien me gustaria saber como puedo hacer para que queden mas separados entre ellos los item del menú ???
Deberías inspeccionar los elementos y ajustar el padding con código.
Aquí tengo un snippet para un menú: ovdivi.com/divi-snippets/
Se llama: Agregar un efecto subrayado (normal y hover) a las opciones del menú principal
En el CSS viene el código para separar más las opciones
HOla! estoy tratando de hacer este tutorial no se si aun seguira vigente este metodo, ya q no me funciona el cambio de color del menu al desplazarme hacia abajo! grande si me puedes responder gracias OV
Hola claro que sigue siendo vigente solamente en las versiones recientes de divi hay que aplicar esta configuración en Divi / Performance (actualización): academia.ovdivi.com/wp-content/uploads/2021/09/configuracion-divi-performance.png
Hola Oscar, muy buen tutorial. Talvez puedas hacer un tutorial de como hacer un menu en la parte inferior, pero para versiones moviles y ipad. No me funciona muy bien eso
Hola Walter, tengo un tutorial dónde realizamos un menú inferior tipo app, lo puedes ver aquí: ua-cam.com/video/1jru9vXuiVU/v-deo.html
Hola, qué tamaño de logo recomiendas?
Hola, depende de la proporción de tu logo, pero de altura puede ser unos 50px, si mucho 60px. Lo recomendable es jugar con el tamaño en relación al contenido del menú.
Una pregunta, como podría hacer que cuando se oculte el menú también se oculte el logo que va en el menú ? Gracias
Me explico , que cuando esté sin hacer scrolll el icono del menú no se muestre, pero al hacer el scrolll se muestre, te agradecería mucho
@@brahamnduque8147 Hola amigo que tal, ¿A qué icono te refieres?
Hola, osea que se oculta el logo cuando no se haga scrolll y aparezca cuando se haga scrolll
Me puedeas ayudar, al hacer scroll en el movil como puedo hacer que el menú hamburguesa cambie de color y tambien cambiar de color del menú desplegable, porfavor
¿Cuál es la url de tu web para revisarla?
¡Muy buen video! Una pregunta, cuando le borro el fondo de la sección donde está el menú y al guardar los cambios, todo el menú me aparece en blanco, lo regreso en transparente y se ve el menú, pero al desplazar para bajo no me cambia el color. ¿cómo puedo hacer para que al desplazar se vea el fondo en color negro?
Entra a los ajustes de la página y quita el fondo de todas las secciones, es probable que allí tengas un color blanco por ese se ve todo el menú en blanco.
Hola oscar, no logro que al hacer scroll se ponga en negtro. ya realice revise el codigo
Hola Dexter, si sigues el paso por paso debe funcionar correctamente. ¿Tienes tu sitio en línea para poder inspeccionarlo?
hago los pasos, pero se vuelve ancho el encabezado, a qué podría ser, no entiendo que le pasa. He eliminado y vuelto hacer varias veces me sucede...
Hola Joseph, si me compartes la url de tu web puedo darle un vistazo. También te invito a ver este otro tutorial dónde hacemos el mismo efecto pero con las opciones nativas de divi sticky: ua-cam.com/video/VVMxoluQh34/v-deo.html
@@OVDIVI me tuve que ver videos y la solución fue que debí poner relleno a 0px...
Gracias..
Seguiré aprendiendo ✌️✌️
Me pareció un video muy INTERSANTE quizas lo único raro era como entonabas cada frase AL ACABAR pero de todos modos me pareció mas bien GRACIÓSO
Tengo mi acento raro ya sé. Jaja un abrazo Lucas.
Hola, por qué será que este menú no funciona en categorías, si funciona la transición del scroll, pero la transparencia no funciona.
Que será?
Hola Cristian, debe ser por como maneja las clases Divi en esas páginas. Si gustas comparteme la url de tu ejercicio, inspecciono el menú y te comparto la solución...
Buenas excelente video ❤ pero tengo una duda puedo toner el color de la cabecera hasta arriba arriba? Como en los iPhone que cuando deslizas hacia arriba se queda un color arriba del header en el lugar donde debería estar escrito link de tu página 😅 no se si se entienda pero si se puede me puedes decir como se hace? ❤
Hola Kian, es posible configurando un plugin PWA dale un vistazo a este tutorial: ua-cam.com/video/M39T5u1way0/v-deo.html
Hola, el logotipo no redirige a la página de inicio como lo hacen nomalmente los logos, ¿cómo lo puedo hacer?
Hola Gabriela, en los ajustes del menú debes entrar a enlace y colocar la URL de la página principal desde el icono de contenido dinámico.
Hola. Cuando hago scroll no logro que se ponga en negro y en principio he seguido todos tus pasos varias veces. Muy buenos tus vídeos. Muchas gracias
Hola Imara, dirígete a Divi > Opciones del tema > General > Performance y deshabilita Defer jQuery And jQuery Migrate.
A ver si eso ayuda, también puedes deshabilitar las demás opciones y comprobar.
Saludos.
gracias por el video, ¿Como puedo modificar el orden de mi menú? En mi menú aparece uno llamada home y esa no la necesito
Hola no logro entender bien pero si necesitas cambiar las páginas del menú, debes irte al Escritorio de WordPress / Apariencia / Temas... desde allí modificas el ord´n y las opciones de tu menú
@@OVDIVI gracias, ya vi cual era el problema
muy bueno
Gracias Jose Angel. ¡Seguimos!
Hola se que es un comentario un poco fuera de tiempo ya que estamos en 2023, Pero segui tus pasos y todo funciona pero, En mi pagina tiene un submenu desplegable que se lo agrege antes de seguir estoy pasos. Cuando guardo todo si puedo ver mi menu transparente pero cuando pongo el mouse ensima del apartado de Servicios que tiene un sub menu no baja y cuando lo intento ver del celular tampoco. Y quisiera saber como puedo arreglar eso.
Hola qué tal, me gustaría revisar tu ejercicio para saber que está pasando. Si me compartes el link puedo darle un vistazo
Excelentisimo!
Gracias Barotema :)
Esos layout hace que relentice la pagina?
Hola Dylank, no para nada amigo :)
Excelente...!!!!!
Gracias Omar. Seguiremos así 💪
hola Genio como estas? realice el menu paso a paso y cuando hago scroll no carga el efecto negro
lo arregle me falto ;
@@recinfinity Excelente Manuel :)
Buen video
Muchas gracias Ivan :)
Excelentes los videos. Estoy empezando a utilizar DIVI y tus tutoriales ayudan mucho. Tengo una consulta, cuando agrego el menu, la primera seccion deja de ocupar todo el alto de la pantalla. Hay alguna forma de que ocupe automaticamente (responsive) el alto total de la pantalla? Saludos
En lugar de usar la opción FIXED para dejar fijo el menú puedes usar la opción sticky de divi. Mira este otro tutorial: ua-cam.com/video/VVMxoluQh34/v-deo.html
Excelente trabajo Oscar. Me sirvió de mucho y espero sigas subiendo este tipo de tutoriales que nos enseña mucho. Todo me salió perfecto, salvo el fondo del menú desplegable del móvil, que no logro que me aparezca negro al desplegarlo. Que podría ser lo que pasa? Gracias!
Hola Adolfo, seguiremos subiendo buenos tutoriales :)
En cuanto a tu duda, si estás cambiando el color desde la opción enlaces al menú desplegable? Desde allí cambias el color de fondo amigo.
haya lgua forma de poner los link a secciones de mi pagina ? ejemplo, poner contacto y que baje a donde esta contacto? no puedo cambiar los textos del menu .c
Sí por supuesto. Lo que tienes que hacer es en cada sección colocar un nombre de ID. Posteriormente en los enlaces del menú colocar de enlace: #nombreSeccion
@@OVDIVI 3s que no pueod modificar los enlaces dle menú, además que los texto que me aparecen en el menú son los de las entradas y de las páginas, me gustaría poner mis propios textos en mi menú y no se como :c. Me podrías guiar por favor?
@@UnFelipillo ¿Por qué no puedes modificar los enlaces? Solamente dirígete al Escritorio de WordPress / Apariencia / Menús y desde allí seleccionas las páginas. Para colocar los enlaces de cada sección hazlo con "Enlaces Personalizados".
@@OVDIVI es que no las tengo como paginas nuevas, solo como secciones entonces me aparece en le menú solo la pagina en la que estoy trabajando
@@OVDIVI creo que ya entendí como hacerlo, lo probare, muchas gracias amigo eres el mejor
En que parte de la web de Elegant Themes puedo validar o consultar, si ahora compro licencia anual. Al renovar a life time eventualmente podría tener descuento. Oh no lo hay?? Gracias y muy buen vídeo :)
Hola Par, puedes ver todo eso desde tu cuenta en Elegant Themes / Facturación...
@@OVDIVI Vale, pero no tengo cuenta. Estoy con una licencia valida por 6 meses y prestada. Bueno, igual gracias, veré que mas averiguo 👏😁👍