Symbols — globally synced components
Symbols solve the problem every multi-page site eventually runs into: you have a navigation bar on ten pages, you update one link, and now you have to make the same change nine more times. With Symbols, you make the change once and it propagates everywhere automatically.
What makes Symbols different
A regular saved component is a copy — insert it and each instance is independent. A Symbol is a live reference — all instances point to the same definition. When you edit the Symbol, every instance on every page in the project updates to match.
Use cases for Symbols
Symbols are best for elements that appear identically on multiple pages and change together:
- Navigation bar — Links, logo, and layout should be consistent across every page.
- Footer — Copyright year, social links, address.
- Cookie consent banner — Same text, same styling, appears on every page.
- Promotional banners — A site-wide sale banner that you want to turn on or off without touching every page.
Creating a Symbol
- Design the element on the canvas (or select an existing one you want to convert).
- Select the outermost wrapper of the section.
- Right-click and choose Convert to Symbol.
- Give the Symbol a clear name (for example: “Site Navigation” or “Global Footer”).
- Click Save.
The element on the canvas now displays a Symbol badge — a small icon overlay that indicates this element is a Symbol instance.
The Symbol badge
Any Symbol instance on the canvas displays a badge in the top corner of the element. This is a reminder that editing this element will affect all other instances. The badge is not visible in the exported HTML.
Editing a Symbol
- Double-click the Symbol instance on the canvas to enter Symbol editing mode.
- A blue border indicates you are editing the Symbol definition, not just an instance.
- Make your changes — add, remove, or restyle any element inside.
- Click Done or press Escape to exit Symbol editing mode.
When you exit editing mode, Site Designer applies the changes to every instance of that Symbol across every page in the project.
Detaching an instance from a Symbol
To make one instance independent — so you can customize it without affecting the rest:
- Right-click the Symbol instance on the canvas.
- Choose Detach from Symbol.
The element becomes a regular HTML block with no link to the Symbol. It keeps its current appearance but will no longer update when the Symbol is edited.
Deleting a Symbol
Deleting a Symbol definition removes it from the library. All instances on pages are converted to regular independent HTML — they keep their current appearance but are no longer linked. Right-click the Symbol in the Components panel → Delete Symbol.
