Thanks Tim I was wondering why sometimes the buttons weren’t always appearing. Amazing stuff, I’ve been playing around with the data attributes technique since I saw your initial video on it. Some people have said they’ve experienced slow down when using too many components. I haven’t personally, I was just wondering if you’ve encountered this problem? I’m so ready to switch everything to this technique! Thanks again 👍🏻
Thank you, Sam! I ran into a bug where the buttons disappeared any time we hit preview. I fixed it now, but please let me know if you ever run into that issue again. Personally, I haven't noticed any issues with slowness from too many components. And I'm working on really large sites with long pages. I think the slowness might come from too many elements on the page in the designer. So not using an excessive amount of divs in each section might help.
Hi, you always impress me with the little details you add to your videos and the underlying knowledge that goes into it. Do you have any course or structured learning programs? I think you are an incredible teacher.
Thank you so much! I don't have a complete Webflow Course currently. I've been trying to structure lessons in an order that makes sense in this playlist. ua-cam.com/video/J9u6VwTyVts/v-deo.html
Hi Tim, your'e very technical. Can you create a list of Webflow jargon? For example, you talk about the global eyebrow at around 56sec mark. I didn't know what an eyebrow was until now. Can you put together a list of technical jargon? Thank you for the content. Learning a whole lot from this.
Sure thing! I built the grid guides using divs. The main guide_wrap is position fixed on top everything and pointer events none. I have an example component of it called Grid Guides in the Lumos cloneable. This css hides it in preview and on the published site. html:not(.wf-design-mode) .your-guide-wrap { display: none; }
Thanks for another one, Tim. I'm just curious. What's the benefit of doing this rather than in the designer? What are the advantages of going this route? Thanks.
Oh, good question! Here's some general benefits. 1. Work faster when building new sections from existing child components 2. Work faster when building new pages from existing sections 3. Allow clients to easily build or edit pages without breaking section structure 4. Globally update the structure of any component in the future 5. Globally add new functionality to any component (without manually adding attributes to every instance) I plan for component setup the same way we plan for cms fields. I look at every instance of a component in the design. Then I identify the conditional elements and style variations. It's a time investment up front that pays out big in the end. If I discover a new conditional element or feature is needed later, the new component fields I create can also be used on any previous pages using that component. No work is wasted.
Hey, Can you make an updated webflow 101 course with the new UI and a little bit advanced as there a lot of things add into webflow and a lot of users have created efficient ways of creating webflow website but when I searched there is not any course present with these features including everything like cms e.t.c
This is an in-progress project, but it's built on the Lumos cloneable and many of these components are in that cloneable also. webflow.grsm.io/tricks?path=lumos-v2-beta
@@timothyricks Thank you for all your incredible work! I am a happy patreon subscriber! Love all these components! I am utilizing Lumos v2 cloneable, but most of these are not in there it seems.
hello timothy, my webflow account is still basic plan, I have question for u, how do I edit the css code from your copy variable, w/ out upgrade to the cms plan?. is there another solution?
Let's say i want to use these components in a CMS collection page. What would be the best approach here? I'm guessing your chrome extension doesn't work in Editor mode or in CMS collections?
The extension still works inside collection pages or items. Component fields can be linked to collection fields. The editor doesn’t give us access to component fields currently.
In custom element, Suppose we are using h2 as custom element, and we are setting style: max-width : 15ch; , but then i want to set max-width : 10ch; on mobile, but custom element can't be styled differently on different screen! Any solution for that? Same goes for padding properties
Oh, good question! The ch unit should automatically scale with the font size on each breakpoint. But we can update the value of any variable across breakpoints like this. /* tablet */ @media screen and (max-width: 991px) { :root { --custom-size: 3rem; } } /* landscape */ @media screen and (max-width: 767px) { :root { --custom-size: 2rem; } } /* portrait */ @media screen and (max-width: 479px) { :root { --custom-size: 1rem; } } That variable can be used inside inline styles like padding-top: var(--custom-size); or even better, it can be applied with data attributes like shown in the end of this video.
It's just a div that's position fixed, above everything, pointer-events none with a grid inside. I have an example of it in this cloneable. The component is called Grid Guide webflow.grsm.io/tricks?path=lumos-v2-beta
The custom buttons in component properties are 🔥
Thanks so much! I’m glad they’re helpful
How do you get the Chrome extensions to show them up?
Thank you! I'm a beginner and this sort of remedial nomenclature is really helpful!
You are a beast. Everyone should use WF like you do.🙌🏻
Thanks Timothy ricks, For this type of great content. You are my favourite webflow mentor🖤
Thank you so much!
Thank you very much Timothy for everything you do, this button feature with the new extension is really a hit.
Game changer 🤝
Oh, awesome! Thank you. I'm really glad this helps
Webflow goat 🤩
This is so awesome but kind of went over my head, is there a few videos to go over before this one?
Thanks Tim I was wondering why sometimes the buttons weren’t always appearing. Amazing stuff, I’ve been playing around with the data attributes technique since I saw your initial video on it.
Some people have said they’ve experienced slow down when using too many components. I haven’t personally, I was just wondering if you’ve encountered this problem?
I’m so ready to switch everything to this technique! Thanks again 👍🏻
Thank you, Sam! I ran into a bug where the buttons disappeared any time we hit preview. I fixed it now, but please let me know if you ever run into that issue again.
Personally, I haven't noticed any issues with slowness from too many components. And I'm working on really large sites with long pages. I think the slowness might come from too many elements on the page in the designer. So not using an excessive amount of divs in each section might help.
Ah great that makes sense then, I wondered what I was doing wrong ha.
Thanks so much for introducing this technique, it’s a genuine game changer 👍🏻
Hi, you always impress me with the little details you add to your videos and the underlying knowledge that goes into it.
Do you have any course or structured learning programs? I think you are an incredible teacher.
Thank you so much! I don't have a complete Webflow Course currently. I've been trying to structure lessons in an order that makes sense in this playlist.
ua-cam.com/video/J9u6VwTyVts/v-deo.html
The goat!
Hi Tim, your'e very technical. Can you create a list of Webflow jargon? For example, you talk about the global eyebrow at around 56sec mark. I didn't know what an eyebrow was until now. Can you put together a list of technical jargon? Thank you for the content. Learning a whole lot from this.
Thank you! ... again.
When do you start building amazing stuff with Wized? 😁
Brilliant
Hey Timothy would you be able to cover a booking system that you could use in webflow and some type of back end for a client to view. Thanks
@Timothy I have a non related question, how do you have the grid guide on top of all the objects? thanks for your help and all your videos!!
Sure thing! I built the grid guides using divs. The main guide_wrap is position fixed on top everything and pointer events none. I have an example component of it called Grid Guides in the Lumos cloneable. This css hides it in preview and on the published site.
html:not(.wf-design-mode) .your-guide-wrap {
display: none;
}
Thanks for another one, Tim. I'm just curious. What's the benefit of doing this rather than in the designer? What are the advantages of going this route? Thanks.
Oh, good question! Here's some general benefits.
1. Work faster when building new sections from existing child components
2. Work faster when building new pages from existing sections
3. Allow clients to easily build or edit pages without breaking section structure
4. Globally update the structure of any component in the future
5. Globally add new functionality to any component (without manually adding attributes to every instance)
I plan for component setup the same way we plan for cms fields. I look at every instance of a component in the design. Then I identify the conditional elements and style variations. It's a time investment up front that pays out big in the end. If I discover a new conditional element or feature is needed later, the new component fields I create can also be used on any previous pages using that component. No work is wasted.
Hey, Can you make an updated webflow 101 course with the new UI and a little bit advanced as there a lot of things add into webflow and a lot of users have created efficient ways of creating webflow website but when I searched there is not any course present with these features including everything like cms e.t.c
omg ! can we have access to your clonable ?
This is an in-progress project, but it's built on the Lumos cloneable and many of these components are in that cloneable also.
webflow.grsm.io/tricks?path=lumos-v2-beta
@@timothyricks Thank you for all your incredible work! I am a happy patreon subscriber! Love all these components! I am utilizing Lumos v2 cloneable, but most of these are not in there it seems.
hello timothy, my webflow account is still basic plan, I have question for u, how do I edit the css code from your copy variable, w/ out upgrade to the cms plan?. is there another solution?
Let's say i want to use these components in a CMS collection page. What would be the best approach here? I'm guessing your chrome extension doesn't work in Editor mode or in CMS collections?
The extension still works inside collection pages or items. Component fields can be linked to collection fields. The editor doesn’t give us access to component fields currently.
In custom element, Suppose we are using h2 as custom element, and we are setting style: max-width : 15ch; , but then i want to set max-width : 10ch; on mobile, but custom element can't be styled differently on different screen! Any solution for that? Same goes for padding properties
Oh, good question! The ch unit should automatically scale with the font size on each breakpoint. But we can update the value of any variable across breakpoints like this.
/* tablet */
@media screen and (max-width: 991px) {
:root { --custom-size: 3rem; }
}
/* landscape */
@media screen and (max-width: 767px) {
:root { --custom-size: 2rem; }
}
/* portrait */
@media screen and (max-width: 479px) {
:root { --custom-size: 1rem; }
}
That variable can be used inside inline styles like padding-top: var(--custom-size); or even better, it can be applied with data attributes like shown in the end of this video.
Question: How I can make that grid on your bg.? Thanks
It's just a div that's position fixed, above everything, pointer-events none with a grid inside. I have an example of it in this cloneable. The component is called Grid Guide
webflow.grsm.io/tricks?path=lumos-v2-beta
@@timothyricks Thank you so much🙂
You’re such a God. I can’t even keep up 🥲