Build a Webflow Portfolio Site in 40 Minutes

[@jeberulz]

Tim please make more videos like this. It is the perfect way to learn Lumos and webflow. Thank you so much

[@timothyricks]

I'm so glad this helps! Thank you for the recommendation!

[@LearnWized]

This and your figma to webflow build video is a perfect introduction to lumos!

[@kylepitocchelli1738]

The custom Grid settings are a game changer! Thank you sir!

[@Itslogicee]

The Lumos framework is insane. I've nearly finished my first project with Lumos and I can't see any other way to build. Love your work Timothy.

[@timothyricks]

So great to hear! Thank you! Congrats on the new project

[@Itslogicee]

@@timothyricks also just joined your Patreon over the weekend. Looking forward to going through more of your content.

[@timothyricks]

Oh, thanks so much! I hope it’s helpful!

[@pinyagoffman]

This is just incredible. The way you build with accessibility in mind is the approach everyone should take imo... So helpful , thank you!

[@timothyricks]

Thanks so much for the kind words!

[@RockstahRolln]

All I can say is ... WOW!! This is just fantastic!! Thank You for this, much appreciated!

[@timothyricks]

That's so great to hear!! Thank you!

[@nishanthb2327]

Hey Timothy I just watched the whole video once and all I can say is thanks for helping out many developers like us Right now I will build it out and if I have any questions I will definitely reach you out Again thanks a ton!

[@nishanthb2327]

Few days back I was working on a client project using lumos, I ran into few issues on Global visual (video to be precise). I see that you are using vimeo video, will it work all the time because last time I ran into a problem it was not loading (I was using a vimeo video)

[@nishanthb2327]

And did you update the lumos file with component slots or is it just used in this projects?

[@timothyricks]

@@nishanthb2327 It has to use a direct link to the video file, usually from a paid Vimeo account, instead of a regular Vimeo video link. Videos also don't play on mobile if a phone is in low power mode.

[@timothyricks]

@@nishanthb2327 Everything in this project is also in the main Lumos cloneable. The latest version of Lumos uses component slots for button icons, and they can be added manually for anything else that needs them.

[@nishanthb2327]

@@timothyricks Thanks! It worked. I had one small question about the 3d model you are using in the background, even in the remarkable website footer. I wanted to ask how did you create that?

[@marki805]

This is very intense course. Appreciate sharing it 👏

[@trantai9182]

You nailed it every time Timothy. 100% respect 👏.

[@bamoj]

Perfect weekend crash course, Thank you Tim!

[@yash7630]

Hi Timothy, Great Work as always have been following you since last 4 years.

[@timothyricks]

Thank you so much! I really appreciate you following along all this time.

[@Binyamin1444]

I need like one or two more lumos v2 build videos to get really co didn’t with the framework. Please give us a couple more. In any case, keep up the great work 🎉

[@hafizdzakimcd6943]

Always wait your content, thanks for sharing . Keep it up

[@TonySossong]

I am getting soo so much better and faster with Lumos. This video is amazing! Thank you thank you thank you Timothy! One thing I'm not so certain about doing myself is setting the position of elements to say, relative, fixed, etc. Could anyone point me to where I can learn more about this? I'd like to get to the root level of understanding for this. I think it's one of the key pieces of knowledge that I lack

[@mschrimmer631]

You're the best Tim!

[@arthur_adams]

please do more gsap animation tutorials for beginners

[@RashedKhanMenon-u4w]

Thanks a lot. You are awesome. Please make a video how to create newspaper website with webflow.

[@maramcopty9526]

Thank you for your huge content as always. It's still not easy to start a project via Lumos we need more examples i think for a more complicated layouts, also the Lumos cloneable is missing some of the stuff that are in here... Again thank you so much

[@maramcopty9526]

@timothyricks do we start with the Lumos cloneable or with your build starter?

[@hezychasta]

yea! very enjoyed:)

[@JelenaAndrić-u5b]

I'm a beginner, and this is a little hard for me, but I will continue learning.

[@ash1015]

Hey Tim, when you add a utility class to some element, and after that you change (inheriting selector) again to initial class, why do you do that, can you explain 😀

[@swalker9513]

You're a BOSS.

[@benjamin.lhuillier]

Hi :) It looks like you found a way to change the heading style in a different field than the heading tag (Hn for SEO) with the props. Which is very useful for clients. However, I can't find how you managed this. Could you help me with that please ?

[@timothyricks]

Hi Benjamin, in Lumos the styles are cleared off of the heading tags by default to avoid this and other issues. If using another framework, we could include some css like this and give the rich text a class of "clear-rich-text-styles" so that font styles can be defined from the parent of the rich text element. .clear-rich-text-styles * { font-weight: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; font-family: inherit; margin: 0; }

