😲 Cabecera Transparente con Menú Sticky + Efecto Scroll en WordPress con Elementor
HTML-код
- Опубликовано: 8 апр 2020
- 📢 Cómo crear un header transparente con menú sticky en WordPress usando Elementor.
☑️ Plugin necesario: 👉 sergioks.com/go/elementorpro/
☑️ 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/crear-una-cabece...
☑️ Plugin que puedes usar para añadir efectos scroll si no quieres tocar CSS
wordpress.org/plugins/sticky-...
Si te ha sido útil dale un like por lo menos. Gracias.
🤝 SERVICIOS
► Diseño web WordPress personalizado
sergioks.com/diseno-web-wordp...
► Tu web en 72 horas por 299€
sergioks.com/web-starter-pro/
☑️ HOSTINGS QUE RECOMIENDO
► FastComet: ⇒ bit.ly/2r3R14Y
► Raiola Networks -20%: ⇒sergioks.com/go/raiolanetworks/
► SiteGround: ⇒ bit.ly/2radT2a
☑️ PLUGINS Y PLANTILLAS
► GeneratePress ⇒ bit.ly/ytgeneratepress
► Astra Pro ⇒ bit.ly/2vlh5bc
► Elementor Pro ⇒ sergioks.com/go/elementorpro/
► 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/
Efecto que solo los disfrutaba con GeneratePress, ahora ya no me quedará fijo y del mismo color y ancho. Genial, gracias.
En general el contenido es claro y sin rodeos, muchísimas gracias por eso🔥🔥🔥
Gracias Sergio es genial este video y la forma de configurar el Menú.
espectacular como siempre sergio
Excelente!!!! el CSS funciona y todo está perfecto! Mil gracias!
Hola Sergio, muchas gracias por compartir. Muy bien explicado. Saludos
Gracias por la gran información! Gran herramienta Elementor. Feliz con tus tutoriales.
Busque todo el dia y por fin lo encontre!
maravilla de video! Llevaba un buen rato y lo he hecho y me he sentido Dios jajaja gracias Sergio :)
Tus videos son muy explicativos! 100 puntos para Griffindor!
Gracias Sergio! ... Excelente tutorial! Me fue de gran ayuda.
Gracias por el codigo! Genial video...lo que estaba buscando!!!
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; }
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
Excelente hermano. Sumamente agradecido. Saludos de un venezolano en Brasil.
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?
Sergio, como siempre super Nice you Training
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
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?
hola buen día Sergio y gracias por tus videos
Muchas gracias Sergio! funciona perfecto me ha ayudado mucho, Saludos!
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 😀
muchas gracias amigo, justo lo que necesitaba!!! excelente!!
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.
Muchas gracias
Grande, es justo lo que necesitaba
Crack!! Excelente tus videos!! Muchas gracias por compartir!
Gracias 😁
Parcero excelente!! Gracias por compartir
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.
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!
Gracias Sergio muy util, pero tengo un problema tengo 2 columnas la de la derecha son mis widgets y al lado izquierdo es mi post que tiene featured image, Post Title, Post Content y related post, mi consulta es como hago que todos esos elementos se mantengan en top? yo lo hice en cada elemento el stiky pero se superponen una tras otro cuando voy bajando :(
gracias, pregunta @sergioks usas alguna plantilla base? cual recomiendas?
Eres un crack hermano, muchas gracias.
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
10/10 el tutorial!! recomendadísimo
Muy buen tutorial, y gracias por los estilos css
Excelente, se agradece tu aporte
Gracias Sergio! Me ayudo mucho
Muy buena información, saludos desde Colombia y gracias.
Muchas gracias, funciona perfecto, era lo que necesitaba
Genial 😁
Justo lo que necesitaba, muy bien
AMO este tutorial muchas gracias!
Gracias!! Oye me puedes hacer el favor de explicarme como montar ese bloque encima del header? precisamente ese que está inmediatamente despues del header con cuatro columnas y numeros, para que quede asi montado sobre el header y como en el medio entre los dos? como se hace ese efecto? Muchas gracias, que queda superpuesto, en vez de quedar alineado despues del header.
gracias Sergio! excelente ! sirve un montón.
eres un genio, muchas gracias!!
Muchas gracias amigo , master !!!!
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?
Excelente tutorial, tenia semanas rompiendome la cabza, gracias
Muchas gracias bro, me ayudaste bastante.
Muy útil. Muchas gracias!
Gracias. Excelente video me sirvió de mucho.
Gracias Sergio!
excelente video . Solo una consulta , Si quiero cambiar el color de la fuente del menu al bajar , como sería el codigo ?
Muchas gracias excelente video..
Gracias amigo desde Colombia
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, muchas gracias
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
hola excelente aporte para que se coloca effects offset en 100 gracias
hola sergio, no me salio:S Cuando le doy a actualizar pagina el header sigue igual, no hace scroll (solo queria ese efecto)
Gracias por el aporte , pero tengo un problema, es que al quedar la sección del Header sobre la sección del fondo . ya no es posible editar o cambiar el fondo ya que el botón de modificar pagina queda detrás del botón de modificar del header. ¿Alguna solución o de plano tengo que volver a crear de nuevo todo?
eres un crackkkk men thank you!!!
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
perfecto! gracias!!
Hola, y gracias por el video. He pegado tu CSS y puedo cambiar el color y todo pero ahora la cabecera está en negro desde el principio. Antes era transparente y yo quería que se volviese opaca con el scroll como en el video. Gracias
Crack muchas gracias 👍
Muchísimas gracias!!!
Muchas gracias :D!
Eres un crack!!!
Hola Sergio! muy bueno el video. No veo el codigo que dejas para pegar en el css...donde lo pusiste? gracias!
hola y gracias por el aporte no entiendo lo del minuto 54 como escondes un menu primario y que cuando se aplique el efecto styki quede en la misma linea del menu primario el del efecto styki he visto otro tutorial pero hay que dejar un espacio en blanco cambiar el color a las letras para que se pierda en el fondo del color elegido para que cuando caiga el segundo menu quede ocuro espero me entiendas tienes muy buenos videos gracias
Muchas gracias por tan buen video, me ayudaste mucho
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 👍
Muy buen tutorial, no se si tengas algo de menús con iconos... Saludos...
Muy buen video
Hola, como adornar un slide con efectos , imágenes ,botones ,etc.. es con popus? Tienes algun tutorial?
Hola Muy buen tutorial como puedo hacer para que el texto tan bien cambie de color?
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?
Mil gracias gracias!
Muchas gracias!! Cómo puedo hacer que solo aparezca cuando un usuario hace scroll hacía arriba? Saludos
como colocarias el sitcky top pero seguido de otro seccion , hosea que se pegue al final de la seccion de arriba ?
me sacaste de una bro buen video
hola... muchas gracias maestro....
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.
Excelente 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
Sergio Ayuda ! No se si tienes un video o me puedas explicar como puedo crear una caja de notificación para cuando pasen el cursor del mouse sobre un texto en una tabla de precio. Es decir, está la tabla de precio y sus respectivas características de cada servicio y cuando la persona pase el cursos sobre alguna características se le habrá un popup como si fuera una notificación allí mismo con más info. Me ayudas plz !!!
Una pregunta, como puedo hacer para que el color del menú fijo cambie de color. Cuando está fijo digamos color rojo y cuando deslizó para abajo se quede fijo pero en negro
Muchísimas gracias crack
Gracias 😀
Una pregunta. Cuando creo desde plantilla y pongo Header no puedo activar el elementor Canvas. Por defecto me aparece el header del tema predeterminado. Alguna solución? Gracias
Muchas gracias.
Tengo una foto y debajo un texto quisiera que ambos bajen al mismo tiempo pero mi problema es que solo vaja el primero la foto y luego el texto detras de la foto no bajan al mismo tiempo
Gracias, dicculpa como agrego un carrito al menu de elementor?
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
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 fijate que lo hize pero el menu quedo detras alguna manera de corregirlo uso un slider como elemento que quiero que quede atras
Vídeo tutorial muy bien explicado, pero me surge un problema, al hacer scroll hacia abajo y cambiar la imagen del logo pierde el link que tiene el logo cuando está en el top. ¿Cómo puedo solucionar esto? No sé si habrá algún código css para incluir el link, he buscado pero no encuentro nada. Gracias. Un saludo.
hola estoy intentando colocar dos menu uno arriba que no va a quedar fijo y el de abajo que si va a quedar fijo el menu de abajo no se ve el logo solo las opciones del menu cuado hago scroll aparece el logo me puedes ayudar
GRACIASSS!!