🔲Slot
Slots are containers for anything that you want to re-use across your site, like a nav menu.
With Webstudio slots a section needs to be created once, and then you can replicate it anywhere on your site. Changes you make to one instance of a slot will be reflected across all other instances of that slot. This redefines the boundaries of scalability and makes it easier to maintain visual coherence across complex projects.
Without slots, on the other hand, you would have to create multiple instances of the same components, like navbars and footers. This would result in a time-consuming and inefficient workflow since changing one instance would require manual changes to all other instances.
How to use Slot Component
Here is the process for creating and reusing slot instances:
Creating a slot instance
You can find the Slots component in the “Components Panel.”
Drag “Slot” from the Components Panel onto your canvas to create a slot instance. Alternatively, you can add it to the currently selected instance with a click.
Add other instances from the Components Panel into the slot instance to populate it.
Reusing a slot instance
Once you have a slot on the canvas you can re-use it by simply copying and pasting it anywhere in your project.
Select your slot instance and press Ctrl + C (for Windows) or CMD + C (for Mac).
Now, select the position where you want to insert the slot instance and press Ctrl + V (for Windows) or CMD + V (for Mac)
And that’s it! Now updates that you make to any slot will update all other instances of that slot.
If you need a new unique slot instance, simply add a new slot from the Add panel and it will not interfere with your existing slots.
Conclusion
With slots you can re-use content across your site and sync the changes you make to them.
Last updated