[@BenjaminLHuillier]

Hi Timothy, I see that you are using combo class with 4 class sometimes. Is there a way to change the first one without deleting the others and adding them back ?

[@timothyricks]

Hi Benjamin, yes any class can be changed without removing the others and adding them back. These classes lead to a faster loading site since we’re using styles that already exist instead of creating new styles each time. Because we start with a custom class first and then stack the utility classes on top, it allows us to rename the stacked utilities to switch them for a different class. Renaming the class doesn’t change the global utility used elsewhere throughout the site. This class naming video explains it best with real examples: kzbin.info/www/bejne/lXmah6J4iNWmndUsi=2lT32kZFU98-AoWL

[@dimka_tregubov]

Hi Timothy, «Webflow Project Starter» is the copy of «Lumos V2» or have some new code/variables features?

[@timothyricks]

Hi, it's a direct clone of the current version of Lumos. The only thing I changed was uploading the images / fonts and adding in the fluid responsive code.

[@audaciapromurohabetur7362]

Getting "Page Not Found" on Lumos Component Library. Is it patreon only or has it been deleted?

[@webdesignlondon]

New issue for me: On the nav bar, the effect: difference is no only working when the menu is open and not across the rest of the site.

[@mofunnel]

Thank you. Is there a video to learn WEBFLOW from the beginning to a good level? I am a beginner and I want to specialize in building landing pages only for commercial brands and small and medium companies. Your advice is to use Webflow, WordPress, or Framer..THANK YOU

[@timothyricks]

Hi, sure thing! Webflow is the only website building tool I use. Here's the video I would recommend for learning Webflow from a beginner to intermediate level. kzbin.info/www/bejne/fZXIgn59nbV-prM

[@mofunnel]

@@timothyricks THANK YOU

[@MrRuzz247]

Great work as always! Quick question, I have started creating my own site with the lumos V2 clonable however, I have just noticed that I don't have the styles within the 'Section / Hero' (9:18) properies page (light, dark, none, small etc) I have filled in all the proper variables within webflow and they aren't on my designer for some reason, any idea why? Thank you

[@timothyricks]

Thank you! The buttons get added by the Lumos Chrome Extension. chromewebstore.google.com/detail/lumos-extension-for-webfl/hclnndibcedglllpoaajibpnoacaolpj?hl=en

[@KristofferÖdman]

