Join the Webstudio community

Updated 5 months ago

Reusable components like Webflow

At a glance

The community members are discussing how to create reusable headers and footers in Webstudio. One community member suggests using slots, which allow you to define a header or footer component and copy it to multiple pages. Any changes to the original slot component will automatically update all instances. Another community member mentions using Webstudio variables to make the slot content dynamic based on page context. The community is also looking forward to a more complete component system with overrides, which is currently in development.

Useful resources
I've searched for half an hour with no luck. There must be a way to create a reusable header/footer that can be maintained in one place and dropped on all pages. How is this done in Webstudio? Is there a tutorial somewhere?
2
p
v
J
13 comments
Slots do what you're looking for
Put header in slot component, copy slot, paste wherever. Any modification to one instance of the slot automatically changes in all instances
Thanks! That looks like it.
sure! You can use Webstudio variables (like something pulled from a CMS) to make items in slots dependent on some variable (for example, logic that says if the page slug is foo, don't show X element)
but otherwise, they all remain identical. I'm following this issue for a more complete component that will allow custom components with overrides https://github.com/webstudio-is/webstudio/issues/2529
what did you search for so i can optimize for it
Not yet, this will be unlocked with component editor
Gotcha, my mistake. Really looking forward to that!
@John Siciliano Reusable components/headers/footers/etc.
thanks, i updated docs to include better terms so when googling, it should show up
you can still do this by creating a "components" page, define all your components there, and then simply copy paste them across your project or projects.
same goes for sections that implement components
Add a reply
Sign up and join the conversation on Discord