Mouse follow interaction on custom 404 page - Build a custom portfolio in Webflow, Day 14

In this lesson, we'll create a custom 404 page for when your visitors encounter an unavailable page on your portfolio. Keep your visitors engaged with a mouse follow interaction to keep them on your portfolio.
Custom code for frosted glass effect: frosted-glass-code.webflow.io/
Note: we've updated the portfolio course assets to accomodate for the rest of the course. Remember to download the most recent project assets from the course page. wfl.io/portfolio-course-assets
00:00 - Day 14, begin
00:33 - Structure of 404 page
01:59 - Style the page to match your portfolio and create mouse follow interaction
11:41 - Glow hover effect
12:54 - Recap
Get early access, plus downloadable assets and cloneable project for every lesson: wfl.io/2021-portfolio
#21dayportfolio
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow

[@Webflow]

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

[@person81045]

To anyone after me who is still super new to webflow, you can use the backdrop filter in the effects section of the right panel. Works exactly (actually better) than the custom code (since you don't have to mess with code

[@keennii]

Thank you

[@marl6844]

Really thank you very much for this advice.

[@slipstream01]

Wow thank you. that helped.

[@james1327]

Glorious. Thanks.

[@kimmykochar9167]

Thank you so much!! Ur an angel!!

[@cmdcreativity]

When the 404 error page looks better than a lot of homepages on many sites... 😂

[@kenyaseemenow]

I can listen to him all day. He makes it fun, and informative.

[@viettuongpham7857]

Omg.. how gorgeous it is... it's like I've discovered magic. I no longer need to beg the developers if they can make it or not. haha Thank you Webflow for making our designer's life much easier!

[@hoonkorean]

Finally, I'm leaving my comment on Day 14... Learning video on Webflow is truly the best video I've ever watched to learn something. I love the sense of humor, structure, visual effects, and grium's(I hope I wrote the name correctly) funny moments at the end. Thanks, Webflow team, you guys are helping designers so much!

[@Webflow]

Wow, thanks for the love! ❤️

[@markbabcock]

This was really cool. Thanks, Webflow team!

[@person81045]

For anyone confused in in Feb 2022, the set up is different. The 404 text is a text block by default on webflow, but here, it is a div block. I converted the text block to a div block with these steps 1. Click on the 404 text block 2. CTRL + K (or equivalent for mac) 3. Type Div block 4. You get two options in drop down, "div block" and "convert to div block" 5. Select "convert to div block" Then you can rename it to "404 Details" for the class

[@entertainmentyoutube3606]

it only says to me convert to link, so its not possible for me to do this

[@thejaysehansen]

Another mind blowing vid. Didn't expect to love a 404 page tutorial, but, LOVED this one.

[@florianvanrossen5749]

Update: we can add backdrop filters in the designer, no need to copy in the code

[@quyenxa3765]

Could you direction me how make this?

[@djjoy1]

I really like the 21-day portfolio tutorials and learning how easy Webflow is for designers to make their own website. The only thing I wasn't able to do is adding custom code with the free version of Webflow. So now I'm missing the cool glass effect on the 404 page.

[@Webflow]

Thanks for writing in, Jevero and wetiot - we're always trying to build more features (like backdrop-filter) into Webflow, so check back later for updates in that area. We've opted to rely on custom code for effects like backdrop-filter since it's not natively supported on Firefox. As soon as Firefox builds in that native support, we'll be able to include an entire suite of options there (even on free plans)! 👍

[@thejaysehansen]

@@Webflow I say don't wait on Firefox! Add that stuff in asap! (who uses Firefox anyway? ;-) So great. Loving all these videos. Excited for your planned updates.

[@ddc171]

@@thejaysehansen dude, I use Firefox

[@kenjones]

First, let me just say something. ... Something But expanding on that, this video is amazing!

[@WalterKimaro]

That joke was so on brand👏

[@abbas.25.]

The embed element is unfree 😭😭😭😢😢😢

[@kylankincaid2290]

The "It was already there" line killed me at 11:50 lol

[@oussamajaafar5597]

Thanks youuuu so much webflow team

[@FlavienLacour]

Hi, very good job as always !! One question, is there any reasons you choose to apply the interaction on both images instead of the Div Block itslef 404 Interaction ? Both are working well

[@jessecreedon8246]

got me good @11:35 lol - these tutorials are fantastic, really enjoying following along.

[@yusion9]

so must upgrade to cms plan then only we can apply the frosted glass using the custom code?

[@Peebals]

Your work Your All Tutorial are too much helpful

[@CarlaVecino1]

Is there anything done this year?

[@lludu2]

I love this but as I'm going through these tutorials and still trying to decide if I want to fully switch over to webflow it sucks to see that the embed html is only on the paid platforms. While i appreciate it, locking that when its in the portfolio challenge sucks.

[@Webflow]

Hi, Andrew! We're always trying to build more features (like backdrop-filter) into Webflow natively, so check back later for updates in that area. We've opted to rely on custom code for effects like backdrop-filter since it's not natively supported on Firefox. As soon as Firefox builds in that native support, we'll be able to include an entire suite of options there (even on free plans)! 👍

[@watchus020]

I'm having a hard time getting my div blocks, containers etc in the middle of the whole screen. Yours seem to do so automaticly. How? What am I doing wrong

[@waltz9230]

Display Flex my friend. You don't have to manually position.

[@tom_norman]

Hi @webflow, I know I'm a little late to the party, but why does my default 404 look nothing like the one in the video?

[@Webflow]

Hi Tommy! Great question! We have updated our 404 template and it sounds like we need to update it in this video as well. Thank you so much for flagging this! Here are some great 404 pages for inspiration, many of them are clonable as well: webflow.com/websites/popular?c=1#stq=404&stp=1

[@tom_norman]

@@Webflow I figured as much... thanks for the reply and for the awesomeness, mucho appreciado!

[@felixquansah5214]

Great tutorial.... Am I the only one who's experiencing a situation where when moving the mouse causes the circle interaction to glitch? It seems fine when applying the interaction on either the X axis or Y, but when both are applied and tested its movements become very jerky. Anyone experiencing this?

[@Webflow]

Hi, Felix! This can happen if your X animation and Y animation are conflicting - can you check to make sure that the X animation and Y animation are affecting different axes of rotation? In other words, if you're rotating something along the y-axis for 0% and 100% in the top section, the bottom section can't have any actions that ALSO rotate along the y-axis - they can only rotate along the x-axis or z-axis.

[@felixquansah5214]

@@Webflow wow....that was fast. Just checked it out! It works now!!! You guys really are awesome. Thanks 🙏🏽

[@Exhodius]

Embed not allowed on free versions.

[@Exhodius]

Anyway, use backdrop filters instead (under filters on the right)

[@ntokozosibiya759]

@@Exhodius It actually works thanks🤝

[@person81045]

Videos are awesome, my guy just goes a bit too fast. Idk if this is because I'm still a newbie, but I have to go at 0.75x whereas any other product training I'm going at 2x.

[@Yaedon]

Loved the course until I couldn't follow along because of a paywall for embedding code -_- thought yall was better den dat

[@Webflow]

Hi, slowburn! We're all about adding CSS filters like background-blur to ALL accounts in Webflow, but we're currently blocked on that until Firefox is able to add support for it so we can enable for everyone. At that point, we'll have a code-free version of accomplishing this visual style! But for the time being, we'll need to rely on custom code for this styling. This shouldn't impact building anything in the course except for the blurry background behind this box. Sorry for the inconvinience! Super excited to share the update with you as soon as it's available. 💙

[@Yaedon]

@@Webflow 🙏👌🏻

[@andre_cz13]

@@Webflow oh that's awesome. can't wait 😁

[@DhannuGamer]

Help me out - getting pop message 👇👇 You'll be able to upload a wide array of file types - including PDFs, Word docs, spreadsheets, and more - when you add hosting to this site or upgrade your account. Note - I'm using free plan.

[@slipstream01]

Anyone here learning to start freelancing please connect and help a brother out. :)

[@Dietereater]

418

[@tz5379]

bruh, why he talks so fast. so hard to follow. ugh