How to create a Blurry Transparent Sticky Header in Elementor

Рет қаралды 114,019

Күн бұрын

Transparent sticky blur Header with Elementor Pro. This is a very cool Web design trend that is super easy to do in Elementor Pro. Get Elementor Pro here: livingwithpixels.com/elementor
All the resources and instructions you need:
livingwithpixels.com/resource...
Full result of the header: [This website doesn't exist anymore]
Not yet familiar with WordPress? Check out the basics here: • Wordpress Tutorial 202...
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixels.com/hostinger
Siteground for premium webhosting: livingwithpixels.com/siteground
Elementor for no-code web-development: livingwithpixels.com/elementor
Figma for Web Design: livingwithpixels.com/figma
All recommended software & discounts: livingwithpixels.com/software/
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixels.com/elemento...
Figma Design Mastery Course: livingwithpixels.com/design-c...
Business Course: livingwithpixels.com/business...
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixels.com/elemento...
Figma Design Starters Guide: livingwithpixels.com/design-g...
→ My Social Media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it.

Пікірлер: 256

@10Web 3 жыл бұрын

This really cool. Everyone needs this kind of tutorials right now to play with design and creativity more.

@lenkaantalova7411 10 ай бұрын

All tutorial makers should learn from you! The way you explain everything makes it so easy to use your ideas even for beginners! Thanks a lot!

@katerynalearbuch24 3 жыл бұрын

you are golden! thanks for this tutorial. I was actually looking for a sticky bottom button with a popup messenger, but always love to watch your new videos :)

@carlalorenzo851 2 жыл бұрын

Thank you so much for sharing! I used a previous video you had to include a sticky transparent header in a website and now I'm using this one. Not many people share code for free and it's a great help for us rookies!!!!

@davidwalls2304 3 жыл бұрын

Thanks Rino. I watched, and saved, your video from over a year ago about transparent sticky headers. I'll add this into my "save for later" viewing as well. Good job on this video.

@thijs8201 3 жыл бұрын

Hi Rino, congratulations on your 100k subscribers! Nice to see that instead of continuing with your old Dutch-language channel you took on a new risky challenge and that it worked out so well! I also really think that you make a lot better content that people also benefit from. At the moment I'm in my first year of a graphic designer training and I plan to start learning how to make my adobe XD designs work in elementor PRO during the summer holidays! Hope you keep going with these helpful videos! Groetjes :)

@rinodeboer 3 жыл бұрын

Awesome man! Good luck on design school 👌🏼 en thank you 🙏🏻 . Lot’s of cool videos coming.

@Pankaj3359 3 жыл бұрын

It would be great if you make a video tutorial of this entire page. That rotation effect in the image below the hero section looks amazing. 🔥

@danplumadore647 3 жыл бұрын

Amazing! You have a knack for producing a video in the nick of time as far as projects are concerned. Thanks, mate!

@hardeepasi8273 Жыл бұрын

Thank you for this, worked like a charm. Truly appreciate you putting this out there and sharing what you know.

@johnravi3887 2 жыл бұрын

Hi Rino, It was an amazing video! I use Elementor a lot, and I always look for new ways to use this tool. I gained a lot of insights from this video, and learning about the process was so amazing. I think I will be trying it out on my next website, and hopefully, I can create the same thing. It really was a great watch, and I learned a lot from it. Thanks a lot for sharing this amazing video, it was very insightful.

@davidvillena8432 Жыл бұрын

Thank you Rino as always your tutorials are awsome and this one was very easy to implement kind regards from the heartland of the incas Peru

@ddrayz4733 2 жыл бұрын

Dude. Congrats for this 5 star video. stay awesome

@yngverodli 2 жыл бұрын

I really like your tutorials Rino. Awesome effect and will use it on my next site. thnx. Look forward to your next vid

@sudipdey1889 3 жыл бұрын

Oh man, I am just loving it. Thanks a ton. This looks so cool

@solanaindex Жыл бұрын

You are such a great teacher! Thanks for the videos.

@nikolcaceresolazabal1762 Жыл бұрын

It was very helpful to me and I find everything I can learn with your videos incredible. Greetings from Peru

@techweendesign3171 2 жыл бұрын

High quality content. Thank you Rino!

@adnanamin3666 3 жыл бұрын

It's good to see you back on the wheel!

@ashikmohammed8363 3 жыл бұрын

Hey brother I have almost watched your videos completely from past 5 days. Became your fan. We need a video on the difference between shared web hosting and WordPress hosting. Please make a tutorial on it brother. You just clarify everything sooo clearly.

@MrVagabaga 2 жыл бұрын

You rock, man...Great talent for education... Thank you very much. Straight to the point... Beautiful

@paulosxb 3 жыл бұрын

Parabéns pelo projeto, você é muito bom. Um grande abraço aqui do Brasil.

