We often run into situations where we need to use the same element across our site. It's very time-consuming (and error-prone) to edit all instances of this element every time you need to update your site.
Symbols allow you to turn elements and their child elements into a reusable component. You can update a single Symbol and all instances of that same Symbol will be updated accordingly.
Symbols can be used in 2 main ways:
Identical content per instance. Create identical copies of recurring layouts that have the exact same content, like headers, footers, contact forms, and sign-up forms.
Unique content per instance. Create unique copies that reuse the same Symbol layout while giving each Symbol instance.
You can create a Symbol from any element or group of elements in your project, except for the body element.
To create a Symbol:
Select the element you want to turn into a Symbol
Right-click and select Create Symbol
Give the Symbol a name and press Create Symbol
Once you've created a Symbol, any change you make to any instance of this symbol will be updated across all other instances. All changes in the main mode will update across all instances of that symbol. There are a few important points to take note:
By default, an instance can mirror all aspects of the symbol. However, you can decide to mirror only certain aspects such as child elements, styles, and interactions. You can do this by unlinking the aspect(s) you do not want to mirror.
If you mirror child elements (which is by default), any changes you make to the child element(s) are also updated across all other instances that also mirror child elements of the same Symbol.
You can also create a new Symbol by pressing the shortcut keys on your keyboard: Command + Shift + A (on Mac) or Control + Shift + A (on Windows). This will create a Symbol from whatever element you have selected
NOTE: If you’re creating a Symbol that will have the exact same content in each instance (like nav bars, footers, and some forms) you don’t need to create override fields for that Symbol.
Override fields let you define specific elements within a Symbol that can be overridden with unique content on a Symbol instance. This is great for recurring layout patterns whose structure should be uniform, but that have unique content in each instance. (Read more about Symbol overrides in our announcement blog post.)
Select the element you want to make overridable, then create an override field in the element’s settings.
To create an override field:
Double-click to enter the main edit mode for the Symbol
Select the element you want to create an override field for
Click the purple dot icon in the Settings panel to create a field for this element
Give it a name based on the function in the design
Alternate approach: create a field first then connect it to an element in the Symbol.
You can also create an override field while editing the main Symbol directly from the settings panel and connect those fields to elements within a Symbol.
You can create overrides for the following types of elements:
Text fields (e.g. paragraphs, headers)
Links (buttons, link blocks)
Rich text elements
Future support for style overrides is under development.
Once you’ve created a Symbol, you can reuse it anywhere in your project.
Open the Symbol panel
Click and drag the desired Symbol to any page in your project
Drop the Symbol instance directly on the canvas or in the Navigator for more precision
When you select an instance of a Symbol, you’ll see it highlighted and outlined in green. Click the Style panel to see how many times that Symbol appears your project.
You can also add Symbols onto the canvas using Quick find with Command + E (on Mac) or Control + E (on Windows). Learn how to use quick find.
You can nest Symbols within other Symbols to build and maintain complex layouts more easily and efficiently. Nesting Symbols inside one another means you can make a button a Symbol and have the navigation, hero section, and feature cards also be Symbols.
This allows you to independently update each Symbol in one place and see those changes impact every other instance.
To nest Symbols:
Select the Symbol you want to place another Symbol
Click to open the Symbols panel (or use the keyboard shortcut SHIFT + A)
Drag a Symbol from the panel into the selected Symbol, and release
You can also create a Symbol from a parent element that already contains a Symbol.
When you nest a Symbol with override fields within another Symbol, you’ll see a prompt to link that nested Symbol’s fields to the parent Symbol. This allows you to set overrides for the field within the nested Symbol from the parent Symbol instances.
To link a nested Symbol to a parent Symbol:
Select the element you want to link its override fields to its parent Symbol
Click Link to parent to create and link the field to a override field in parent Symbol
Give it a name based on the field linking to the parent Symbol (e.g., “card-button”)
Apply content overrides to individual Symbol instances in the settings panel.
To apply content overrides for elements in a given Symbol instance:
Click on that instance
Edit the content for each override field from the Symbol’s settings panel
Open the settings modal for that Symbol by clicking the gear icon on that Symbol instance.
To revert an override to the default content of that Symbol, click the label to reset all your overrides at once.
To edit a Symbol, double-click on an instance or select it and press enter. Once you enter edit mode, you are making changes to the main Symbol.
Double-click to edit the main Symbol. In the main Symbol view, you’ll see the default values for your override fields.
Edits to the main Symbol will affect every Symbol instance (unless that Symbol instance has a content override applied to a specific element).
You can change the structure and element order of all Symbol instances at once from the main Symbol.
Edits to the main Symbol affect each instance, unless specifically overridden in a Symbol instance.
Connect elements to existing overridden fields and each instance will remember and apply previously set overrides.
If you delete an element from the main Symbol, each corresponding element in other instances will also be deleted (even if they’ve been overridden with unique content). You can add new elements to the main Symbol and reconnect them to existing override fields, and each instance will remember and apply the overrides previously set.
Once you’re done editing a Symbol:
Click Back to instance in the top left corner
Click outside the Symbol on the canvas
Or hit Escape on your keyboard
Once you're out of the main Symbol, you’ll be editing that specific Symbol instance.
If you’ve invited Collaborators to update your site’s content in the Editor, any changes they make to Symbol elements that are consistent across all instances will apply to all other instances. If they edit an element within a Symbol that is tied to an override field, edits to that Symbol instance’s element will only apply to that Symbol instance.
To rename a Symbol:
Open the Symbol panel
Click the pencil icon next to the Symbol
To rename a Symbol using Quickfind:
Hover over a Symbol instance in the search result
Click the edit icon
To delete a Symbol completely:
Remove all instances of the Symbol from the project
Open the Symbols panel
Click the pencil icon
To unlink a Symbol and make changes to it independently:
Right-click the Symbol label
Choose unlink from Symbol
Or (if the element is hard to select) right-click the element in the Navigator
Once unlinked, editing a linked instance of that Symbol will not change the unlinked instance.
Good to know: If the Editing Main Symbol overlaps the content you're trying to edit, double-clicking the bar will move it to the top of the Designer.