ฝัง
- เผยแพร่เมื่อ 7 พ.ย. 2024
- 📢 Cómo crear un header transparente con menú sticky en WordPress usando Elementor.
☑️ Plugin necesario: 👉 sergioks.com/g...
☑️ Estilo CSS:
Está en el comentario del vídeo porque ciertos caracteres del código no se pueden poner en la descripción. También lo tienes el blog:
sergioks.com/c...
☑️ Plugin que puedes usar para añadir efectos scroll si no quieres tocar CSS
wordpress.org/...
Si te ha sido útil dale un like por lo menos. Gracias.
🤝 SERVICIOS
► Diseño web WordPress personalizado
sergioks.com/d...
► Tu web en 72 horas por 299€
sergioks.com/w...
☑️ HOSTINGS QUE RECOMIENDO
► FastComet: ⇒ bit.ly/2r3R14Y
► Raiola Networks -20%: ⇒sergioks.com/g...
► SiteGround: ⇒ bit.ly/2radT2a
☑️ PLUGINS Y PLANTILLAS
► GeneratePress ⇒ bit.ly/ytgenera...
► Astra Pro ⇒ bit.ly/2vlh5bc
► Elementor Pro ⇒ sergioks.com/g...
► Ultimate Addon for Elementor ⇒ bit.ly/2EAjgAY
► Convert Pro ⇒ bit.ly/irconverpro
☑️ EQUIPO DE GRABACIÓN
► Micro: ⇒ amzn.to/2KZNeQV
► Webcam: ⇒ amzn.to/2GL9tK5
👋 SÍGUEME EN
Web ► sergioks.com/
Twitter ► / sergioks_com
Instagram ► / sergio.ks
Curso Elemento Pro: 👉 academia.sergioks.com/curso-elementor/
maravilla de video! Llevaba un buen rato y lo he hecho y me he sentido Dios jajaja gracias Sergio :)
Excelente hermano. Sumamente agradecido. Saludos de un venezolano en Brasil.
En general el contenido es claro y sin rodeos, muchísimas gracias por eso🔥🔥🔥
Efecto que solo los disfrutaba con GeneratePress, ahora ya no me quedará fijo y del mismo color y ancho. Genial, gracias.
Que si me pareció útil..? Yo diría que UTILISIMO!!!! Gracias Sergio tu like y subs. Ya voy a revisar tu canal a ver que mas videos nos has compartido!!!
Genial 👍
qué crack! 2024 y aún sirve y funciona. Gracias!
Igualmente creo q toca actualizar ese vídeo.
A ver chico no solo te mereces un Like sino q te mereces q te siga y la campanilla no se les olvideeeeee, un fuerte gracias por tu aportación a los aprendices como yo
Gracias 😀
hola buen día Sergio y gracias por tus videos
Gracias por la gran información! Gran herramienta Elementor. Feliz con tus tutoriales.
Tus videos son muy explicativos! 100 puntos para Griffindor!
Sergio, como siempre super Nice you Training
Mil gracias Sergio!
selector.elementor-sticky--effects{
background-color:rgba(0, 0, 0, 0.9)!important;
}
selector{
transition: background-color 1.3s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
min-height: 80px;
}
selector> .elementor-container{
transition: min-height 1s ease !important;
}
muchas gracias!
es el video que buscaba!
una pregunta por rizar el rizo.... podria cambiar el color de las tipografias o menus al hacer scroll... es decir cuando aparec eel fondo negro... podria hacer que los menus cambien de color?
Tio joder justo lo que esta buscando, video justo a tiempo jajaja
@@sergioks de echo ya encontre la forma de intercambiar el logo a otro color. Lo que hice fue darle incluir los dos logos, le agregue sus ids a cada uno y con css les pedi mostrarse o no dependiendo el scroll. Ya te comparto el codigo. Deberias hacer un video donde muestres como cambiar el color de los links del menu y de un boton o cta en el mismo menu al hacer scroll
Te comparto el codigo
/*Logo 1*/
#logo_b{
display: none
}
/*Logo 2*/
.elementor-sticky--effects #logo_w{display:none!important }
/*Logo 1 mostrando en scroll*/
.elementor-sticky--effects #logo_b{display:block !important }
/*Intente llamarlos con la clase pero por alguna razon no me dejo, me funciono mejor el ID en cada logo*/
selector.elementor-sticky--effects{ background-color: #fff !important }
selector{ transition: background-color 2s ease !important; }
selector.elementor-sticky--effects a{ color: #004488 !important }
/*Este de aca me permite cambiar el texto de un boton en el mismo header al hacer scroll*/
selector.elementor-sticky--effects .elementor-button-text{ color: #fff !important }
/*Y este me permite cambiar el icono dentro de ese btn al hacer scroll*/
selector.elementor-sticky--effects i{ color: #65ffea !important }
selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }
selector > .elementor-container{ transition: min-height 1s ease !important; }
Excelente tutorial, tenia semanas rompiendome la cabza, gracias
Crack!! Excelente tus videos!! Muchas gracias por compartir!
Gracias 😁
Hola Sergio, muchas gracias por compartir. Muy bien explicado. Saludos
Excelente!!!! el CSS funciona y todo está perfecto! Mil gracias!
Muchas gracias Sergio me ha funcionado totalmente, muy bien explicado, excelente video!!
Sólo tengo una duda, es responsive? O estuve revisando y al entrar a la página desde un móvil no me aparece transparente, sino en blanco arriba como cuando recién insertar algún elemento
Muchas gracias por tan buen video, me ayudaste mucho
excelente video me sirvio mucho , tengo una pregunta si quisiera cambiar el color del texto del menu cuando se haga scroll que deberia hacer gracias
Creo que lo explico en el vídeo.
AMO este tutorial muchas gracias!
Muchas gracias Sergio! funciona perfecto me ha ayudado mucho, Saludos!
Me ayudo mucho para detallar unas dudas que tenia, muchas gracias, con esto ya podre implementar unas ideas que tengo para mi canal! :D te lo agradezco mucho! saludos!
Justo lo que necesitaba, muy bien
Excelente, funciona perfecto!...tengo una consulta sobre sliders: quiero poner las fotos de slider en blanco y negro y no encuentro como hacerlo?? o hay un plugins con efectos? gracias!
Con plugins no sé, pero siempre puedes subir las fotos en blanco y negro directamente.
Gracias ergio por este video, es lo que estaba buscando, me ha sido de gran ayuda. Pero me queda una duda. Si quisiera poner el menú de un color sólido y al hacer el scroll cambiase el logo, para que se viera bien en el nuevo fondo? Sería también con CSS o cómo se debería hacer? Mil gracias.
10/10 el tutorial!! recomendadísimo
Muy útil. Muchas gracias!
Gracias. Excelente video me sirvió de mucho.
gracias Sergio! excelente ! sirve un montón.
Busque todo el dia y por fin lo encontre!
hola... muchas gracias maestro....
Se entiende super bien com explicas, mil gracias, qué pasa con un menú así, como se comporta al ver la página en un movil?
Muchas gracias excelente video..
hola excelente aporte para que se coloca effects offset en 100 gracias
Muchísimas gracias !!!! ¿Podrías hacer un tutorial de estoy mismo pero que al hacer scroll se cambie el logo a todo color y el menú a otro color también?
para hacer supongo que elementor no de la opcion, al menos que tengas un plugin, yo te recomendaria usar codigo css para hacerlo, probablmente puede ser la unica opcion o la de conseguir un plugin, pero muy probablemente valga dinero
Muchas gracias bro, me ayudaste bastante.
Muy buen tutorial, y gracias por los estilos css
Muy buena información, saludos desde Colombia y gracias.
gracias, pregunta @sergioks usas alguna plantilla base? cual recomiendas?
Gracias Sergio es genial este video y la forma de configurar el Menú.
muchas gracias amigo, justo lo que necesitaba!!! excelente!!
Muchas gracias, funciona perfecto, era lo que necesitaba
Genial 😁
Buen video....indicar a todos consideren que el logo sea formato PNG ( Traslúcido ) para que aprovechen el recurso, o les pegara un cuadrado relleno. Salu2
Excelente, muchas gracias
Parcero excelente!! Gracias por compartir
Gracias por el codigo! Genial video...lo que estaba buscando!!!
Hola Sergio bravo por el video está genial y me ha ayudado mucho, ¿Sería posible cambiar el color De la Fuente cuando la cambia la transparencia? Muchas gracias
Sí, con un poco de CSS pero no te puedo decir el código exacto.
Hola Sergio! muy bueno el video. No veo el codigo que dejas para pegar en el css...donde lo pusiste? gracias!
Excelente video gran contenido
Amigo un enorme favor, me apoyo un monton el plugin que comentaste pero hay forma de hacer que no solo el fondo cambie de color sino tambien el color del menu una vez uno hace scroll???
Excelente trabajo felicitaciones, una pregunta, yo tengo ASTRA como tema en mí WordPress, y compré la versión Elementor PRO, al seguir tú video explicativo, cargo la misma cabecera pero, pero no aparecen la lista de las páginas en el menú, donde deberían salir los nombres, me aparece en gris ¿Me puedes indicar sí hay un paso previo?
Un gran abrazo desde Santiago de Chile.
Muchas gracias.
Gracias Sergio! ... Excelente tutorial! Me fue de gran ayuda.
excelente video . Solo una consulta , Si quiero cambiar el color de la fuente del menu al bajar , como sería el codigo ?
Gracias! Sabes si se puede hacer rollo translúcido, como la web de apple, por ejemplo.
SÍ, solo tienes que "jugar" con la opacidad del fondo de la cabecera para que no sea 💯 transparente.
Grande, es justo lo que necesitaba
Muchísimas gracias!!!
Gracias Sergio! Me ayudo mucho
espectacular como siempre sergio
deberias clarar en el titulo del video que es con elementor pro, gracias por mencionarlo al principio
Muchas gracias amigo , master !!!!
Hola Sergio muchas gracias por el aporte está genial!!!! se puede cambiar el logo de blanco (en la transparencia) y quede el logo negro para el scroll? Mil gracias
Hola Sergio, muchas gracias por el video. Tengo una consulta, y si yo quisiera que al bajar se cambie el color del logotipo y el color de letra del menú?, Como podria hacer?
Sergio! Muy buen video como siempre! Tengo un problema: al seleccionar la imagen de la pagina y poner en margen -100 se pone sobre el header, no detras, como lo soluciono? Gracias!!
Tengo la misma pregunta
cambiando el valor del z-index del header a 1
@@PaolaFreciaGonzalesGonzales Gracias, tenía el mismo problema!
@@PaolaFreciaGonzalesGonzales crack!!!!!!!!
Hola Sergio. Buenísimos vídeos. Hice toda esta prueba y genial , excepto que la imagen de cabecera no queda superpuesta como el menú, me queda oculta tras subir el margen del bloque de abajo a -100. Gracias
Con el tema de la cabecera transparente hay que jugar un poco con los ajustes. Prueba no subir tanto el bloque.
me sacaste de una bro buen video
Gracias Sergio!
eres un crackkkk men thank you!!!
Gracias amigo desde Colombia
Eres un crack hermano, muchas gracias.
Muy buen video
Mil gracias gracias!
Muchas gracias por el aporte !! Solamente una pregunta, como hago con el responsive en formato celular ? el margen de la imagen afecta en los iconos que tengo en la imagen de portada , pero en pc esta bien, como editar solamente en uno sin que afecte al otro ?
No te puedo decir, son cosas que tendría que mirar en detalle.
@@sergioks gracias igual por el aporte.
Algo muy útil que le falta a este video es cómo achicar el logo también con el CSS para tener más opciones de diseño.
Eso ya para el próximo vídeo con el nuevo editor de Elementor
Muchas gracias.
Muchas gracias
Hola! Gracias por el tutorial, me ha sido de mucha ayuda. Consulta como hago para que la cabecera sea "invisible" o desaparezca al llegar al top de la pagina, osea al llegar arriba, al principio de la pagina? Gracias!!
Debes colocar el Effects Offset en 100
Excelente, se agradece tu aporte
Crack muchas gracias 👍
Muchísimas gracias crack
Gracias 😀
Hola. Muchas gracias por la explicacion! como no tengo la opcion CSS personalizado, estaba explorando la opcion de copiar el codigo en el campo de CSS adicional del tema accediendo desde wordpress pero no lo consigo. Tendrías una solucion para esto? muchas gracias
probé el plugin Sticky Header Effects for Elementor que recomiendas y me hizo el trabajo! muchas gracias
Excelente gracias
eres un genio, muchas gracias!!
Muy buen tutorial, no se si tengas algo de menús con iconos... Saludos...
Sergio, se podría hacer que bajes y se esconda el menú y cuando le des a subir aparezca el menú reducido como hace el tema Astra? o sería ya mucho pedir. Saludos.
Se puede hacer, pero tiene más enjundia. Yo lo tengo hecho en esta web clubcashflow.es/ Lo mismo me animo y grabo un video explicándolo.
@@sanbecar Pues sería de gran ayuda. Gracias Santiago
¿Has sabido ya cómo hacerlo Sergio?
hola, muy bueno, donde esta el codigo que nombras en el video?
En los comentarios lo he puesto, porque en la descripción no me dejaba TH-cam. También lo tienes en mi blog.
Hola Muy buen tutorial como puedo hacer para que el texto tan bien cambie de color?
Hola Sergio ante todo muchas gracias, decirte que aprendí muichísimo de tus videos. Quiero dejar una consulta (bueno dos) tysi alguien sabe pues genial. 1-Cuando inserto logos y jhago la web más pequeña en modo vista el logo se redimensiona ews decir se hace pequeño o grande según hago grande o pequeña la web... como puedo hacer que no afecte y quede siempre el logo al mismo tamaño? Y otra es si alguieb sabe si existe algún plugin para pointer menú, es decir para crear efectos debajo del menu cuando pase el mouse. GRACIASSSSSSS
una pregunta como se puede editar el color del efecto cuando bajas la pagina en vez de negro puede ser otro? gracias excelente video suscrito a tu pagina
Justo lo que buscaba. Muchas gracias, pero tengo el problema de que se me sigue quedando el logo detrás de la imagen, el menú no. He probado a ponerlo como imagen y tampoco. A que es debido?
Hola Sergio, buen tutorial, tendrás algún vídeo donde expliques como se puede diseñar las cajas de íconos como aparecen en la Página de Contacto? Gracias de antemano
Hola Sergio, excelente explicación
Estoy diseñando con Hello theme y Elementor pro
He seguido todos tus pasos pero me sucede algo muy curioso que al colocar el margen negativo (-100) a la imagen del sonde de la sección de abajo de header la imagen se sobrepone o se coloca por delante del header tapándolo pero como esta en modo stijky al hacer scroll si que se ve el header
Que debo hacer para que el header siempre este por delante de todo?
De antemano muchas gracias
Ve a Avanzado del objeto> Z-index por valores superiores por ejemplo 100 para los objetos que van a estar arriba
Eres un crack!!!
GRACIASSS!!
Buenas Sergio, gracias x el tutorial, me ha servido muchisimo! Ahora, una consulta...que pasa con el diseño responsive? He visto que la vista en celulares no queda bien, ya que al darle margen negativo a la sección, no ocurre lo mismo que en la vista para pc..en conclusión, el diseño en celulares no me queda bien. Hay algún otro truco para solucionar esto? Gracias, un abrazo!
Me ha pasado lo mismo, encontraste solución a esto?
perfecto! gracias!!
Gracias
Hola Sergio, muchas gracias por el tutorial. Me ha servido en PC. En cambio, en móvil aparece un banner blanco en la parte superior con el menú hamburguesa. ¿Cómo puedo hacer desaparecer eso y que el menú hamburguesa quede encima de la cabecera (también de forma invisible)?.
a mi me pasa lo mismo
Me pasa lo mismo lo has solucionado??