ฝัง
- เผยแพร่เมื่อ 16 ก.ย. 2024
- Hey everyone! I was always looking for ways to add elements inside Webflow Tabs, on the top of the pre-defined elements that come with the tabs. Unfortunately, Webflow does not allow you to add elements inside `Tabs Menu` element. This solution (that’s using Custom Attributes only) fix two Webflow limitations with tabs:
1. It allows to add Link Blocks/Buttons inside `Tab Link` elements, bypassing the ‘Link can not be placed in a Tab Link’.
2. Add any element you want inside the `Tabs Menu`, bypassing ‘Non-Tab-Link Item can not be placed in a Tabs Menu’
👇 Clone the project here:
webflow.com/ma...
📄 Full Documentation & Features:
thelumious.not...
![I Replaced ALL my ADOBE APPS with these [free or cheaper] Alternatives!](http://i.ytimg.com/vi/5EfqHg49kMk/mqdefault.jpg)
I just found your channel. Pure gold!
Shame on webflow for not being able to do this natively, these tabs are amazing to use as a complex, in-depth explanation of products, I love this pattern and hate that I have to code it by manualy every time and it's not visible in the designer :D
yeah man, you're right. Especially if you want to visually explain a set of features that belong to a solution. Grad it helped you out. Tried using wf custom element but looks like there's more than jsut adding the wf tab classes.
@lumiousmedia I actually had very similar solutions, for marqee (mine was CSS + JS for cloning track/CMS - due to limit for CMS per page) and for tabs (almost the same) and the same with GSAP reusable animations. I "hate" webflow native IX, interaction management is kind of a nightmare at scale - once you start understanding GSAP) so i removed them all and start build on GSAP.
But I'm a designer and then a webflow dev, so my scripts aren't that well organized :D I'm switching to yours! 🖤
@@arkadiuszpalki Yep, I'm also with GSAP. Clients don't touch the interactions, and we as devs must work with whatever it's easier and scaleable. Also found IX a nightmare. Especially when you have 5 different link blocks that have the same interaction. You then need to thing about using global classes to trigger animations, and when it comes to scale - it's hard. But I think WF will launch their own IX engine relying on gsap, just like Framer did. I wanted to build out a Webflow App which is a gsap replacement interface for webflow IX. Still thinking if this is a good app to have :D
you're the goat man! loving your tuts
Thanks buddy. I appreciate it
amazing stuff, just wanted to ask why my heading is going below the tab links instead of going to the top on the live site?
Great question. I've made a quick video: www.loom.com/share/e4789e0a69e94fc7915c01785106ba80
The stuff you put inside your Tabs Menu needs to have an order. On my cloneable, the Tabs Menu is set to display grid. You can use the 'Order' or just add a new custom CSS property (order:1). Let me know if this make sense.
@@lumiousmedia totally got it, thanks 🙏🏼