Webstudio
Log in

Join the Webstudio community

Updated 6 months ago

Colors in Navigator

At a glance
The community member is using the "Portfolio" craft-template and notices that some items in the navigator are black with a style panel, while others are violet and don't have a style panel. They wonder if the violet color means "some information is missing" and if it's possible to change the item from external data to local to get the styling panel back. A community member responds that the violet color indicates the item is a "Slot" component, which can be copied and pasted between pages and synchronized. The community member is directed to the Webstudio documentation on Slots for more information.
Useful resources
NNiels
I#m still on "Hobby" .
Using the "Portfolio" craft-template, I find items with differnt colors in the navigator. Most of them are black an have a style panel. Some of them are violet and don't have a style panel. I think, this is because the violet items of the template refer to external data / data variables. Does the violet color mean: "here is some information missing?". Is there a possibility to change the item from external data to local to get back the styling-panel for the objects? Ordoes the violet color mean something completely different?
BBogdan
Marked as solution
https://docs.webstudio.is/university/core-components/slot
View full solution
B
N
4 comments
BBogdan
Violet means something is reused. In case of navigator it is "Slot" component which can be copy pasted between pages and all instances will be synchonised whenever you edit slot content
NNiels
Hi Bogdan, thank You for your Help! i will have to find out something about slots. Just googled for "webstudio slot component" and got a first grab on the concept os slots. Is there more detailed info or a tutorial on the topic?
BBogdan
https://docs.webstudio.is/university/core-components/slot
NNiels
Thank You Bogdan, that has helped! How can I mark this post as solved?
Add a reply
Sign up and join the conversation on Discord