***2023 Update: To add scrolling effects at 02:55, Transparency is now located in Advanced ► Motion Effects ► Scrolling Effects ► Transparency
@MinisterioÚltimoPacto4 ай бұрын
Literally the easiest tutorial on this on KZfaq. No code, or plugin. Outstanding!
@kwdigitalsolutionswebsited33656 ай бұрын
Wow, so much easier than in the past where I've had to use CSS and offsets etc. thanks for the great video.
@TechtipsbyNola6 ай бұрын
Update. Doesnt work for extra break points you might add to Elementor. They dint show up. Ie 1366 laptops.
@Nadworks-cb2 жыл бұрын
How would we now change the logo (i.e. if we want to switch the header colour to white and swap the logo with its inverted version)?
@rswebmarketing Жыл бұрын
There is a problem in your tuto. When we first arrive on the website, the black color on the background appears, then transparency arrive after 1 sec. The black background must arrive only if the visitor scroll, not when he first arrive on the website.
@ChathumalJayasingheАй бұрын
same
@williammatthynssens7999 күн бұрын
Just set an entrance animation with a delay of 200ms on that section. You can find it under Advanced > Motion effects > Entrance Animation. That way the section will fade in just after the weird flash so it isn't visible.
@huynguyen-fd8pw3 ай бұрын
For anyone having issues with transparancy hiding the logo and navigation - make sure to use the motion effects/transparancy in Style NOT Advanced.
@williammendonca78302 жыл бұрын
It would be amazing to see this Tips & Tricks videos subtitled in other languages, the reach for the plugin to reach more people would be very expressive.
@baderna20002 жыл бұрын
Thank you for all the effort that you're puting into the development of Elementor. I JUST HOPE, ONE DAY, YOU'RE GONNA REALIZE THAT 90+% OF THE WEB VISITORS ARE USING A MOBILE (but you still insist with the desktop tutorials, desktop tweaks etc..) ...
@Elementor2 жыл бұрын
Hi Baderna, thanks for your comment. We have many tutorials on responsive editing in Elementor. You can apply the responsive principles learned there to the desktop tutorials.
@mdfaizanyt Жыл бұрын
@@Elementor i want my main home page header and footer to stick on all pages, which i dont know because header and footer cannot be seen in all pages except main home page, so what i did is that i copy header section of main home page and pasted in all pages one by one.
@itsallaboutnatural10 ай бұрын
Just an update to this very helpful video. In the latest version of Elementor PRO 3.16.xx, use the transparency effect in the style tab, not in the advanced tab.
@Elementor10 ай бұрын
Thank you, we've updated the instructions in the description.
@JoelMonteManalili-yb3mp10 ай бұрын
@@Elementor It should be under the Styles tab ...
@se1ectmedia Жыл бұрын
This is great but what if I want to change the text on scroll is that possible from say white (when its transparent) to black (when the background changes color?) that is where this really makes it.
@mmb8112 жыл бұрын
3:31 Not looking good (Test that page on a web browser and you will see the issue. Works great in the editor, like you showing in the video) On testing this, I discover that there is an issue with this feature. Lets assume that you select green (as background) for the fade in color, then when the page initially loads, it shows the heading background as green, then it quickly fades to transparent. After that initial load it works, but the fact that it shows that initial green, makes this feature unusable on a live production site. Guess it's back to the CSS
@carlosyarad51652 жыл бұрын
Hi, Where you able to solve it? I keep trying without success. The solid color keeps appearing for a second and then it becomes transparent.
@adrian.fernandes Жыл бұрын
Agreed. Same issue when tried. Found a solution?
@genmcc10 ай бұрын
Same-ish. Mine flashes color and then has a white background. No good :(
@mmb81110 ай бұрын
Sadly no, you have to look for a css solution as Elementor has not bothered to fix it!
@williammatthynssens7999 күн бұрын
Just set an entrance animation with a delay of 200ms on that section. You can find it under Advanced > Motion effects > Entrance Animation. That way the section will fade in just after the weird flash so it isn't visible.
@iTradeAIMS2 жыл бұрын
Thanks, I applied this to my current website and instantly saw great improvement.
@Elementor2 жыл бұрын
Love to hear that :) Thanks for sharing, iTradeAIMS.
@mandalaprayoga2 жыл бұрын
need more tutorial for sticky header, shrink header, change color header and font header... need more !!!
@anowerhossen1 Жыл бұрын
Thanks Thanks, I applied this to my current website and instantly saw great improvement.
@Dylson11 ай бұрын
2023 Sept: Great tutorial video! Still works like a charm even with the new elementor layout! Thank you!
@coderswithtaif Жыл бұрын
I was looking for such a channel for a long time
@peterowe37994 ай бұрын
Great vid. How do you alter the amount of scrolling before the header changes colour. I don't want it to change colour until the user scrolls to the next section.
@BondJamesBlond Жыл бұрын
Thanks for this video! Would you be able to also please cover how to change the text color on scroll - as an extension of this header behavior? Thanks!
@alone_freelancer Жыл бұрын
kzfaq.info/get/bejne/bqtdn8KQsZqwaKM.html
@URAajSocialPolitics3 ай бұрын
beaufiful lecture
@alirezasahami11755 ай бұрын
very good, it was practical for me. Thanks!
@deniseho58319 ай бұрын
How do I make the transparency effect only on the background colour? The logo, menu, and other elements in the header become transparent along with the background and only appear after scroll.
@Grafficted6 ай бұрын
i updated elemntor and in the new version it works- in the style tab :)
@seppneimusser5723 Жыл бұрын
I was lost before I saw your tutorial^^ Thank you so much!
@abdullahafridi82552 ай бұрын
Thanks a lot. It was so helpful and so so simple.
@koefdamcityroleplay39642 жыл бұрын
My text also becomes transparent like the background. I followed all the steps exactly as in the video, does anyone know where it went wrong?
@dicarlostrujillo2 жыл бұрын
I doubt it is your text becoming transparent, rather than it being the same color as the background, did you manage to fix it?
@wayariver97212 жыл бұрын
@@dicarlostrujillo I found the solution with mine, make sure you're turning the scrolling effects from the STYLE tab not the ADVANCED :--) and dont forget to turn "Effects Relative To" to Entire Page
@maridsil Жыл бұрын
@@wayariver9721 thanks, I was having this problem too
@TheBosscoe Жыл бұрын
@@wayariver9721 Exactly the answer I was looking for, thanks.
@GiorgioPagani-yn1ij5 ай бұрын
Follow the whole tutorial.. it's works but at the first opening of the page, for a millisecond appear the header with background and then become transparent till i scroll, at should be. Is it normal? there is a way to avoid it?
@KieranMcCarthy2 ай бұрын
Same here
@williammatthynssens7999 күн бұрын
Just set an entrance animation with a delay of 200ms on that section. You can find it under Advanced > Motion effects > Entrance Animation. That way the section will fade in just after the weird flash so it isn't visible.
@ismailcakr39232 жыл бұрын
tam zamanında gelen bir video harikasınız, eğer birde sticky colora blur eklenirse süper olacak
@mnburch Жыл бұрын
Awesome tutorial. It worked for me perfectly. Thanks so much!
@coxixx3 ай бұрын
i wanna change color menu from transparent to white as start scrolling. what should i do?
@alejandromunoz463 Жыл бұрын
Just what I was looking for. Thank you so much
@mr_oizofpv443210 ай бұрын
it doesn't work as the Trasparancy affects all the elements in the container, i.e. logo and menu... at least after the new broken updates by Elementors devs... i'm starting to get really bored of Elementor, it's Bugementor now.
@yassou1202 Жыл бұрын
Thank you you just save my life !!
@miguelrf79496 ай бұрын
I really love her.
@mmb8112 жыл бұрын
I did not know it was built into Elementor, Very nice, thanks (Now I can toss that css I had in there)
@mmb81110 ай бұрын
Sadly it is BROKEN and 100% UNUSABLE!
@user-ip4op2lj5h7 ай бұрын
thank you so much it worked for me
@daniele77532 жыл бұрын
And if i would change also the logo image (using different color logo) when scrolling?
@brianmok6532 жыл бұрын
You can use the plus addons plugin
@mikeys4u2 жыл бұрын
Add both logos, add CSS to display:none on one when scroll swap logos
@savtrrsh6 ай бұрын
any suggestions to make the height shrink?@@mikeys4u
@rameshgraphics88112 жыл бұрын
please also let me know as i could not see the effect in mobile view
@Grafficted6 ай бұрын
great but- what if i have a box shadow? and i want it to apear after scrolling under the black backround only? now ther eis a shadow on the transperent backround :(
@raquel_cacaomental5 ай бұрын
Please i need help! it changes the transparency of the logo and the burger menu aswell!, how can i avoid that?
@vibhutiarya250110 ай бұрын
Very helpful........thanks
@mychanel3952 Жыл бұрын
hi.. trying to do apply sticky header but no luck..though its very simple thing but not working with me ... by the way i am using container rather than section, hope its ok ? Appreciate your help...
@bengareth Жыл бұрын
Please could you check the volumes on this video - otherwise brilliant content thanks!
@Elementor Жыл бұрын
Hey Ben, we'll take a look (or listen 🤭), thanks.
@PierreGobled76 Жыл бұрын
Thanks for the video, I would love to have some information on how to have a sticky header with Flexbox because I can see that the option is no longer available. Thanks again
@Elementor Жыл бұрын
Hi Pierre, the Sticky option can still be found under Motion Effects when using containers.
@PierreGobled76 Жыл бұрын
@@Elementor Thanks for your answer but unfotunately I can't see this option. It used to be simple to choose to stick an element to the top of the page but not anymore using containers.
@TheCOM2 жыл бұрын
Is there a way to make custom callout icons? similar to what blue prints have or microsoft word does with callouts?
@supercraigjanelli74512 жыл бұрын
How do you make the header shrink (including a smaller/different logo) on scroll? Can anyone explain? Thanks so much!
@robertwattner2 жыл бұрын
You can use my plugin sticky header effects for elementor
@vnikyt2 жыл бұрын
@@robertwattner Thank you for your plugin! I’ve been using it since I started with Elementor and I can confirm that this new feature does not replace it. (Tried it, didn’t do what I needed it to do.) Your plugin gives me more robust header effects, e.g., hiding the header on scroll, shrinking the header and logo (properly!), changing the logo color on scroll. Great work!
@Golfosophy7 ай бұрын
You can also create this effect by changing the padding and width of the logo on scroll with custom css. Easier and less bulky than adding a plugin or custom javascript
@3ndriago Жыл бұрын
How did they fit a Header element in an Elementor Canvas page layout?
@get8bit2 жыл бұрын
Feature request: Option to change navigation background color for individual pages.
@knbenji2 жыл бұрын
You can do this… Create another header and set it NOT to Entire site, but the site you want to show it. Change the background color of this as you wish.
@mikeys4u2 жыл бұрын
Just add that individual CSS code into that page. Each page at the top has a page number. Use this and the class of the nav add CSS into the page.
@get8bit2 жыл бұрын
@@knbenji I suppose that could work, but you'll constantly have to edit two headers instead of one if changes are needed. ACF works, but it's a pain in the butt.
@Isa-dq4jw2 жыл бұрын
Great ! thank you!
@michellesilvacuenca1770 Жыл бұрын
I don't know why when I change to view from mobile or tablet, the background disappear!!! just in desktop it is okay everything, so help!!!
@wickygalloneКүн бұрын
It seems to not work with negative margins though
@hamedbouazza8727 Жыл бұрын
thank you for this good video
@taohi012 жыл бұрын
Unfortunately on the newest Version it does not work anymore... The choosen color should appear only on the sticky mode... but it shows up the whole time.
@josephvillenabuchberger4257Ай бұрын
Great elementor team,now again you just taught how to apply only 50 percent of whats needed.alot of people wanted to know how to change it to white and not transparent when scrolling ,bad job
@crowlsyong2 жыл бұрын
You’re videos are so helpful.
@ThisIsOmar1434 ай бұрын
I am having problems when I set the header motion effect on transparency I can't be able to see the entire header util I scrol, Instead of the header background only. Anyone with Solutions?
@ShadabDeveloper04 ай бұрын
facing same issue
@markbratton111 Жыл бұрын
Love it! Very helpful. BTW, I just pushed you up to 1K likes, lol. It's not bragging if it's true😉
@Elementor Жыл бұрын
Thanks, Mark!
@WaltersKochwaesche4 ай бұрын
If I switch on the Scrolling Effects then not only the backgroundcolor dissapears until scrolling but the menu-text, too. What am I doing wrong?
@ShadabDeveloper04 ай бұрын
did you get the solution ?
@WaltersKochwaesche4 ай бұрын
@@ShadabDeveloper0 Yes, if I remember correctly I mixed up the place to toggle the Scrolling Effect: There is a setting for his in the "style" section and another one in the "advanced" section. The one in the "style" section was the right one.
@PlantiDi Жыл бұрын
Great!
@OmarWaleed2 жыл бұрын
Wonderful
@tiagov83162 ай бұрын
hello, howdo i do this sticky header, on just one page??
@Elementor2 ай бұрын
@tiagov8316 Enter the Header template from the Theme Builder, and set the Display conditions to your desired page.
@appleplusmarketingdigital86112 жыл бұрын
What if I want to do the opposite? The transparent menu and when scrolling the page the menu will show the background color of the menu? It's possible?
@yuesding7328 Жыл бұрын
same question. Can elementor told me how to do that?
@taoli30742 жыл бұрын
thanks千
@andrewpower7743 Жыл бұрын
not working the same, background colour header, goes transparent when scrolling
@nubenegra8092 жыл бұрын
color changing or transparency changing?
@youssefblt9839 Жыл бұрын
all i can say is thanks
@franktielemans66242 жыл бұрын
ok, it's without code, but this also means that the transition is dependent of the length of the page. On a short page the transition will happen very quiclky, while on a long page it will be much slower.
@iTradeAIMS2 жыл бұрын
VIEWPORT in Transparency Option. Bring both to the left.
@coderplus362 Жыл бұрын
perfect
@devinova7231 Жыл бұрын
dont work on gradient background?
@husker123ify Жыл бұрын
you set the color of the header to transparent , and then set a semi transparent color, not sure why , or what is the effect there, it has to be transparent, and then change to a color when scroll, not what is shown on this video
@gokulmanimaran Жыл бұрын
i have error from elementor library ...can i try to insert theme like header and footer to my website show error notification like (An error occurred -internal server error) how to fix this problem!
@Elementor Жыл бұрын
Hey Gokul, these kinds of things can be difficult to troubleshoot without screenshots and more information. Have you joined the Elementor Community? It's a great place to ask questions like this, and get solid advice from other web creators. And you can share screenshots and links there as well: facebook.com/groups/Elementors. Alternatively, you can contact support from your Elementor account dashboard.
@sotostsan2 жыл бұрын
Is it only for me that transparency makes the whole section transparent instead of the background color?
@blockoreformas95592 жыл бұрын
Na minha pagina também ficou tudo transparente
@shonjerdy465210 ай бұрын
we cant make the whole container sticky with flexbox
@marclegoux4615 Жыл бұрын
Something about the new calc measurements
@bySterling2 жыл бұрын
Luv 💯🥳
@yurisamarin8200 Жыл бұрын
Where did she disappeared? beautiful Shiri
@BGdev3052 жыл бұрын
Except this isn't a "color" changing header.. it's a "transparency" changing header
@user-xv2dl5pi5y2 жыл бұрын
Semantics.
@BGdev3052 жыл бұрын
@@user-xv2dl5pi5y Not semantics, this is actually 2 different things. It could be transparency using an image also, which isn't "color". So would be best to use "transparency" for the title.
@oksygin Жыл бұрын
What am I looking at? I really don't see what its doing
@inspector-tech2 жыл бұрын
Fantastick! Get it? ;-)
@Elementor2 жыл бұрын
Of course we do 🤭
@kevinlefournis62932 жыл бұрын
❤️
@yurisamarin82002 жыл бұрын
Like to beautiful Shiry!!!!
@RyzTrade2 жыл бұрын
Need discount code voucher pls..!! 😜
@alexedacurro4295 ай бұрын
Why is mine in reverse? LOL
@himelahmed6589 Жыл бұрын
its not working
@Elementor Жыл бұрын
Hey Himel, what exactly isn't working?
@himelahmed6589 Жыл бұрын
@@Elementor sticky header not working
@Elementor Жыл бұрын
These things can be difficult to troubleshoot without screenshots and more information. Have you joined the Elementor Community? It's a great place to ask questions and get solid advice from other web creators. You can share screenshots and links there as well: facebook.com/groups/Elementors.
@kwixkedem43982 жыл бұрын
First!
@Elementor2 жыл бұрын
🥇
@connectadnan46692 жыл бұрын
Second
@Elementor2 жыл бұрын
🥈
@findtech-llc Жыл бұрын
I bought Elementor Pro, I had problems with the installation, and I couldn't get a refund! they take the money and disappear!
@Elementor Жыл бұрын
Hi E.T., please contact customer support directly from your Elementor account my.elementor.com