@trandong37 3 жыл бұрын

100K subs, Congratulations Rino

@kerawelt2008 2 жыл бұрын

Very instructive ! Many thanks !

@LeirbagLinares 3 жыл бұрын

100,000 congrats. God Bless U.

@sankalpbalani4973 3 жыл бұрын

Hey Rino Really loved the design of this page If you have not already planned plz create some design tutorials too.

@chocobarrel 10 ай бұрын

Amazing , short and sweet :)

@user-qr8kv5ow6h Жыл бұрын

Thank you, it looks great!

@dublinandme3730 3 жыл бұрын

You are the freaking best Tutor!

@gautamneeraj Жыл бұрын

This was very helpful. Thank you! Especially little tricks like making the "vertical padding" zero. My NavMenu was not aligned perfectly and just couldn't figure out why...

@TheClrr 3 жыл бұрын

thank you! you are an excellent teacher

@rudolphvandermerwe3977 Жыл бұрын

Exactly what I needed thank you :)

@LeopoldoMoiane 3 ай бұрын

verry nice, Thank you Rino!!!

@Eumesma2345 2 жыл бұрын

Amazing tutorial. Thanks

@dannygrio 3 жыл бұрын

Hey, congrats Rino, you are almost at 100,000 subscribers! What will be the content like when reaching this mark? :) Would love to see technical stuff, such as ideal pixels of page width, setting up the header, section of the page so everything aligns perfectly, like the header's logo with section heading below. Anything that can make our design more professional, respecting spaces etc. 1000 more and we are there!

@technotemper Жыл бұрын

Great tutorial. 🎉

@yonatanfjd 3 жыл бұрын

Super one of your best thanks a lot

@jonathanpratama611 Жыл бұрын

Nice video. Thanks!

@emanuelbagirathi4750 3 жыл бұрын

THANKS G! Love this!

@monsieurc-p9564 5 ай бұрын

killer content ! thanks and congrats

@sanijaperera6218 2 жыл бұрын

love you bro . it worked tnx.

@andreyoung9183 3 жыл бұрын

Thank you for this tutorial

@alessandro4596 2 жыл бұрын

amazing video. Congratulation and thanks for this tips

@astondavies1888 Жыл бұрын

Great stuff!

@josecasanova5770 2 жыл бұрын

Thanks Rino! Excelent!

@dantepaule6720 2 жыл бұрын

Superb video....really cool sticky header from LWP......

@punyaronald 3 жыл бұрын

Finally I can create own header. Thanks for tutorial

@codedoer Жыл бұрын

Thanks for this Man

@user-bn1sv5bv5n 2 жыл бұрын

Thank you for your good guide. I solve the Header Sticky Issue~!! I Wish your Good lock to you!!

@jrothra 2 жыл бұрын

I love your tutorials! Clear, simple directions. I'm curious, can you make a tutorial on how to create a two-level header (main nav with a top bar) wherein the main navigation is sticky, but the top bar slides away when scrolling?

@phillsand_co Жыл бұрын

For this you just need to set the menu header to sticky and the top bar section not. keep an eye on the layers/z-index. should work fine 👍🙂.

@ahmedmassalha7602 2 жыл бұрын

Works !!!! Thank you

@ZaahirJappie 3 жыл бұрын

Nice offset tip ...thanks!

2 жыл бұрын

Excellent, thanks!

@koshinryudojo-iaidojodosab875 Жыл бұрын

Amazing. Thanks for

@yuriykabanets7665 2 жыл бұрын

Thank You!

@vincentaranda4737 3 жыл бұрын

Just Brilliant !!

@kasra99 2 жыл бұрын

amaaaazing

@JustAn0therSoul 3 жыл бұрын

Im using this since a while and im loving it, sadly firefox by default has disabled rendering that css command.

@syahrolfitri9211 2 жыл бұрын

Great...thanks bro

@syedtanveerrahman3596 3 жыл бұрын

I see you are reaching 100k subscribers very soon, what are you going to give us after reaching the milestone? BTW, the tutorial is as good as ever! Take care.

@omerta3393 3 жыл бұрын

Perfect timing I used the code in a project😂😍

@sucd218 8 ай бұрын

so cool, and thks

@cardonajosed 2 жыл бұрын

Thanks so Much, ✨✨✨✨✨

@odiserv 3 жыл бұрын

thank you😍

@d33d19 Жыл бұрын

Love your tutorials. Knowing that Elementor has had a few updates and Croco has JetSticky - you might want to have a quick update to this process. :)

@MultiProximus 3 жыл бұрын

Bravo great Job

@Leziq 3 жыл бұрын

Hey Rino, thanks for the next great tutorial. Unfortunately this blur effect does not work on Firefox for some reason but on the rest it's pretty cool and smooth.