The text in the mission section and in the CTA section are not editable from editor mode (I noticed that's because they aren't rich texts. On big USP with selling Webflow sites is the ease with which clients can edit content through editor mode. Any general thoughts about how to maximise that possibility? And is the tradeoff of using a custom class and span tag worth it as a tradeoff for cool design if the client can't edit the text element? How can we make sure that they can edit the site easily?

[@timothyricks]

The CTA section is using a rich text heading, but any text inside a component that is not connected to a component field can’t be changed in edit mode currently. This includes nav links, footer links, cta headings, or any text that should stay consistent across every page of the site. Hopefully, Webflow fixes this eventually, but for those examples, it’s more important to keep that text changeable globally instead of linking it to a component field. The custom element works in edit mode when it has a regular text element inside of it or if it’s linked to a component field, it can be changed in page building mode coming to all users later this year.

[@webdesignlondon]

I love this video, and it's really helping me understand CSS and Lumos, so thank you! I have a sticking point at @4:40. For some reason, I get the notification 'non-list item can not be placed in a list.' Can you help me with this? *Issue Solved: had to delete all 3 list items and add a new one.

[@timothyricks]

Thanks so much! There needs to be a list item inside of the list and then the visual component goes inside the list item.

[@webdesignlondon]

@timothyricks I followed the steps outline using the latest Lumos v2.05 cloneable. Created a list and changed the class name added the styling class (which I think I need to set up)

[@webdesignlondon]

@@timothyricks Issue is when you add a list you need to delete list items and add new ones for it to work.

[@vieira.mp4]

Tim, at 4:44: I can't add the visual component into that list item, it denies and says: "Non-list item can not be placed in a list".

[@timothyricks]

Hi, first a list item needs to go into the list and then the visual goes into the list item

[@jhaganb9215]

Hi Tim, big fan for your work. a quick question when i try to make practice website from design which was not made on basis of lumos framework it's really hard and and if i try to convert the design according to lumos i get the feeling that overall design get little compromised. can you drop some tip for this. i badly need this help from experts like you

[@timothyricks]

Thank you for the kind words and for trying Lumos! The Lumos Styleguide is meant to be used as a starting point and can accommodate almost any design. Some designs may have many more color options or sizing options, and those can all be added into the variables panel based on what each design needs. The core color or sizing lessons cover this in better detail. They help with learning how the system works so you can expand it to any use case you need. kzbin.info/www/bejne/lXmah6J4iNWmndU

[@jhaganb9215]

@@timothyricks Loving the learning process of lumos. looking for more amazing content from you. .🔥🔥

[@harshneolia8841]

I love to design and want to learn webflow. the thing is i hve a 9-5 job. really got stuck in this loop as design needs practice and I can't daily give everything to the design.

[@itstoelean]

Hey Timothy, I'm trying to get my menu to work with the difference mode like you have here and nothing is working. I'm working with an existing site, but I've combed your Webflow file for settings and styles and made it exactly the same as far as I can tell. Any idea what I might be missing? This is driving me insane...

[@itstoelean]

I think I figured it out! The parent element, the native webflow nav element, was set to "relative". Changing it to "static" seems to enable difference mode for some reason. Not sure on the why behind that what... but I'm glad to have it figured out for now finally haha

[@DavidKathrein1]

Awesome

[@flu-flamer]

this is a lumos tutorial?

[@timothyricks]

Yes, it is

[@quentincaldway]

Phenomenal job as always Timothy! You're truly in a league of your own! Thank you for all the value you constantly share with the community. Quick question though, @1:28 marker - kzbin.info/www/bejne/p4KUmmmAlNiEhrMsi=Unvb8musazQPkR2-&t=88, data-theme dark doesn't do anything at all to the body of my page. Not sure what I'm doin wrong exactly.

[@timothyricks]

Thanks so much for the kind words! Are you using the Lumos Cloneable or the Starter File in the description of this video? The theme switching relies on variables and css that’s in those cloneables by default

[@quentincaldway]

​@@timothyricks Ahh understood! I was actually trying to copy what you're doing to learn the concept of variables and components, by following your steps by scratch from a new site. I definitely see that was my exact issue. I've cloned the site, and it works perfectly! I appreciate your response! Last question - Is there a way to save custom variables across multiple sites for future projects? Or is it best to save the variables via Figma, as exemplified in the video? Thanks so much for you response and expertise! Blessings!

[@timothyricks]

Oh, I see! If you’re interested, this video shows how to setup the color themes with components from scratch. kzbin.info/www/bejne/iZfLm5WppqqEd5Isi=opv09cxId85UC6Vd The CutCopy Webflow App can copy variables between projects. Webflow also just released their Libraries Feature today which can do this on certain paid workspace plans.

[@quentincaldway]

​@@timothyricks Whoa this is perfect! Thanks so much for the video! Definitely creating my custom ones now and will be using them from now on! This timing couldn't have been better! I have a paid workspace plan with Webflow so I'm good for now, but I definitely might need more since i'm running out of space 😂 Appreciate you!

[@ronescot2034]

You the best Tim. There is a course where I can learn about your workflow/ or a way to build website this fast? You go to fast to my brain 🧠 catch everything 😅. My goal is to have this level of expertise... One day 😅.. 😂

[@timothyricks]

Thanks so much for the kind words! There's a lot to cover when showing the full process, but I have a course here that breaks down each part step by step in an easy to understand way. :) kzbin.info/aero/PLoXSZEwtbyStInsfWsEO5ouJ7HTfMMLeA&si=QnMemC1DBBnavEBG

[@bonbabon1960]

😮👍

[@bjarnithors]

😊noobie here.. does anybody here have good advise on the image gallery how to make the thumbnail appear in main image frame when clicked? is the CMS collection best or can I use lightbox in this case? Also the mission text does not shrink on Mobile Brkpoint as it does on finished version. The font stays in same size on mobile.. been comparing everything in the styles and I can see what Im doing wrong. Same classes, both span tagged and 2 column inset.. Im lost :/

[@timothyricks]

Hi, using a CMS Collection could be helpful but isn't required.The lightbox wouldn't work because it opens a full screen overlay. An potential no-code solution would be using the Webflow Tabs element or manually creating a Webflow interaction for each image that shows the current image on click and hides the others. Here's an example I created using code though that uses the button custom element and sets aria-pressed for accessibility. The script is inside the Hero Section in the "Script / Hero" Component. preview.webflow.com/preview/bespoke-swap-images?preview=2e29e1d3721c84bd8fed760aba33f39c&workflow=preview bespoke-swap-images.webflow.io/ The responsiveness of text is handled in the Custom Code component inside the "page_code_responsive" embed since Webflow Variables don't support breakpoints currently.

[@bjarnithors]

@@timothyricks thank you so much, I was looking for the solution in your video about mapping with path, where you mapped US states. hahaha Im just trying...I want to figure this out! Lumos + Webflow that is.

[@cannonleo]

First here Love it

[@timothyricks]

Thanks so much!