EFECTOS Visuales ELEMENTOR #2 - FIXED SCROLL BACKGROUND
HTML-код
- Опубликовано: 17 июн 2019
- Con este pequeño truco he realizado algunas presentaciones. Utilizaremos la propiedad fixed del fondo para acompañar con imágenes una serie de secciones en Elementor. Utilizaremos también el widget Scrolling Navigation para dotar de un menú a este efecto.
🔰 JET ELEMENTS (Incluye el Scroll Navigation)
bit.ly/2ISA1XI
MEJOR PACK DE PLUGINS PARA ELEMENTOR
🔰 SUITE COMPLETA:
bit.ly/2U3wgHD
💪🏻 LO QUE APRENDERÁS EN ESTE CANAL
Haz branding, diferenciate de la competencia y da rienda suelta a tus inquietudes creativas. Consejos para negocios, tutoriales de diseño, WordPress, páginas web, SEO...
✅ NO TE PIERDAS NINGÚN VÍDEO
/ @yan_lmb
💾 ZONA DE DESCARGAS GRATIS
Descarga todos los archivos, plugins y otros recursos desde mi zona de descargas.
lamaquinadelbranding.com/zona...
🔊 PODCAST SOBRE NEGOCIOS Y WORDPRESS
Podcast sobre Negocios y WordPress con Elías Gómez:
negocioswp.es/
😶 ¿QUIÉN SOY YO?
Me llamo Yannick García y trabajo el branding y el marketing online de marcas, pero siempre desde un punto de vista basado en el diseño gráfico, que es mi principal pasión. Es por eso que en este canal, además de formarte para la gestión de tu marca, encontrarás tutoriales, consejos y reflexiones sobre diseño, photoshop, after efftects y hasta 3D.
Grande amigo Yannick!!! 🇵🇪
Grande maestro!!!! Te ganaste otro suscriptor. Muchas gracias por compartir tus conocimientos.
EL MEJOR CANAL DE RUclips y con MAYÚSCULAS 🎉🎉🎉🎉🎉🎉🎉🔝🔝🔝🔝🍻🍻🍻🍻
Bro! Sos un crack!! Sigue haciendo vídeos de experiencia de usuario para una web, se aprende mucho de ti 🙌🏼
Me ha encantado! Muchísimas gracias por el tutorial. Saludos desde Perú! 💛
Interesante te ganaste un nuevo suscriptor porque hiciste algo que otros no han hecho o al menos en español sigue así se diferente a los demás con novedades y ejemplos únicos. Tengo campanita activa.
Brutal este vídeo!!!.... Las explicaciones sencillas son la mejor manera de enseñar!!!. Saludos desde Venezuela!!!
Muchas gracias por otro vídeo estupendo y tan bien explicado! :)
Muchas Gracias, Buen tutorial.Saludos
Gracias por tu aporte Yannick eres un crack...!!!
Gracias! Que buen efecto..Eres un crack Yannick!!
Saca más cosas como estas, , para los que empezamos es de mucho valor y no sabemos como se hacen. Gracias.
Mu bueno. Incluso la aplicación para los Ferrari es muy buena. Para el cuentagotas yo uso ColorZilla que seguro que conoces. Claro, el ideal es que estuviera integrado con Elementor, pero bueno, es una opción.
Si supieras cuanto me he partido la cabeza buscando algun plugin que haga esto y vos lo enseñas y ha sido duper fácil, porfa crea más videos como estos de efectos...pdta, me gustó tu contenido que me suscribí a tu academia 🙂
Me encanto 👏👏. Muchas gracias
Buenas! El simple truquito de poner la imagen como ''fija'', da mucho juego y hace a la página o a la sección bastante atractiva.
Me ha gustado y servido mucho, ahora a seguir aprendiendo poco a poco.
¡Muchas gracias!
Mil gracias!! excelente vídeo
top, y explicado perfecto. Ayudas mucho!!!
Nunca comento pero esta vez tocaba que ¡TRUCAZO!
Mas videos como estos 🙏🏼
Te pongo "Like" antes de verlo porque ya sé lo capo que sos Yannick, ¡gracias amigo!
X2
tu cotenido es genial hermano
La ostia!! mil gracias!
Uff genial,nuevo suscriptor..!
Muy bueno, muchas gracias
Gracias, un abrazo.
Muy bueno ya tienes otro suscriptor mas
Mil gracias!
GENIO !
Woouuu súper tus vídeos, una pregunta, se puede implementar o crear ese scroll para una página tipo portafolio Freelancer. ??
Buen video, nuevo sub !
asombroso
eres un maestro
Muchas gracias, me sirvió muchísimo. Sabes como puedo lograr que en teléfonos mobiles también se vea el efecto?
buenissimo video, tengo una duda, si quieres hacerlo igual pero la mitad de grande?
mil gracias por tus videos
Si lo hacemos en un proyecto real y en esa página hay más cosas aparte de esos productos ¿Habría alguna forma de por ejemplo a mitad del scroll (donde ya no hay ni coches ni móviles) dejara el producto de estar en estado fijo (fixed)? Lo digo porque si no seguimos arrastrando el último producto hasta el final de la web. Gracias, muy buen video, muy buen contenido, me suscribo.
Gracias Yannick! algo tan sencillo y visualmente tan poderoso.
podrías recomendarme un plugin paralelo al que muestras acá que sea gratuito para el scroll navigation? y otro también para poder exportar a html una pagina hecha en elementor porfavor.
Grande maestro, me encantan tus videos, una consulta, como puedo ubicar en el buscador de plugins el scroll navigator xfavor xq ni se como es su logotipo para poder ubicarlo mejor.
Sos grande
Hola Yannick. Que buenos tutoriales!! Gracias!! Por cierto, ese widget de "scroll navigation" no me sale y si que tengo elementor PRO. Un saludo.
graciass
bro.. gracias por valiosa información
Solo una pregunta.. cómo se ve esto en responsivo?
Gracias :)
Super
Buenos días, fantástico !, muchas gracias :), prodrías decirme cual es el plugin?, ya que no lo encuentro:(. Si busco por crock block no aparece
Hola saludos puedo hacer scrolling o dejar una imagen estatica en elemetor basico? Soy proncipiante
grandioso video, me ha quedado claro como hacerlo en forma vertical pero si quisiera hacerlo de forma horizontal como lo podria hacer(para que me quede un bloque arriba y otro abajo) de tal forma que me quede por ejemplo una portada fija(imagen fija) y poder hacer scroll sin que se mueva mi portada gracias
Hola, una pregunta hay un efecto que gira un objeto 3d mientras baja el scroll? quiero ponerme creativo con una persona mirando desde abajo hacia arriba pero no se si se pueda :P
Hola, es algún plugin la opción donde ordenas las capas del rojo, amarillo, negro ? Saludos Maestro!
Melhor que temos
Hola, conoces de algun plugin para generar esa navegacion scroll que sea gratuto?
Hola estupendo tu video la información para los que empezamos es muy buena, me gustaría por favor que me ayudaras con el parallax, he hecho en Elementor uno muy sencillo dejando una imagen que ocupa toda la pantalla fija el texto inferior sube través de la imagen y para que funcione en las tables y en los móviles le puse un código CCS y funciona perfectamente en los móviles Android pero en los iPhone las imágenes quedan fijas y con tanto zoom que no se distingue nada la imagen. Te doy las gracias por este video y ojalá que me pudieras ayudar con mi situación. Un saludo
Buenas Yannick, en los ajustes no me sale la opción de "Full section switch" por lo cual bajar con la rueda del ratón es muy engorroso.
¿Sabes como puedo solucionarlo?
¡Gracias!
Que crack
Hola de verdad me sirvio mucho, pero tengo una duda, yo lo incorpore en una pagina pero los puntos se ven en toda la pagina. como los oculto parq eu solo se vena en la sección donde tengo el scroll.
disculpe, la tipografia que uso para los titulos como rojo, ¿cuál es? por favor
Excelente video, una duda.. existe algún video donde expliquen como crear un live o en vivo de un minuto a minuto en texto, ejemplo: cuando pones un juego de futbol pero sin video pero tienen una sección del minuto a minuto y te van pasando las acciones en texto, ejemplo, min 4 gol de messi o min 10 tarjeta amarrilla del equipo tal del jugador tal y vas siguiendo el juego de esa manera sin necesidad de ver el video en vivo.... Gracias y disculpa la molestia :)... no se si esto se pueda hacer a través de worpress con algún plugg in y desde ahi alimentar la info y trasmitir en vivo esa pagina.. Gracias... La idea es que yo alimente esa fuente para que la gente pueda seguir el en vivio en mi pagina web de lo que pasa, y no nada mas llenarlo con texto sino tmb con fotos, como fotos de publicaciones de twitter de lo que están opinando lo demás de lo que pasa.... y la idea es que cada cierto tiempo se vaya actualizando solo sin necesidad que la gente tenga que estar dandole refresh a la pagina para ver las nuevas actualizaciones, de hecho te comparto una pagina donde sigo la formula 1, vas a encontrar una tabla de posiciones de los pilotos pero a un lado de esa tabla, a la derecha, veras un recuadro de un minuto a minuto, de hecho te vas a dar cuenta que cada nota o actualización tiene una hora, incluso una bandera a cuadros, ahi veras que van compartiendo lo que va pasando incluso suben fotos de notas que van pasando en twitter, algo asi es lo que quiero aprender a hacer, dejo la liga... www.motor.es/formula-1/test-f1-directo-pretemporada-2022-barcelona-dia3.html
Justo lo que necesitaba para un proyecto!! enorme!! muchas gracias por aportar estos detalles. El único problema que tengo que al hacer scroll y que baje en forma de diapositiva, con "Full section switch" activo, no me realiza ese efecto. ¿Por que puede ser? Este detalle es justo lo que mi cliente quiere.
Mmm no se si lo entiendo. ¿Puedes mandar una url o un sitio de ejemplo?
@@yan_lmb si, me refiero es hacer el scroll como explicas en este vídeo en el minuto 11:50. Tengo todo tal cual lo explicas, pero no me hace esa función. También te paso esta web de ejemplo, pero no utiliza este plugin, es con HTML y CSS. pulsen.es/
@@ersant3289 que porquería de web.
Tengo una duda, sabe por qué cuando subo imágenes en Elementor se ven de diferente color a la que se diseñó originalmente? Lo que pasa es que diseñamos tres imágenes iguales, solo cambia el icóno, y al subirlas en Elementor, se ven de distintos colores
Wonderfull video. But unfortunately, I didn't understand Spanish. I love the concept.
Hola, Yannick! un gusto saludarte, he aplicado a mis páginas algunos consejos tuyos, en el min 14:44 dices que la imagen es un fondo (el carro negro) que ya está a la izquierda y que lo estás metiendo a toda la sección... ¿Qué tan chica es la imágen o mejor dicho las imágenes porque yo cargué unas de 640 x 213 px y me quedan grandes? ¿Cómo haces para que éstas te queden a la izquierda y para que la columna de la izquierda de cada caja esté al tamaño de la de la derecha? ¡Gracias amigo!
Hola buen vídeo. Tengo una duda que no encuentro la respuesta en ningún lado. En el widget de scroll navegation quiero saber cómo ocultarlo en ciertas secciones, es decir, en la página que yo tengo se ve en toda la página y solo quiero que aparezca en ciertas secciones dónde tengo imágenes, espero me di a entender y espero su respuesta, gracias.
Hola ´¿alguien sabe de un plugin que cree mejores efectos de desplazamiento que los que vienen en elementor pro? Estuve viendo las opciones que tienen divi y son mucho más avanzadas...
Con herramientas gratis se puede hacer esto? o solo de pago??
disculpa de donde sacas ese navegador peque;o en elementor _?
Genial, pero como lo ajustas para dispositivos móviles, versión celular, se ve mal
Hola, he estado diseñando una web y estoy en el modo responsive y queria consultar como puedo hacer de que en mi web al entrar en chrome la barra de http no e mueva para que no altere el diseño de la web, ya que cuando uno entra en una web desde chrome es normal que en la barra de http se deslize hacia arriba y me gustaria ver una forma para que no lo haga y se quede estatica, es posible eso?
yannick como estas nose como integrar el widget para hacer el menu nose comoo agregarlo
Muchas Gracias y en movil como se vera igual?, lo voy a probar
También funciona en móvil pero yo haría una nueva versión sin animación.
Cuando acabe con este minicurso, se me ocurre que podría hacer una serie de vídeos: consejos y optimización para la versión móvil.
Creo que puede estar bien.
¡Saludos Eliberto!
@@yan_lmb Llegaste a realziar este video? porfa me comentas. Gracias.
Y cómo se ve en móviles??
Me gustó la musica de la presentación del video , me la podrias pasar? :)
yo no tengo esa opcion en mi panel, por que sera? alguien le ha pasado que no aparece scroll navigation
Por que no se desplaza de esa forma en elementor pro la nueva version? no queda fijo
Porfa haz el ejemplo para mobile
Hola que tal amigo y no puedes compartir las imagenes que usas para descargar, gracias
Hola, tengo Elementor Pro, pero no encontré el Scroll Navigatio ¿es un plugin aparte?
Crocoblock
So cool! Curious how this looks on mobile view? #mobilefirst2019
Muy buenos vídeos Yannick. Una pregunta. ¿Alguna vez has tenido problemas con la visualización de efectos de movimiento y animación de entrada en móviles iPhone? Tengo problemas en una landing con Elementor y GeneratePress y no encuentro información y menos en español. solo esto: github.com/elementor/elementor/issues/8682
Gracias!
Solo cuando he intentado comprimir al máximo JS y demás para la optimización. Por norma general no me pasa. Siento no poder ayudarte, pero voy a investigar más al respecto, si me das una url de ejemplo donde pase igual puedo descubrir algo.
@@yan_lmb Gracias por contestar. Ya lo he solucionado. Al final de esta url comentan que este fallo pude pasar en Safari (docs.elementor.com/article/57-entrance-animations).
En mi caso el bloqueo se produjo al añadir dos animaciones sobre una misma imagen. Tenía un efecto al hacer scroll y otro al mover el mouse. Esto provocaba que todas las secciones de la landing que tenían cualquier efecto de movimiento se dejasen de ver en iPhone.
Para solucionarlo y para no tener que hacer la landing desde el principio, no solo hay que borrar uno de los dos efectos, sino que para que la página se vuelva a ver bien en IOS fue necesario volver a la estructura de página por defecto y después volver a cambiar a la estructura de página Elementor Canvas.
Espero haberme explicado bien :)
Un saludo!
P.D.:Y ahora un poco de spam de valor: sergiomou.com/
Cómo puedo agregar el botón de descargar app y que descarguen un app PWA para que se instale como aplicación en Android y IPhone
Donde se consigue el Scroll Navigation ? En mi elementor no está
como puedo hacer ese efecto pero en mobil
Amigo como te puedo contctar hay una pagina que tiene un estilo y me gustaria saber si se puede hacer con elementor
Si tienes alguna duda puedes enviarme un email a yannick @ lamaquinadelbranding.com, si necesitas algo más profundo o que analice contigo el proyecto, puedes realizar tu consulta desde mi sección de consultoría en mi página web.
Add English subtitle sir, thanks for tutorial btw
Muy bonito, tengo una duda scroll navigation pertenece a elementor pro? O usa otro plugin para eso, saludos :)
Es uno de los widgets que trae el Jet Elements: bit.ly/2z8q7Ng
@@yan_lmb muchas gracias amigo :)
@@yan_lmb tendras algun tipo de descuento de Jet Elements?
@@joserojas6965 Pues se lo acabo de preguntar y me han dicho que les envíe mi canal de RUclips. Esperemos que sea de su gusto jaja. La verdad es que ya podrían darme esos descuentos que anda que no tengo ya vídeos de Crocoblock en el canal. Y yo que quería hacerme un canal de marketing online... ¡Te mantengo informado José!
¡Pues finalmente lo hemos conseguido José! Me han dado un código de un 10% de descuento para todos mis suscriptores, es el siguiente: LaMaquinadelBranding
Supongo que sería lo suyo ponerlo en la descripción de mis vídeos a partir de ahora 😅 ¡Gracias por la propuesta! me dan ganas de pedir descuentos para todos los plugins que usamos aquí en el canal xD.
Hola una pregunta, si yo quiero hacer una pagina para una radio, y necesito que el reproductor este siempre en el menu como se puede hacer? necesito que siempre esté funcionando a menos que el usuario lo desactive
Tendrás que colocar una función de AUTOPLAY en el reproductor con JavaScript.
Hola! Ha quedado perfecto en el escritorio, pero quiero que sea igual en tablet y en móvil. Al ponerlo fijo me dice que solo se verá en escritorio. ¿Cómo puedo hacerlo?
La misma pregunta hice hace unos instantes, pero veo que el amigo no responde :/
Lograste resolverlo?
Se me ocurre también como hacer otro layout básico para tablet y movil y esconder el principal. :/
holaa quisiera saber las medidas de las imagenes porfa
hola amigo sabe sque no me aparece la opcion scroll navigation
como solvento eso
Es del Jet Elements, no se si lo tienes > bit.ly/2Ef6zMW
es la version pro o se puede hacer version normal
Tengo la misma duda
con elementor free?...
muy bueno aunque tengo una consulta tengo que agrgar animaciones y asi colocalo asi tipo de galeria en el heder me lo han pedido y me estoy enredadando mucho, por fa me ayudas por fa
este es el modelo que busca www.almac.pe/
No me aparecen las opciones que tienes en elementor como: posición de contenido, posición de columna :/
a mi tampocoo :S Como se puede activar?
Tienes que cambiar la altura de la sección a altura minima o alto de pantalla. ¡Prueba con eso!
Tienes que cambiar la altura de la sección a altura minima o alto de pantalla. ¡Prueba con eso!
Alguien sabe alguna manera de aplicarle un autoplay después de x Mili segundos para que inicie el scroll hacia el ultimo punto?
Gracias por adelantado y el tutorial increible👍🏻👍🏻👍🏻
mmmm... El javascript no es mi fuerte. Te puedo ayudar a medias. A ver lo de que haga scroll automático, instala el code snippets y con este código, en cuanto cargue te hará scroll hasta el #id que tu quieras de sección >
jpst.it/2bepk
Ahora bien, con jQuery tendrías que detectar la inactividad. Supongo que habrá eventos tipo mousemove, keypress etc y se podrá crear una función que detecte si no hay actividad y lance la función que te he pasado al de 5000 milisegundos o cuando sea. Y aquí ya me pierdo jaja. ¡Programadores de jQuery del mundo, ayudad a este hombre!
@@yan_lmb gracias, aquo tienes un nuevo, mañana mismo me haré subscriptor. Llevo desde las 5 de la tarde enganchado , he querido dar una vuelta profesional a mi vida aquí en Andorra y tus videos muy top, y mira que llevo tutorials estos dias tan duros... saludos y gracias, contenido util y directo al tema
@@rubenmarques2156 Gracias Rubén, ¡Bienvenido! 🎉
Hola buen vídeo. Tengo una duda que no encuentro la respuesta en ningún lado. En el widget de scroll navegation quiero saber cómo ocultarlo en ciertas secciones, es decir, en la página que yo tengo se ve en toda la página y solo quiero que aparezca en ciertas secciones dónde tengo imágenes, espero me di a entender y espero su respuesta, gracias.