Cabecera/menú transparente con efecto sticky en scroll vertical - Elementor
HTML-код
- Опубликовано: 24 фев 2021
- Diseñar un menú de navegación transparente es más sencillo de lo que piensan. Les voy a enseñar cómo agregar un efecto sticky con cambio de color. ¡No olviden suscribirse a mi canal!
Déjame un mensaje en mis redes:
Si tienes dudas del video, sugerencias de otro tutorial o simplemente quieres decir ¡Hola! Aquí me puedes encontrar:
Facebook --- @manumartinez.mkt
Instagram --- @manumartinez.mkt
Perfecto, estaba luchando para hacer esto con css y no sabia del plugin, muchas gracias por compartir ♥
Eres un genio, gracias por ayudar a los que estamos aprendiendo 👏👏👏🥰
Excelente Manu, me cayó como anillo al dedo, justamente en un proyecto que ando trabajando ahora. Que sigan tus éxitos!
Muchas gracias , excelente tutorial !!!
Muy bueno Manu !! Mil Gracias !!
Muchas gracias. Muy buena clase.
Gracias Bro !!! muy buen tuto! Bendiciones brutales!
Me encantó como quedó!! Gracias soy fan de tus tutoriales. Saludos desde Venezuela
excelente tutorial! muy bien explicado! gracias
Grande Manu eres un capo éxitos y bendiciones
fantástico, enhorabuena.
Hombre buenísimo era lo que necesitaba. Muchas gracias!! 👍🏻
Sos crack. Esto estaba buscando, UNA JOYA. Exitos desde Argentina,
Excelente me ha servido de mucho. Gracias por compartir
Gracias por tus vídeos son muy completos
Muchas gracias, muy buena alternativa
Gracias bro, me funcionó tremendo
muy buen tutorial gracias
Genial eres el mejor, gracias...
Muchas gracias profe!
Te descubrí hoy y me encantaron tus videos! Sigue subiendo por favor !
Me hiciste la mañana! No había podido subir videos por el trabajo, pero ahora sí ando en llamas (de las buenas). Todos los martes y jueves voy a estar subiendo. Saludos!
Vato mil gracias vi mil videos indus y nunca llegaba a lo que queria salvo a ti .. te ganaste un abrazo
Abrazo de vuelta!!!
excelente tutorial
Excelente video!
Buena información y bien explicado, muchas gracias. Suscrito.
Genial muchas gracias!!
Muchas gracias por éste video, me encantó, andaba buscando un tutorial exactamente así
@mateviro - q bueno q te sirvió! A seguir aprendiendo de Elementor.
Muchas gracias !!!!!!!!!!!!!!!!!!!!!!!
Gracias Manu!
Tuve que meterle el color con CSS al sticky header, porque aún activándolo, no cogía el color de fondo.
Usé la clase: .she-header {background-color: white !important}
Excelente video hermano. Saludos desde Venezuela
Un abrazo desde México!
Muhas gracias!! me han servido muchísimo todos tus video! sos un crack. Saludos desde Colombia
Abrazo hasta Colombia!
Muy buen video
me salvaste bro, pues eso del pluggin para el sticky no la sabia que la podia colocar... y con eso ya pues todo genial... muchas gracias, por eso me suscribo y pulgar arriba
Hola Bro! gracias por tu comentario. Saludos!
¡Muy bueno!
Excelente
Me encantan tus viedeos. porque enseñas cosas muy particulares de elementor. y a la verdad eso nadie lo hace. Ojalá y sigas enfocado en ese micronicho y no te salgas de el
Fuí el like 1000 muchas gracias por el tutorial
Gracias por tu apoyo y comentario!!! 🤜🏿
Hola Manu, gracias por el video, a mi no me da la opción de elegir Header en crear plantillas (new templates), no entiendo por que, y por ello no puedo avanzar, agradecria me ayudaras, un saludo
Videazo Manu
eres un master
Bro! me acabas de hacer la mañana. Gracias x el comentario
Por eso pago RUclips premium, gracias por ese dato.
gracias amigo despues de 5 años haciendo webs aprendi algo nuevo
Éxito en tus proyectos Bro!
Muy interesante, un comentario, el sticky que manejas no esta comprobado en la versión actual de wordpress, algún otro que recomiendes? Gracias y saludos...
Gracias!!!!!!!!!!!!!!!!!!! like y subs.!!!!
gracoas m ayudo mucho para hacer meno negro que no podia con una plantilla
Hola genial muchas gracias. Te hago una consulta, como puedo hacer que desaparezca cierta informacion al hacer scroll? Por ejemplo: Tengo mi logo + menu + telefono o info de contacto y cuando el usuario comienza a scrollear, quiero que solo quede logo+menu. Desde ya muchas gracias. Espero tu respuesta. saludos desde argentina
Se puede utilizar para la vista en móvil, saludes muchas gracias por el video.
Hola! Esto solo aplica para la versión PRO correcto?
Muy buen video. Lo puse en una web pero tengo problemas con el logo que no se achica en version mobile. Que puede suceder? Gracias!
Hola, Gracias por compartirnos, deseo tener elementos pro para hacerlo? Muchas gracias
Hola Manu, realmente me sirvió el tutorial para generar variables de menú interesantes!!!
Quisiera preguntarte si puedes ofrecer como tutorial que el Header desaparezca y aparezca al hacer scroll, hay algunas opciones para generar el efecto por CSS pero lo desconozco. Muchas Gracias
Hola Julian, porfa sígueme en Instagram @Manumartinez.mkt y me mandas un ejemplo si lo tienes a la mano, me aviento el tutorial en la semana
Que bien video!!! Oyes y como ajustas el del móvil queda amntonado el menú de la foto en el header. Podrías apoyarme
Maestro, un saludo, te puedo preguntar algo, no logro que se reduzca el alto de la seccion y del menu, como a ti, que si se reduce el logo tambien del menu, para que quede una franja mas delgada, algo me faltara checar?
Saludos, se podría hacer en Block Editor?
Hola Manu, a mi no me aparece la opción de header al intentar crear la plantilla, no sé sise a por la versión del Wordpress, sabrás por que?
Hola, cuando baje es posible que el logotipo cambie por otro ? gracias
Saludos Manu, estoy haciendo esto, pero no logro que se cambie el color de fondo... será que ya el plugin no funciona o estare haciendo algo mal?
Buenas noches, como le cambio el color al texto del menu para cuando haga el efecto del sticky? Buen video saludos...
Puedes hacer un vídeo donde tengas la cabecera y un aside fijo?
solo para elementor pro?
Hola Manu! Mil gracias por el tutorial, me quedo genial el menú. El problema ha sido que después de que se previsualizara bien durante un tiempo, ahora ya no lo hace, mientrs maqueto el menú se ve correctamente, pero cuando previsualizo, no se ve bien, sale el menú en vertical descuadrado... he borrado la plantilla del menú y vuelto a hacer, desactivado el pluguin, etc y no hay forma de arreglarlo, ¿podrías ayudarme? muchas gracias!
Hola! como primer paso revisa si estás trabajando con Hello theme de Elementor, después revisa si tienes algún plugin de optimización de velocidad (si lo tienes desactívalo), por último te recomiendo desactivar el resto del tus plugins y solo dejar Elementor. Espero lo soluciones :)
Hola, al crear el header con las dos secciones si me apareció el logo de la pagina principal pero no me aparecen los títulos de los menús que necesito, como puedo hacer para que me aparezcan. En mi pagina principal tengo, inicio, sobre nosotros y términos y condiciones. Gracias.
Hola estimado, el plugin parece que y ano funciona bien a partir del WP 5.7, no hay otro plugins similar o mejor, no importa si es paga.
@Jainner, gracias x tu comentario. Por el momento ese es el plugin que utilizó, no he notado incompatibilidad en las actualizaciones de WP, te marca algún error?
el nav menu?? donde lo consigues??
Hola! el tutorial es GENIAL pero me ha surgido un problema!! He seguido todos los pasos y ya tengo el menú activo en mi página web. El problema es que en la versión móvil se ve desplegado y doble, entiendo tendrá que ver con la plantilla...pero no se cómo arreglarlo! gracias por tu contenido!
Como se realiza un menú con submenús, es decir en este caso que muestras como ejemplo del menu Tienda al darle click a la flechita me abra los submenús y no me mande a la pagina de Tienda con Elementor gratuito?
Hola Manu, podrías hacer un tutorial de como hacer un Menú Blurry Transparent 🙏
Tsssss q buena idea!! Voy a aprovechar para armarlo con los nuevos contenedores de Elementor. Lo subo la siguiente senana
@ Muchas gracias, estaré al pendiente :)
Primero que nada, muchas gracias por el vídeo; me surgió una duda, ¿sabés si se puede limitar este? para que deje de funcionar, o "desaparezca" en cierta sección de la página.
Hola Camilo, sí! Cuando publiques tu cabecera te debe de salir una ventana emergente con las condiciones de publicación.. .puedes elegir que la cabecera solo se muestre en páginas específicas de tu sitio para que en otras páginas o links no aparezca.
Hola, estoy haciendo una onepage, con un menu fijo, en mi menu tengo "sobre mi" cuando le doy clic se dirige a la sección "sobre mi" pero la cabecera oculta el titulo, sabes como solucionarlo?
hola una pregunta viera que el logo del menu se encoge por completo y se desaparece, sabes como corregir eso?
hola. excelente video. Queria preguntarte si hay un plugin o algo que me permita separar palabras por lineas, como en el menu del video donde dice "nuestra empresa" que quedara en 2 lineas, nuestra y debajo empresa.
Hola Cristina eso lo logras con algo de HTML, en el campo de "contenido" en donde ingresas tu texto, solamente tienes que insertar el código en donde quieras un salto de línea. Ejemplo. Nuestra Empresa. Saludos!
como le hacemos con CSS sin plugings ? es posible?
Hola necesito q este desplegado el menú en móviles usando un plugin nose como manejarlo en wordpress tengo astra
Que tal Manu, excelente tutorial, me funciona todo, sòlo tengo un problema, en la plantilla del header me aparece el menú completo, pero en elementor sólo aparece 1 sección las demás desaparecen, me podrás ayudar a resolver este problema?
Hola Marco! Pudiste resolver tu problema? Necesitaría ver un screen shot del problema para ayudarte más a detalke
Saludos, apenas estoy dando mis primeros pasos en el desarrollo web a través de Wordpress, y ahora me encuentro con tantas opiniones diversas y confusas de cual editor usar, que si Elementor o Block Editor (Gutenberg) entre otros; cual sería tu recomendación como especialista en el área? de antemano he visto videos del rendimiento de sitios web realizados con esos editores y la diferencia es mucha. Gracias de antemano
Hola! Te recomiendo utilizar Elementor PRO. Es un constructor de paga pero vale la pena considerando que vas a ahorrar horas o días en diseño y desarrollo. He diseñado más de 200 páginas con Elementor en los últimos años. Hoy voy a subir un tutorial a las 11 am para que aprendan a replicar una página famosa y que vean que es fácil hacerlo. Saludos!
@ Muchas gracias por tu consejo, bendiciones y seguiré tus videos.
Hola Manu buenas tardes,
Cree un boton flotante de wasap a una pagina en especial. Ya ahora me aparece en todas las paginas.
Lo elimine de la pagina inicial y aun sigue apareciendo en las demas.
Como hago para eliminarlo del todo.
Gracias y muy agradecido.
Saludos Manu espero que estés bien
Tengo varias Preguntas
1. No me sale las diferentes opciones en la nueva plantilla, por lo tanto no puedo seleccionar Header
2. Yo tengo una cabecera que me viene cuando comencé hacer la web ...como hago la elimino?
Hola Eddy, estás trabajando con Elementor PRO? Para reemplazar la cabecera que tiene tu página te tienes que ir a la sección de plantillas en tu tablero de Wordpress (necesitas Elementor PRO), eliminas tu plantilla de la cabecera actual , creas una nueva y cuando la publiques, eliges como condición "publicar en el sitio entero"
Una duda, esto también funciona si es que ya se tiene la cabecera pre-instalada??
Sí... vas a necesitar Elementor PRO para lograr este efecto. Puedes utilizar tu cabecera actual o crear una desde 0.
no es compatible con mi versión de wp, que podría hacer?
¿Por qué mi logo se encoge, pero la barra no? ¿Alguien me puede ayudar?
hola, y que paso con parte superior de color rojo ?
Hola muchas gracias por el video, yo lo tenia con código css y quise hacer la prueba con este plugin, solo una pregunta, hay forma de cambiar el color del texto del menu al hacer el scroll?, tengo las letras blancas y al hacer el scroll el fondo cambia a blanco por lo que necesito que cambie también el color del texto. con css puedo hacerlo agregando
selector.elementor-sticky--effects a
{
color: #333 !important;
}
selector.elementor-sticky--effects a:active
{
color: #D2BC9F !important;
}
pero quería hacerlo todo con el plugin si se puede, el color del link activo tampoco me funciona si lo uso asi.
Saludos
Hola Francisco! Me parece que el plugin no tiene la opción de cambio de color de texto, solamente el cambio del fondo y el tamaño del logo.. Saludos!
Excelente! Como hago para cambiar también el logo al hacer scroll?
Buena pregunta 🤔.. te gustaría que el logo cambie de tamaño, color?
@ sí la verdad seria colocar el logo de otro color
Hola! Lograste cambiar el logo al hacer scroll?
Muy bueno, pero no entiendo porque me funciona solo en el visualizador, cuando entro a mi pagina directamente desde el navegador, no pasa nada con el efecto...
A mi no me aparece "header", me aparece: contenedor, página de destino, sección y página
buenas tardes, tengo problemas con un contenedor, no puedo editarlo y no me aparece en elementor, pero al ejecutar la web si esta, me pueden ayudar. pls
Muy buen tutorial, pero me perdí en el minuto 5:10 cuando omitió como metió el menú
Hola como hago para que vinvule a espacios especificos dentro de la página?
Puedes ocupar el widget de ancla, le asignas un nombre a la ancla y en Apariencia --- Menú... ingresas en el link #valor (ahí reemplazas la palabra valor y le pones el nombre que asignaste a tu ancla)
por qué cuando quiero elegir el tipo de plantilla no me sale la opción header?
hola como estas como hago para quitar la barra negra donde sale el nombre del sitio web por fa
Hola! te refieres a la barra negra en donde sale el logo de Wordpress en la parte superior izquierda? Esa barra aparece cada que estás conectado a Wordpress.. esa barra no está visible para los usuarios.
@ si esa barra gracias manu muy amable ya soy un fans tuyo
A mi no me ha funcionado, he seguido todos los pasos.. pero nada. Puede ser que es por los ajustes - Estructura de página: Elementor Canvas y no Por Defecto?
Hola! Correcto, elementor Canvas la da la instrucción al sistema que ponga un lienzo en blanco, que no asigne headers o footers. Éxito en tu proyecto!
A mi no me ha funcionado, he seguido todos los pasos y hasta he creado un nuevo header.. pero nada..
elementor basico no lo trae
Hola Jorge! vas a necesitar la versión PRO, pero si ya andas en esto del diseño web o estás diseñando tu página, vale mucho la pena Elementor PRO. Saludos!