@litdav 2 жыл бұрын

wondered too, but you're right, it works with any other browser

@WPSolver 3 жыл бұрын

Great video thx :-)

@wnttalk Жыл бұрын

All I want to say is THANK YOU!!!

@AbdelhadiBenlaredj 3 жыл бұрын

Great tutorial! I'm wondering if you could apply that blur effect on dropdown menus ?

@Kaizokn 2 жыл бұрын

Tysm !

@gamedguys372 2 жыл бұрын

amazing

@user-ne3fz2mn5l Жыл бұрын

Hi Rino, thanks for the great video! :) My question is how to apply additional code when there is a drop down menu with categories below?

@dennisclavs4678 2 жыл бұрын

10 of 5 stars rating here!!!!!!

@AnujKumar-rh9wq 3 жыл бұрын

Conjurations brother 100k Subscribes 🥰🥰🥰😍😍

@smarthustlersclub6375 3 жыл бұрын

This is dope

@poledance-nrw 3 жыл бұрын

Hi Rino, the header is really cool! I also would like the pulldown menu to become blurry. Have you an idea how to do that?

@tborgers 3 жыл бұрын

Great video, worked like a charm on my site... Question: would it be possible to change text color of the heading during/after the transition? Thank you!

@arezkhidr 3 жыл бұрын

This is great! I am having an issue however where in the code the "elementor container" text is not highlighted blue and is instead just a grey color. Which is preventing the header from shrinking when I scroll, any idea how to fix this and why it is happening?

@GauravSharma-gt3ur 3 жыл бұрын

Thnx bro

@erwinrodriguez8057 3 жыл бұрын

Hey Rino you should make a tutorial on how the booking plugin works in crocoblocks! thanks for all the videos and help.

@WPSolver 3 жыл бұрын

An idea for a new tutorial: what is the best way (I mean not slowing down the website too much) to use background video?

@aomarmorochgranit3623 3 жыл бұрын

Love this! I have a question though. Is there a way to shrink the logo size as well when you scroll?

@DBz0mbie 10 ай бұрын

Love this! Can you help with updating the code snippet so instead of staying transparent, it goes from 100% transparent to a solid white?

@wireshelving 3 жыл бұрын

Excellent tutorial, Rino. Is there anyway change the background color of the header when scrolled?

@shayooooo 3 жыл бұрын

Dope!!!

@natanyagodayv8756 3 жыл бұрын

the best

@ogonnaokafor7748 Жыл бұрын

Hi Rino, superb training! I have never seen anyone teach this good, I followed every step and got same results. however i would love to know the right measurement for the logo, mine seem a little too small on 250x150 px. Any help.

@launebaer86 3 жыл бұрын

Nice Job Rino. Could you make a video how you made the whole website?

@pomocnikpodrozy 2 жыл бұрын

Hi! What should I do if I want to change the layout of my header when I start scrolling? A basic structure (before scroll) is with two lines of items - my centred logo in the first line and the menu in the second (below). After the scroll, I want it all aggregated with one line - the logo on the left, the menu buttons on the right side. How to figure it out? ;)

@mohammadenteshari7902 Ай бұрын

This really cool.Thanks

@gstcy7925 2 жыл бұрын

Very cool video! Did you do a video on tuning elementor for performance/speed? Thx 🥰

@davorkrklec8323 Жыл бұрын

Bravooo🎉

@sitbackandrelax2482 3 жыл бұрын

hi, Reo you doing a great job on Website designing keep it up. Pls put Video about the website Dark mode and light Mode changing, in Elementor

@master_coaching 3 жыл бұрын

Hey Rino, thanks for this video. I like The entire design of this website. Can you please make a tutorial about this ? Thanks 😊

@orelhassid 11 ай бұрын

I think you have scrolling option for the background color inside the section/container style settings

@GARdotETH 2 жыл бұрын

Hi, works great on the bog standard menu, but if you choose a 'Flyout Menu' the CSS seems to break the flyout menu and you can't see the content in the flyout menu. Does anyone know of a fix?

@Miczkunio Жыл бұрын

Heyy, very helpful turtorial. I have a question tho, what code do i have to add to make image I put in the header menu smaller afer scrolling? To reiterate, I want my logo to be bigger when user is on the top of the page and make it smaller together with this effect that makes header blurry.

@arthurajacques 3 жыл бұрын

Very nice video! Is it possible to do the same on the footer? Thanks!

@ptsful 3 жыл бұрын

How did you make that banner video effect where only shows the video on one part of the banner?

@malejol.official Жыл бұрын

Thank you for this awesome tutorial, but I stuck on there because I have 3 sections in a header one with a topbar section second one with a logo, and some other stuff, and the bottom section with the menu. Now how can I put a sticky header which is different from the rest of the sections? Hope you got my question and make a video on it ASAP.