I forgot to mention that all of these component fields can be linked to collection fields inside an item or CMS page. Plain text CMS fields work great for video url or text max width. Option dropdown CMS fields work great for choosing between a few options like min-height: 100vh vs min-height: auto, light vs dark, small vs medium section padding.
But cannot be linked to ecommerce fields. I just made lots of components for ecommerce site and then tryed to connect. And it turned out that webflow ecommerce does not support components. It's so stupid
thank you so much for this update! ...I tried to link a blog-post-component inside a blog-post CMS list to the blog-post template site. Since components can not be linked to CMS template pages, i guess custom attributes could be a solution. Any idea for that? Thanks a lot in advance!!
Thanks so much, Sam! I’m waiting for component slots to come out before finishing up my component library, but with that update, this method will be unstoppable.
Great way of organizing Components, I also experimented with this approach, but your implementation is cooler 😊 Thanks for the constant great ideas. By the way, for property grouping you can use "/" in the property name to create a group (Section Style / Min Height)
Amazing work, I like how you’ve really modulated everything for performance and grouping props is a nice house keeping detail. For the text wrapping, I wonder if text-wrap: balance could be used to prevent orphan text in the titles vs the ch adjustment? But your workaround helps deal with it in a simple method.
Thank you so much! Since text-wrap doesn’t have great browser support right now and doesn’t work in Safari, I’ve been using the CH method at least for section headings and important text. Hopefully that changes soon though!
Hi Conner, it's all through custom css. Here's one example of creating a data attribute that makes a slider button tall instead of wide. Whenever the data-button-tall attribute is set to "true", it changes the width and height of the element that the attribute is applied to. It also rotates its child that has a class of "icon". [data-button-tall="true"] { width: 2rem; height: 6rem; } [data-button-tall="true"] .icon { transform: rotate(180deg); } There's many different ways this can be used, but it's especially helpful for color. th-cam.com/video/SfhjbsqEQA0/w-d-xo.html
Thank you! Yes with the native background video element, our clients were often exceeding their bandwidth limit and getting charged for enterprise. We host videos with a paid Vimeo account now, but you can also host for free through jsDelivr if the video is under a certain file size. I host large JavaScript files there too.
I have recreated the video element using the custom element exactly like you did. But for some reason the video I've placed in the src attribute isn't showing at all. If I inspect my site, I can see there is a video element, but it's just not appearing. Any idea what might be causing this? Thanks!
Great video as always Timothy, thanks. Does somebody have this weird issue with the custom element in webflow as mine? It happens very often when I put a value (a span for example) and is not stored, I have to insert it 3-4 times 😢
Thanks so much! Are you hitting enter before clicking off? I’ve had that issue with data attributes before, and usually it requires refreshing the page to fix it.
In Lumos v2 properties panel, you have somehow created "option buttons" for the button style field. (ex. "Primary" | "Secondary" buttons that auto-fill the field with that option) How is this done?
Hi, the Lumos Chrome Extension adds these buttons based on the attributes in our embeds. Extension: chromewebstore.google.com/detail/lumos-extension-for-webfl/hclnndibcedglllpoaajibpnoacaolpj?hl=en Tutorial: th-cam.com/users/shorts6FGtGLR3pJE
It’s just a position fixed div covering the screen, z-index: 1000, pointer-events: none, with a grid inside. I have a cloneable of it here. The component is called Grid Guides webflow.grsm.io/tricks?path=lumos-v2-beta
We could use almost any letter there. The letter represents a tag instead of .c (class) or #c (id). Anything inside :is() gets the same strength (specificity) as the strongest selector in the list. For all Lumos Utilities, we want them to be as strong as a tag so they can override any default styles set on div, h1, section, or any other tag, but we don’t want them to be as strong as a class so that we can still override them with our base class in the Webflow style panel.
If I make a video container ( normal div 600px x 600px), with a custom element vide-tag inside. I cant get that video to cover the wrapper. Is it Lumos magic?
Hi there! The video element needs to be set to fit cover, width 100%, height 100%, and 0 padding on all sides. Webflow adds some default padding to elements that have no children until we hit preview or publish.
Or to avoid having to add all those styles each time we create a new video, we could set defaults like this on the video tag which is what Lumos does. video.wf-empty { padding: 0; } video { width: 100%; object-fit: cover; }
I created my own guides with a grid set to position fixed and pointer events none that’s overlaying the whole page. I made a quick tutorial on it here. instagram.com/reel/C2z_b3tgLYw/?igsh=ZWI2YzEzYmMxYg==
Did not know that setting it as "hidden" not only hid the element, but removed it from the code, brilliant! (Conditional logic with CMS still simply adds a display: none, right?)
Quick question: I have recreated this video element using the custom element as you showed in the video. But for some reason when viewing the website on my iPhone the video is not visible. Its like nothing is there. Pressning down wont even highlight the are as it usually does with text or images. Ive tried to use both aws & webflow hosted videos but both wont display. I also tried putting another custom element with the tag of source inside the video element. But still nothing. Would you know what the problem might be? At the moment the element is created exactly as you showed with the same attributes etc! Thanks
@@timothyricks Hi, thanks for your reply! I have tried in both low power mode and without. When not in low power mode nothing is visible. Or like the space where the video should be is there, probably because of the container. But no video! When in low power mode it is the same but a play/pause button is visible. However pressing it does nothing except removing the play button, as if its playing, but still no video. Pressing the empty space again brings back the play button. I also duplicated your Lumos template and did nothing except added 1 component and the url to the video, but the issue is the same:(
Man I wish children component props had an option to have them controllable when nested inside of a different component. That way we wouldn't have to link everything to a parent component prop
Hi, I’m using custom code for color mode switching currently until Webflow hopefully releases this natively like what Figma has. I have a tutorial on how to set it up here. th-cam.com/video/SfhjbsqEQA0/w-d-xo.htmlsi=xRvqhRqcnUwsPRRF
I forgot to mention that all of these component fields can be linked to collection fields inside an item or CMS page. Plain text CMS fields work great for video url or text max width. Option dropdown CMS fields work great for choosing between a few options like min-height: 100vh vs min-height: auto, light vs dark, small vs medium section padding.
But cannot be linked to ecommerce fields. I just made lots of components for ecommerce site and then tryed to connect. And it turned out that webflow ecommerce does not support components. It's so stupid
thank you so much for this update! ...I tried to link a blog-post-component inside a blog-post CMS list to the blog-post template site. Since components can not be linked to CMS template pages, i guess custom attributes could be a solution. Any idea for that?
Thanks a lot in advance!!
The concept of using attributes to override styling within component props is absolutely game changing. Amazing stuff Tim!
Thanks so much, Sam! I’m waiting for component slots to come out before finishing up my component library, but with that update, this method will be unstoppable.
Amazing work as usual Tim 🎉. Can’t wait to start exploring and experimenting with this approach. 😊
I've been playing with this all day and it's extremely powerfull.
God bless you!
Love this approach Tim! This will be helpful to marketing team.
Super comprehensive! Thank you!
This video is wild. Changing custom element attributes via component props is 🔥
Thank you! I’m so glad this helps!
Love it! ❤️🔥✨
It took a while to learn this but I think I’m loving it. Kudos to everyone at Lumos.
Thanks so much! Really glad to hear this
Cool!! Tnx Timothy.
i was just looking to find components updated explanations, and instead i find this goldmine making me realize how even less i know than i thought 😂
Haha, so glad to hear this is helpful!
Great way of organizing Components, I also experimented with this approach, but your implementation is cooler 😊 Thanks for the constant great ideas. By the way, for property grouping you can use "/" in the property name to create a group (Section Style / Min Height)
Oh, awesome! Thank you for the tip!!
It is perfect, thank You:)
Amazing work, I like how you’ve really modulated everything for performance and grouping props is a nice house keeping detail.
For the text wrapping, I wonder if text-wrap: balance could be used to prevent orphan text in the titles vs the ch adjustment? But your workaround helps deal with it in a simple method.
Thank you so much! Since text-wrap doesn’t have great browser support right now and doesn’t work in Safari, I’ve been using the CH method at least for section headings and important text. Hopefully that changes soon though!
Your production technique is amazing. How many years will it take to become a professional like you? I'm jealous.いいなぁ〜。
Do you have anything explaining how you used attributes to override styling? Would love to learn more about this!
Hi Conner, it's all through custom css. Here's one example of creating a data attribute that makes a slider button tall instead of wide. Whenever the data-button-tall attribute is set to "true", it changes the width and height of the element that the attribute is applied to. It also rotates its child that has a class of "icon".
[data-button-tall="true"] {
width: 2rem;
height: 6rem;
}
[data-button-tall="true"] .icon {
transform: rotate(180deg);
}
There's many different ways this can be used, but it's especially helpful for color.
th-cam.com/video/SfhjbsqEQA0/w-d-xo.html
Can you share a list of custom attributes which we can use?
Cant get the video to play or be seen, for love or money. Tried every link nothing. It only works with the Webflow Video element.
Thanks for a great video again! Bit off topic but do you often use externally hosted assets in your projects (like the video in this one)?
Thank you! Yes with the native background video element, our clients were often exceeding their bandwidth limit and getting charged for enterprise. We host videos with a paid Vimeo account now, but you can also host for free through jsDelivr if the video is under a certain file size. I host large JavaScript files there too.
I have recreated the video element using the custom element exactly like you did. But for some reason the video I've placed in the src attribute isn't showing at all. If I inspect my site, I can see there is a video element, but it's just not appearing. Any idea what might be causing this?
Thanks!
Hi, are you using a direct link to the video file? This wouldn't work with a regular TH-cam or Vimeo link.
Great video as always Timothy, thanks. Does somebody have this weird issue with the custom element in webflow as mine? It happens very often when I put a value (a span for example) and is not stored, I have to insert it 3-4 times 😢
Thanks so much! Are you hitting enter before clicking off? I’ve had that issue with data attributes before, and usually it requires refreshing the page to fix it.
Solved 🙏@@timothyricks
In Lumos v2 properties panel, you have somehow created "option buttons" for the button style field. (ex. "Primary" | "Secondary" buttons that auto-fill the field with that option) How is this done?
Hi, the Lumos Chrome Extension adds these buttons based on the attributes in our embeds.
Extension:
chromewebstore.google.com/detail/lumos-extension-for-webfl/hclnndibcedglllpoaajibpnoacaolpj?hl=en
Tutorial:
th-cam.com/users/shorts6FGtGLR3pJE
How to create that light blue grid columns similar to Figma's in Webflow?
It’s just a position fixed div covering the screen, z-index: 1000, pointer-events: none, with a grid inside. I have a cloneable of it here. The component is called Grid Guides
webflow.grsm.io/tricks?path=lumos-v2-beta
In lumos css, i see this - :is(c, :where([class*="gd1"])). What is letter 'c' here?
We could use almost any letter there. The letter represents a tag instead of .c (class) or #c (id). Anything inside :is() gets the same strength (specificity) as the strongest selector in the list. For all Lumos Utilities, we want them to be as strong as a tag so they can override any default styles set on div, h1, section, or any other tag, but we don’t want them to be as strong as a class so that we can still override them with our base class in the Webflow style panel.
If I make a video container ( normal div 600px x 600px), with a custom element vide-tag inside. I cant get that video to cover the wrapper. Is it Lumos magic?
Hi there! The video element needs to be set to fit cover, width 100%, height 100%, and 0 padding on all sides. Webflow adds some default padding to elements that have no children until we hit preview or publish.
Or to avoid having to add all those styles each time we create a new video, we could set defaults like this on the video tag which is what Lumos does.
video.wf-empty {
padding: 0;
}
video {
width: 100%;
object-fit: cover;
}
how are you able to view those grids/guides in webflow?
I created my own guides with a grid set to position fixed and pointer events none that’s overlaying the whole page. I made a quick tutorial on it here. instagram.com/reel/C2z_b3tgLYw/?igsh=ZWI2YzEzYmMxYg==
Thanks a lot! You're a legend.@@timothyricks
I was going crazy on Webflows help and forums thinking it was a WF feature.
Did not know that setting it as "hidden" not only hid the element, but removed it from the code, brilliant! (Conditional logic with CMS still simply adds a display: none, right?)
Oh, awesome! I’m glad that helps! Sadly, CMS conditional visibility still uses display none, but we can connect “hidden” to a CMS toggle field
Thanks for sharing your knowledge @timothyricks! You are the best!
Quick question: I have recreated this video element using the custom element as you showed in the video. But for some reason when viewing the website on my iPhone the video is not visible. Its like nothing is there. Pressning down wont even highlight the are as it usually does with text or images.
Ive tried to use both aws & webflow hosted videos but both wont display.
I also tried putting another custom element with the tag of source inside the video element. But still nothing.
Would you know what the problem might be? At the moment the element is created exactly as you showed with the same attributes etc!
Thanks
Hi, is your iPhone in low power mode? If so, it disables any html videos even those created with the native background video or in an embed
@@timothyricks Hi, thanks for your reply! I have tried in both low power mode and without.
When not in low power mode nothing is visible. Or like the space where the video should be is there, probably because of the container. But no video!
When in low power mode it is the same but a play/pause button is visible. However pressing it does nothing except removing the play button, as if its playing, but still no video. Pressing the empty space again brings back the play button.
I also duplicated your Lumos template and did nothing except added 1 component and the url to the video, but the issue is the same:(
Okay so I found the issue, it was because it was a webm video file!
But as far as I know iOS should support vp9 webm videos?
@@dennishallmen5428 I think iOS 15 and above supports WebM
@@timothyricks I see! I will do some more research around the subject.
Thanks again for your response and willingness to help!
Why when I write "style" in custom attributes, they say "This is a reserved name". But works on your work?)
It only works on the custom element
does somebody know why webflow is complaining about "This is a reserved name" message when I try to insert style as custom attribute?
We have to use a custom element to avoid that message. A lot of attributes that are locked down for other elements work for the custom one
Always my savior@@timothyricks
Man I wish children component props had an option to have them controllable when nested inside of a different component. That way we wouldn't have to link everything to a parent component prop
That would be amazing! When component slots comes out, it will solve a lot of this but not all of it
At 09:45 you defined a button style with custom attributes, how?! :O
Hi, I’m using custom code for color mode switching currently until Webflow hopefully releases this natively like what Figma has. I have a tutorial on how to set it up here.
th-cam.com/video/SfhjbsqEQA0/w-d-xo.htmlsi=xRvqhRqcnUwsPRRF
@@timothyricks I found a different tutorial that explained it, very useful!👍
Gold