Should or should not use Tabs component?

Design help Layout & Design
1

Hi!!

I want to create a dynamic “one-page” website that works like this very cool website: https://jessicafecteau.com/

I tried Tabs components but it might not be the best choice. . .
Problems:

  • Limitations in adding elements in-between Tabs children (Adding elements other than Tabs’ in Tabs parents is not allowed). For example, I want to add text boxes to group tabs into categories.
  • I had difficulty in making each of 2 columns scrollable by it owns (when I scroll one side, the other should stay still)
  • Not really an issue but with Tabs, when we click on different tabs, we’re still on the same page instead of going to another one. That’s fine but I just wonder how to make it go to the individual project pages.

I really look forward to your advice on how to work this out :slight_smile: Thanks!!

2

Hey! Jessica’s website is not “one page”, but the transitions when clicking between the pages are set up so that it feels like this is the case.

You could use something like barba.js to get this effect. There are some tutorials out there for how to set this up with Webflow. Here’s an example: Transitions with Barba.js: Create badass transitions between your website's pages part 1 - YouTube

With this approach, you won’t be restricted to the Webflow tabs component (and its limitations). And you’ll likely even get some SEO benefits because you’ll have more than one page indexed.

1 Like
3

Thanks Carly for the suggestion!! I think that’s what I want. I’ll try to work on this.

And yes that’s why I put in " " because it looks like everything’s on one page. I didn’t know how to phrase it better :smiley:

1 Like
4

Awesome! Good luck. I’ve been wanting to try this myself, but haven’t gotten around to it yet.

1 Like