Build a Webflow Portfolio Site in 40 Minutes
Вставка
- Опубліковано 7 вер 2024
- Figma Design
www.figma.com/...
Webflow Project Starter (Affiliate Link)
try.webflow.co...
Completed Project (Affiliate Link)
try.webflow.co...
Lumos Chrome Extension
chromewebstore...
Lumos Component Library
www.timothyric...
Join my Webflow Wizards Community
/ timothyricks
Tim please make more videos like this. It is the perfect way to learn Lumos and webflow. Thank you so much
I'm so glad this helps! Thank you for the recommendation!
This and your figma to webflow build video is a perfect introduction to lumos!
The custom Grid settings are a game changer! Thank you sir!
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.
So great to hear! Thank you! Congrats on the new project
@@timothyricks also just joined your Patreon over the weekend. Looking forward to going through more of your content.
Oh, thanks so much! I hope it’s helpful!
This is just incredible. The way you build with accessibility in mind is the approach everyone should take imo... So helpful , thank you!
Thanks so much for the kind words!
All I can say is ... WOW!! This is just fantastic!! Thank You for this, much appreciated!
That's so great to hear!! Thank you!
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!
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)
And did you update the lumos file with component slots or is it just used in this projects?
@@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.
@@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.
@@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?
You nailed it every time Timothy. 100% respect 👏.
This is very intense course. Appreciate sharing it 👏
Perfect weekend crash course, Thank you Tim!
Always wait your content, thanks for sharing . Keep it up
Hi Timothy, Great Work as always
have been following you since last 4 years.
Thank you so much! I really appreciate you following along all this time.
Thanks a lot. You are awesome. Please make a video how to create newspaper website with webflow.
You're the best Tim!
yea! very enjoyed:)
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 ?
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;
}
please do more gsap animation tutorials for beginners
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
Thank you! The buttons get added by the Lumos Chrome Extension. chromewebstore.google.com/detail/lumos-extension-for-webfl/hclnndibcedglllpoaajibpnoacaolpj?hl=en
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 - ua-cam.com/video/qQ1i6J_sQPQ/v-deo.htmlsi=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.
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
@@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!
Oh, I see! If you’re interested, this video shows how to setup the color themes with components from scratch.
ua-cam.com/video/SfhjbsqEQA0/v-deo.htmlsi=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.
@@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!
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 ?
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:
ua-cam.com/video/_H7VoBSpsgs/v-deo.htmlsi=2lT32kZFU98-AoWL
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 😅.. 😂
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. :) ua-cam.com/play/PLoXSZEwtbyStInsfWsEO5ouJ7HTfMMLeA.html&si=QnMemC1DBBnavEBG
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
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. ua-cam.com/video/GdeQKGhPKpQ/v-deo.html
@@timothyricks THANK YOU
You're a BOSS.
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
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. ua-cam.com/video/_H7VoBSpsgs/v-deo.html
@@timothyricks Loving the learning process of lumos. looking for more amazing content from you. .🔥🔥
Hi Timothy, «Webflow Project Starter» is the copy of «Lumos V2» or have some new code/variables features?
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.
Awesome
😊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 :/
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.
@@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.
First here
Love it
Thanks so much!
😮👍
this is a lumos tutorial?
Yes, it is